From b3cb675a8bd406bd16aa74ff209032075f9b31d7 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 4 Nov 2016 15:08:50 -0700 Subject: Develop import subviews --- ui/app/accounts/import/index.js | 42 ++++++++++++++++++++++++++--------------- ui/app/accounts/import/json.js | 27 ++++++++++++++++++++++++++ ui/app/accounts/import/seed.js | 30 +++++++++++++++++++++++++++++ 3 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 ui/app/accounts/import/json.js create mode 100644 ui/app/accounts/import/seed.js (limited to 'ui/app/accounts/import') 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'), + ]) + ) +} + -- cgit