Develop import subviews

6 files changed, 87 insertions, 17 deletions

diff --git a/.eslintrc b/.eslintrc
index 1dff2324e..cadd38110 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,5 +1,6 @@
 {
   "parserOptions": {
+    "sourceType": "module",
     "ecmaVersion": 6,
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,
diff --git a/ui/app/accounts/add.js b/ui/app/accounts/add.js
index 9493a4e05..898f89be2 100644
--- a/ui/app/accounts/add.js
+++ b/ui/app/accounts/add.js
@@ -62,7 +62,7 @@ AddAccountScreen.prototype.render = function () {
 }
 
 AddAccountScreen.prototype.goHome = function() {
-  this.props.dispatch(actions.showAccountPage())
+  this.props.dispatch(actions.showAccountsPage())
 }
 
 AddAccountScreen.prototype.renderNewOrImport = function() {
diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index a16b1c39d..a7c3252cd 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -4,6 +4,10 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 import Select from 'react-select'
 
+// Subviews
+const JsonImportView = require('./json.js')
+const SeedImportView = require('./seed.js')
+
 module.exports = connect(mapStateToProps)(AccountImportSubview)
 
 function mapStateToProps (state) {
@@ -31,24 +35,18 @@ AccountImportSubview.prototype.render = function () {
       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('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('div', {
-        style: {
-          padding: '10px',
-        },
-      }, [
         h(Select, {
           name: 'import-type-select',
           clearable: false,
@@ -62,9 +60,23 @@ AccountImportSubview.prototype.render = function () {
           onChange: (opt) => {
             this.setState({ type: opt.value })
           },
-        })
-      ])
+        }),
+      ]),
+
+      this.renderImportView(),
     ])
   )
 }
 
+AccountImportSubview.prototype.renderImportView = function() {
+  const props = this.props
+  const state = this.state || {}
+  const { type } = state || props.types[0]
+
+  switch (type) {
+    case 'HD Key Tree':
+      return h(SeedImportView)
+    default:
+      return h(JsonImportView)
+  }
+}
diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
new file mode 100644
index 000000000..22cf95cfd
--- /dev/null
+++ b/ui/app/accounts/import/json.js
@@ -0,0 +1,27 @@
+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)(JsonImportSubview)
+
+function mapStateToProps (state) {
+  return {}
+}
+
+inherits(JsonImportSubview, Component)
+function JsonImportSubview () {
+  Component.call(this)
+}
+
+JsonImportSubview.prototype.render = function () {
+  return (
+    h('div', {
+      style: {
+      },
+    }, [
+      `Upload your json file here!`,
+    ])
+  )
+}
+
diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js
new file mode 100644
index 000000000..b4a7c0afa
--- /dev/null
+++ b/ui/app/accounts/import/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'),
+    ])
+  )
+}
+
diff --git a/ui/css.js b/ui/css.js
index dae50829c..043363cd7 100644
--- a/ui/css.js
+++ b/ui/css.js
@@ -10,7 +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')
+  'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'),
 }
 
 function bundleCss () {