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 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 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 From b52346388b8d4518ffb2eb34236c6d17579085f3 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 18 Jan 2017 15:17:08 -0800 Subject: Added new modular private key import system Now any strategy for importing a private key that can be described as a pure function can be very easily turned into a MetaMask import strategy. I've created a generic and reusable UI action called `importNewAccount(strategy, args)`. The `strategy` is a unique identifier defined in `app/scripts/account-import-strategies`, and the `args` will be passed to the member of the `strategies` array whose key matches the strategy string. Strategies return private key hex strings, and are used by the metamask-controller to create a new keyring, and select that new account, before calling back. This also implements @frankiebee's idea of showing the imported account when it's been imported (my oversight!). This commit only moves us to this architecture, keeping feature parity for private key import, but has some untested code for importing geth-style JSON files as well! --- ui/app/accounts/import/private-key.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app/accounts/import') diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index 6b988a76b..b139a0374 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -2,7 +2,6 @@ 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) @@ -64,6 +63,6 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { PrivateKeyImportView.prototype.createNewKeychain = function () { const input = document.getElementById('private-key-box') const privateKey = input.value - this.props.dispatch(actions.addNewKeyring(type, [ privateKey ])) + this.props.dispatch(actions.importNewAccount('Private Key', [ privateKey ])) } -- cgit From 9126652f2e8b5b612f894bbb6c46fb1ef7861d06 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 18 Jan 2017 16:09:21 -0800 Subject: Implement naieve JSON file importing Doesn't work on any JSON file I have, it's a very naieve strategy provided by ethereumjs-wallet. Will need to raise its sophistication before deploying to production. --- ui/app/accounts/import/index.js | 6 ++-- ui/app/accounts/import/json.js | 75 +++++++++++++++++++++++++++++++++++++++-- 2 files changed, 76 insertions(+), 5 deletions(-) (limited to 'ui/app/accounts/import') diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index 18a6b985c..96350852a 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -6,11 +6,11 @@ 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', + 'JSON File', ] module.exports = connect(mapStateToProps)(AccountImportSubview) @@ -81,10 +81,10 @@ AccountImportSubview.prototype.renderImportView = function() { const current = type || menuItems[0] switch (current) { - case 'HD Key Tree': - return h(SeedImportView) case 'Private Key': return h(PrivateKeyImportView) + case 'JSON File': + return h(JsonImportView) default: return h(JsonImportView) } diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index 22cf95cfd..1c2b331d4 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -2,11 +2,15 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect +const actions = require('../../actions') +const FileInput = require('react-simple-file-input').default module.exports = connect(mapStateToProps)(JsonImportSubview) function mapStateToProps (state) { - return {} + return { + error: state.appState.warning, + } } inherits(JsonImportSubview, Component) @@ -15,13 +19,80 @@ function JsonImportSubview () { } JsonImportSubview.prototype.render = function () { + const { error } = this.props + return ( h('div', { style: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: '5px 15px 0px 15px', }, }, [ - `Upload your json file here!`, + + h('p', 'Used by a variety of different clients'), + + h(FileInput, { + readAs: 'text', + onLoad: this.onLoad.bind(this), + style: { + margin: '20px 0px 12px 20px', + fontSize: '15px', + }, + }), + + h('input.large-input.letter-spacey', { + type: 'password', + placeholder: 'Enter password', + id: 'json-password-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, ]) ) } +JsonImportSubview.prototype.onLoad = function (event, file) { + this.setState({file: file, fileContents: event.target.result}) +} + +JsonImportSubview.prototype.createKeyringOnEnter = function (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } +} + +JsonImportSubview.prototype.createNewKeychain = function () { + const state = this.state + const { fileContents } = state + + if (!fileContents) { + const message = 'You must select a file to import.' + return this.props.dispatch(actions.displayWarning(message)) + } + + const passwordInput = document.getElementById('json-password-box') + const password = passwordInput.value + + if (!password) { + const message = 'You must enter a password for the selected file.' + return this.props.dispatch(actions.displayWarning(message)) + } + + this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ])) +} + -- cgit