12 files changed, 299 insertions, 115 deletions

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index f031f2446..ddb751a64 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -8,7 +8,13 @@ const actions = require('../../actions')
 const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
 const Identicon = require('../identicon')
 const { formatBalance } = require('../../util')
-const { SETTINGS_ROUTE, INFO_ROUTE, IMPORT_ACCOUNT_ROUTE, DEFAULT_ROUTE } = require('../../routes')
+const {
+  SETTINGS_ROUTE,
+  INFO_ROUTE,
+  NEW_ACCOUNT_ROUTE,
+  IMPORT_ACCOUNT_ROUTE,
+  DEFAULT_ROUTE,
+} = require('../../routes')
 
 module.exports = compose(
   withRouter,
@@ -86,12 +92,18 @@ AccountMenu.prototype.render = function () {
     h('div.account-menu__accounts', this.renderAccounts()),
     h(Divider),
     h(Item, {
-      onClick: () => showNewAccountPage('CREATE'),
+      onClick: () => {
+        toggleAccountMenu()
+        history.push(NEW_ACCOUNT_ROUTE)
+      },
       icon: h('img', { src: 'images/plus-btn-white.svg' }),
       text: 'Create Account',
     }),
     h(Item, {
-      onClick: () => showNewAccountPage('IMPORT'),
+      onClick: () => {
+        toggleAccountMenu()
+        history.push(IMPORT_ACCOUNT_ROUTE)
+      },
       icon: h('img', { src: 'images/import-account.svg' }),
       text: 'Import Account',
     }),
diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index 0454ee2f1..080f3eca5 100644
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@@ -27,7 +27,6 @@ const fuse = new Fuse(contractList, {
 const actions = require('../../actions')
 const ethUtil = require('ethereumjs-util')
 const { tokenInfoGetter } = require('../../token-util')
-const R = require('ramda')
 const { DEFAULT_ROUTE } = require('../../routes')
 
 const emptyAddr = '0x0000000000000000000000000000000000000000'
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js
new file mode 100644
index 000000000..0c901c09b
--- /dev/null
+++ b/ui/app/components/pages/create-account/import-account/index.js
@@ -0,0 +1,80 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+import Select from 'react-select'
+
+// Subviews
+const JsonImportView = require('./json.js')
+const PrivateKeyImportView = require('./private-key.js')
+
+const menuItems = [
+  'Private Key',
+  'JSON File',
+]
+
+module.exports = connect(mapStateToProps)(AccountImportSubview)
+
+function mapStateToProps (state) {
+  return {
+    menuItems,
+  }
+}
+
+inherits(AccountImportSubview, Component)
+function AccountImportSubview () {
+  Component.call(this)
+}
+
+AccountImportSubview.prototype.render = function () {
+  const props = this.props
+  const state = this.state || {}
+  const { menuItems } = props
+  const { type } = state
+
+  return (
+    h('div.new-account-import-form', [
+
+      h('div.new-account-import-form__select-section', [
+
+        h('div.new-account-import-form__select-label', 'SELECT TYPE'),
+
+        h(Select, {
+          className: 'new-account-import-form__select',
+          name: 'import-type-select',
+          clearable: false,
+          value: type || menuItems[0],
+          options: menuItems.map((type) => {
+            return {
+              value: type,
+              label: type,
+            }
+          }),
+          onChange: (opt) => {
+            this.setState({ type: opt.value })
+          },
+        }),
+
+      ]),
+
+      this.renderImportView(),
+    ])
+  )
+}
+
+AccountImportSubview.prototype.renderImportView = function () {
+  const props = this.props
+  const state = this.state || {}
+  const { type } = state
+  const { menuItems } = props
+  const current = type || menuItems[0]
+
+  switch (current) {
+    case 'Private Key':
+      return h(PrivateKeyImportView)
+    case 'JSON File':
+      return h(JsonImportView)
+    default:
+      return h(JsonImportView)
+  }
+}
diff --git a/ui/app/components/pages/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index c7d232d30..36644f1a0 100644
--- a/ui/app/components/pages/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -1,13 +1,19 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const { connect } = require('react-redux')
+const actions = require('../../../../actions')
 const FileInput = require('react-simple-file-input').default
+const { DEFAULT_ROUTE } = require('../../../../routes')
 
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 
-module.exports = connect(mapStateToProps)(JsonImportSubview)
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps)
+)(JsonImportSubview)
 
 function mapStateToProps (state) {
   return {
@@ -50,7 +56,7 @@ JsonImportSubview.prototype.render = function () {
       h('div.new-account-create-form__buttons', {}, [
 
         h('button.new-account-create-form__button-cancel', {
-          onClick: () => this.props.goHome(),
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, [
           'CANCEL',
         ]),
diff --git a/ui/app/components/pages/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
index a236d90ee..785bf2cb6 100644
--- a/ui/app/components/pages/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -1,10 +1,16 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const { connect } = require('react-redux')
+const actions = require('../../../../actions')
+const { DEFAULT_ROUTE } = require('../../../../routes')
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView)
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(PrivateKeyImportView)
 
 function mapStateToProps (state) {
   return {
@@ -14,9 +20,8 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    goHome: () => dispatch(actions.goHome()),
     importNewAccount: (strategy, [ privateKey ]) => {
-      dispatch(actions.importNewAccount(strategy, [ privateKey ]))
+      return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
     },
     displayWarning: () => dispatch(actions.displayWarning(null)),
   }
@@ -28,7 +33,7 @@ function PrivateKeyImportView () {
 }
 
 PrivateKeyImportView.prototype.render = function () {
-  const { error, goHome } = this.props
+  const { error } = this.props
 
   return (
     h('div.new-account-import-form__private-key', [
@@ -43,7 +48,7 @@ PrivateKeyImportView.prototype.render = function () {
       h('div.new-account-create-form__buttons', {}, [
 
         h('button.new-account-create-form__button-cancel', {
-          onClick: () => goHome(),
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, [
           'CANCEL',
         ]),
@@ -71,6 +76,8 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
 PrivateKeyImportView.prototype.createNewKeychain = function () {
   const input = document.getElementById('private-key-box')
   const privateKey = input.value
+  const { importNewAccount, history } = this.props
 
-  this.props.importNewAccount('Private Key', [ privateKey ])
+  importNewAccount('Private Key', [ privateKey ])
+    .then(() => history.push(DEFAULT_ROUTE))
 }
diff --git a/ui/app/components/pages/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js
index b4a7c0afa..b4a7c0afa 100644
--- a/ui/app/components/pages/import-account/seed.js
+++ b/ui/app/components/pages/create-account/import-account/seed.js
diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js
new file mode 100644
index 000000000..0962477d8
--- /dev/null
+++ b/ui/app/components/pages/create-account/index.js
@@ -0,0 +1,81 @@
+const Component = require('react').Component
+const { Switch, Route, matchPath } = require('react-router-dom')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../actions')
+const { getCurrentViewContext } = require('../../../selectors')
+const classnames = require('classnames')
+const NewAccountCreateForm = require('./new-account')
+const NewAccountImportForm = require('./import-account')
+const { NEW_ACCOUNT_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../../routes')
+
+class CreateAccountPage extends Component {
+  renderTabs () {
+    const { history, location } = this.props
+
+    return h('div.new-account__tabs', [
+      h('div.new-account__tabs__tab', {
+        className: classnames('new-account__tabs__tab', {
+          'new-account__tabs__selected': matchPath(location.pathname, {
+            path: NEW_ACCOUNT_ROUTE, exact: true,
+          }),
+        }),
+        onClick: () => history.push(NEW_ACCOUNT_ROUTE),
+      }, 'Create'),
+
+      h('div.new-account__tabs__tab', {
+        className: classnames('new-account__tabs__tab', {
+          'new-account__tabs__selected': matchPath(location.pathname, {
+            path: IMPORT_ACCOUNT_ROUTE, exact: true,
+          }),
+        }),
+        onClick: () => history.push(IMPORT_ACCOUNT_ROUTE),
+      }, 'Import'),
+    ])
+  }
+
+  render () {
+    return h('div.new-account', {}, [
+      h('div.new-account__header', [
+        h('div.new-account__title', 'New Account'),
+        this.renderTabs(),
+      ]),
+      h('div.new-account__form', [
+        h(Switch, [
+          h(Route, {
+            exact: true,
+            path: NEW_ACCOUNT_ROUTE,
+            component: NewAccountCreateForm,
+          }),
+          h(Route, {
+            exact: true,
+            path: IMPORT_ACCOUNT_ROUTE,
+            component: NewAccountImportForm,
+          }),
+        ]),
+      ]),
+    ])
+  }
+}
+
+CreateAccountPage.propTypes = {
+  location: PropTypes.object,
+  history: PropTypes.object,
+}
+
+const mapStateToProps = state => ({
+  displayedForm: getCurrentViewContext(state),
+})
+
+const mapDispatchToProps = dispatch => ({
+  displayForm: form => dispatch(actions.setNewAccountForm(form)),
+  showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+  showExportPrivateKeyModal: () => {
+    dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+  },
+  hideModal: () => dispatch(actions.hideModal()),
+  saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
+})
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage)
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
new file mode 100644
index 000000000..a3bfefc84
--- /dev/null
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -0,0 +1,95 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../../actions')
+const { DEFAULT_ROUTE } = require('../../../routes')
+
+class NewAccountCreateForm extends Component {
+  constructor (props) {
+    super(props)
+    const { numberOfExistingAccounts = 0 } = props
+    const newAccountNumber = numberOfExistingAccounts + 1
+
+    this.state = {
+      newAccountName: `Account ${newAccountNumber}`,
+    }
+  }
+
+  render () {
+    const { newAccountName } = this.state
+    const { history, createAccount } = this.props
+
+    return h('div.new-account-create-form', [
+
+      h('div.new-account-create-form__input-label', {}, [
+        'Account Name',
+      ]),
+
+      h('div.new-account-create-form__input-wrapper', {}, [
+        h('input.new-account-create-form__input', {
+          value: this.state.newAccountName,
+          placeholder: 'E.g. My new account',
+          onChange: event => this.setState({ newAccountName: event.target.value }),
+        }, []),
+      ]),
+
+      h('div.new-account-create-form__buttons', {}, [
+
+        h('button.new-account-create-form__button-cancel', {
+          onClick: () => history.push(DEFAULT_ROUTE),
+        }, [
+          'CANCEL',
+        ]),
+
+        h('button.new-account-create-form__button-create', {
+          onClick: () => {
+            createAccount(newAccountName)
+              .then(() => history.push(DEFAULT_ROUTE))
+          },
+        }, [
+          'CREATE',
+        ]),
+
+      ]),
+
+    ])
+  }
+}
+
+NewAccountCreateForm.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  createAccount: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+  history: PropTypes.object,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { network, selectedAddress, identities = {} } } = state
+  const numberOfExistingAccounts = Object.keys(identities).length
+
+  return {
+    network,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    toCoinbase: address => dispatch(actions.buyEth({ network: '1', address, amount: 0 })),
+    hideModal: () => dispatch(actions.hideModal()),
+    createAccount: newAccountName => {
+      return dispatch(actions.addNewAccount())
+        .then(newAccountAddress => {
+          if (newAccountName) {
+            dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+          }
+        })
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm)
diff --git a/ui/app/components/pages/import-account/index.js b/ui/app/components/pages/import-account/index.js
deleted file mode 100644
index 481ed6a4b..000000000
--- a/ui/app/components/pages/import-account/index.js
+++ /dev/null
@@ -1,95 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const PropTypes = require('prop-types')
-import Select from 'react-select'
-
-// Subviews
-const JsonImportView = require('./json.js')
-const PrivateKeyImportView = require('./private-key.js')
-
-const PRIVATE_KEY_MENU_ITEM = 'Private Key'
-const JSON_FILE_MENU_ITEM = 'JSON File'
-
-class ImportAccount extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      current: PRIVATE_KEY_MENU_ITEM,
-      menuItems: [ PRIVATE_KEY_MENU_ITEM, JSON_FILE_MENU_ITEM ],
-    }
-  }
-
-  renderImportView () {
-    const { current } = this.state
-
-    switch (current) {
-      case 'Private Key':
-        return h(PrivateKeyImportView)
-      case 'JSON File':
-        return h(JsonImportView)
-      default:
-        return h(JsonImportView)
-    }
-  }
-
-  render () {
-    const { history } = this.props
-    const { current, menuItems } = this.state
-
-    return (
-      h('div.flex-center', {
-        style: {
-          flexDirection: 'column',
-          marginTop: '32px',
-        },
-      }, [
-        h('.section-title.flex-row.flex-center', [
-          h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-            onClick: history.goBack,
-          }),
-          h('h2.page-subtitle', 'Import Accounts'),
-        ]),
-        h('div', {
-          style: {
-            padding: '10px 0',
-            width: '260px',
-            color: 'rgb(174, 174, 174)',
-          },
-        }, [
-
-          h('h3', { style: { padding: '3px' } }, 'SELECT TYPE'),
-
-          h('style', `
-            .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label {
-              color: rgb(174,174,174);
-            }
-          `),
-
-          h(Select, {
-            name: 'import-type-select',
-            clearable: false,
-            value: current,
-            options: menuItems.map(type => {
-              return {
-                value: type,
-                label: type,
-              }
-            }),
-            onChange: opt => {
-              this.setState({ current: opt.value })
-            },
-          }),
-        ]),
-
-        this.renderImportView(),
-      ])
-    )
-  }
-}
-
-ImportAccount.propTypes = {
-  history: PropTypes.object,
-}
-
-module.exports = ImportAccount
diff --git a/ui/app/components/pages/settings/index.js b/ui/app/components/pages/settings/index.js
index 39e9b26ed..384ae4b41 100644
--- a/ui/app/components/pages/settings/index.js
+++ b/ui/app/components/pages/settings/index.js
@@ -5,7 +5,7 @@ const h = require('react-hyperscript')
 const TabBar = require('../../tab-bar')
 const Settings = require('./settings')
 const Info = require('./info')
-const { SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes')
+const { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes')
 
 class Config extends Component {
   renderTabs () {
@@ -30,7 +30,7 @@ class Config extends Component {
       h('.main-container.settings', {}, [
         h('.settings__header', [
           h('div.settings__close-button', {
-            onClick: () => history.push('/'),
+            onClick: () => history.push(DEFAULT_ROUTE),
           }),
           this.renderTabs(),
         ]),
diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js
index d8155eb9b..87479c84e 100644
--- a/ui/app/components/pages/settings/info.js
+++ b/ui/app/components/pages/settings/info.js
@@ -100,7 +100,6 @@ Info.propTypes = {
   displayWarning: PropTypes.func,
   revealSeedConfirmation: PropTypes.func,
   warning: PropTypes.string,
-  goHome: PropTypes.func,
   location: PropTypes.object,
   history: PropTypes.object,
 }
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
index fb3f20a95..5506df1ae 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@@ -11,7 +11,7 @@ const { exportAsFile } = require('../../../util')
 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 { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/config').enums
 
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {