Merge pull request #1932 from MyCryptoHQ/develop

Additional 1.1.0 Release Items

README.md

@@ -5,9 +5,19 @@
 * **Just looking to download?** Grab our [latest release](https://github.com/MyCryptoHQ/MyCrypto/releases).
 * **Looking for the old site?** Check out [https://legacy.mycrypto.com](https://legacy.mycrypto.com) or the source at [MyCryptoHQ/mycrypto.com](https://github.com/MyCryptoHQ/mycrypto.com)
 
+## Requirements
+
+* Node 8.9.4*
+* NPM >= 5
+* Python 2.7.X**
+
+<sub>*Higher versions should work fun, but may cause inconsistencies. It's suggested you run 8.9.4 using `nvm`.</sub>
+<br/>
+<sub>**Python 3 is **not** supported, since our dependencies use `node-gyp`.</sub>
+
 ## Running the App
 
-This codebase targets Node 8.9.4 (LTS). After `npm install`ing all dependencies (You may be required to install additional system dependencies, due to some node modules relying on them) you can run various commands depending on what you want to do:
+After `npm install`ing all dependencies you can run various commands depending on what you want to do:
 
 #### Development
 

common/Root.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Provider, connect } from 'react-redux';
-import { withRouter, Switch, Redirect, HashRouter, Route, BrowserRouter } from 'react-router-dom';
+import { withRouter, Switch, HashRouter, Route, BrowserRouter } from 'react-router-dom';
 // Components
 import Contracts from 'containers/Tabs/Contracts';
 import ENS from 'containers/Tabs/ENS';
@@ -19,7 +19,6 @@ import OnboardModal from 'containers/OnboardModal';
 import WelcomeModal from 'components/WelcomeModal';
 import NewAppReleaseModal from 'components/NewAppReleaseModal';
 import { Store } from 'redux';
-import { pollOfflineStatus, TPollOfflineStatus } from 'actions/config';
 import { AppState } from 'reducers';
 import { RouteNotFound } from 'components/RouteNotFound';
 import { RedirectWithQuery } from 'components/RedirectWithQuery';
@@ -36,7 +35,6 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  pollOfflineStatus: TPollOfflineStatus;
   setUnitMeta: TSetUnitMeta;
 }
 
@@ -52,7 +50,6 @@ class RootClass extends Component<Props, State> {
   };
 
   public componentDidMount() {
-    this.props.pollOfflineStatus();
     this.props.setUnitMeta(this.props.networkUnit);
     this.addBodyClasses();
   }
