Fix UI getting stuck in Reveal Seed screen

app/scripts/lib/config-manager.js

@@ -102,7 +102,6 @@ ConfigManager.prototype.setShowSeedWords = function (should) {
   this.setData(data)
 }
 
-
 ConfigManager.prototype.getShouldShowSeedWords = function () {
   var data = this.getData()
   return data.showSeedWords
@@ -118,6 +117,27 @@ ConfigManager.prototype.getSeedWords = function () {
   var data = this.getData()
   return data.seedWords
 }
+
+/**
+ * Called to set the isRevealingSeedWords flag. This happens only when the user chooses to reveal
+ * the seed words and not during the first time flow.
+ * @param {boolean} reveal - Value to set the isRevealingSeedWords flag.
+ */
+ConfigManager.prototype.setIsRevealingSeedWords = function (reveal = false) {
+  const data = this.getData()
+  data.isRevealingSeedWords = reveal
+  this.setData(data)
+}
+
+/**
+ * Returns the isRevealingSeedWords flag.
+ * @returns {boolean|undefined}
+ */
+ConfigManager.prototype.getIsRevealingSeedWords = function () {
+  const data = this.getData()
+  return data.isRevealingSeedWords
+}
+
 ConfigManager.prototype.setRpcTarget = function (rpcUrl) {
   var config = this.getConfig()
   config.provider = {

app/scripts/metamask-controller.js

@@ -308,6 +308,7 @@ module.exports = class MetamaskController extends EventEmitter {
         lostAccounts: this.configManager.getLostAccounts(),
         seedWords: this.configManager.getSeedWords(),
         forgottenPassword: this.configManager.getPasswordForgotten(),
+        isRevealingSeedWords: Boolean(this.configManager.getIsRevealingSeedWords()),
       },
     }
   }
@@ -347,6 +348,7 @@ module.exports = class MetamaskController extends EventEmitter {
       clearSeedWordCache: this.clearSeedWordCache.bind(this),
       resetAccount: nodeify(this.resetAccount, this),
       importAccountWithStrategy: this.importAccountWithStrategy.bind(this),
+      setIsRevealingSeedWords: this.configManager.setIsRevealingSeedWords.bind(this.configManager),
 
       // vault management
       submitPassword: nodeify(keyringController.submitPassword, keyringController),

mascara/src/app/first-time/confirm-seed-screen.js

@@ -9,7 +9,7 @@ import Identicon from '../../../../ui/app/components/identicon'
 import { confirmSeedWords, showModal } from '../../../../ui/app/actions'
 import Breadcrumbs from './breadcrumbs'
 import LoadingScreen from './loading-screen'
-import { DEFAULT_ROUTE } from '../../../../ui/app/routes'
+import { DEFAULT_ROUTE, INITIALIZE_BACKUP_PHRASE_ROUTE } from '../../../../ui/app/routes'
 
 class ConfirmSeedScreen extends Component {
   static propTypes = {
@@ -53,7 +53,7 @@ class ConfirmSeedScreen extends Component {
   }
 
   render () {
-    const { seedWords } = this.props
+    const { seedWords, history } = this.props
     const { selectedSeeds, shuffledSeeds } = this.state
     const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ')
 
@@ -66,6 +66,16 @@ class ConfirmSeedScreen extends Component {
             <div className="first-view-main-wrapper">
               <div className="first-view-main">
                 <div className="backup-phrase">
+                  <a
+                    className="backup-phrase__back-button"
+                    onClick={e => {
+                      e.preventDefault()
+                      history.push(INITIALIZE_BACKUP_PHRASE_ROUTE)
+                    }}
+                    href="#"
+                  >
+                    {`< Back`}
+                  </a>
                   <Identicon address={this.props.address} diameter={70} />
                   <div className="backup-phrase__content-wrapper">
                     <div>

mascara/src/app/first-time/seed-screen.js

@@ -8,6 +8,7 @@ import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
 import LoadingScreen from './loading-screen'
 import { DEFAULT_ROUTE, INITIALIZE_CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes'
+import { confirmSeedWords } from '../../../../ui/app/actions'
 
 const LockIcon = props => (
   <svg
@@ -44,6 +45,8 @@ class BackupPhraseScreen extends Component {
     address: PropTypes.string.isRequired,
     seedWords: PropTypes.string,
     history: PropTypes.object,
+    isRevealingSeedWords: PropTypes.bool,
+    clearSeedWords: PropTypes.func,
   };
 
   static defaultProps = {
@@ -58,6 +61,14 @@ class BackupPhraseScreen extends Component {
   }
 
   componentWillMount () {
+    this.checkSeedWords()
+  }
+
+  componentDidUpdate () {
+    this.checkSeedWords()
+  }
+
+  checkSeedWords () {
     const { seedWords, history } = this.props
 
     if (!seedWords) {
@@ -92,9 +103,29 @@ class BackupPhraseScreen extends Component {
     )
   }
 
-  renderSecretScreen () {
+  renderSubmitButton () {
+    const { isRevealingSeedWords, clearSeedWords, history } = this.props
     const { isShowingSecret } = this.state
-    const { history } = this.props
+
+    return isRevealingSeedWords
+      ? <button
+        className="first-time-flow__button"
+        onClick={() => clearSeedWords().then(() => history.push(DEFAULT_ROUTE))}
+        disabled={!isShowingSecret}
+      >
+        Done
+      </button>
+      : <button
+        className="first-time-flow__button"
+        onClick={() => isShowingSecret && history.push(INITIALIZE_CONFIRM_SEED_ROUTE)}
+        disabled={!isShowingSecret}
+      >
+        Next
+      </button>
+  }
+
+  renderSecretScreen () {
+    const { isRevealingSeedWords } = this.props
 
     return (
       <div className="backup-phrase__content-wrapper">
@@ -121,14 +152,8 @@ class BackupPhraseScreen extends Component {
           </div>
         </div>
         <div className="backup-phrase__next-button">
-          <button
-            className="first-time-flow__button"
-            onClick={() => isShowingSecret && history.push(INITIALIZE_CONFIRM_SEED_ROUTE)}
-            disabled={!isShowingSecret}
-          >
-            Next
-          </button>
-          <Breadcrumbs total={3} currentIndex={1} />
+          { this.renderSubmitButton() }
+          { !isRevealingSeedWords && <Breadcrumbs total={3} currentIndex={1} />}
         </div>
       </div>
     )
@@ -150,13 +175,25 @@ class BackupPhraseScreen extends Component {
   }
 }
 
-export default compose(
-  withRouter,
-  connect(
-    ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
+const mapStateToProps = ({ metamask, appState }) => {
+  const { selectedAddress, seedWords, isRevealingSeedWords } = metamask
+  const { isLoading } = appState
+
+  return {
     seedWords,
+    isRevealingSeedWords,
     isLoading,
     address: selectedAddress,
-    })
-  )
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    clearSeedWords: () => dispatch(confirmSeedWords()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps),
 )(BackupPhraseScreen)

ui/app/actions.js

@@ -351,7 +351,6 @@ function confirmSeedWords () {
     log.debug(`background.clearSeedWordCache`)
     return new Promise((resolve, reject) => {
       background.clearSeedWordCache((err, account) => {
-        dispatch(actions.hideLoadingIndication())
         if (err) {
           dispatch(actions.displayWarning(err.message))
           return reject(err)
@@ -362,6 +361,9 @@ function confirmSeedWords () {
         resolve(account)
       })
     })
+    .then(() => dispatch(setIsRevealingSeedWords(false)))
+    .then(() => dispatch(actions.hideLoadingIndication()))
+    .catch(() => dispatch(actions.hideLoadingIndication()))
   }
 }
 
@@ -446,11 +448,13 @@ function requestRevealSeed (password) {
           }
 
           dispatch(actions.showNewVaultSeed(result))
-          dispatch(actions.hideLoadingIndication())
           resolve()
         })
       })
     })
+      .then(() => dispatch(setIsRevealingSeedWords(true)))
+      .then(() => dispatch(actions.hideLoadingIndication()))
+      .catch(() => dispatch(actions.hideLoadingIndication()))
   }
 }
 
@@ -1907,3 +1911,11 @@ function updateNetworkEndpointType (networkEndpointType) {
     value: networkEndpointType,
   }
 }
+
+function setIsRevealingSeedWords (reveal) {
+  return dispatch => {
+    log.debug(`background.setIsRevealingSeedWords`)
+    background.setIsRevealingSeedWords(reveal)
+    return forceUpdateMetamaskState(dispatch)
+  }
+}

ui/app/app.js

@@ -56,11 +56,20 @@ const {
 
 class App extends Component {
   componentWillMount () {
-    const { currentCurrency, setCurrentCurrencyToUSD } = this.props
+    const {
+      currentCurrency,
+      setCurrentCurrencyToUSD,
+      isRevealingSeedWords,
+      clearSeedWords,
+    } = this.props
 
     if (!currentCurrency) {
       setCurrentCurrencyToUSD()
     }
+
+    if (isRevealingSeedWords) {
+      clearSeedWords()
+    }
   }
 
   renderRoutes () {
@@ -406,6 +415,8 @@ App.propTypes = {
   isMouseUser: PropTypes.bool,
   setMouseUserState: PropTypes.func,
   t: PropTypes.func,
+  isRevealingSeedWords: PropTypes.bool,
+  clearSeedWords: PropTypes.func,
 }
 
 function mapStateToProps (state) {
@@ -486,6 +497,7 @@ function mapDispatchToProps (dispatch, ownProps) {
     setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
     toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
     setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
+    clearSeedWords: () => dispatch(actions.confirmSeedWords()),
   }
 }