From a7af47db928590af8100f16e9e9d36ae98623357 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 4 Nov 2016 14:39:53 -0700 Subject: Add import account placeholder template --- ui/app/accounts/import/index.js | 70 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 ui/app/accounts/import/index.js (limited to 'ui/app/accounts/import') 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 }) + }, + }) + ]) + ]) + ) +} + -- cgit v1.2.3 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 v1.2.3 From 1ff4894b674bbcbac1998228454129018e4642b6 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 17 Jan 2017 16:22:22 -0800 Subject: Allow importing of private key strings Fixes #1021 A top-right menu item now allows `Account Import`. It has a menu (with one item for now) that allows importing a private key string. Errors are displayed, and a success navigates the user to their account list, where the imported account is labeled `LOOSE`. --- ui/app/accounts/import/index.js | 21 ++++++++--- ui/app/accounts/import/private-key.js | 69 +++++++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 ui/app/accounts/import/private-key.js (limited to 'ui/app/accounts/import') diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index a7c3252cd..18a6b985c 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -7,12 +7,17 @@ import Select from 'react-select' // Subviews const JsonImportView = require('./json.js') const SeedImportView = require('./seed.js') +const PrivateKeyImportView = require('./private-key.js') + +const menuItems = [ + 'Private Key', +] module.exports = connect(mapStateToProps)(AccountImportSubview) function mapStateToProps (state) { return { - types: state.metamask.keyringTypes, + menuItems, } } @@ -24,7 +29,7 @@ function AccountImportSubview () { AccountImportSubview.prototype.render = function () { const props = this.props const state = this.state || {} - const { types } = props + const { menuItems } = props const { type } = state return ( @@ -50,8 +55,8 @@ AccountImportSubview.prototype.render = function () { h(Select, { name: 'import-type-select', clearable: false, - value: type || types[0], - options: types.map((type) => { + value: type || menuItems[0], + options: menuItems.map((type) => { return { value: type, label: type, @@ -71,11 +76,15 @@ AccountImportSubview.prototype.render = function () { AccountImportSubview.prototype.renderImportView = function() { const props = this.props const state = this.state || {} - const { type } = state || props.types[0] + const { type } = state + const { menuItems } = props + const current = type || menuItems[0] - switch (type) { + switch (current) { case 'HD Key Tree': return h(SeedImportView) + case 'Private Key': + return h(PrivateKeyImportView) default: return h(JsonImportView) } diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js new file mode 100644 index 000000000..6b988a76b --- /dev/null +++ b/ui/app/accounts/import/private-key.js @@ -0,0 +1,69 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const connect = require('react-redux').connect +const type = 'Simple Key Pair' +const actions = require('../../actions') + +module.exports = connect(mapStateToProps)(PrivateKeyImportView) + +function mapStateToProps (state) { + return { + error: state.appState.warning, + } +} + +inherits(PrivateKeyImportView, Component) +function PrivateKeyImportView () { + Component.call(this) +} + +PrivateKeyImportView.prototype.render = function () { + const { error } = this.props + + return ( + h('div', { + style: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: '5px 15px 0px 15px', + }, + }, [ + h('span', 'Paste your private key string here'), + + h('input.large-input.letter-spacey', { + type: 'password', + id: 'private-key-box', + onKeyPress: this.createKeyringOnEnter.bind(this), + style: { + width: 260, + marginTop: 12, + }, + }), + + h('button.primary', { + onClick: this.createNewKeychain.bind(this), + style: { + margin: 12, + }, + }, 'Import'), + + error ? h('span.warning', error) : null, + ]) + ) +} + +PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } +} + +PrivateKeyImportView.prototype.createNewKeychain = function () { + const input = document.getElementById('private-key-box') + const privateKey = input.value + this.props.dispatch(actions.addNewKeyring(type, [ privateKey ])) +} + -- cgit v1.2.3