Add messages to Ledger connection process (#9344)

app/_locales/en/messages.json

@@ -1764,5 +1764,12 @@
   "encryptionPublicKeyNotice": {
     "message": "$1 would like your public encryption key. By consenting, this site will be able to compose encrypted messages to you.",
     "description": "$1 is the web3 site name"
+  },
+  "troubleConnectingToWallet": {
+    "message": "We had trouble connecting to your $1, try reviewing $2 and try again.",
+    "description": "$1 is the wallet device name; $2 is a link to wallet connection guide"
+  },
+  "walletConnectionGuide": {
+    "message": "our hardware wallet connection guide"
   }
 }

test/unit/ui/app/actions.spec.js

@@ -476,12 +476,12 @@ describe('Actions', function () {
       const store = mockStore()
 
       const expectedActions = [
-        { type: 'SHOW_LOADING_INDICATION', value: undefined },
+        { type: 'SHOW_LOADING_INDICATION', value: 'Looking for your Ledger...' },
         { type: 'DISPLAY_WARNING', value: 'error' },
       ]
 
       try {
-        await store.dispatch(actions.connectHardware())
+        await store.dispatch(actions.connectHardware('ledger'))
         assert.fail('Should have thrown error')
       } catch (_) {
         assert.deepEqual(store.getActions(), expectedActions)

ui/app/pages/create-account/connect-hardware/index.js

@@ -44,6 +44,7 @@ class ConnectHardwareForm extends Component {
   }
 
   connectToHardwareWallet = (device) => {
+    this.setState({ device })
     if (this.state.accounts.length) {
       return
     }
@@ -113,6 +114,8 @@ class ConnectHardwareForm extends Component {
         const errorMessage = e.message
         if (errorMessage === 'Window blocked') {
           this.setState({ browserSupported: false, error: null })
+        } else if (e.indexOf('U2F') > -1) {
+          this.setState({ error: 'U2F' })
         } else if (errorMessage !== 'Window closed' && errorMessage !== 'Popup closed') {
           this.setState({ error: errorMessage })
         }
@@ -171,12 +174,29 @@ class ConnectHardwareForm extends Component {
   }
 
   renderError () {
+    if (this.state.error === 'U2F') {
+      return (
+        <p
+          className="hw-connect__error"
+        >
+          {this.context.t('troubleConnectingToWallet', [this.state.device, (
+            // eslint-disable-next-line react/jsx-key
+            <a
+              href="https://metamask.zendesk.com/hc/en-us/articles/360020394612-How-to-connect-a-Trezor-or-Ledger-Hardware-Wallet"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hw-connect__link"
+              style={{ marginLeft: '5px', marginRight: '5px' }}
+            >
+              {this.context.t('walletConnectionGuide')}
+            </a>
+          )])}
+        </p>
+      )
+    }
     return this.state.error
       ? (
-        <span
-          className="error"
-          style={{ margin: '20px 20px 10px', display: 'block', textAlign: 'center' }}
-        >
+        <span className="hw-connect__error">
           {this.state.error}
         </span>
       )

ui/app/pages/create-account/connect-hardware/index.scss

@@ -128,6 +128,13 @@
     margin-bottom: 15px;
   }
 
+  &__error {
+    color: #f7861c;
+    margin: 20px 20px 10px;
+    display: block;
+    text-align: center;
+  }
+
   &__link {
     color: #2f9ae0;
   }

ui/app/store/actions.js

@@ -2,6 +2,7 @@ import abi from 'human-standard-token-abi'
 import pify from 'pify'
 import ethUtil from 'ethereumjs-util'
 import log from 'loglevel'
+import { capitalize } from 'lodash'
 import getBuyEthUrl from '../../../app/scripts/lib/buy-eth-url'
 import { checksumAddress } from '../helpers/utils/util'
 import { calcTokenBalance, estimateGas } from '../pages/send/send.utils'
@@ -379,7 +380,7 @@ export function forgetDevice (deviceName) {
 export function connectHardware (deviceName, page, hdPath) {
   log.debug(`background.connectHardware`, deviceName, page, hdPath)
   return async (dispatch) => {
-    dispatch(showLoadingIndication())
+    dispatch(showLoadingIndication(`Looking for your ${capitalize(deviceName)}...`))
 
     let accounts
     try {