diff options
author | Dan <danjm.com@gmail.com> | 2018-05-01 10:42:57 +0800 |
---|---|---|
committer | Dan <danjm.com@gmail.com> | 2018-05-01 10:42:57 +0800 |
commit | 2f78fffbdbb0e41d73bcde2c15c88fff095614b7 (patch) | |
tree | 24d68a267304d085ee1b7c705ce5ade53c9439c3 /ui/app/components/pages/create-account | |
parent | f96c13d616e429447ac0a6a24c6aeee902162b88 (diff) | |
parent | 954394f81090b1a6a4afe55243caa3671b88addc (diff) | |
download | tangerine-wallet-browser-2f78fffbdbb0e41d73bcde2c15c88fff095614b7.tar.gz tangerine-wallet-browser-2f78fffbdbb0e41d73bcde2c15c88fff095614b7.tar.zst tangerine-wallet-browser-2f78fffbdbb0e41d73bcde2c15c88fff095614b7.zip |
Merge branch 'i3725-refactor-send-component-' into i3725-refactor-send-component-2
Diffstat (limited to 'ui/app/components/pages/create-account')
6 files changed, 551 insertions, 0 deletions
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js new file mode 100644 index 000000000..52d3dcde9 --- /dev/null +++ b/ui/app/components/pages/create-account/import-account/index.js @@ -0,0 +1,96 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect +import Select from 'react-select' + +// Subviews +const JsonImportView = require('./json.js') +const PrivateKeyImportView = require('./private-key.js') + + +AccountImportSubview.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(AccountImportSubview) + + +inherits(AccountImportSubview, Component) +function AccountImportSubview () { + Component.call(this) +} + +AccountImportSubview.prototype.getMenuItemTexts = function () { + return [ + this.context.t('privateKey'), + this.context.t('jsonFile'), + ] +} + +AccountImportSubview.prototype.render = function () { + const state = this.state || {} + const menuItems = this.getMenuItemTexts() + const { type } = state + + return ( + h('div.new-account-import-form', [ + + h('.new-account-import-disclaimer', [ + h('span', this.context.t('importAccountMsg')), + h('span', { + style: { + cursor: 'pointer', + textDecoration: 'underline', + }, + onClick: () => { + global.platform.openWindow({ + url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts', + }) + }, + }, this.context.t('here')), + ]), + + h('div.new-account-import-form__select-section', [ + + h('div.new-account-import-form__select-label', this.context.t('selectType')), + + h(Select, { + className: 'new-account-import-form__select', + name: 'import-type-select', + clearable: false, + value: type || menuItems[0], + options: menuItems.map((type) => { + return { + value: type, + label: type, + } + }), + onChange: (opt) => { + this.setState({ type: opt.value }) + }, + }), + + ]), + + 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 h(PrivateKeyImportView) + case this.context.t('jsonFile'): + return h(JsonImportView) + default: + return h(JsonImportView) + } +} diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js new file mode 100644 index 000000000..946907a47 --- /dev/null +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -0,0 +1,141 @@ +const Component = require('react').Component +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const connect = require('react-redux').connect +const actions = require('../../../../actions') +const FileInput = require('react-simple-file-input').default +const { DEFAULT_ROUTE } = require('../../../../routes') +const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' + +class JsonImportSubview extends Component { + constructor (props) { + super(props) + + this.state = { + file: null, + fileContents: '', + } + } + + render () { + const { error } = this.props + + return ( + h('div.new-account-import-form__json', [ + + h('p', this.context.t('usedByClients')), + h('a.warning', { + href: HELP_LINK, + target: '_blank', + }, this.context.t('fileImportFail')), + + h(FileInput, { + readAs: 'text', + onLoad: this.onLoad.bind(this), + style: { + margin: '20px 0px 12px 34%', + fontSize: '15px', + display: 'flex', + justifyContent: 'center', + }, + }), + + h('input.new-account-import-form__input-password', { + type: 'password', + placeholder: this.context.t('enterPassword'), + id: 'json-password-box', + onKeyPress: this.createKeyringOnEnter.bind(this), + }), + + h('div.new-account-create-form__buttons', {}, [ + + h('button.btn-secondary.new-account-create-form__button', { + onClick: () => this.props.history.push(DEFAULT_ROUTE), + }, [ + this.context.t('cancel'), + ]), + + h('button.btn-primary.new-account-create-form__button', { + onClick: () => this.createNewKeychain(), + }, [ + this.context.t('import'), + ]), + + ]), + + error ? h('span.error', error) : null, + ]) + ) + } + + onLoad (event, file) { + this.setState({file: file, fileContents: event.target.result}) + } + + createKeyringOnEnter (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } + } + + createNewKeychain () { + const state = this.state + + if (!state) { + const message = this.context.t('validFileImport') + return this.props.displayWarning(message) + } + + const { fileContents } = state + + if (!fileContents) { + const message = this.context.t('needImportFile') + return this.props.displayWarning(message) + } + + const passwordInput = document.getElementById('json-password-box') + const password = passwordInput.value + + if (!password) { + const message = this.context.t('needImportPassword') + return this.props.displayWarning(message) + } + + this.props.importNewJsonAccount([ fileContents, password ]) + } +} + +JsonImportSubview.propTypes = { + error: PropTypes.string, + goHome: PropTypes.func, + displayWarning: PropTypes.func, + importNewJsonAccount: PropTypes.func, + history: PropTypes.object, + t: PropTypes.func, +} + +const mapStateToProps = state => { + return { + error: state.appState.warning, + } +} + +const mapDispatchToProps = dispatch => { + return { + goHome: () => dispatch(actions.goHome()), + displayWarning: warning => dispatch(actions.displayWarning(warning)), + importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)), + } +} + +JsonImportSubview.contextTypes = { + t: PropTypes.func, +} + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(JsonImportSubview) diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js new file mode 100644 index 000000000..c77612ea4 --- /dev/null +++ b/ui/app/components/pages/create-account/import-account/private-key.js @@ -0,0 +1,95 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect +const actions = require('../../../../actions') +const { DEFAULT_ROUTE } = require('../../../../routes') + +PrivateKeyImportView.contextTypes = { + t: PropTypes.func, +} + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(PrivateKeyImportView) + + +function mapStateToProps (state) { + return { + error: state.appState.warning, + } +} + +function mapDispatchToProps (dispatch) { + return { + importNewAccount: (strategy, [ privateKey ]) => { + return dispatch(actions.importNewAccount(strategy, [ privateKey ])) + }, + displayWarning: () => dispatch(actions.displayWarning(null)), + } +} + +inherits(PrivateKeyImportView, Component) +function PrivateKeyImportView () { + this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this) + Component.call(this) +} + +PrivateKeyImportView.prototype.render = function () { + const { error } = this.props + + return ( + h('div.new-account-import-form__private-key', [ + + h('span.new-account-create-form__instruction', this.context.t('pastePrivateKey')), + + h('div.new-account-import-form__private-key-password-container', [ + + h('input.new-account-import-form__input-password', { + type: 'password', + id: 'private-key-box', + onKeyPress: e => this.createKeyringOnEnter(e), + }), + + ]), + + h('div.new-account-import-form__buttons', {}, [ + + h('button.btn-secondary--lg.new-account-create-form__button', { + onClick: () => this.props.history.push(DEFAULT_ROUTE), + }, [ + this.context.t('cancel'), + ]), + + h('button.btn-primary--lg.new-account-create-form__button', { + onClick: () => this.createNewKeychain(), + }, [ + this.context.t('import'), + ]), + + ]), + + error ? h('span.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 } = this.props + + importNewAccount('Private Key', [ privateKey ]) + .then(() => history.push(DEFAULT_ROUTE)) +} diff --git a/ui/app/components/pages/create-account/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js new file mode 100644 index 000000000..d98909baa --- /dev/null +++ b/ui/app/components/pages/create-account/import-account/seed.js @@ -0,0 +1,35 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect + +SeedImportSubview.contextTypes = { + t: PropTypes.func, +} + +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: { + }, + }, [ + this.context.t('pasteSeed'), + h('textarea'), + h('br'), + h('button', this.context.t('submit')), + ]) + ) +} diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js new file mode 100644 index 000000000..0962477d8 --- /dev/null +++ b/ui/app/components/pages/create-account/index.js @@ -0,0 +1,81 @@ +const Component = require('react').Component +const { Switch, Route, matchPath } = require('react-router-dom') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const connect = require('react-redux').connect +const actions = require('../../../actions') +const { getCurrentViewContext } = require('../../../selectors') +const classnames = require('classnames') +const NewAccountCreateForm = require('./new-account') +const NewAccountImportForm = require('./import-account') +const { NEW_ACCOUNT_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../../routes') + +class CreateAccountPage extends Component { + renderTabs () { + const { history, location } = this.props + + return h('div.new-account__tabs', [ + h('div.new-account__tabs__tab', { + className: classnames('new-account__tabs__tab', { + 'new-account__tabs__selected': matchPath(location.pathname, { + path: NEW_ACCOUNT_ROUTE, exact: true, + }), + }), + onClick: () => history.push(NEW_ACCOUNT_ROUTE), + }, 'Create'), + + h('div.new-account__tabs__tab', { + className: classnames('new-account__tabs__tab', { + 'new-account__tabs__selected': matchPath(location.pathname, { + path: IMPORT_ACCOUNT_ROUTE, exact: true, + }), + }), + onClick: () => history.push(IMPORT_ACCOUNT_ROUTE), + }, 'Import'), + ]) + } + + render () { + return h('div.new-account', {}, [ + h('div.new-account__header', [ + h('div.new-account__title', 'New Account'), + this.renderTabs(), + ]), + h('div.new-account__form', [ + h(Switch, [ + h(Route, { + exact: true, + path: NEW_ACCOUNT_ROUTE, + component: NewAccountCreateForm, + }), + h(Route, { + exact: true, + path: IMPORT_ACCOUNT_ROUTE, + component: NewAccountImportForm, + }), + ]), + ]), + ]) + } +} + +CreateAccountPage.propTypes = { + location: PropTypes.object, + history: PropTypes.object, +} + +const mapStateToProps = state => ({ + displayedForm: getCurrentViewContext(state), +}) + +const mapDispatchToProps = dispatch => ({ + displayForm: form => dispatch(actions.setNewAccountForm(form)), + showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), + showExportPrivateKeyModal: () => { + dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) + }, + hideModal: () => dispatch(actions.hideModal()), + saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)), +}) + +module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage) diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js new file mode 100644 index 000000000..40fa584be --- /dev/null +++ b/ui/app/components/pages/create-account/new-account.js @@ -0,0 +1,103 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const connect = require('react-redux').connect +const actions = require('../../../actions') +const { DEFAULT_ROUTE } = require('../../../routes') + +class NewAccountCreateForm extends Component { + constructor (props, context) { + super(props) + + const { numberOfExistingAccounts = 0 } = props + const newAccountNumber = numberOfExistingAccounts + 1 + + this.state = { + newAccountName: '', + defaultAccountName: context.t('newAccountNumberName', [newAccountNumber]), + } + } + + render () { + const { newAccountName, defaultAccountName } = this.state + const { history, createAccount } = this.props + + return h('div.new-account-create-form', [ + + h('div.new-account-create-form__input-label', {}, [ + this.context.t('accountName'), + ]), + + h('div.new-account-create-form__input-wrapper', {}, [ + h('input.new-account-create-form__input', { + value: newAccountName, + placeholder: defaultAccountName, + onChange: event => this.setState({ newAccountName: event.target.value }), + }, []), + ]), + + h('div.new-account-create-form__buttons', {}, [ + + h('button.btn-secondary--lg.new-account-create-form__button', { + onClick: () => history.push(DEFAULT_ROUTE), + }, [ + this.context.t('cancel'), + ]), + + h('button.btn-primary--lg.new-account-create-form__button', { + onClick: () => { + createAccount(newAccountName || defaultAccountName) + .then(() => history.push(DEFAULT_ROUTE)) + }, + }, [ + this.context.t('create'), + ]), + + ]), + + ]) + } +} + +NewAccountCreateForm.propTypes = { + hideModal: PropTypes.func, + showImportPage: PropTypes.func, + createAccount: PropTypes.func, + numberOfExistingAccounts: PropTypes.number, + history: PropTypes.object, + t: PropTypes.func, +} + +const mapStateToProps = state => { + const { metamask: { network, selectedAddress, identities = {} } } = state + const numberOfExistingAccounts = Object.keys(identities).length + + return { + network, + address: selectedAddress, + numberOfExistingAccounts, + } +} + +const mapDispatchToProps = dispatch => { + return { + toCoinbase: address => dispatch(actions.buyEth({ network: '1', address, amount: 0 })), + hideModal: () => dispatch(actions.hideModal()), + createAccount: newAccountName => { + return dispatch(actions.addNewAccount()) + .then(newAccountAddress => { + if (newAccountName) { + dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName)) + } + }) + }, + showImportPage: () => dispatch(actions.showImportPage()), + } +} + +NewAccountCreateForm.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm) + |