Add import account placeholder template

4 files changed, 72 insertions, 30 deletions

diff --git a/package.json b/package.json
index cbe1a7b55..36cc3f02a 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "react-hyperscript": "^2.2.2",
     "react-markdown": "^2.3.0",
     "react-redux": "^4.4.5",
+    "react-select": "^1.0.0-rc.2",
     "react-tooltip-component": "^0.3.0",
     "readable-stream": "^2.1.2",
     "redux": "^3.0.5",
diff --git a/ui/app/accounts/import.js b/ui/app/accounts/import.js
deleted file mode 100644
index d15b30fd2..000000000
--- a/ui/app/accounts/import.js
+++ /dev/null
@@ -1,30 +0,0 @@
-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)(COMPONENTNAME)
-
-function mapStateToProps (state) {
-  return {}
-}
-
-inherits(COMPONENTNAME, Component)
-function COMPONENTNAME () {
-  Component.call(this)
-}
-
-COMPONENTNAME.prototype.render = function () {
-  const props = this.props
-
-  return (
-    h('div', {
-      style: {
-        background: 'blue',
-      },
-    }, [
-      `Hello, ${props.sender}`,
-    ])
-  )
-}
-
diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
new file mode 100644
index 000000000..a16b1c39d
--- /dev/null
+++ b/ui/app/accounts/import/index.js
@@ -0,0 +1,70 @@
+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'
+
+module.exports = connect(mapStateToProps)(AccountImportSubview)
+
+function mapStateToProps (state) {
+  return {
+    types: state.metamask.keyringTypes,
+  }
+}
+
+inherits(AccountImportSubview, Component)
+function AccountImportSubview () {
+  Component.call(this)
+}
+
+AccountImportSubview.prototype.render = function () {
+  const props = this.props
+  const state = this.state || {}
+  const { types } = props
+  const { type } = state
+
+  return (
+    h('div', {
+      style: {
+      },
+    }, [
+      h('div', {
+        style: {
+          padding: '10px',
+          background: 'rgb(242,242,242)',
+          color: 'rgb(174, 174, 174)',
+        },
+      }, [
+        h('h3', 'SELECT TYPE'),
+      ]),
+
+      h('style', `
+        .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label {
+          color: rgb(174,174,174);
+        }
+      `),
+
+      h('div', {
+        style: {
+          padding: '10px',
+        },
+      }, [
+        h(Select, {
+          name: 'import-type-select',
+          clearable: false,
+          value: type || types[0],
+          options: types.map((type) => {
+            return {
+              value: type,
+              label: type,
+            }
+          }),
+          onChange: (opt) => {
+            this.setState({ type: opt.value })
+          },
+        })
+      ])
+    ])
+  )
+}
+
diff --git a/ui/css.js b/ui/css.js
index 01f317acd..dae50829c 100644
--- a/ui/css.js
+++ b/ui/css.js
@@ -10,6 +10,7 @@ var cssFiles = {
   'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'),
   'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'),
   'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'),
+  'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8')
 }
 
 function bundleCss () {