Show seed phrase challenge in browser (#6961)

* Open backup challenge screen, prompted from notification, in browser window

* Remove no longer used showingSeedPhraseBackupAfterOnboarding related code

* Make incremental-security.spec.js click through the seed phrase success screen

test/e2e/incremental-security.spec.js

@@ -280,6 +280,12 @@ describe('MetaMask', function () {
       await delay(regularDelayMs)
     })
 
+    it('can click through the success screen', async () => {
+      const confirm = await findElement(driver, By.xpath(`//button[contains(text(), 'All Done')]`))
+      await confirm.click()
+      await delay(regularDelayMs)
+    })
+
     it('should have the correct amount of eth', async () => {
       const balances = await findElements(driver, By.css('.currency-display-component__text'))
       await driver.wait(until.elementTextMatches(balances[0], /1/), 15000)

ui/app/ducks/app/app.js

@@ -73,7 +73,6 @@ function reduceApp (state, action) {
     networksTabSelectedRpcUrl: '',
     networksTabIsInAddMode: false,
     loadingMethodData: false,
-    showingSeedPhraseBackupAfterOnboarding: false,
   }, state.appState)
 
   switch (action.type) {
@@ -757,17 +756,6 @@ function reduceApp (state, action) {
         loadingMethodData: false,
       })
 
-    case actions.SHOW_SEED_PHRASE_BACKUP_AFTER_ONBOARDING:
-      return extend(appState, {
-        showingSeedPhraseBackupAfterOnboarding: true,
-      })
-
-    case actions.HIDE_SEED_PHRASE_BACKUP_AFTER_ONBOARDING:
-      return extend(appState, {
-        showingSeedPhraseBackupAfterOnboarding: false,
-      })
-
-
     default:
       return appState
   }

ui/app/helpers/constants/routes.js

@@ -32,6 +32,7 @@ const INITIALIZE_CREATE_PASSWORD_ROUTE = '/initialize/create-password'
 const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/create-password/import-with-seed-phrase'
 const INITIALIZE_SELECT_ACTION_ROUTE = '/initialize/select-action'
 const INITIALIZE_SEED_PHRASE_ROUTE = '/initialize/seed-phrase'
+const INITIALIZE_BACKUP_SEED_PHRASE_ROUTE = '/initialize/backup-seed-phrase'
 const INITIALIZE_END_OF_FLOW_ROUTE = '/initialize/end-of-flow'
 const INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE = '/initialize/seed-phrase/confirm'
 const INITIALIZE_METAMETRICS_OPT_IN_ROUTE = '/initialize/metametrics-opt-in'
@@ -90,4 +91,6 @@ module.exports = {
   CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
   CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
   NETWORKS_ROUTE,
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
 }
+

ui/app/pages/first-time-flow/first-time-flow.component.js

@@ -18,6 +18,7 @@ import {
   INITIALIZE_SELECT_ACTION_ROUTE,
   INITIALIZE_END_OF_FLOW_ROUTE,
   INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
 } from '../../helpers/constants/routes'
 
 export default class FirstTimeFlow extends PureComponent {
@@ -113,6 +114,16 @@ export default class FirstTimeFlow extends PureComponent {
               />
             )}
           />
+          <Route
+            path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE}
+            render={props => (
+              <SeedPhrase
+                { ...props }
+                seedPhrase={seedPhrase}
+                verifySeedPhrase={verifySeedPhrase}
+              />
+            )}
+          />
           <Route
             path={INITIALIZE_CREATE_PASSWORD_ROUTE}
             render={props => (

ui/app/pages/first-time-flow/first-time-flow.container.js

@@ -7,9 +7,13 @@ import {
   unlockAndGetSeedPhrase,
   verifySeedPhrase,
 } from '../../store/actions'
+import {
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
+} from '../../helpers/constants/routes'
 
-const mapStateToProps = state => {
-  const { metamask: { completedOnboarding, isInitialized, isUnlocked, seedPhraseBackedUp }, appState: { showingSeedPhraseBackupAfterOnboarding } } = state
+const mapStateToProps = (state, ownProps) => {
+  const { metamask: { completedOnboarding, isInitialized, isUnlocked, seedPhraseBackedUp } } = state
+  const showingSeedPhraseBackupAfterOnboarding = Boolean(ownProps.location.pathname.match(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE))
 
   return {
     completedOnboarding,

ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js

@@ -6,6 +6,7 @@ import ConfirmSeedPhrase from './confirm-seed-phrase'
 import {
   INITIALIZE_SEED_PHRASE_ROUTE,
   INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE,
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
   DEFAULT_ROUTE,
 } from '../../../helpers/constants/routes'
 import HTML5Backend from 'react-dnd-html5-backend'
@@ -68,6 +69,16 @@ export default class SeedPhrase extends PureComponent {
                 />
               )}
             />
+            <Route
+              exact
+              path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE}
+              render={props => (
+                <RevealSeedPhrase
+                  { ...props }
+                  seedPhrase={seedPhrase || verifiedSeedPhrase}
+                />
+              )}
+            />
           </Switch>
         </div>
       </DragDropContextProvider>

ui/app/pages/home/home.component.js

@@ -12,7 +12,7 @@ import {
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
-  INITIALIZE_SEED_PHRASE_ROUTE,
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
 } from '../../helpers/constants/routes'
 
 export default class Home extends PureComponent {
@@ -43,8 +43,8 @@ export default class Home extends PureComponent {
     viewingUnconnectedDapp: PropTypes.bool.isRequired,
     forceApproveProviderRequestByOrigin: PropTypes.func,
     shouldShowSeedPhraseReminder: PropTypes.bool,
-    showSeedPhraseBackupAfterOnboarding: PropTypes.bool,
     rejectProviderRequestByOrigin: PropTypes.func,
+    isPopup: PropTypes.bool,
   }
 
   componentWillMount () {
@@ -82,8 +82,8 @@ export default class Home extends PureComponent {
       viewingUnconnectedDapp,
       forceApproveProviderRequestByOrigin,
       shouldShowSeedPhraseReminder,
-      showSeedPhraseBackupAfterOnboarding,
       rejectProviderRequestByOrigin,
+      isPopup,
     } = this.props
 
     if (forgottenPassword) {
@@ -140,8 +140,11 @@ export default class Home extends PureComponent {
                         descriptionText={t('backupApprovalNotice')}
                         acceptText={t('backupNow')}
                         onAccept={() => {
-                          showSeedPhraseBackupAfterOnboarding()
-                          history.push(INITIALIZE_SEED_PHRASE_ROUTE)
+                          if (isPopup) {
+                            global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
+                          } else {
+                            history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
+                          }
                         }}
                         infoText={t('backupApprovalInfo')}
                         key="home-backupApprovalNotice"

ui/app/pages/home/home.container.js

@@ -7,7 +7,6 @@ import { getCurrentEthBalance } from '../../selectors/selectors'
 import {
   forceApproveProviderRequestByOrigin,
   unsetMigratedPrivacyMode,
-  showSeedPhraseBackupAfterOnboarding,
   rejectProviderRequestByOrigin,
 } from '../../store/actions'
 import { getEnvironmentType } from '../../../../app/scripts/lib/util'
@@ -60,7 +59,6 @@ const mapDispatchToProps = (dispatch) => ({
   unsetMigratedPrivacyMode: () => dispatch(unsetMigratedPrivacyMode()),
   forceApproveProviderRequestByOrigin: (origin) => dispatch(forceApproveProviderRequestByOrigin(origin)),
   rejectProviderRequestByOrigin: origin => dispatch(rejectProviderRequestByOrigin(origin)),
-  showSeedPhraseBackupAfterOnboarding: () => dispatch(showSeedPhraseBackupAfterOnboarding()),
 })
 
 export default compose(

ui/app/store/actions.js

@@ -377,11 +377,6 @@ var actions = {
   LOADING_TOKEN_PARAMS_FINISHED: 'LOADING_TOKEN_PARAMS_FINISHED',
 
   setSeedPhraseBackedUp,
-  showSeedPhraseBackupAfterOnboarding,
-  SHOW_SEED_PHRASE_BACKUP_AFTER_ONBOARDING: 'SHOW_SEED_PHRASE_BACKUP_AFTER_ONBOARDING',
-  hideSeedPhraseBackupAfterOnboarding,
-  HIDE_SEED_PHRASE_BACKUP_AFTER_ONBOARDING: 'HIDE_SEED_PHRASE_BACKUP_AFTER_ONBOARDING',
-
   verifySeedPhrase,
   SET_SEED_PHRASE_BACKED_UP_TO_TRUE: 'SET_SEED_PHRASE_BACKED_UP_TO_TRUE',
 }
@@ -2796,15 +2791,3 @@ function setSeedPhraseBackedUp (seedPhraseBackupState) {
     })
   }
 }
-
-function showSeedPhraseBackupAfterOnboarding () {
-  return {
-    type: actions.SHOW_SEED_PHRASE_BACKUP_AFTER_ONBOARDING,
-  }
-}
-
-function hideSeedPhraseBackupAfterOnboarding () {
-  return {
-    type: actions.HIDE_SEED_PHRASE_BACKUP_AFTER_ONBOARDING,
-  }
-}