Refactor onboarding flow

9 files changed, 60 insertions, 47 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 4550237d5..08df31e1f 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -1322,12 +1322,13 @@ function markNoticeRead (notice) {
           dispatch(actions.displayWarning(err))
           return reject(err)
         }
+
         if (notice) {
           dispatch(actions.showNotice(notice))
-          resolve()
+          resolve(true)
         } else {
           dispatch(actions.clearNotices())
-          resolve()
+          resolve(false)
         }
       })
     })
diff --git a/ui/app/app.js b/ui/app/app.js
index 8a21220b1..f3e9e3470 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -88,34 +88,18 @@ class App extends Component {
 
     return (
       h(Switch, [
-        h(Route, {
-          path: WELCOME_ROUTE,
-          exact,
-          component: WelcomeScreen,
-        }),
-        h(Route, {
-          path: INITIALIZE_ROUTE,
-          component: InitializeScreen,
-        }),
+        h(Route, { path: INITIALIZE_ROUTE, component: InitializeScreen }),
         h(Initialized, {
           path: REVEAL_SEED_ROUTE,
           exact,
           component: RevealSeedPage,
           mascaraComponent: MascaraSeedScreen,
         }),
-        h(Initialized, {
-          path: CONFIRM_SEED_ROUTE,
-          exact,
-          mascaraComponent: MascaraConfirmSeedScreen,
-        }),
+        // h(Initialized, { path: CONFIRM_SEED_ROUTE, exact, component: MascaraConfirmSeedScreen }),
         h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }),
         h(Initialized, { path: SETTINGS_ROUTE, component: Settings }),
         h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }),
-        h(Initialized, {
-          path: NOTICE_ROUTE,
-          exact,
-          component: MascaraNoticeScreen,
-        }),
+        h(Initialized, { path: NOTICE_ROUTE, exact, component: NoticeScreen }),
         h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, component: ConfirmTxScreen }),
         h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }),
         h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
@@ -322,7 +306,7 @@ class App extends Component {
 
               ]),
 
