Hardware Wallet Unlock - Loading Indicator (#675)

* Direct user to correct app on timeout

* Add spinner while decrypting hardware wallets

* Hide tip on connect

* Remove unnecessary trezor tips

* Remove showTip property from component state

common/components/WalletDecrypt/LedgerNano.scss

@@ -23,4 +23,13 @@
   &-buy {
     margin-top: 10px;
   }
-}
+
+  &-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      margin-right: 16px;
+    }
+  }
+}

common/components/WalletDecrypt/LedgerNano.tsx

@@ -6,6 +6,7 @@ import { LedgerWallet } from 'libs/wallet';
 import Ledger3 from 'vendor/ledger3';
 import LedgerEth from 'vendor/ledger-eth';
 import DPATHS from 'config/dpaths';
+import { Spinner } from 'components/ui';
 
 const DEFAULT_PATH = DPATHS.LEDGER[0].value;
 
@@ -19,6 +20,7 @@ interface State {
   dPath: string;
   error: string | null;
   isLoading: boolean;
+  showTip: boolean;
 }
 
 export default class LedgerNanoSDecrypt extends Component<Props, State> {
@@ -27,21 +29,41 @@ export default class LedgerNanoSDecrypt extends Component<Props, State> {
     chainCode: '',
     dPath: DEFAULT_PATH,
     error: null,
-    isLoading: false
+    isLoading: false,
+    showTip: false
+  };
+
+  public showTip = () => {
+    this.setState({
+      showTip: true
+    });
   };
 
   public render() {
-    const { dPath, publicKey, chainCode, error, isLoading } = this.state;
+    const { dPath, publicKey, chainCode, error, isLoading, showTip } = this.state;
     const showErr = error ? 'is-showing' : '';
 
     return (
       <section className="LedgerDecrypt col-md-4 col-sm-6">
+        {showTip && (
+          <p>
+            <strong>Tip: </strong>Make sure you're logged into the ethereum app on your hardware
+            wallet
+          </p>
+        )}
         <button
           className="LedgerDecrypt-decrypt btn btn-primary btn-lg"
           onClick={this.handleNullConnect}
           disabled={isLoading}
         >
-          {isLoading ? 'Unlocking...' : translate('ADD_Ledger_scan')}
+          {isLoading ? (
+            <div className="LedgerDecrypt-message">
+              <Spinner light={true} />
+              Unlocking...
+            </div>
+          ) : (
+            translate('ADD_Ledger_scan')
+          )}
         </button>
 
         <div className="LedgerDecrypt-help">
@@ -65,9 +87,7 @@ export default class LedgerNanoSDecrypt extends Component<Props, State> {
             </a>
           </div>
         </div>
-
         <div className={`LedgerDecrypt-error alert alert-danger ${showErr}`}>{error || '-'}</div>
-
         <a
           className="LedgerDecrypt-buy btn btn-sm btn-default"
           href="https://www.ledgerwallet.com/r/fa4b?path=/products/"
@@ -76,7 +96,6 @@ export default class LedgerNanoSDecrypt extends Component<Props, State> {
         >
           {translate('Don’t have a Ledger? Order one now!')}
         </a>
-
         <DeterministicWalletsModal
           isOpen={!!publicKey && !!chainCode}
           publicKey={publicKey}
@@ -99,7 +118,8 @@ export default class LedgerNanoSDecrypt extends Component<Props, State> {
   private handleConnect = (dPath: string = this.state.dPath) => {
     this.setState({
       isLoading: true,
-      error: null
+      error: null,
+      showTip: false
     });
 
     const ledger = new Ledger3('w0w');
@@ -109,6 +129,9 @@ export default class LedgerNanoSDecrypt extends Component<Props, State> {
       dPath,
       (res, err) => {
         if (err) {
+          if (err.errorCode === 5) {
+            this.showTip();
+          }
           err = ethApp.getError(err);
         }
 

common/components/WalletDecrypt/Trezor.scss

@@ -23,4 +23,13 @@
   &-buy {
     margin-top: 10px;
   }
+
+  &-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      margin-right: 16px;
+    }
+  }
 }

common/components/WalletDecrypt/Trezor.tsx

@@ -5,6 +5,7 @@ import translate, { translateRaw } from 'translations';
 import TrezorConnect from 'vendor/trezor-connect';
 import DeterministicWalletsModal from './DeterministicWalletsModal';
 import './Trezor.scss';
+import { Spinner } from 'components/ui';
 const DEFAULT_PATH = DPATHS.TREZOR[0].value;
 
 interface Props {
@@ -38,7 +39,14 @@ export default class TrezorDecrypt extends Component<Props, State> {
           onClick={this.handleNullConnect}
           disabled={isLoading}
         >
-          {isLoading ? 'Unlocking...' : translate('ADD_Trezor_scan')}
+          {isLoading ? (
+            <div className="TrezorDecrypt-message">
+              <Spinner light={true} />
+              Unlocking...
+            </div>
+          ) : (
+            translate('ADD_Trezor_scan')
+          )}
         </button>
 
         <div className="TrezorDecrypt-help">