@@ -80,7 +77,6 @@ class RootClass extends Component<Props, State> {
     const routes = (
       <CaptureRouteNotFound>
         <Switch>
-          <Redirect exact={true} from="/" to="/account" />
           <Route path="/account" component={SendTransaction} />
           <Route path="/generate" component={GenerateWallet} />
           <Route path="/swap" component={Swap} />
@@ -90,6 +86,7 @@ class RootClass extends Component<Props, State> {
           <Route path="/tx-status" component={CheckTransaction} exact={true} />
           <Route path="/pushTx" component={BroadcastTx} />
           <Route path="/support-us" component={SupportPage} exact={true} />
+          <RedirectWithQuery exactArg={true} from="/" to="/account" />
           <RouteNotFound />
         </Switch>
       </CaptureRouteNotFound>
@@ -190,6 +187,5 @@ const mapStateToProps = (state: AppState) => {
 };
 
 export default connect(mapStateToProps, {
-  pollOfflineStatus,
   setUnitMeta
 })(RootClass);

common/actions/config/actionCreators.ts

@@ -28,13 +28,6 @@ export function changeLanguage(sign: string): interfaces.ChangeLanguageAction {
   };
 }
 
-export type TPollOfflineStatus = typeof pollOfflineStatus;
-export function pollOfflineStatus(): interfaces.PollOfflineStatus {
-  return {
-    type: TypeKeys.CONFIG_POLL_OFFLINE_STATUS
-  };
-}
-
 export type TChangeNodeRequested = typeof changeNodeRequested;
 export function changeNodeRequested(payload: string): interfaces.ChangeNodeRequestedAction {
   return {

common/actions/config/actionTypes.ts

@@ -20,11 +20,6 @@ export interface ChangeLanguageAction {
   payload: string;
 }
 
-/*** Poll offline status ***/
-export interface PollOfflineStatus {
-  type: TypeKeys.CONFIG_POLL_OFFLINE_STATUS;
-}
-
 /*** Change Node Requested ***/
 export interface ChangeNodeRequestedAction {
   type: TypeKeys.CONFIG_CHANGE_NODE_REQUESTED;
@@ -120,7 +115,6 @@ export type MetaAction =
   | SetOnlineAction
   | SetOfflineAction
   | ToggleAutoGasLimitAction
-  | PollOfflineStatus
   | SetLatestBlockAction;
 
 /*** Union Type ***/

common/actions/config/constants.ts

@@ -6,7 +6,7 @@ export enum TypeKeys {
 
   CONFIG_TOGGLE_OFFLINE = 'CONFIG_TOGGLE_OFFLINE',
   CONFIG_TOGGLE_AUTO_GAS_LIMIT = 'CONFIG_TOGGLE_AUTO_GAS_LIMIT',
-  CONFIG_POLL_OFFLINE_STATUS = 'CONFIG_POLL_OFFLINE_STATUS',
+
   CONFIG_SET_LATEST_BLOCK = 'CONFIG_SET_LATEST_BLOCK',
 
   CONFIG_NODE_WEB3_SET = 'CONFIG_NODE_WEB3_SET',

common/components/NonceField.tsx

@@ -50,6 +50,7 @@ class NonceField extends React.Component<Props> {
                   readOnly={readOnly}
                   onChange={onChange}
                   disabled={noncePending}
+                  showInvalidWithoutValue={true}
                 />
                 {noncePending ? (
                   <div className="Nonce-spinner">

common/components/PaperWallet/index.tsx

@@ -1,5 +1,6 @@
 import { Identicon, QRCode } from 'components/ui';
 import React from 'react';
+import { addHexPrefix, toChecksumAddress } from 'ethereumjs-util';
 
 import ethLogo from 'assets/images/logo-ethereum-1.png';
 import notesBg from 'assets/images/notes-bg.png';
@@ -96,7 +97,8 @@ interface Props {
 
 export default class PaperWallet extends React.Component<Props, {}> {
   public render() {
-    const { privateKey, address } = this.props;
+    const { privateKey } = this.props;
+    const address = toChecksumAddress(addHexPrefix(this.props.address));
 
     return (
       <div style={styles.container}>

common/components/TXMetaDataPanel/TXMetaDataPanel.tsx

@@ -68,9 +68,14 @@ class TXMetaDataPanel extends React.Component<Props, State> {
     sliderState: (this.props as DefaultProps).initialState
   };
 
-  public componentDidMount() {
+  public componentWillMount() {
     if (!this.props.offline) {
       this.props.resetTransactionRequested();
+    }
+  }
+
+  public componentDidMount() {
+    if (!this.props.offline) {
       this.props.fetchCCRates([this.props.network.unit]);
       this.props.getNonceRequested();
     }

common/components/WalletDecrypt/components/LedgerNano.tsx

@@ -125,6 +125,9 @@ class LedgerNanoSDecryptClass extends PureComponent<Props, State> {
 
   private handlePathChange = (dPath: DPath) => {
     this.handleConnect(dPath);
+    this.setState({
+      dPath
+    });
   };
 
   private handleConnect = (dPath: DPath) => {

common/components/ui/Identicon.tsx

@@ -11,7 +11,6 @@ interface Props {
 export default function Identicon(props: Props) {
   const size = props.size || '4rem';
   const { address, className = '' } = props;
-  // FIXME breaks on failed checksums
   const identiconDataUrl = isValidETHAddress(address) ? makeBlockie(address) : '';
   return (
     // Use inline styles for printable wallets

common/components/ui/Input.scss

@@ -81,11 +81,11 @@
       color: $input-color-placeholder;
     }
     &:not([disabled]):not([readonly]) {
-      &.invalid.has-blurred.has-value {
+      &.invalid {
         border-color: $brand-danger;
         box-shadow: inset 0px 0px 0px 1px $brand-danger;
       }
-      &.valid.has-value {
+      &.valid {
         border-color: #8dd17b;
         box-shadow: inset 0px 0px 0px 1px #8dd17b;
       }

common/components/ui/Input.tsx

@@ -3,7 +3,10 @@ import classnames from 'classnames';
 import './Input.scss';
 
 interface OwnProps extends HTMLProps<HTMLInputElement> {
+  isValid?: boolean;
   showInvalidBeforeBlur?: boolean;
+  showInvalidWithoutValue?: boolean;
+  showValidAsPlain?: boolean;
   setInnerRef?(ref: HTMLInputElement | null): void;
 }
 
@@ -16,12 +19,9 @@ interface State {
   isStateless: boolean;
 }
 
-interface OwnProps extends HTMLProps<HTMLInputElement> {
-  isValid: boolean;
-  showValidAsPlain?: boolean;
-}
+type Props = OwnProps & HTMLProps<HTMLInputElement>;
 
-class Input extends React.Component<OwnProps, State> {
+class Input extends React.Component<Props, State> {
   public state: State = {
     hasBlurred: false,
     isStateless: true
@@ -31,18 +31,29 @@ class Input extends React.Component<OwnProps, State> {
     const {
       setInnerRef,
       showInvalidBeforeBlur,
+      showInvalidWithoutValue,
       showValidAsPlain,
       isValid,
       ...htmlProps
     } = this.props;
+    const { hasBlurred, isStateless } = this.state;
     const hasValue = !!this.props.value && this.props.value.toString().length > 0;
-    const classname = classnames(
-      this.props.className,
-      'input-group-input',
-      this.state.isStateless ? '' : isValid ? (showValidAsPlain ? '' : '') : `invalid`,
-      (showInvalidBeforeBlur || this.state.hasBlurred) && 'has-blurred',
-      hasValue && 'has-value'
-    );
+
+    // Currently we don't ever highlight valid, so go empty string instead
+    let validClass = isValid ? '' : 'invalid';
+    if (isStateless) {
+      validClass = '';
+    }
+    if (!hasValue && !showInvalidWithoutValue) {
+      validClass = '';
+    } else if (!hasBlurred && !showInvalidBeforeBlur) {
+      validClass = '';
+    }
+    if (!hasValue && showInvalidWithoutValue) {
+      validClass = 'invalid';
+    }
+
+    const classname = classnames('input-group-input', this.props.className, validClass);
 
     return (
       <input