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

1 files changed, 18 insertions, 19 deletions

diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js
index 41a566f0a..fa76074f5 100644
--- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js
+++ b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js
@@ -1,9 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import Identicon from '../../../../identicon'
-import Breadcrumbs from '../../../../breadcrumbs'
 import Button from '../../../../button'
-import { INITIALIZE_NOTICE_ROUTE } from '../../../../../routes'
+import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes'
 
 export default class UniqueImageScreen extends PureComponent {
   static contextTypes = {
@@ -11,42 +9,43 @@ export default class UniqueImageScreen extends PureComponent {
   }
 
   static propTypes = {
-    address: PropTypes.string,
     history: PropTypes.object,
+    isImportedKeyring: PropTypes.bool,
   }
 
   render () {
     const { t } = this.context
-    const { address, history } = this.props
+    const { history, isImportedKeyring } = this.props
 
     return (
       <div>
-        <Identicon
-          className="first-time-flow__unique-image"
-          address={address}
-          diameter={70}
+        <img
+          src="/images/sleuth.svg"
+          height={42}
+          width={42}
         />
         <div className="first-time-flow__header">
-          { t('yourUniqueAccountImage') }
+          { t('protectYourKeys') }
         </div>
         <div className="first-time-flow__text-block">
-          { t('yourUniqueAccountImageDescription1') }
+          { t('protectYourKeysMessage1') }
         </div>
         <div className="first-time-flow__text-block">
-          { t('yourUniqueAccountImageDescription2') }
+          { t('protectYourKeysMessage2') }
         </div>
         <Button
-          type="first-time"
+          type="confirm"
           className="first-time-flow__button"
-          onClick={() => history.push(INITIALIZE_NOTICE_ROUTE)}
+          onClick={() => {
+            if (isImportedKeyring) {
+              history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+            } else {
+              history.push(INITIALIZE_SEED_PHRASE_ROUTE)
+            }
+          }}
         >
           { t('next') }
         </Button>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={3}
-          currentIndex={0}
-        />
       </div>
     )
   }