Complete onboarding upon importing/verifying seed (#8873)

Fixes #8679

ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js

@@ -19,6 +19,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
     onSubmit: PropTypes.func.isRequired,
     setSeedPhraseBackedUp: PropTypes.func,
     initializeThreeBox: PropTypes.func,
+    completeOnboarding: PropTypes.func,
   }
 
   state = {
@@ -119,7 +120,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
     }
 
     const { password, seedPhrase } = this.state
-    const { history, onSubmit, setSeedPhraseBackedUp, initializeThreeBox } = this.props
+    const { history, onSubmit, setSeedPhraseBackedUp, initializeThreeBox, completeOnboarding } = this.props
 
     try {
       await onSubmit(password, this.parseSeedPhrase(seedPhrase))
@@ -131,7 +132,8 @@ export default class ImportWithSeedPhrase extends PureComponent {
         },
       })
 
-      setSeedPhraseBackedUp(true).then(() => {
+      setSeedPhraseBackedUp(true).then(async () => {
+        await completeOnboarding()
         initializeThreeBox()
         history.push(INITIALIZE_END_OF_FLOW_ROUTE)
       })

ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js

@@ -3,12 +3,14 @@ import ImportWithSeedPhrase from './import-with-seed-phrase.component'
 import {
   setSeedPhraseBackedUp,
   initializeThreeBox,
+  setCompletedOnboarding,
 } from '../../../../store/actions'
 
 const mapDispatchToProps = (dispatch) => {
   return {
     setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)),
     initializeThreeBox: () => dispatch(initializeThreeBox()),
+    completeOnboarding: () => dispatch(setCompletedOnboarding()),
   }
 }
 

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

@@ -14,7 +14,6 @@ export default class EndOfFlowScreen extends PureComponent {
 
   static propTypes = {
     history: PropTypes.object,
-    completeOnboarding: PropTypes.func,
     completionMetaMetricsName: PropTypes.string,
     onboardingInitiator: PropTypes.exact({
       location: PropTypes.string,
@@ -23,9 +22,8 @@ export default class EndOfFlowScreen extends PureComponent {
   }
 
   onComplete = async () => {
-    const { history, completeOnboarding, completionMetaMetricsName, onboardingInitiator } = this.props
+    const { history, completionMetaMetricsName, onboardingInitiator } = this.props
 
-    await completeOnboarding()
     this.context.metricsEvent({
       eventOpts: {
         category: 'Onboarding',

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

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux'
 import EndOfFlow from './end-of-flow.component'
-import { setCompletedOnboarding } from '../../../store/actions'
 import { getOnboardingInitiator } from '../../../selectors'
 
 const firstTimeFlowTypeNameMap = {
@@ -17,10 +16,4 @@ const mapStateToProps = (state) => {
   }
 }
 
-const mapDispatchToProps = (dispatch) => {
+export default connect(mapStateToProps)(EndOfFlow)
-  return {
-    completeOnboarding: () => dispatch(setCompletedOnboarding()),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(EndOfFlow)

ui/app/pages/first-time-flow/end-of-flow/tests/end-of-flow.test.js

@@ -12,7 +12,6 @@ describe('End of Flow Screen', function () {
     history: {
       push: sinon.spy(),
     },
-    completeOnboarding: sinon.spy(),
   }
 
   beforeEach(function () {
@@ -30,7 +29,6 @@ describe('End of Flow Screen', function () {
     endOfFlowButton.simulate('click')
 
     setImmediate(() => {
-      assert(props.completeOnboarding.calledOnce)
       assert(props.history.push.calledOnceWithExactly(DEFAULT_ROUTE))
       done()
     })

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

@@ -26,6 +26,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
     seedPhrase: PropTypes.string,
     initializeThreeBox: PropTypes.func,
     setSeedPhraseBackedUp: PropTypes.func,
+    completeOnboarding: PropTypes.func,
   }
 
   state = {
@@ -66,6 +67,10 @@ export default class ConfirmSeedPhrase extends PureComponent {
     exportAsFile('', this.props.seedPhrase, 'text/plain')
   }
 
+  setOnboardingCompleted = async () => {
+    await this.props.completeOnboarding()
+  }
+
   handleSubmit = async () => {
     const {
       history,
@@ -86,8 +91,9 @@ export default class ConfirmSeedPhrase extends PureComponent {
         },
       })
 
-      setSeedPhraseBackedUp(true).then(() => {
+      setSeedPhraseBackedUp(true).then(async () => {
         initializeThreeBox()
+        this.setOnboardingCompleted()
         history.push(INITIALIZE_END_OF_FLOW_ROUTE)
       })
     } catch (error) {

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

@@ -3,12 +3,14 @@ import ConfirmSeedPhrase from './confirm-seed-phrase.component'
 import {
   setSeedPhraseBackedUp,
   initializeThreeBox,
+  setCompletedOnboarding,
 } from '../../../../store/actions'
 
 const mapDispatchToProps = (dispatch) => {
   return {
     setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)),
     initializeThreeBox: () => dispatch(initializeThreeBox()),
+    completeOnboarding: () => dispatch(setCompletedOnboarding()),
   }
 }
 

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

@@ -142,6 +142,7 @@ describe('ConfirmSeedPhrase Component', function () {
         history: { push: pushSpy },
         setSeedPhraseBackedUp: () => Promise.resolve(),
         initializeThreeBox: initialize3BoxSpy,
+        completeOnboarding: sinon.spy(),
       },
       {
         metricsEvent: metricsEventSpy,