diff --git a/ui/app/pages/create-account/import-account/index.js b/ui/app/pages/create-account/import-account/index.js index 915734048..832d762d3 100644 --- a/ui/app/pages/create-account/import-account/index.js +++ b/ui/app/pages/create-account/import-account/index.js @@ -1,5 +1,4 @@ import React, { Component } from 'react' -import { inherits } from 'util' import PropTypes from 'prop-types' import Select from 'react-select' @@ -8,86 +7,79 @@ import JsonImportView from './json.js' import PrivateKeyImportView from './private-key.js' +export default class AccountImportSubview extends Component { + static contextTypes = { + t: PropTypes.func, + } -AccountImportSubview.contextTypes = { - t: PropTypes.func, -} - -export default AccountImportSubview + state = {} + getMenuItemTexts () { + return [ + this.context.t('privateKey'), + this.context.t('jsonFile'), + ] + } -inherits(AccountImportSubview, Component) -function AccountImportSubview () { - Component.call(this) -} + renderImportView () { + const { type } = this.state + const menuItems = this.getMenuItemTexts() + const current = type || menuItems[0] -AccountImportSubview.prototype.getMenuItemTexts = function () { - return [ - this.context.t('privateKey'), - this.context.t('jsonFile'), - ] -} + switch (current) { + case this.context.t('privateKey'): + return + case this.context.t('jsonFile'): + return + default: + return + } + } -AccountImportSubview.prototype.render = function () { - const state = this.state || {} - const menuItems = this.getMenuItemTexts() - const { type } = state + render () { + const menuItems = this.getMenuItemTexts() + const { type } = this.state - return ( -
-
- {this.context.t('importAccountMsg')} - { - global.platform.openWindow({ - url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932', - }) - }} - > - {this.context.t('here')} - -
-
-
- {this.context.t('selectType')} + return ( +
+
+ {this.context.t('importAccountMsg')} + { + global.platform.openWindow({ + url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932', + }) + }} + > + {this.context.t('here')} + +
+
+
+ {this.context.t('selectType')} +
+ { - return { - value: type, - label: type, - } - })} - onChange={(opt) => { - this.setState({ type: opt.value }) - }} - /> + {this.renderImportView()}
- {this.renderImportView()} -
- ) -} - -AccountImportSubview.prototype.renderImportView = function () { - const state = this.state || {} - const { type } = state - const menuItems = this.getMenuItemTexts() - const current = type || menuItems[0] - - switch (current) { - case this.context.t('privateKey'): - return - case this.context.t('jsonFile'): - return - default: - return + ) } } diff --git a/ui/app/pages/create-account/import-account/private-key.js b/ui/app/pages/create-account/import-account/private-key.js index ab0c14a9e..988c42e6b 100644 --- a/ui/app/pages/create-account/import-account/private-key.js +++ b/ui/app/pages/create-account/import-account/private-key.js @@ -1,5 +1,4 @@ import React, { Component } from 'react' -import { inherits } from 'util' import { withRouter } from 'react-router-dom' import { compose } from 'recompose' import PropTypes from 'prop-types' @@ -9,9 +8,106 @@ import { DEFAULT_ROUTE } from '../../../helpers/constants/routes' import { getMetaMaskAccounts } from '../../../selectors/selectors' import Button from '../../../components/ui/button' -PrivateKeyImportView.contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, +class PrivateKeyImportView extends Component { + static contextTypes = { + t: PropTypes.func, + metricsEvent: PropTypes.func, + } + + static propTypes = { + importNewAccount: PropTypes.func.isRequired, + history: PropTypes.object.isRequired, + displayWarning: PropTypes.func.isRequired, + setSelectedAddress: PropTypes.func.isRequired, + firstAddress: PropTypes.string.isRequired, + error: PropTypes.node, + } + + + createNewKeychain () { + const input = document.getElementById('private-key-box') + const privateKey = input.value + const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props + + importNewAccount('Private Key', [ privateKey ]) + .then(({ selectedAddress }) => { + if (selectedAddress) { + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Import Account', + name: 'Imported Account with Private Key', + }, + }) + history.push(DEFAULT_ROUTE) + displayWarning(null) + } else { + displayWarning('Error importing account.') + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Import Account', + name: 'Error importing with Private Key', + }, + }) + setSelectedAddress(firstAddress) + } + }) + .catch(err => err && displayWarning(err.message || err)) + } + + createKeyringOnEnter = (event) => { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } + } + + render () { + const { error, displayWarning } = this.props + + return ( +
+ + {this.context.t('pastePrivateKey')} + +
+ this.createKeyringOnEnter(e)} + /> +
+
+ + +
+ { + error + ? {error} + : null + } +
+ ) + } } export default compose( @@ -36,94 +132,3 @@ function mapDispatchToProps (dispatch) { setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)), } } - -inherits(PrivateKeyImportView, Component) -function PrivateKeyImportView () { - this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this) - Component.call(this) -} - -PrivateKeyImportView.prototype.render = function PrivateKeyImportView () { - const { error, displayWarning } = this.props - - return ( -
- - {this.context.t('pastePrivateKey')} - -
- this.createKeyringOnEnter(e)} - /> -
-
- - -
- { - error - ? {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 - const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props - - importNewAccount('Private Key', [ privateKey ]) - .then(({ selectedAddress }) => { - if (selectedAddress) { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Import Account', - name: 'Imported Account with Private Key', - }, - }) - history.push(DEFAULT_ROUTE) - displayWarning(null) - } else { - displayWarning('Error importing account.') - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Import Account', - name: 'Error importing with Private Key', - }, - }) - setSelectedAddress(firstAddress) - } - }) - .catch(err => err && displayWarning(err.message || err)) -}