Fix merge conflicts. Refactor onboarding flow.

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(
+export default compose(
-  mapStateToProps,
+  withRouter,
-  dispatch => ({
+  connect(
-    createAccount: password => dispatch(createNewVaultAndKeychain(password)),
+    mapStateToProps,
-  })
+    dispatch => ({
+      createAccount: password => dispatch(createNewVaultAndKeychain(password)),
+    })
+  )
 )(CreatePasswordScreen)

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" />

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="#"
             >

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 (
+    return this.props.welcomeScreenSeen
-      <div className="first-time-flow">
+      ? (
-        {this.renderScreen()}
+        <div className="first-time-flow">
-      </div>
+          <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(
+const mapStateToProps = ({ metamask }) => {
-  ({
+  const {
-    metamask: {
+    isInitialized,
-      isInitialized,
+    seedWords,
-      seedWords,
+    noActiveNotices,
-      noActiveNotices,
+    selectedAddress,
-      selectedAddress,
+    forgottenPassword,
-      forgottenPassword,
+    isMascara,
-    }
+    isUnlocked,
-  }) => ({
+    welcomeScreenSeen,
+  } = metamask
+
+  return {
+    isMascara,
     isInitialized,
     seedWords,
     noActiveNotices,
     address: selectedAddress,
     forgottenPassword,
-  }),
+    isUnlocked,
-  dispatch => ({
+    welcomeScreenSeen,
-    leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
+  }
-    openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
+}
-  })
-)(FirstTimeFlow)
 
+const mapDispatchToProps = dispatch => ({
+  leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
+  openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
+})
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(FirstTimeFlow)

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-time-flow">
-            <div className="first-view-main">
+            <div className="first-view-main-wrapper">
-              <div
+              <div className="first-view-main">
-                className="tou"
+                <div
-                onScroll={this.onScroll}
+                  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}
                 >
-                  Accept
+                  <Identicon address={address} diameter={70} />
-                </button>
+                  <div className="tou__title">{title}</div>
-                <Breadcrumbs total={3} currentIndex={2} />
+                  <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>

ui/app/app.js

@@ -1,21 +1,23 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const { connect } = require('react-redux')
-const { Switch, Redirect, withRouter } = require('react-router-dom')
+const { Route, Switch, Redirect, withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const h = require('react-hyperscript')
 const actions = require('./actions')
 const classnames = require('classnames')
 const t = require('../i18n')
 
+// init
+const InitializeScreen = require('../../mascara/src/app/first-time').default
+const WelcomeScreen = require('./welcome-screen').default
+const NewKeyChainScreen = require('./new-keychain')
 // mascara
 const MascaraCreatePassword = require('../../mascara/src/app/first-time/create-password-screen').default
 const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default
 const MascaraNoticeScreen = require('../../mascara/src/app/first-time/notice-screen').default
 const MascaraSeedScreen = require('../../mascara/src/app/first-time/seed-screen').default
 const MascaraConfirmSeedScreen = require('../../mascara/src/app/first-time/confirm-seed-screen').default
-// init
-const NewKeyChainScreen = require('./new-keychain')
 
 // accounts
 const MainContainer = require('./main-container')
@@ -28,7 +30,6 @@ const WalletView = require('./components/wallet-view')
 // other views
 const Authenticated = require('./components/pages/authenticated')
 const Initialized = require('./components/pages/initialized')
-const MetamaskRoute = require('./components/pages/metamask-route')
 const Settings = require('./components/pages/settings')
 const UnlockPage = require('./components/pages/unlock')
 const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
@@ -65,6 +66,7 @@ const {
   INITIALIZE_ROUTE,
   NOTICE_ROUTE,
   SIGNATURE_REQUEST_ROUTE,
+  WELCOME_ROUTE,
 } = require('./routes')
 
 class App extends Component {
@@ -87,11 +89,14 @@ class App extends Component {
 
     return (
       h(Switch, [
-        h(MetamaskRoute, {
+        h(Route, {
-          path: INITIALIZE_ROUTE,
+          path: WELCOME_ROUTE,
           exact,
-          component: InitializeMenuScreen,
+          component: WelcomeScreen,
-          mascaraComponent: MascaraCreatePassword,
+        }),
+        h(Route, {
+          path: INITIALIZE_ROUTE,
+          component: InitializeScreen,
         }),
         h(Initialized, {
           path: REVEAL_SEED_ROUTE,
@@ -110,8 +115,7 @@ class App extends Component {
         h(Initialized, {
           path: NOTICE_ROUTE,
           exact,
-          component: NoticeScreen,
+          component: MascaraNoticeScreen,
-          mascaraComponent: MascaraNoticeScreen,
         }),
         h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }),
         h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }),
@@ -465,7 +469,7 @@ class App extends Component {
 
     //   //   default:
     //   //     log.debug('rendering menu screen')
-    //   //     return h(InitializeMenuScreen, {key: 'menuScreenInit'})
+    //   //     return h(InitializeScreen, {key: 'menuScreenInit'})
     //   // }
     // }
 

ui/app/components/pages/add-token.js

@@ -25,7 +25,7 @@ const fuse = new Fuse(contractList, {
 })
 const actions = require('../../actions')
 const ethUtil = require('ethereumjs-util')
-const t = require('../i18n')
+const t = require('../../../i18n')
 const { tokenInfoGetter } = require('../../token-util')
 const { DEFAULT_ROUTE } = require('../../routes')
 
@@ -409,7 +409,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.goBack(),
       }, t('cancel')),
       h('button.btn-primary--lg.add-token__confirm-button', {
         onClick: this.onNext,

ui/app/components/pages/create-account/import-account/index.js

@@ -2,7 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const t = require('../../../i18n')
+const t = require('../../../../../i18n')
 import Select from 'react-select'
 
 // Subviews

ui/app/components/pages/create-account/import-account/json.js

@@ -6,7 +6,7 @@ const { compose } = require('recompose')
 const { connect } = require('react-redux')
 const actions = require('../../../../actions')
 const FileInput = require('react-simple-file-input').default
-const t = require('../../../i18n')
+const t = require('../../../../../i18n')
 const { DEFAULT_ROUTE } = require('../../../../routes')
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 

ui/app/components/pages/create-account/import-account/private-key.js

@@ -6,7 +6,7 @@ const { compose } = require('recompose')
 const { connect } = require('react-redux')
 const actions = require('../../../../actions')
 const { DEFAULT_ROUTE } = require('../../../../routes')
-const t = require('../../../i18n')
+const t = require('../../../../../i18n')
 
 module.exports = compose(
   withRouter,

ui/app/components/pages/create-account/import-account/seed.js

@@ -2,7 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const t = require('../../../i18n')
+const t = require('../../../../../i18n')
 
 module.exports = connect(mapStateToProps)(SeedImportSubview)
 

ui/app/components/pages/create-account/new-account.js

@@ -4,7 +4,7 @@ const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
-const t = require('../../../i18n')
+const t = require('../../../../i18n')
 
 class NewAccountCreateForm extends Component {
   constructor (props) {

ui/app/components/pages/settings/info.js

@@ -1,6 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
+const t = require('../../../../i18n')
 
 class Info extends Component {
   renderLogo () {
@@ -14,13 +15,13 @@ class Info extends Component {
   renderInfoLinks () {
     return (
       h('div.settings__content-item.settings__content-item--without-height', [
-        h('div.settings__info-link-header', 'Links'),
+        h('div.settings__info-link-header', t('links')),
         h('div.settings__info-link-item', [
           h('a', {
             href: 'https://metamask.io/privacy.html',
             target: '_blank',
           }, [
-            h('span.settings__info-link', 'Privacy Policy'),
+            h('span.settings__info-link', t('privacyMsg')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -28,7 +29,7 @@ class Info extends Component {
             href: 'https://metamask.io/terms.html',
             target: '_blank',
           }, [
-            h('span.settings__info-link', 'Terms of Use'),
+            h('span.settings__info-link', t('terms')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -36,7 +37,7 @@ class Info extends Component {
             href: 'https://metamask.io/attributions.html',
             target: '_blank',
           }, [
-            h('span.settings__info-link', 'Attributions'),
+            h('span.settings__info-link', t('attributions')),
           ]),
         ]),
         h('hr.settings__info-separator'),
@@ -45,7 +46,7 @@ class Info extends Component {
             href: 'https://support.metamask.io',
             target: '_blank',
           }, [
-            h('span.settings__info-link', 'Visit our Support Center'),
+            h('span.settings__info-link', t('supportCenter')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -53,7 +54,7 @@ class Info extends Component {
             href: 'https://metamask.io/',
             target: '_blank',
           }, [
-            h('span.settings__info-link', 'Visit our web site'),
+            h('span.settings__info-link', t('visitWebSite')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -61,7 +62,7 @@ class Info extends Component {
             target: '_blank',
             href: 'mailto:help@metamask.io?subject=Feedback',
           }, [
-            h('span.settings__info-link', 'Email us!'),
+            h('span.settings__info-link', t('emailUs')),
           ]),
         ]),
       ])
@@ -81,7 +82,7 @@ class Info extends Component {
             h('div.settings__info-item', [
               h(
                 'div.settings__info-about',
-                'MetaMask is designed and built in California.'
+                t('builtInCalifornia')
               ),
             ]),
           ]),

ui/app/components/pages/settings/settings.js

@@ -12,7 +12,7 @@ const SimpleDropdown = require('../../dropdowns/simple-dropdown')
 const ToggleButton = require('react-toggle-button')
 const { REVEAL_SEED_ROUTE } = require('../../../routes')
 const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/config').enums
-const t = require('../i18n')
+const t = require('../../../../i18n')
 
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@@ -237,6 +237,24 @@ class Settings extends Component {
     )
   }
 
+  renderResetAccount () {
+    const { showResetAccountConfirmationModal } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', t('resetAccount')),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h('button.btn-primary--lg.settings__button--orange', {
+            onClick (event) {
+              event.preventDefault()
+              showResetAccountConfirmationModal()
+            },
+          }, t('resetAccount')),
+        ]),
+      ]),
+    ])
+  }
+
   render () {
     const { warning, isMascara } = this.props
 

ui/app/components/pages/signature-request.js

@@ -8,7 +8,7 @@ const classnames = require('classnames')
 
 const AccountDropdownMini = require('../dropdowns/account-dropdown-mini')
 
-const t = require('../../i18n')
+const t = require('../../../i18n')
 const { conversionUtil } = require('../../conversion-util')
 const { DEFAULT_ROUTE } = require('../../routes')
 

ui/app/routes.js

@@ -10,9 +10,12 @@ const NEW_ACCOUNT_ROUTE = '/new-account'
 const IMPORT_ACCOUNT_ROUTE = '/new-account/import'
 const SEND_ROUTE = '/send'
 const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
-const INITIALIZE_ROUTE = '/initialize'
 const NOTICE_ROUTE = '/notice'
 const SIGNATURE_REQUEST_ROUTE = '/signature-request'
+const WELCOME_ROUTE = '/welcome'
+const INITIALIZE_ROUTE = '/initialize'
+const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/import-account'
+const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/import-with-seed-phrase'
 
 module.exports = {
   DEFAULT_ROUTE,
@@ -27,7 +30,10 @@ module.exports = {
   IMPORT_ACCOUNT_ROUTE,
   SEND_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
-  INITIALIZE_ROUTE,
   NOTICE_ROUTE,
   SIGNATURE_REQUEST_ROUTE,
+  WELCOME_ROUTE,
+  INITIALIZE_ROUTE,
+  INITIALIZE_IMPORT_ACCOUNT_ROUTE,
+  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
 }

ui/app/send-v2.js

@@ -186,7 +186,7 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
 }
 
 SendTransactionScreen.prototype.renderHeader = function () {
-  const { selectedToken, clearSend, goHome } = this.props
+  const { selectedToken, clearSend, history } = this.props
 
   return h('div.page-container__header', [
 
@@ -197,7 +197,7 @@ SendTransactionScreen.prototype.renderHeader = function () {
     h('div.page-container__header-close', {
       onClick: () => {
         clearSend()
-        goHome()
+        history.goBack()
       },
     }),
 

ui/app/welcome-screen.js

@@ -5,19 +5,22 @@ import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {closeWelcomeScreen} from './actions'
 import Mascot from './components/mascot'
+import { INITIALIZE_ROUTE } from './routes'
 
 class WelcomeScreen extends Component {
   static propTypes = {
     closeWelcomeScreen: PropTypes.func.isRequired,
+    history: PropTypes.object,
   }
 
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.animationEventEmitter = new EventEmitter()
   }
 
   initiateAccountCreation = () => {
     this.props.closeWelcomeScreen()
+    this.props.history.push(INITIALIZE_ROUTE)
   }
 
   render () {