Develop import subviews

.eslintrc

@@ -1,5 +1,6 @@
 {
   "parserOptions": {
+    "sourceType": "module",
     "ecmaVersion": 6,
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,

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() {

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,12 +35,11 @@ AccountImportSubview.prototype.render = function () {
       h('div', {
         style: {
           padding: '10px',
-          background: 'rgb(242,242,242)',
           color: 'rgb(174, 174, 174)',
         },
       }, [
-        h('h3', 'SELECT TYPE'),
-      ]),
+
+        h('h3', { style: { padding: '3px' } }, 'SELECT TYPE'),
 
         h('style', `
           .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label {
@@ -44,11 +47,6 @@ AccountImportSubview.prototype.render = function () {
           }
         `),
 
-      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)
+  }
+}

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!`,
+    ])
+  )
+}
+

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'),
+    ])
+  )
+}
+

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 () {