Fix merge conflicts. Refactor onboarding flow.

13 files changed, 65 insertions, 33 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index d114cde09..2b6d5fc62 100644
--- a/ui/app/app.js
+++ b/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, {
-          path: INITIALIZE_ROUTE,
+        h(Route, {
+          path: WELCOME_ROUTE,
           exact,
-          component: InitializeMenuScreen,
-          mascaraComponent: MascaraCreatePassword,
+          component: WelcomeScreen,
+        }),
+        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,
-          mascaraComponent: MascaraNoticeScreen,
+          component: 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'})
     //   // }
     // }
 
diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index 782ce79ae..3b7a65b21 100644
--- a/ui/app/components/pages/add-token.js
+++ b/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,
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js
index fc9031a65..8031ea36d 100644
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/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
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index ef056b1b1..554a67df4 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/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'
 
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
index f48feeb0e..a30492e3b 100644
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/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,
diff --git a/ui/app/components/pages/create-account/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js
index 9ffc669a2..85fa93faa 100644
--- a/ui/app/components/pages/create-account/import-account/seed.js
+++ b/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)
 
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index 889ae9206..ceeb8a05b 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/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) {
diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js
index 87479c84e..cb1782562 100644
--- a/ui/app/components/pages/settings/info.js
+++ b/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')
               ),
             ]),
           ]),
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
index 6ce0556db..219ace651 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/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
 
diff --git a/ui/app/components/pages/signature-request.js b/ui/app/components/pages/signature-request.js
index 2e7f3ea20..e9271fce1 100644
--- a/ui/app/components/pages/signature-request.js
+++ b/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')
 
diff --git a/ui/app/routes.js b/ui/app/routes.js
index 8b4501fe3..aadf91cf5 100644
--- a/ui/app/routes.js
+++ b/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,
 }
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index df819dbd8..9e0ede720 100644
--- a/ui/app/send-v2.js
+++ b/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()
       },
     }),
 
diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js
index cdbb6dba8..f32491b0d 100644
--- a/ui/app/welcome-screen.js
+++ b/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 () {