Fix merge conflicts. Refactor onboarding flow.

5 files changed, 111 insertions, 58 deletions

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 8fee04d1c..c34391fa6 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,13 +1,19 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
 import { createNewVaultAndKeychain } from '../../../../ui/app/actions'
 import LoadingScreen from './loading-screen'
 import Breadcrumbs from './breadcrumbs'
-import { DEFAULT_ROUTE, IMPORT_ACCOUNT_ROUTE } from '../../../../ui/app/routes'
 import EventEmitter from 'events'
 import Mascot from '../../../../ui/app/components/mascot'
 import classnames from 'classnames'
+import {
+  DEFAULT_ROUTE,
+  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
+  INITIALIZE_IMPORT_ACCOUNT_ROUTE,
+} from '../../../../ui/app/routes'
 
 class CreatePasswordScreen extends Component {
   static propTypes = {
@@ -63,7 +69,7 @@ class CreatePasswordScreen extends Component {
   }
 
   render () {
-    const { isLoading, isMascara } = this.props
+    const { isLoading, isMascara, history } = this.props
 
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
@@ -114,7 +120,7 @@ class CreatePasswordScreen extends Component {
                 className="first-time-flow__link create-password__import-link"
                 onClick={e => {
                   e.preventDefault()
-                  history.push(IMPORT_ACCOUNT_ROUTE)
+                  history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
                 }}
               >
                 Import with seed phrase
@@ -125,7 +131,7 @@ class CreatePasswordScreen extends Component {
                 className="first-time-flow__link create-password__import-link"
                 onClick={e => {
                   e.preventDefault()
-                  goToImportAccount()
+                  history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE)
                 }}
               >
                 Import an account
@@ -140,18 +146,22 @@ class CreatePasswordScreen extends Component {
 }
 
 const mapStateToProps = state => {
-  const { metamask: { isInitialized, isUnlocked }, appState: { isLoading } } = state
+  const { metamask: { isInitialized, isUnlocked, isMascara }, appState: { isLoading } } = state
 
   return {
     isLoading,
     isInitialized,
     isUnlocked,
+    isMascara,
   }
 }
 
-export default connect(
-  mapStateToProps,
-  dispatch => ({
-    createAccount: password => dispatch(createNewVaultAndKeychain(password)),
-  })
+export default compose(
+  withRouter,
+  connect(
+    mapStateToProps,
+    dispatch => ({
+      createAccount: password => dispatch(createNewVaultAndKeychain(password)),
+    })
+  )
 )(CreatePasswordScreen)
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
index ab0aca0f0..fdcaa7199 100644
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -142,6 +142,7 @@ class ImportAccountScreen extends Component {
   render () {
     const { OPTIONS } = ImportAccountScreen
     const { selectedOption } = this.state
+    console.log('RENDER IMPORT')
 
     return this.props.isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index 86f02ceac..4eec37723 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -8,16 +8,16 @@ import {
   displayWarning,
   unMarkPasswordForgotten,
 } from '../../../../ui/app/actions'
+import { DEFAULT_ROUTE } from '../../../../ui/app/routes'
 
 class ImportSeedPhraseScreen extends Component {
   static propTypes = {
     warning: PropTypes.string,
-    back: PropTypes.func.isRequired,
-    next: PropTypes.func.isRequired,
     createNewVaultAndRestore: PropTypes.func.isRequired,
     hideWarning: PropTypes.func.isRequired,
     displayWarning: PropTypes.func,
     leaveImportSeedScreenState: PropTypes.func,
+    history: PropTypes.object,
   };
 
   state = {
@@ -64,14 +64,14 @@ class ImportSeedPhraseScreen extends Component {
     const { password, seedPhrase } = this.state
     const {
       createNewVaultAndRestore,
-      next,
       displayWarning,
       leaveImportSeedScreenState,
+      history,
     } = this.props
 
     leaveImportSeedScreenState()
     createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
-      .then(next)
+      .then(() => history.push(DEFAULT_ROUTE))
   }
 
   render () {
@@ -86,7 +86,7 @@ class ImportSeedPhraseScreen extends Component {
               className="import-account__back-button"
               onClick={e => {
                 e.preventDefault()
-                this.props.back()
+                this.props.history.goBack()
               }}
               href="#"
             >
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index b3494dec2..ea56a2f6e 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
+import { withRouter, Switch, Route, Redirect } from 'react-router-dom'
+import { compose } from 'recompose'
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
@@ -12,6 +14,13 @@ import {
   unMarkPasswordForgotten,
   showModal,
 } from '../../../../ui/app/actions'
+import {
+  DEFAULT_ROUTE,
+  WELCOME_ROUTE,
+  INITIALIZE_ROUTE,
+  INITIALIZE_IMPORT_ACCOUNT_ROUTE,
+  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
+} from '../../../../ui/app/routes'
 
 class FirstTimeFlow extends Component {
 
@@ -20,7 +29,10 @@ class FirstTimeFlow extends Component {
     seedWords: PropTypes.string,
     address: PropTypes.string,
     noActiveNotices: PropTypes.bool,
-    goToBuyEtherView: PropTypes.func.isRequired,
+    goToBuyEtherView: PropTypes.func,
+    isUnlocked: PropTypes.bool,
+    history: PropTypes.object,
+    welcomeScreenSeen: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -47,6 +59,14 @@ class FirstTimeFlow extends Component {
     }
   }
 
+  componentDidMount () {
+    const { isInitialized, isUnlocked, history } = this.props
+
+    if (isInitialized || isUnlocked) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
   setScreenType (screenType) {
     this.setState({ screenType })
   }
@@ -141,34 +161,54 @@ class FirstTimeFlow extends Component {
   }
 
   render () {
-    return (
-      <div className="first-time-flow">
-        {this.renderScreen()}
-      </div>
-    )
+    return this.props.welcomeScreenSeen
+      ? (
+        <div className="first-time-flow">
+          <Switch>
+            <Route exact path={INITIALIZE_IMPORT_ACCOUNT_ROUTE} component={ImportAccountScreen} />
+            <Route
+              exact
+              path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE}
+              component={ImportSeedPhraseScreen}
+            />
+            <Route exact path={INITIALIZE_ROUTE} component={CreatePasswordScreen} />
+          </Switch>
+        </div>
+      )
+      : <Redirect to={WELCOME_ROUTE } />
   }
-
 }
 
-export default connect(
-  ({
-    metamask: {
-      isInitialized,
-      seedWords,
-      noActiveNotices,
-      selectedAddress,
-      forgottenPassword,
-    }
-  }) => ({
+const mapStateToProps = ({ metamask }) => {
+  const {
+    isInitialized,
+    seedWords,
+    noActiveNotices,
+    selectedAddress,
+    forgottenPassword,
+    isMascara,
+    isUnlocked,
+    welcomeScreenSeen,
+  } = metamask
+
+  return {
+    isMascara,
     isInitialized,
     seedWords,
     noActiveNotices,
     address: selectedAddress,
     forgottenPassword,
-  }),
-  dispatch => ({
-    leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
-    openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
-  })
-)(FirstTimeFlow)
+    isUnlocked,
+    welcomeScreenSeen,
+  }
+}
 
+const mapDispatchToProps = dispatch => ({
+  leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
+  openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
+})
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(FirstTimeFlow)
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index caba71866..90213fe16 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -70,27 +70,29 @@ class NoticeScreen extends Component {
       isLoading
         ? <LoadingScreen />
         : (
-          <div className="first-view-main-wrapper">
-            <div className="first-view-main">
-              <div
-                className="tou"
-                onScroll={this.onScroll}
-              >
-                <Identicon address={address} diameter={70} />
-                <div className="tou__title">{title}</div>
-                <Markdown
-                  className="tou__body markdown"
-                  source={body}
-                  skipHtml
-                />
-                <button
-                  className="first-time-flow__button"
-                  onClick={atBottom && this.acceptTerms}
-                  disabled={!atBottom}
+          <div className="first-time-flow">
+            <div className="first-view-main-wrapper">
+              <div className="first-view-main">
+                <div
+                  className="tou"
+                  onScroll={this.onScroll}
                 >
-                  Accept
-                </button>
-                <Breadcrumbs total={3} currentIndex={2} />
+                  <Identicon address={address} diameter={70} />
+                  <div className="tou__title">{title}</div>
+                  <Markdown
+                    className="tou__body markdown"
+                    source={body}
+                    skipHtml
+                  />
+                  <button
+                    className="first-time-flow__button"
+                    onClick={atBottom && this.acceptTerms}
+                    disabled={!atBottom}
+                  >
+                    Accept
+                  </button>
+                  <Breadcrumbs total={3} currentIndex={2} />
+                </div>
               </div>
             </div>
           </div>