Merge pull request #4418 from MetaMask/handle-import-account-failure-in-ui

Handle errors for null selected address after Importing account (json or private key)

4 files changed, 47 insertions, 19 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index a9372d6f3..07d7bd5d1 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -550,10 +550,12 @@ function importNewAccount (strategy, args) {
     }
     dispatch(actions.hideLoadingIndication())
     dispatch(actions.updateMetamaskState(newState))
-    dispatch({
-      type: actions.SHOW_ACCOUNT_DETAIL,
-      value: newState.selectedAddress,
-    })
+    if (newState.selectedAddress) {
+      dispatch({
+        type: actions.SHOW_ACCOUNT_DETAIL,
+        value: newState.selectedAddress,
+      })
+    }
     return newState
   }
 }
diff --git a/ui/app/app.js b/ui/app/app.js
index 0e8b907df..7005adb7f 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -99,7 +99,7 @@ class App extends Component {
     } = this.props
     const isLoadingNetwork = network === 'loading' && currentView.name !== 'config'
     const loadMessage = loadingMessage || isLoadingNetwork ?
-      this.getConnectingLabel() : null
+      this.getConnectingLabel(loadingMessage) : null
     log.debug('Main ui render function')
 
     return (
@@ -210,7 +210,10 @@ class App extends Component {
     }
   }
 
-  getConnectingLabel = function () {
+  getConnectingLabel = function (loadingMessage) {
+    if (loadingMessage) {
+      return loadingMessage
+    }
     const { provider } = this.props
     const providerName = provider.type
 
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index 0164417ec..1dc2ba534 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -82,18 +82,19 @@ class JsonImportSubview extends Component {
   }
 
   createNewKeychain () {
+    const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress } = this.props
     const state = this.state
 
     if (!state) {
       const message = this.context.t('validFileImport')
-      return this.props.displayWarning(message)
+      return displayWarning(message)
     }
 
     const { fileContents } = state
 
     if (!fileContents) {
       const message = this.context.t('needImportFile')
-      return this.props.displayWarning(message)
+      return displayWarning(message)
     }
 
     const passwordInput = document.getElementById('json-password-box')
@@ -101,12 +102,19 @@ class JsonImportSubview extends Component {
 
     if (!password) {
       const message = this.context.t('needImportPassword')
-      return this.props.displayWarning(message)
+      return displayWarning(message)
     }
 
-    this.props.importNewJsonAccount([ fileContents, password ])
-      // JS runtime requires caught rejections but failures are handled by Redux
-      .catch()
+    importNewJsonAccount([ fileContents, password ])
+      .then(({ selectedAddress }) => {
+        if (selectedAddress) {
+          history.push(DEFAULT_ROUTE)
+        } else {
+          displayWarning('Error importing account.')
+          setSelectedAddress(firstAddress)
+        }
+      })
+      .catch(err => displayWarning(err))
   }
 }
 
@@ -114,14 +122,17 @@ JsonImportSubview.propTypes = {
   error: PropTypes.string,
   goHome: PropTypes.func,
   displayWarning: PropTypes.func,
+  firstAddress: PropTypes.string,
   importNewJsonAccount: PropTypes.func,
   history: PropTypes.object,
+  setSelectedAddress: PropTypes.func,
   t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
   return {
     error: state.appState.warning,
+    firstAddress: Object.keys(state.metamask.accounts)[0],
   }
 }
 
@@ -130,6 +141,7 @@ const mapDispatchToProps = dispatch => {
     goHome: () => dispatch(actions.goHome()),
     displayWarning: warning => dispatch(actions.displayWarning(warning)),
     importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
+    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
   }
 }
 
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
index e55a47a3c..5df3777da 100644
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -21,6 +21,7 @@ module.exports = compose(
 function mapStateToProps (state) {
   return {
     error: state.appState.warning,
+    firstAddress: Object.keys(state.metamask.accounts)[0],
   }
 }
 
@@ -29,7 +30,8 @@ function mapDispatchToProps (dispatch) {
     importNewAccount: (strategy, [ privateKey ]) => {
       return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
     },
-    displayWarning: () => dispatch(actions.displayWarning(null)),
+    displayWarning: (message) => dispatch(actions.displayWarning(message || null)),
+    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
   }
 }
 
@@ -40,7 +42,7 @@ function PrivateKeyImportView () {
 }
 
 PrivateKeyImportView.prototype.render = function () {
-  const { error } = this.props
+  const { error, displayWarning } = this.props
 
   return (
     h('div.new-account-import-form__private-key', [
@@ -60,7 +62,10 @@ PrivateKeyImportView.prototype.render = function () {
       h('div.new-account-import-form__buttons', {}, [
 
         h('button.btn-default.btn--large.new-account-create-form__button', {
-          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+          onClick: () => {
+            displayWarning(null)
+            this.props.history.push(DEFAULT_ROUTE)
+          },
         }, [
           this.context.t('cancel'),
         ]),
@@ -88,10 +93,16 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
 PrivateKeyImportView.prototype.createNewKeychain = function () {
   const input = document.getElementById('private-key-box')
   const privateKey = input.value
-  const { importNewAccount, history } = this.props
+  const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props
 
   importNewAccount('Private Key', [ privateKey ])
-    // JS runtime requires caught rejections but failures are handled by Redux
-    .catch()
-    .then(() => history.push(DEFAULT_ROUTE))
+    .then(({ selectedAddress }) => {
+      if (selectedAddress) {
+        history.push(DEFAULT_ROUTE)
+      } else {
+        displayWarning('Error importing account.')
+        setSelectedAddress(firstAddress)
+      }
+    })
+    .catch(err => displayWarning(err))
 }