Add end of flow screen to first time flow

ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Identicon from '../../../../identicon'
 import Button from '../../../../button'
-import { INITIALIZE_SEED_PHRASE_ROUTE, DEFAULT_ROUTE } from '../../../../../routes'
+import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes'
 
 export default class UniqueImageScreen extends PureComponent {
   static contextTypes = {
@@ -13,12 +13,11 @@ export default class UniqueImageScreen extends PureComponent {
     address: PropTypes.string,
     history: PropTypes.object,
     isImportedKeyring: PropTypes.bool,
-    completeOnboarding: PropTypes.func,
   }
 
   render () {
     const { t } = this.context
-    const { address, history, isImportedKeyring, completeOnboarding } = this.props
+    const { address, history, isImportedKeyring } = this.props
 
     return (
       <div>
@@ -44,8 +43,7 @@ export default class UniqueImageScreen extends PureComponent {
           className="first-time-flow__button"
           onClick={async () => {
             if (isImportedKeyring) {
-              await completeOnboarding()
-              history.push(DEFAULT_ROUTE)
+              history.push(INITIALIZE_END_OF_FLOW_ROUTE)
             } else {
               history.push(INITIALIZE_SEED_PHRASE_ROUTE)
             }

ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.container.js

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { setCompletedOnboarding } from '../../../../../actions'
 import UniqueImage from './unique-image.component'
 
 const mapStateToProps = ({ metamask }) => {
@@ -10,10 +9,4 @@ const mapStateToProps = ({ metamask }) => {
   }
 }
 
-const mapDispatchToProps = dispatch => {
-  return {
-    completeOnboarding: () => dispatch(setCompletedOnboarding()),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(UniqueImage)
+export default connect(mapStateToProps)(UniqueImage)

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

@@ -0,0 +1,69 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../button'
+import { DEFAULT_ROUTE } from '../../../../routes'
+
+export default class EndOfFlowScreen extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    completeOnboarding: PropTypes.func,
+  }
+
+  render () {
+    const { history, completeOnboarding } = this.props
+
+    return (
+      <div className="end-of-flow">
+        <div className="app-header__logo-container">
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+            src="/images/logo/metamask-logo-horizontal.svg"
+            height={30}
+          />
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--icon"
+            src="/images/logo/metamask-fox.svg"
+            height={42}
+            width={42}
+          />
+        </div>
+        <div className="end-of-flow__emoji">🎉</div>
+        <div className="first-time-flow__header">
+          { 'Congratulations' }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-1">
+          { 'You passed the test - keep your seedphrase safe, it\'s your responsibility!' }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-2">
+          { 'Tips on storing it safely ' }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-3">
+          { '• Save a backup in multiple places' }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-4">
+          { '• Never tell anyone' }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-3">
+          { 'If you need to back it up again, you can find them in Settings -> Security.' }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-3">
+          { '*Metamask cannot recover your seedphrase. Learn more.' }
+        </div>
+        <Button
+          type="confirm"
+          className="first-time-flow__button"
+          onClick={async () => {
+            await completeOnboarding()
+            history.push(DEFAULT_ROUTE)
+          }}
+        >
+          { 'All Done' }
+        </Button>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import EndOfFlow from './end-of-flow.component'
+import { setCompletedOnboarding } from '../../../../actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    completeOnboarding: () => dispatch(setCompletedOnboarding()),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(EndOfFlow)

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

@@ -0,0 +1 @@
+export { default } from './end-of-flow.container'

ui/app/components/pages/first-time-flow/end-of-flow/index.scss

@@ -0,0 +1,43 @@
+.end-of-flow {
+  color: black;
+  font-family: Roboto;
+  font-style: normal;
+
+  .app-header__logo-container {
+    width: 742px;
+    margin-top: 3%;
+  }
+
+  &__text-1, &__text-3 {
+    font-weight: normal;
+    font-size: 16px;
+    margin-top: 18px;
+  }
+
+  &__text-2 {
+    font-weight: bold;
+    font-size: 16px;
+    margin-top: 26px;
+  }
+
+  &__text-3 {
+    margin-top: 26px;
+  }
+
+  &__text-3 {
+    margin-top: 2px;
+  }
+
+  button {
+    width: 207px;
+  }
+
+  &__start-over-button {
+    width: 744px;
+  }
+
+  &__emoji {
+    font-size: 80px;
+    margin-top: 70px;
+  }
+}

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

@@ -4,6 +4,7 @@ import { Switch, Route } from 'react-router-dom'
 import FirstTimeFlowSwitch from './first-time-flow-switch'
 import Welcome from './welcome'
 import SelectAction from './select-action'
+import EndOfFlow from './end-of-flow'
 import Unlock from '../unlock-page'
 import CreatePassword from './create-password'
 import Notices from './notices'
@@ -16,6 +17,7 @@ import {
   INITIALIZE_SEED_PHRASE_ROUTE,
   INITIALIZE_UNLOCK_ROUTE,
   INITIALIZE_SELECT_ACTION_ROUTE,
+  INITIALIZE_END_OF_FLOW_ROUTE,
 } from '../../../routes'
 
 export default class FirstTimeFlow extends PureComponent {
@@ -135,6 +137,11 @@ export default class FirstTimeFlow extends PureComponent {
               />
             )}
           />
+          <Route
+            exact
+            path={INITIALIZE_END_OF_FLOW_ROUTE}
+            component={EndOfFlow}
+          />
           <Route
             exact
             path={INITIALIZE_WELCOME_ROUTE}

ui/app/components/pages/first-time-flow/index.scss

@@ -4,6 +4,8 @@
 
 @import './seed-phrase/index';
 
+@import './end-of-flow/index';
+
 .first-time-flow {
   width: 100%;
   background-color: $white;

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import shuffle from 'lodash.shuffle'
 import Button from '../../../../button'
-import { DEFAULT_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../../routes'
+import { INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../../routes'
 import { exportAsFile } from '../../../../../../app/util'
 import { selectSeedWord, deselectSeedWord } from './confirm-seed-phrase.state'
 
@@ -17,10 +17,8 @@ export default class ConfirmSeedPhrase extends PureComponent {
   }
 
   static propTypes = {
-    completeOnboarding: PropTypes.func,
     history: PropTypes.object,
     onSubmit: PropTypes.func,
-    openBuyEtherModal: PropTypes.func,
     seedPhrase: PropTypes.string,
   }
 
@@ -42,16 +40,14 @@ export default class ConfirmSeedPhrase extends PureComponent {
   }
 
   handleSubmit = async () => {
-    const { completeOnboarding, history, openBuyEtherModal } = this.props
+    const { history } = this.props
 
     if (!this.isValid()) {
       return
     }
 
     try {
-      await completeOnboarding()
-      history.push(DEFAULT_ROUTE)
-      openBuyEtherModal()
+      history.push(INITIALIZE_END_OF_FLOW_ROUTE)
     } catch (error) {
       console.error(error.message)
     }

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

@@ -1 +1 @@
-export { default } from './confirm-seed-phrase.container'
+export { default } from './confirm-seed-phrase.component'

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

@@ -10,15 +10,12 @@ import {
   INITIALIZE_SEED_PHRASE_ROUTE,
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
-  NOTICE_ROUTE,
   CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
 } from '../../../routes'
 
 export default class Home extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
-    noActiveNotices: PropTypes.bool,
-    lostAccounts: PropTypes.array,
     forgottenPassword: PropTypes.bool,
     seedWords: PropTypes.string,
     suggestedTokens: PropTypes.object,
@@ -45,8 +42,6 @@ export default class Home extends PureComponent {
 
   render () {
     const {
-      noActiveNotices,
-      lostAccounts,
       forgottenPassword,
       seedWords,
       providerRequests,

ui/app/routes.js

@@ -27,6 +27,7 @@ const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/create-password/unique-image'
 const INITIALIZE_NOTICE_ROUTE = '/initialize/notice'
 const INITIALIZE_SELECT_ACTION_ROUTE = '/initialize/select-action'
 const INITIALIZE_SEED_PHRASE_ROUTE = '/initialize/seed-phrase'
+const INITIALIZE_END_OF_FLOW_ROUTE = '/initialize/end-of-flow'
 const INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE = '/initialize/seed-phrase/confirm'
 
 const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
@@ -68,6 +69,7 @@ module.exports = {
   INITIALIZE_SELECT_ACTION_ROUTE,
   INITIALIZE_SEED_PHRASE_ROUTE,
   INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE,
+  INITIALIZE_END_OF_FLOW_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   CONFIRM_SEND_ETHER_PATH,
   CONFIRM_SEND_TOKEN_PATH,