Folder restructure (#6304)

* Remove ui/app/keychains/

* Remove ui/app/img/ (unused images)

* Move conversion-util to helpers/utils/

* Move token-util to helpers/utils/

* Move /helpers/*.js inside /helpers/utils/

* Move util tests inside /helpers/utils/

* Renameand move confirm-transaction/util.js to helpers/utils/

* Move higher-order-components to helpers/higher-order-components/

* Move infura-conversion.json to helpers/constants/

* Move all utility functions to helpers/utils/

* Move pages directory to top-level

* Move all constants to helpers/constants/

* Move metametrics inside helpers/

* Move app and root inside pages/

* Move routes inside helpers/

* Re-organize ducks/

* Move reducers to ducks/

* Move selectors inside selectors/

* Move test out of test folder

* Move action, reducer, store inside store/

* Move ui components inside ui/

* Move UI components inside ui/

* Move connected components inside components/app/

* Move i18n-helper inside helpers/

* Fix unit tests

* Fix unit test

* Move pages components

* Rename routes component

* Move reducers to ducks/index

* Fix bad path in unit test

9 files changed, 1367 insertions, 0 deletions

diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js
new file mode 100644
index 000000000..617fb8833
--- /dev/null
+++ b/ui/app/pages/create-account/connect-hardware/account-list.js
@@ -0,0 +1,205 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const genAccountLink = require('../../../../lib/account-link.js')
+const Select = require('react-select').default
+import Button from '../../../components/ui/button'
+
+class AccountList extends Component {
+    constructor (props, context) {
+        super(props)
+    }
+
+    getHdPaths () {
+      return [
+        {
+          label: `Ledger Live`,
+          value: `m/44'/60'/0'/0/0`,
+        },
+        {
+          label: `Legacy (MEW / MyCrypto)`,
+          value: `m/44'/60'/0'`,
+        },
+      ]
+    }
+
+    goToNextPage = () => {
+      // If we have < 5 accounts, it's restricted by BIP-44
+      if (this.props.accounts.length === 5) {
+        this.props.getPage(this.props.device, 1, this.props.selectedPath)
+      } else {
+        this.props.onAccountRestriction()
+      }
+    }
+
+    goToPreviousPage = () => {
+      this.props.getPage(this.props.device, -1, this.props.selectedPath)
+    }
+
+    renderHdPathSelector () {
+      const { onPathChange, selectedPath } = this.props
+
+      const options = this.getHdPaths()
+      return h('div', [
+        h('h3.hw-connect__hdPath__title', {}, this.context.t('selectHdPath')),
+        h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')),
+        h('div.hw-connect__hdPath', [
+          h(Select, {
+            className: 'hw-connect__hdPath__select',
+            name: 'hd-path-select',
+            clearable: false,
+            value: selectedPath,
+            options,
+            onChange: (opt) => {
+              onPathChange(opt.value)
+            },
+          }),
+        ]),
+      ])
+    }
+
+    capitalizeDevice (device) {
+      return device.slice(0, 1).toUpperCase() + device.slice(1)
+    }
+
+    renderHeader () {
+      const { device } = this.props
+      return (
+        h('div.hw-connect', [
+
+          h('h3.hw-connect__unlock-title', {}, `${this.context.t('unlock')} ${this.capitalizeDevice(device)}`),
+
+          device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null,
+
+          h('h3.hw-connect__hdPath__title', {}, this.context.t('selectAnAccount')),
+          h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
+        ])
+      )
+    }
+
+    renderAccounts () {
+        return h('div.hw-account-list', [
+            this.props.accounts.map((a, i) => {
+
+                return h('div.hw-account-list__item', { key: a.address }, [
+                h('div.hw-account-list__item__radio', [
+                    h('input', {
+                        type: 'radio',
+                        name: 'selectedAccount',
+                        id: `address-${i}`,
+                        value: a.index,
+                        onChange: (e) => this.props.onAccountChange(e.target.value),
+                        checked: this.props.selectedAccount === a.index.toString(),
+                    }),
+                    h(
+                    'label.hw-account-list__item__label',
+                    {
+                        htmlFor: `address-${i}`,
+                    },
+                    [
+                      h('span.hw-account-list__item__index', a.index + 1),
+                      `${a.address.slice(0, 4)}...${a.address.slice(-4)}`,
+                      h('span.hw-account-list__item__balance', `${a.balance}`),
+                    ]),
+                ]),
+                h(
+                    'a.hw-account-list__item__link',
+                    {
+                    href: genAccountLink(a.address, this.props.network),
+                    target: '_blank',
+                    title: this.context.t('etherscanView'),
+                    },
+                    h('img', { src: 'images/popout.svg' })
+                ),
+                ])
+            }),
+        ])
+    }
+
+  renderPagination () {
+    return h('div.hw-list-pagination', [
+      h(
+        'button.hw-list-pagination__button',
+        {
+          onClick: this.goToPreviousPage,
+        },
+        `< ${this.context.t('prev')}`
+      ),
+
+      h(
+        'button.hw-list-pagination__button',
+        {
+          onClick: this.goToNextPage,
+        },
+        `${this.context.t('next')} >`
+      ),
+    ])
+  }
+
+  renderButtons () {
+    const disabled = this.props.selectedAccount === null
+    const buttonProps = {}
+    if (disabled) {
+      buttonProps.disabled = true
+    }
+
+    return h('div.new-account-connect-form__buttons', {}, [
+      h(Button, {
+        type: 'default',
+        large: true,
+        className: 'new-account-connect-form__button',
+        onClick: this.props.onCancel.bind(this),
+      }, [this.context.t('cancel')]),
+
+      h(Button, {
+        type: 'confirm',
+        large: true,
+        className: 'new-account-connect-form__button unlock',
+        disabled,
+        onClick: this.props.onUnlockAccount.bind(this, this.props.device),
+      }, [this.context.t('unlock')]),
+    ])
+  }
+
+  renderForgetDevice () {
+    return h('div.hw-forget-device-container', {}, [
+      h('a', {
+        onClick: this.props.onForgetDevice.bind(this, this.props.device),
+      }, this.context.t('forgetDevice')),
+    ])
+  }
+
+  render () {
+    return h('div.new-account-connect-form.account-list', {}, [
+        this.renderHeader(),
+        this.renderAccounts(),
+        this.renderPagination(),
+        this.renderButtons(),
+        this.renderForgetDevice(),
+    ])
+  }
+
+}
+
+
+AccountList.propTypes = {
+    onPathChange: PropTypes.func.isRequired,
+    selectedPath: PropTypes.string.isRequired,
+    device: PropTypes.string.isRequired,
+    accounts: PropTypes.array.isRequired,
+    onAccountChange: PropTypes.func.isRequired,
+    onForgetDevice: PropTypes.func.isRequired,
+    getPage: PropTypes.func.isRequired,
+    network: PropTypes.string,
+    selectedAccount: PropTypes.string,
+    history: PropTypes.object,
+    onUnlockAccount: PropTypes.func,
+    onCancel: PropTypes.func,
+    onAccountRestriction: PropTypes.func,
+}
+
+AccountList.contextTypes = {
+    t: PropTypes.func,
+}
+
+module.exports = AccountList
diff --git a/ui/app/pages/create-account/connect-hardware/connect-screen.js b/ui/app/pages/create-account/connect-hardware/connect-screen.js
new file mode 100644
index 000000000..7e9dee970
--- /dev/null
+++ b/ui/app/pages/create-account/connect-hardware/connect-screen.js
@@ -0,0 +1,197 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+import Button from '../../../components/ui/button'
+
+class ConnectScreen extends Component {
+    constructor (props, context) {
+        super(props)
+        this.state = {
+          selectedDevice: null,
+        }
+    }
+
+    connect = () => {
+      if (this.state.selectedDevice) {
+        this.props.connectToHardwareWallet(this.state.selectedDevice)
+      }
+      return null
+    }
+
+    renderConnectToTrezorButton () {
+        return h(
+            `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
+            { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
+            h('img.hw-connect__btn__img', {
+              src: 'images/trezor-logo.svg',
+            })
+        )
+    }
+
+    renderConnectToLedgerButton () {
+        return h(
+          `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
+          { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
+            h('img.hw-connect__btn__img', {
+              src: 'images/ledger-logo.svg',
+            })
+        )
+    }
+
+    renderButtons () {
+      return (
+        h('div', {}, [
+          h('div.hw-connect__btn-wrapper', {}, [
+            this.renderConnectToLedgerButton(),
+            this.renderConnectToTrezorButton(),
+          ]),
+          h(Button, {
+            type: 'confirm',
+            large: true,
+            className: 'hw-connect__connect-btn',
+            onClick: this.connect,
+            disabled: !this.state.selectedDevice,
+          }, this.context.t('connect')),
+        ])
+      )
+    }
+
+    renderUnsupportedBrowser () {
+        return (
+            h('div.new-account-connect-form.unsupported-browser', {}, [
+                h('div.hw-connect', [
+                    h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
+                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
+                ]),
+                h(Button, {
+                  type: 'primary',
+                  large: true,
+                  onClick: () => global.platform.openWindow({
+                    url: 'https://google.com/chrome',
+                  }),
+                }, this.context.t('downloadGoogleChrome')),
+            ])
+        )
+    }
+
+    renderHeader () {
+        return (
+            h('div.hw-connect__header', {}, [
+                h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)),
+                h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)),
+            ])
+        )
+    }
+
+    getAffiliateLinks () {
+      const links = {
+        trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`,
+        ledger: `<a class='hw-connect__get-hw__link' href='https://www.ledger.com/products/ledger-nano-s?r=17c4991a03fa&tracker=MY_TRACKER' target='_blank'>Ledger</a>`,
+      }
+
+      const text = this.context.t('orderOneHere')
+      const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger)
+
+      return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }})
+    }
+
+    renderTrezorAffiliateLink () {
+        return h('div.hw-connect__get-hw', {}, [
+            h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)),
+            this.getAffiliateLinks(),
+          ])
+    }
+
+
+    scrollToTutorial = (e) => {
+      if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'})
+    }
+
+    renderLearnMore () {
+        return (
+            h('p.hw-connect__learn-more', {
+                onClick: this.scrollToTutorial,
+            }, [
+                this.context.t('learnMore'),
+                h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
+            ])
+        )
+    }
+
+    renderTutorialSteps () {
+        const steps = [
+            {
+                asset: 'hardware-wallet-step-1',
+                dimensions: {width: '225px', height: '75px'},
+             },
+             {
+                asset: 'hardware-wallet-step-2',
+                dimensions: {width: '300px', height: '100px'},
+             },
+             {
+                asset: 'hardware-wallet-step-3',
+                dimensions: {width: '120px', height: '90px'},
+             },
+        ]
+
+        return h('.hw-tutorial', {
+          ref: node => { this.referenceNode = node },
+        },
+            steps.map((step, i) => (
+            h('div.hw-connect', {}, [
+                h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
+                h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
+                h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
+            ])
+            ))
+        )
+    }
+
+    renderFooter () {
+        return (
+            h('div.hw-connect__footer', {}, [
+                h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
+                this.renderButtons(),
+                h('p.hw-connect__footer__msg', {}, [
+                    this.context.t(`havingTroubleConnecting`),
+                    h('a.hw-connect__footer__link', {
+                        href: 'https://support.metamask.io/',
+                        target: '_blank',
+                      }, this.context.t('getHelp')),
+                ]),
+            ])
+        )
+    }
+
+    renderConnectScreen () {
+        return (
+            h('div.new-account-connect-form', {}, [
+                this.renderHeader(),
+                this.renderButtons(),
+                this.renderTrezorAffiliateLink(),
+                this.renderLearnMore(),
+                this.renderTutorialSteps(),
+                this.renderFooter(),
+            ])
+        )
+    }
+
+    render () {
+        if (this.props.browserSupported) {
+            return this.renderConnectScreen()
+        }
+        return this.renderUnsupportedBrowser()
+    }
+}
+
+ConnectScreen.propTypes = {
+    connectToHardwareWallet: PropTypes.func.isRequired,
+    browserSupported: PropTypes.bool.isRequired,
+}
+
+ConnectScreen.contextTypes = {
+    t: PropTypes.func,
+}
+
+module.exports = ConnectScreen
+
diff --git a/ui/app/pages/create-account/connect-hardware/index.js b/ui/app/pages/create-account/connect-hardware/index.js
new file mode 100644
index 000000000..1398fa680
--- /dev/null
+++ b/ui/app/pages/create-account/connect-hardware/index.js
@@ -0,0 +1,293 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const { getMetaMaskAccounts } = require('../../../selectors/selectors')
+const ConnectScreen = require('./connect-screen')
+const AccountList = require('./account-list')
+const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
+const { formatBalance } = require('../../../helpers/utils/util')
+const { getPlatform } = require('../../../../../app/scripts/lib/util')
+const { PLATFORM_FIREFOX } = require('../../../../../app/scripts/lib/enums')
+
+class ConnectHardwareForm extends Component {
+  constructor (props, context) {
+    super(props)
+    this.state = {
+      error: null,
+      selectedAccount: null,
+      accounts: [],
+      browserSupported: true,
+      unlocked: false,
+      device: null,
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { accounts } = nextProps
+    const newAccounts = this.state.accounts.map(a => {
+      const normalizedAddress = a.address.toLowerCase()
+      const balanceValue = accounts[normalizedAddress] && accounts[normalizedAddress].balance || null
+      a.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+      return a
+    })
+    this.setState({accounts: newAccounts})
+  }
+
+
+  componentDidMount () {
+    this.checkIfUnlocked()
+  }
+
+  async checkIfUnlocked () {
+    ['trezor', 'ledger'].forEach(async device => {
+      const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device])
+      if (unlocked) {
+        this.setState({unlocked: true})
+        this.getPage(device, 0, this.props.defaultHdPaths[device])
+      }
+    })
+  }
+
+  connectToHardwareWallet = (device) => {
+    // Ledger hardware wallets are not supported on firefox
+    if (getPlatform() === PLATFORM_FIREFOX && device === 'ledger') {
+      this.setState({ browserSupported: false, error: null})
+      return null
+    }
+
+    if (this.state.accounts.length) {
+      return null
+    }
+
+    // Default values
+    this.getPage(device, 0, this.props.defaultHdPaths[device])
+  }
+
+  onPathChange = (path) => {
+    this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path})
+    this.getPage(this.state.device, 0, path)
+  }
+
+  onAccountChange = (account) => {
+    this.setState({selectedAccount: account.toString(), error: null})
+  }
+
+  onAccountRestriction = () => {
+    this.setState({error: this.context.t('ledgerAccountRestriction') })
+  }
+
+  showTemporaryAlert () {
+    this.props.showAlert(this.context.t('hardwareWalletConnected'))
+    // Autohide the alert after 5 seconds
+    setTimeout(_ => {
+      this.props.hideAlert()
+    }, 5000)
+  }
+
+  getPage = (device, page, hdPath) => {
+    this.props
+      .connectHardware(device, page, hdPath)
+      .then(accounts => {
+        if (accounts.length) {
+
+          // If we just loaded the accounts for the first time
+          // (device previously locked) show the global alert
+          if (this.state.accounts.length === 0 && !this.state.unlocked) {
+            this.showTemporaryAlert()
+          }
+
+          const newState = { unlocked: true, device, error: null }
+          // Default to the first account
+          if (this.state.selectedAccount === null) {
+            accounts.forEach((a, i) => {
+              if (a.address.toLowerCase() === this.props.address) {
+                newState.selectedAccount = a.index.toString()
+              }
+            })
+          // If the page doesn't contain the selected account, let's deselect it
+          } else if (!accounts.filter(a => a.index.toString() === this.state.selectedAccount).length) {
+            newState.selectedAccount = null
+          }
+
+
+          // Map accounts with balances
+          newState.accounts = accounts.map(account => {
+            const normalizedAddress = account.address.toLowerCase()
+            const balanceValue = this.props.accounts[normalizedAddress] && this.props.accounts[normalizedAddress].balance || null
+            account.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+            return account
+          })
+
+          this.setState(newState)
+        }
+      })
+      .catch(e => {
+        if (e === 'Window blocked') {
+          this.setState({ browserSupported: false, error: null})
+        } else if (e !== 'Window closed' && e !== 'Popup closed') {
+          this.setState({ error: e.toString() })
+        }
+      })
+  }
+
+  onForgetDevice = (device) => {
+    this.props.forgetDevice(device)
+    .then(_ => {
+      this.setState({
+        error: null,
+        selectedAccount: null,
+        accounts: [],
+        unlocked: false,
+      })
+    }).catch(e => {
+      this.setState({ error: e.toString() })
+    })
+  }
+
+  onUnlockAccount = (device) => {
+
+    if (this.state.selectedAccount === null) {
+      this.setState({ error: this.context.t('accountSelectionRequired') })
+    }
+
+    this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device)
+    .then(_ => {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Accounts',
+          action: 'Connected Hardware Wallet',
+          name: 'Connected Account with: ' + device,
+        },
+      })
+      this.props.history.push(DEFAULT_ROUTE)
+    }).catch(e => {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Accounts',
+          action: 'Connected Hardware Wallet',
+          name: 'Error connecting hardware wallet',
+        },
+        customVariables: {
+          error: e.toString(),
+        },
+      })
+      this.setState({ error: e.toString() })
+    })
+  }
+
+  onCancel = () => {
+    this.props.history.push(DEFAULT_ROUTE)
+  }
+
+  renderError () {
+    return this.state.error
+      ? h('span.error', { style: { margin: '20px 20px 10px', display: 'block', textAlign: 'center' } }, this.state.error)
+      : null
+  }
+
+  renderContent () {
+    if (!this.state.accounts.length) {
+      return h(ConnectScreen, {
+        connectToHardwareWallet: this.connectToHardwareWallet,
+        browserSupported: this.state.browserSupported,
+      })
+    }
+
+    return h(AccountList, {
+      onPathChange: this.onPathChange,
+      selectedPath: this.props.defaultHdPaths[this.state.device],
+      device: this.state.device,
+      accounts: this.state.accounts,
+      selectedAccount: this.state.selectedAccount,
+      onAccountChange: this.onAccountChange,
+      network: this.props.network,
+      getPage: this.getPage,
+      history: this.props.history,
+      onUnlockAccount: this.onUnlockAccount,
+      onForgetDevice: this.onForgetDevice,
+      onCancel: this.onCancel,
+      onAccountRestriction: this.onAccountRestriction,
+    })
+  }
+
+  render () {
+    return h('div', [
+      this.renderError(),
+      this.renderContent(),
+    ])
+  }
+}
+
+ConnectHardwareForm.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  showConnectPage: PropTypes.func,
+  connectHardware: PropTypes.func,
+  checkHardwareStatus: PropTypes.func,
+  forgetDevice: PropTypes.func,
+  showAlert: PropTypes.func,
+  hideAlert: PropTypes.func,
+  unlockHardwareWalletAccount: PropTypes.func,
+  setHardwareWalletDefaultHdPath: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+  history: PropTypes.object,
+  t: PropTypes.func,
+  network: PropTypes.string,
+  accounts: PropTypes.object,
+  address: PropTypes.string,
+  defaultHdPaths: PropTypes.object,
+}
+
+const mapStateToProps = state => {
+  const {
+    metamask: { network, selectedAddress, identities = {} },
+  } = state
+  const accounts = getMetaMaskAccounts(state)
+  const numberOfExistingAccounts = Object.keys(identities).length
+  const {
+    appState: { defaultHdPaths },
+  } = state
+
+  return {
+    network,
+    accounts,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+    defaultHdPaths,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setHardwareWalletDefaultHdPath: ({device, path}) => {
+      return dispatch(actions.setHardwareWalletDefaultHdPath({device, path}))
+    },
+    connectHardware: (deviceName, page, hdPath) => {
+      return dispatch(actions.connectHardware(deviceName, page, hdPath))
+    },
+    checkHardwareStatus: (deviceName, hdPath) => {
+      return dispatch(actions.checkHardwareStatus(deviceName, hdPath))
+    },
+    forgetDevice: (deviceName) => {
+      return dispatch(actions.forgetDevice(deviceName))
+    },
+    unlockHardwareWalletAccount: (index, deviceName, hdPath) => {
+      return dispatch(actions.unlockHardwareWalletAccount(index, deviceName, hdPath))
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+    showConnectPage: () => dispatch(actions.showConnectPage()),
+    showAlert: (msg) => dispatch(actions.showAlert(msg)),
+    hideAlert: () => dispatch(actions.hideAlert()),
+  }
+}
+
+ConnectHardwareForm.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(
+  ConnectHardwareForm
+)
diff --git a/ui/app/pages/create-account/import-account/index.js b/ui/app/pages/create-account/import-account/index.js
new file mode 100644
index 000000000..48d8f8838
--- /dev/null
+++ b/ui/app/pages/create-account/import-account/index.js
@@ -0,0 +1,96 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+import Select from 'react-select'
+
+// Subviews
+const JsonImportView = require('./json.js')
+const PrivateKeyImportView = require('./private-key.js')
+
+
+AccountImportSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(AccountImportSubview)
+
+
+inherits(AccountImportSubview, Component)
+function AccountImportSubview () {
+  Component.call(this)
+}
+
+AccountImportSubview.prototype.getMenuItemTexts = function () {
+  return [
+    this.context.t('privateKey'),
+    this.context.t('jsonFile'),
+  ]
+}
+
+AccountImportSubview.prototype.render = function () {
+  const state = this.state || {}
+  const menuItems = this.getMenuItemTexts()
+  const { type } = state
+
+  return (
+    h('div.new-account-import-form', [
+
+      h('.new-account-import-disclaimer', [
+        h('span', this.context.t('importAccountMsg')),
+        h('span', {
+          style: {
+            cursor: 'pointer',
+            textDecoration: 'underline',
+          },
+          onClick: () => {
+            global.platform.openWindow({
+              url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
+            })
+          },
+        }, this.context.t('here')),
+      ]),
+
+      h('div.new-account-import-form__select-section', [
+
+        h('div.new-account-import-form__select-label', this.context.t('selectType')),
+
+        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 state = this.state || {}
+  const { type } = state
+  const menuItems = this.getMenuItemTexts()
+  const current = type || menuItems[0]
+
+  switch (current) {
+    case this.context.t('privateKey'):
+      return h(PrivateKeyImportView)
+    case this.context.t('jsonFile'):
+      return h(JsonImportView)
+    default:
+      return h(JsonImportView)
+  }
+}
diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js
new file mode 100644
index 000000000..17bef763c
--- /dev/null
+++ b/ui/app/pages/create-account/import-account/json.js
@@ -0,0 +1,170 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const FileInput = require('react-simple-file-input').default
+const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
+const { getMetaMaskAccounts } = require('../../../selectors/selectors')
+const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
+import Button from '../../../components/ui/button'
+
+class JsonImportSubview extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      file: null,
+      fileContents: '',
+    }
+  }
+
+  render () {
+    const { error } = this.props
+
+    return (
+      h('div.new-account-import-form__json', [
+
+        h('p', this.context.t('usedByClients')),
+        h('a.warning', {
+          href: HELP_LINK,
+          target: '_blank',
+        }, this.context.t('fileImportFail')),
+
+        h(FileInput, {
+          readAs: 'text',
+          onLoad: this.onLoad.bind(this),
+          style: {
+            margin: '20px 0px 12px 34%',
+            fontSize: '15px',
+            display: 'flex',
+            justifyContent: 'center',
+          },
+        }),
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          placeholder: this.context.t('enterPassword'),
+          id: 'json-password-box',
+          onKeyPress: this.createKeyringOnEnter.bind(this),
+        }),
+
+        h('div.new-account-create-form__buttons', {}, [
+
+          h(Button, {
+            type: 'default',
+            large: true,
+            className: 'new-account-create-form__button',
+            onClick: () => this.props.history.push(DEFAULT_ROUTE),
+          }, [this.context.t('cancel')]),
+
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'new-account-create-form__button',
+            onClick: () => this.createNewKeychain(),
+          }, [this.context.t('import')]),
+
+        ]),
+
+        error ? h('span.error', error) : null,
+      ])
+    )
+  }
+
+  onLoad (event, file) {
+    this.setState({file: file, fileContents: event.target.result})
+  }
+
+  createKeyringOnEnter (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
+
+  createNewKeychain () {
+    const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress, history } = this.props
+    const state = this.state
+
+    if (!state) {
+      const message = this.context.t('validFileImport')
+      return displayWarning(message)
+    }
+
+    const { fileContents } = state
+
+    if (!fileContents) {
+      const message = this.context.t('needImportFile')
+      return displayWarning(message)
+    }
+
+    const passwordInput = document.getElementById('json-password-box')
+    const password = passwordInput.value
+
+    importNewJsonAccount([ fileContents, password ])
+      .then(({ selectedAddress }) => {
+        if (selectedAddress) {
+          history.push(DEFAULT_ROUTE)
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Accounts',
+              action: 'Import Account',
+              name: 'Imported Account with JSON',
+            },
+          })
+          displayWarning(null)
+        } else {
+          displayWarning('Error importing account.')
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Accounts',
+              action: 'Import Account',
+              name: 'Error importing JSON',
+            },
+          })
+          setSelectedAddress(firstAddress)
+        }
+      })
+      .catch(err => err && displayWarning(err.message || err))
+  }
+}
+
+JsonImportSubview.propTypes = {
+  error: PropTypes.string,
+  goHome: PropTypes.func,
+  displayWarning: PropTypes.func,
+  firstAddress: PropTypes.string,
+  importNewJsonAccount: PropTypes.func,
+  history: PropTypes.object,
+  setSelectedAddress: PropTypes.func,
+  t: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  return {
+    error: state.appState.warning,
+    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
+    importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
+    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
+  }
+}
+
+JsonImportSubview.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(JsonImportSubview)
diff --git a/ui/app/pages/create-account/import-account/private-key.js b/ui/app/pages/create-account/import-account/private-key.js
new file mode 100644
index 000000000..450614e87
--- /dev/null
+++ b/ui/app/pages/create-account/import-account/private-key.js
@@ -0,0 +1,128 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+const actions = require('../../../store/actions')
+const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
+const { getMetaMaskAccounts } = require('../../../selectors/selectors')
+import Button from '../../../components/ui/button'
+
+PrivateKeyImportView.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(PrivateKeyImportView)
+
+
+function mapStateToProps (state) {
+  return {
+    error: state.appState.warning,
+    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    importNewAccount: (strategy, [ privateKey ]) => {
+      return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
+    },
+    displayWarning: (message) => dispatch(actions.displayWarning(message || null)),
+    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
+  }
+}
+
+inherits(PrivateKeyImportView, Component)
+function PrivateKeyImportView () {
+  this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this)
+  Component.call(this)
+}
+
+PrivateKeyImportView.prototype.render = function () {
+  const { error, displayWarning } = this.props
+
+  return (
+    h('div.new-account-import-form__private-key', [
+
+      h('span.new-account-create-form__instruction', this.context.t('pastePrivateKey')),
+
+      h('div.new-account-import-form__private-key-password-container', [
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          id: 'private-key-box',
+          onKeyPress: e => this.createKeyringOnEnter(e),
+        }),
+
+      ]),
+
+      h('div.new-account-import-form__buttons', {}, [
+
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: () => {
+            displayWarning(null)
+            this.props.history.push(DEFAULT_ROUTE)
+          },
+        }, [this.context.t('cancel')]),
+
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: () => this.createNewKeychain(),
+        }, [this.context.t('import')]),
+
+      ]),
+
+      error ? h('span.error', error) : null,
+    ])
+  )
+}
+
+PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    this.createNewKeychain()
+  }
+}
+
+PrivateKeyImportView.prototype.createNewKeychain = function () {
+  const input = document.getElementById('private-key-box')
+  const privateKey = input.value
+  const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props
+
+  importNewAccount('Private Key', [ privateKey ])
+    .then(({ selectedAddress }) => {
+      if (selectedAddress) {
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Accounts',
+            action: 'Import Account',
+            name: 'Imported Account with Private Key',
+          },
+        })
+        history.push(DEFAULT_ROUTE)
+        displayWarning(null)
+      } else {
+        displayWarning('Error importing account.')
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Accounts',
+            action: 'Import Account',
+            name: 'Error importing with Private Key',
+          },
+        })
+        setSelectedAddress(firstAddress)
+      }
+    })
+    .catch(err => err && displayWarning(err.message || err))
+}
diff --git a/ui/app/pages/create-account/import-account/seed.js b/ui/app/pages/create-account/import-account/seed.js
new file mode 100644
index 000000000..d98909baa
--- /dev/null
+++ b/ui/app/pages/create-account/import-account/seed.js
@@ -0,0 +1,35 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+
+SeedImportSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps)(SeedImportSubview)
+
+
+function mapStateToProps (state) {
+  return {}
+}
+
+inherits(SeedImportSubview, Component)
+function SeedImportSubview () {
+  Component.call(this)
+}
+
+SeedImportSubview.prototype.render = function () {
+  return (
+    h('div', {
+      style: {
+      },
+    }, [
+      this.context.t('pasteSeed'),
+      h('textarea'),
+      h('br'),
+      h('button', this.context.t('submit')),
+    ])
+  )
+}
diff --git a/ui/app/pages/create-account/index.js b/ui/app/pages/create-account/index.js
new file mode 100644
index 000000000..ce84db028
--- /dev/null
+++ b/ui/app/pages/create-account/index.js
@@ -0,0 +1,113 @@
+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('../../store/actions')
+const { getCurrentViewContext } = require('../../selectors/selectors')
+const classnames = require('classnames')
+const NewAccountCreateForm = require('./new-account')
+const NewAccountImportForm = require('./import-account')
+const ConnectHardwareForm = require('./connect-hardware')
+const {
+  NEW_ACCOUNT_ROUTE,
+  IMPORT_ACCOUNT_ROUTE,
+  CONNECT_HARDWARE_ROUTE,
+} = require('../../helpers/constants/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),
+      }, [
+        this.context.t('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),
+      }, [
+        this.context.t('import'),
+      ]),
+      h(
+        'div.new-account__tabs__tab',
+        {
+          className: classnames('new-account__tabs__tab', {
+            'new-account__tabs__selected': matchPath(location.pathname, {
+              path: CONNECT_HARDWARE_ROUTE,
+              exact: true,
+            }),
+          }),
+          onClick: () => history.push(CONNECT_HARDWARE_ROUTE),
+        },
+        this.context.t('connect')
+      ),
+    ])
+  }
+
+  render () {
+    return h('div.new-account', {}, [
+      h('div.new-account__header', [
+        h('div.new-account__title', this.context.t('newAccount')),
+        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,
+          }),
+          h(Route, {
+            exact: true,
+            path: CONNECT_HARDWARE_ROUTE,
+            component: ConnectHardwareForm,
+          }),
+        ]),
+      ]),
+    ])
+  }
+}
+
+CreateAccountPage.propTypes = {
+  location: PropTypes.object,
+  history: PropTypes.object,
+  t: PropTypes.func,
+}
+
+CreateAccountPage.contextTypes = {
+  t: PropTypes.func,
+}
+
+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()),
+  setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
+})
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage)
diff --git a/ui/app/pages/create-account/new-account.js b/ui/app/pages/create-account/new-account.js
new file mode 100644
index 000000000..316fbe6f1
--- /dev/null
+++ b/ui/app/pages/create-account/new-account.js
@@ -0,0 +1,130 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../store/actions')
+const { DEFAULT_ROUTE } = require('../../helpers/constants/routes')
+import Button from '../../components/ui/button'
+
+class NewAccountCreateForm extends Component {
+  constructor (props, context) {
+    super(props)
+
+    const { numberOfExistingAccounts = 0 } = props
+    const newAccountNumber = numberOfExistingAccounts + 1
+
+    this.state = {
+      newAccountName: '',
+      defaultAccountName: context.t('newAccountNumberName', [newAccountNumber]),
+    }
+  }
+
+  render () {
+    const { newAccountName, defaultAccountName } = this.state
+    const { history, createAccount } = this.props
+
+    return h('div.new-account-create-form', [
+
+      h('div.new-account-create-form__input-label', {}, [
+        this.context.t('accountName'),
+      ]),
+
+      h('div.new-account-create-form__input-wrapper', {}, [
+        h('input.new-account-create-form__input', {
+          value: newAccountName,
+          placeholder: defaultAccountName,
+          onChange: event => this.setState({ newAccountName: event.target.value }),
+        }, []),
+      ]),
+
+      h('div.new-account-create-form__buttons', {}, [
+
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: () => history.push(DEFAULT_ROUTE),
+        }, [this.context.t('cancel')]),
+
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-create-form__button',
+          onClick: () => {
+            createAccount(newAccountName || defaultAccountName)
+              .then(() => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Accounts',
+                    action: 'Add New Account',
+                    name: 'Added New Account',
+                  },
+                })
+                history.push(DEFAULT_ROUTE)
+              })
+              .catch((e) => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Accounts',
+                    action: 'Add New Account',
+                    name: 'Error',
+                  },
+                  customVariables: {
+                    errorMessage: e.message,
+                  },
+                })
+              })
+          },
+        }, [this.context.t('create')]),
+
+      ]),
+
+    ])
+  }
+}
+
+NewAccountCreateForm.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  showConnectPage: PropTypes.func,
+  createAccount: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+  history: PropTypes.object,
+  t: PropTypes.func,
+}
+
+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.setAccountLabel(newAccountAddress, newAccountName))
+          }
+        })
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+    showConnectPage: () => dispatch(actions.showConnectPage()),
+  }
+}
+
+NewAccountCreateForm.contextTypes = {
+  t: PropTypes.func,
+  metricsEvent: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm)
+