First time flow updates (#6192)

* Action select step of onboarding flow added.

* Update navigation on create and import password screens.

* Adds terms of service checkbox to create and import account screens.

* Add security warning to jazzicon intro step

* Update and streamline unique image to confirm seed steps of first time flow.

* UI touch ups to welcome screen.

* UI touch up on select action page

* Fix first time import flow.

* Add end of flow screen to first time flow

* Replace unique image screen with updated fishing warning screen.

* Update e2e tests for onboarding flow changes.

* Add required translations to onboarding flow.

* Update design of select action screen to emphasize create new wallet option.

* Clean up onboarding flow code.

* Remove notice related code from first-time-flow directory.

* Use updater function argument in new-account.component

10 files changed, 37 insertions, 69 deletions

diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
index bc0f73a27..b5c4bf463 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
@@ -2,10 +2,8 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import shuffle from 'lodash.shuffle'
-import Identicon from '../../../../identicon'
 import Button from '../../../../button'
-import Breadcrumbs from '../../../../breadcrumbs'
-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'
 
@@ -19,11 +17,8 @@ export default class ConfirmSeedPhrase extends PureComponent {
   }
 
   static propTypes = {
-    address: PropTypes.string,
-    completeOnboarding: PropTypes.func,
     history: PropTypes.object,
     onSubmit: PropTypes.func,
-    openBuyEtherModal: PropTypes.func,
     seedPhrase: PropTypes.string,
   }
 
@@ -45,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)
     }
@@ -76,11 +69,11 @@ export default class ConfirmSeedPhrase extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { address, history } = this.props
+    const { history } = this.props
     const { selectedSeedWords, shuffledSeedWords, selectedSeedWordsHash } = this.state
 
     return (
-      <div>
+      <div className="confirm-seed-phrase">
         <div className="confirm-seed-phrase__back-button">
           <a
             onClick={e => {
@@ -92,11 +85,6 @@ export default class ConfirmSeedPhrase extends PureComponent {
             {`< Back`}
           </a>
         </div>
-        <Identicon
-          className="first-time-flow__unique-image"
-          address={address}
-          diameter={70}
-        />
         <div className="first-time-flow__header">
           { t('confirmSecretBackupPhrase') }
         </div>
@@ -143,18 +131,13 @@ export default class ConfirmSeedPhrase extends PureComponent {
           }
         </div>
         <Button
-          type="first-time"
+          type="confirm"
           className="first-time-flow__button"
           onClick={this.handleSubmit}
           disabled={!this.isValid()}
         >
           { t('confirm') }
         </Button>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={3}
-          currentIndex={2}
-        />
       </div>
     )
   }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js
deleted file mode 100644
index 5fa2bec1e..000000000
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux'
-import ConfirmSeedPhrase from './confirm-seed-phrase.component'
-import { setCompletedOnboarding, showModal } from '../../../../../actions'
-
-const mapDispatchToProps = dispatch => {
-  return {
-    completeOnboarding: () => dispatch(setCompletedOnboarding()),
-    openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
-  }
-}
-
-export default connect(null, mapDispatchToProps)(ConfirmSeedPhrase)
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
index beb53b383..c7b511503 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
+++ b/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'
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
index e0444571f..93137618c 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
@@ -41,4 +41,8 @@
       padding: 6px 18px;
     }
   }
+
+  button {
+    margin-top: 0xp;
+  }
 }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.js b/ui/app/components/pages/first-time-flow/seed-phrase/index.js
index 7355bfb2c..185b3f089 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/index.js
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/index.js
@@ -1 +1 @@
-export { default } from './seed-phrase.container'
+export { default } from './seed-phrase.component'
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/index.scss
index 88b28950c..e4fd7be4f 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/index.scss
@@ -26,11 +26,15 @@
     min-width: 0;
 
     @media screen and (min-width: $break-large) {
-      margin-left: 48px;
+      margin-left: 81px;
     }
 
     @media screen and (max-width: $break-small) {
       margin-top: 24px;
     }
+
+    .first-time-flow__text-block {
+      color: #5A5A5A;
+    }
   }
 }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
index 568359d31..8a47447ed 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
@@ -50,4 +50,8 @@
     cursor: pointer;
     font-weight: 500;
   }
+
+  button {
+    margin-top: 0xp;
+  }
 }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
index bb822d1d5..732ce14af 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
@@ -1,10 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Identicon from '../../../../identicon'
 import LockIcon from '../../../../lock-icon'
 import Button from '../../../../button'
-import Breadcrumbs from '../../../../breadcrumbs'
 import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../../routes'
 import { exportAsFile } from '../../../../../../app/util'
 
@@ -14,7 +12,6 @@ export default class RevealSeedPhrase extends PureComponent {
   }
 
   static propTypes = {
-    address: PropTypes.string,
     history: PropTypes.object,
     seedPhrase: PropTypes.string,
   }
@@ -75,16 +72,10 @@ export default class RevealSeedPhrase extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { address } = this.props
     const { isShowingSeedPhrase } = this.state
 
     return (
-      <div>
-        <Identicon
-          className="first-time-flow__unique-image"
-          address={address}
-          diameter={70}
-        />
+      <div className="reveal-seed-phrase">
         <div className="seed-phrase__sections">
           <div className="seed-phrase__main">
             <div className="first-time-flow__header">
@@ -121,18 +112,13 @@ export default class RevealSeedPhrase extends PureComponent {
           </div>
         </div>
         <Button
-          type="first-time"
+          type="confirm"
           className="first-time-flow__button"
           onClick={this.handleNext}
           disabled={!isShowingSeedPhrase}
         >
           { t('next') }
         </Button>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={3}
-          currentIndex={2}
-        />
       </div>
     )
   }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js
index 5f5b8a0b2..9eec89cdd 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js
@@ -25,10 +25,23 @@ export default class SeedPhrase extends PureComponent {
   }
 
   render () {
-    const { address, seedPhrase } = this.props
+    const { seedPhrase } = this.props
 
     return (
       <div className="first-time-flow__wrapper">
+        <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>
         <Switch>
           <Route
             exact
@@ -36,7 +49,6 @@ export default class SeedPhrase extends PureComponent {
             render={props => (
               <ConfirmSeedPhrase
                 { ...props }
-                address={address}
                 seedPhrase={seedPhrase}
               />
             )}
@@ -47,7 +59,6 @@ export default class SeedPhrase extends PureComponent {
             render={props => (
               <RevealSeedPhrase
                 { ...props }
-                address={address}
                 seedPhrase={seedPhrase}
               />
             )}
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js
deleted file mode 100644
index 4df024ffc..000000000
--- a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux'
-import SeedPhrase from './seed-phrase.component'
-
-const mapStateToProps = state => {
-  const { metamask: { selectedAddress } } = state
-
-  return {
-    address: selectedAddress,
-  }
-}
-
-export default connect(mapStateToProps)(SeedPhrase)