diff --git a/CHANGELOG.md b/CHANGELOG.md index 51bea159c..adfec8be9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Current Master +- Add ability to import accounts in JSON file format (used by Mist, Geth, MyEtherWallet, and more!) + ## 3.1.0 2017-1-18 - Add ability to import accounts by private key. diff --git a/app/scripts/account-import-strategies/index.js b/app/scripts/account-import-strategies/index.js new file mode 100644 index 000000000..d5124eb7f --- /dev/null +++ b/app/scripts/account-import-strategies/index.js @@ -0,0 +1,45 @@ +const Wallet = require('ethereumjs-wallet') +const importers = require('ethereumjs-wallet/thirdparty') +const ethUtil = require('ethereumjs-util') + +const accountImporter = { + + importAccount(strategy, args) { + try { + const importer = this.strategies[strategy] + const privateKeyHex = importer.apply(null, args) + return Promise.resolve(privateKeyHex) + } catch (e) { + return Promise.reject(e) + } + }, + + strategies: { + 'Private Key': (privateKey) => { + const stripped = ethUtil.stripHexPrefix(privateKey) + return stripped + }, + 'JSON File': (input, password) => { + let wallet + try { + wallet = importers.fromEtherWallet(input, password) + } catch (e) { + console.log('Attempt to import as EtherWallet format failed, trying V3...') + } + + if (!wallet) { + wallet = Wallet.fromV3(input, password, true) + } + + return walletToPrivateKey(wallet) + }, + }, + +} + +function walletToPrivateKey (wallet) { + const privateKeyBuffer = wallet.getPrivateKey() + return ethUtil.bufferToHex(privateKeyBuffer) +} + +module.exports = accountImporter diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 629216e42..7084bbc2d 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -13,6 +13,7 @@ const extension = require('./lib/extension') const autoFaucet = require('./lib/auto-faucet') const nodeify = require('./lib/nodeify') const IdStoreMigrator = require('./lib/idStore-migrator') +const accountImporter = require('./account-import-strategies') const version = require('../manifest.json').version module.exports = class MetamaskController extends EventEmitter { @@ -121,6 +122,16 @@ module.exports = class MetamaskController extends EventEmitter { .then((newState) => { cb(null, newState) }) .catch((reason) => { cb(reason) }) }, + importAccountWithStrategy: (strategy, args, cb) => { + accountImporter.importAccount(strategy, args) + .then((privateKey) => { + return keyringController.addNewKeyring('Simple Key Pair', [ privateKey ]) + }) + .then(keyring => keyring.getAccounts()) + .then((accounts) => keyringController.setSelectedAccount(accounts[0])) + .then(() => { cb(null, keyringController.fullUpdate()) }) + .catch((reason) => { cb(reason) }) + }, addNewAccount: nodeify(keyringController.addNewAccount).bind(keyringController), setSelectedAccount: nodeify(keyringController.setSelectedAccount).bind(keyringController), saveAccountLabel: nodeify(keyringController.saveAccountLabel).bind(keyringController), diff --git a/package.json b/package.json index 2c0c30523..828828753 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "react-markdown": "^2.3.0", "react-redux": "^4.4.5", "react-select": "^1.0.0-rc.2", + "react-simple-file-input": "^1.0.0", "react-tooltip-component": "^0.3.0", "readable-stream": "^2.1.2", "redux": "^3.0.5", 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 ])) +} + 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 ])) } diff --git a/ui/app/actions.js b/ui/app/actions.js index 7934a329a..bf3617310 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -43,6 +43,7 @@ var actions = { createNewVaultAndRestore: createNewVaultAndRestore, createNewVaultInProgress: createNewVaultInProgress, addNewKeyring, + importNewAccount, addNewAccount, NEW_ACCOUNT_SCREEN: 'NEW_ACCOUNT_SCREEN', navigateToNewAccountScreen, @@ -264,6 +265,21 @@ function addNewKeyring (type, opts) { } } +function importNewAccount (strategy, args) { + return (dispatch) => { + dispatch(actions.showLoadingIndication('This may take a while, be patient.')) + background.importAccountWithStrategy(strategy, args, (err, newState) => { + dispatch(actions.hideLoadingIndication()) + if (err) return dispatch(actions.displayWarning(err.message)) + dispatch(actions.updateMetamaskState(newState)) + dispatch({ + type: actions.SHOW_ACCOUNT_DETAIL, + value: newState.selectedAccount, + }) + }) + } +} + function navigateToNewAccountScreen() { return { type: this.NEW_ACCOUNT_SCREEN, @@ -614,9 +630,10 @@ function useEtherscanProvider () { } } -function showLoadingIndication () { +function showLoadingIndication (message) { return { type: actions.SHOW_LOADING, + value: message, } } diff --git a/ui/app/app.js b/ui/app/app.js index 0e04c334c..d8dedd397 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -43,6 +43,7 @@ function mapStateToProps (state) { return { // state from plugin isLoading: state.appState.isLoading, + loadingMessage: state.appState.loadingMessage, isDisclaimerConfirmed: state.metamask.isDisclaimerConfirmed, noActiveNotices: state.metamask.noActiveNotices, isInitialized: state.metamask.isInitialized, @@ -64,7 +65,7 @@ function mapStateToProps (state) { App.prototype.render = function () { var props = this.props - const { isLoading, transForward } = props + const { isLoading, loadingMessage, transForward } = props return ( @@ -76,7 +77,7 @@ App.prototype.render = function () { }, }, [ - h(LoadingIndicator, { isLoading }), + h(LoadingIndicator, { isLoading, loadingMessage }), // app bar this.renderAppBar(), diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js index ae735894f..88dc535df 100644 --- a/ui/app/components/loading.js +++ b/ui/app/components/loading.js @@ -12,7 +12,7 @@ function LoadingIndicator () { } LoadingIndicator.prototype.render = function () { - var isLoading = this.props.isLoading + const { isLoading, loadingMessage } = this.props return ( h(ReactCSSTransitionGroup, { @@ -37,8 +37,14 @@ LoadingIndicator.prototype.render = function () { h('img', { src: 'images/loading.svg', }), + + showMessageIfAny(loadingMessage), ]) : null, ]) ) } +function showMessageIfAny (loadingMessage) { + if (!loadingMessage) return null + return h('span', loadingMessage) +} diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index ae91272cc..6a2c93f78 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -386,6 +386,7 @@ function reduceApp (state, action) { case actions.SHOW_LOADING: return extend(appState, { isLoading: true, + loadingMessage: action.value, }) case actions.HIDE_LOADING: