1 files changed, 95 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