-              isUnlocked && h('div.account-menu__icon', { onClick: this.context.toggleAccountMenu }, [
+              isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [
                 h(Identicon, {
                   address: this.props.selectedAddress,
                   diameter: 32,
diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index a5b5ea57b..d387720e5 100644
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@@ -384,7 +384,7 @@ AddTokenScreen.prototype.render = function () {
   return h('div.add-token', [
     h('div.add-token__header', [
       h('div.add-token__header__cancel', {
-        onClick: () => history.goBack(),
+        onClick: () => history.push(DEFAULT_ROUTE),
       }, [
         h('i.fa.fa-angle-left.fa-lg'),
         h('span', this.context.t('cancel')),
@@ -417,7 +417,7 @@ AddTokenScreen.prototype.render = function () {
 
     !isShowingConfirmation && h('div.add-token__buttons', [
       h('button.btn-secondary--lg.add-token__cancel-button', {
-        onClick: () => history.goBack(),
+        onClick: () => history.push(DEFAULT_ROUTE),
       }, this.context.t('cancel')),
       h('button.btn-primary--lg.add-token__confirm-button', {
         onClick: this.onNext,
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 4f8c00768..34cdb8a4d 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -35,11 +35,11 @@ class Home extends Component {
       unapprovedTypedMessagesCount = 0,
     } = this.props
 
-    console.log('IN HOME COMPONENDIMOUNT')
+    console.log('HOME MOUNTED')
+
     // unapprovedTxs and unapproved messages
     if (Object.keys(unapprovedTxs).length ||
     unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) {
-      console.log('IN HOME SHOULD REDIRECT')
       this.props.history.push(CONFIRM_TRANSACTION_ROUTE)
     }
   }
@@ -55,6 +55,15 @@ class Home extends Component {
       seedWords,
     } = this.props
 
+    // notices
+    if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
+      return h(Redirect, {
+        to: {
+          pathname: NOTICE_ROUTE,
+        },
+      })
+    }
+
     // seed words
     if (seedWords) {
       log.debug('rendering seed words')
@@ -74,15 +83,6 @@ class Home extends Component {
       })
     }
 
-    // notices
-    if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
-      return h(Redirect, {
-        to: {
-          pathname: NOTICE_ROUTE,
-        },
-      })
-    }
-
     // if (!props.noActiveNotices) {
     //   log.debug('rendering notice screen for unread notices.')
     //   return h(NoticeScreen, {
diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js
index 24ebf89e3..77ec32efe 100644
--- a/ui/app/components/pages/keychains/restore-vault.js
+++ b/ui/app/components/pages/keychains/restore-vault.js
@@ -24,7 +24,7 @@ class RestoreVaultPage extends PersistentForm {
 
   cancel () {
     this.props.unMarkPasswordForgotten()
-      .then(this.props.history.goBack())
+      .then(this.props.history.push(DEFAULT_ROUTE))
   }
 
   createNewVaultAndRestore () {
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index 029eb7d8e..247f3c8e2 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -133,7 +133,7 @@ class RevealSeedPage extends Component {
           }, [
             // cancel
             h('button.primary', {
-              onClick: () => history.goBack(),
+              onClick: () => history.push(DEFAULT_ROUTE),
             }, 'CANCEL'),
 
             // submit
diff --git a/ui/app/routes.js b/ui/app/routes.js
index d3b305b40..4b3f8f4d8 100644
--- a/ui/app/routes.js
+++ b/ui/app/routes.js
@@ -14,9 +14,13 @@ const SIGNATURE_REQUEST_ROUTE = '/confirm-transaction/signature-request'
 const NOTICE_ROUTE = '/notice'
 const WELCOME_ROUTE = '/welcome'
 const INITIALIZE_ROUTE = '/initialize'
+const INITIALIZE_CREATE_PASSWORD_ROUTE = '/initialize/create-password'
 const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/import-account'
 const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/import-with-seed-phrase'
 const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/unique-image'
+const INITIALIZE_NOTICE_ROUTE = '/initialize/notice'
+const INITIALIZE_BACKUP_PHRASE_ROUTE = '/initialize/backup-phrase'
+const INITIALIZE_CONFIRM_SEED_ROUTE = '/initialize/confirm-phrase'
 
 module.exports = {
   DEFAULT_ROUTE,
@@ -35,7 +39,11 @@ module.exports = {
   SIGNATURE_REQUEST_ROUTE,
   WELCOME_ROUTE,
   INITIALIZE_ROUTE,
+  INITIALIZE_CREATE_PASSWORD_ROUTE,
   INITIALIZE_IMPORT_ACCOUNT_ROUTE,
   INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
   INITIALIZE_UNIQUE_IMAGE_ROUTE,
+  INITIALIZE_NOTICE_ROUTE,
+  INITIALIZE_BACKUP_PHRASE_ROUTE,
+  INITIALIZE_CONFIRM_SEED_ROUTE,
 }
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index e483008c6..abbb97643 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -29,7 +29,7 @@ const {
   isTokenBalanceSufficient,
 } = require('./components/send/send-utils')
 const { isValidAddress } = require('./util')
-const { CONFIRM_TRANSACTION_ROUTE } = require('./routes')
+const { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } = require('./routes')
 
 SendTransactionScreen.contextTypes = {
   t: PropTypes.func,
@@ -201,7 +201,7 @@ SendTransactionScreen.prototype.renderHeader = function () {
     h('div.page-container__header-close', {
       onClick: () => {
         clearSend()
-        history.goBack()
+        history.push(DEFAULT_ROUTE)
       },
     }),
 
@@ -521,7 +521,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
     h('button.btn-secondary--lg.page-container__footer-button', {
       onClick: () => {
         clearSend()
-        history.goBack()
+        history.push(DEFAULT_ROUTE)
       },
     }, this.context.t('cancel')),
     h('button.btn-primary--lg.page-container__footer-button', {
diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js
index f32491b0d..99be179c6 100644
--- a/ui/app/welcome-screen.js
+++ b/ui/app/welcome-screen.js
@@ -3,9 +3,11 @@ import h from 'react-hyperscript'
 import { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
 import {closeWelcomeScreen} from './actions'
 import Mascot from './components/mascot'
-import { INITIALIZE_ROUTE } from './routes'
+import { INITIALIZE_CREATE_PASSWORD_ROUTE } from './routes'
 
 class WelcomeScreen extends Component {
   static propTypes = {
@@ -18,9 +20,18 @@ class WelcomeScreen extends Component {
     this.animationEventEmitter = new EventEmitter()
   }
 
+  componentWillMount () {
+    const { history, welcomeScreenSeen } = this.props
+
+    if (welcomeScreenSeen) {
+      console.log('SEENT', welcomeScreenSeen)
+      history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
+    }
+  }
+
   initiateAccountCreation = () => {
     this.props.closeWelcomeScreen()
-    this.props.history.push(INITIALIZE_ROUTE)
+    this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
   }
 
   render () {
@@ -51,9 +62,18 @@ class WelcomeScreen extends Component {
   }
 }
 
-export default connect(
-  null,
-  dispatch => ({
-    closeWelcomeScreen: () => dispatch(closeWelcomeScreen()),
-  })
+const mapStateToProps = ({ metamask: { welcomeScreenSeen } }) => {
+  return {
+    welcomeScreenSeen,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(
+    mapStateToProps,
+    dispatch => ({
+      closeWelcomeScreen: () => dispatch(closeWelcomeScreen()),
+    })
+  )
 )(WelcomeScreen)