4 files changed, 296 insertions, 0 deletions
diff --git a/ui/app/components/pages/import-account/index.js b/ui/app/components/pages/import-account/index.js
new file mode 100644
index 000000000..481ed6a4b
--- /dev/null
+++ b/ui/app/components/pages/import-account/index.js
@@ -0,0 +1,95 @@
+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/import-account/json.js b/ui/app/components/pages/import-account/json.js
new file mode 100644
index 000000000..63a44b4b7
--- /dev/null
+++ b/ui/app/components/pages/import-account/json.js
@@ -0,0 +1,100 @@
+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 FileInput = require('react-simple-file-input').default
+
+const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
+
+module.exports = connect(mapStateToProps)(JsonImportSubview)
+
+function mapStateToProps (state) {
+  return {
+    error: state.appState.warning,
+  }
+}
+
+inherits(JsonImportSubview, Component)
+function JsonImportSubview () {
+  Component.call(this)
+}
+
+JsonImportSubview.prototype.render = function () {
+  const { error } = this.props
+
+  return (
+    h('div', {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '5px 15px 0px 15px',
+      },
+    }, [
+
+      h('p', 'Used by a variety of different clients'),
+      h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
+
+      h(FileInput, {
+        readAs: 'text',
+        onLoad: this.onLoad.bind(this),
+        style: {
+          margin: '20px 0px 12px 20px',
+          fontSize: '15px',
+        },
+      }),
+
+      h('input.large-input.letter-spacey', {
+        type: 'password',
+        placeholder: 'Enter password',
+        id: 'json-password-box',
+        onKeyPress: this.createKeyringOnEnter.bind(this),
+        style: {
+          width: 260,
+          marginTop: 12,
+        },
+      }),
+
+      h('button.primary', {
+        onClick: this.createNewKeychain.bind(this),
+        style: {
+          margin: 12,
+        },
+      }, 'Import'),
+
+      error ? h('span.error', error) : null,
+    ])
+  )
+}
+
+JsonImportSubview.prototype.onLoad = function (event, file) {
+  this.setState({file: file, fileContents: event.target.result})
+}
+
+JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    this.createNewKeychain()
+  }
+}
+
+JsonImportSubview.prototype.createNewKeychain = function () {
+  const state = this.state
+  const { fileContents } = state
+
+  if (!fileContents) {
+    const message = 'You must select a file to import.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+
+  const passwordInput = document.getElementById('json-password-box')
+  const password = passwordInput.value
+
+  if (!password) {
+    const message = 'You must enter a password for the selected file.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+
+  this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
+}
diff --git a/ui/app/components/pages/import-account/private-key.js b/ui/app/components/pages/import-account/private-key.js
new file mode 100644
index 000000000..217e6d9f9
--- /dev/null
+++ b/ui/app/components/pages/import-account/private-key.js
@@ -0,0 +1,71 @@
+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')
+
+module.exports = connect(mapStateToProps)(PrivateKeyImportView)
+
+function mapStateToProps (state) {
+  return {
+    error: state.appState.warning,
+  }
+}
+
+inherits(PrivateKeyImportView, Component)
+function PrivateKeyImportView () {
+  Component.call(this)
+}
+
+PrivateKeyImportView.prototype.componentWillUnmount = function () {
+  this.props.dispatch(actions.displayWarning(null))
+}
+
+PrivateKeyImportView.prototype.render = function () {
+  const { error } = this.props
+
+  return (
+    h('div', {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '5px 15px 0px 15px',
+      },
+    }, [
+      h('span', 'Paste your private key string here'),
+
+      h('input.large-input.letter-spacey', {
+        type: 'password',
+        id: 'private-key-box',
+        onKeyPress: this.createKeyringOnEnter.bind(this),
+        style: {
+          width: 260,
+          marginTop: 12,
+        },
+      }),
+
+      h('button.primary', {
+        onClick: this.createNewKeychain.bind(this),
+        style: {
+          margin: 12,
+        },
+      }, '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
+  this.props.dispatch(actions.importNewAccount('Private Key', [ privateKey ]))
+}
diff --git a/ui/app/components/pages/import-account/seed.js b/ui/app/components/pages/import-account/seed.js
new file mode 100644
index 000000000..b4a7c0afa
--- /dev/null
+++ b/ui/app/components/pages/import-account/seed.js
@@ -0,0 +1,30 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+
+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: {
+      },
+    }, [
+      `Paste your seed phrase here!`,
+      h('textarea'),
+      h('br'),
+      h('button', 'Submit'),
+    ])
+  )
+}
+