diff options
Diffstat (limited to 'ui/app/components/pages/create-account')
9 files changed, 0 insertions, 1367 deletions
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js deleted file mode 100644 index c63de234a..000000000 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ /dev/null @@ -1,205 +0,0 @@ -const { Component } = require('react') -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const genAccountLink = require('../../../../../lib/account-link.js') -const Select = require('react-select').default -import Button from '../../../button' - -class AccountList extends Component { - constructor (props, context) { - super(props) - } - - getHdPaths () { - return [ - { - label: `Ledger Live`, - value: `m/44'/60'/0'/0/0`, - }, - { - label: `Legacy (MEW / MyCrypto)`, - value: `m/44'/60'/0'`, - }, - ] - } - - goToNextPage = () => { - // If we have < 5 accounts, it's restricted by BIP-44 - if (this.props.accounts.length === 5) { - this.props.getPage(this.props.device, 1, this.props.selectedPath) - } else { - this.props.onAccountRestriction() - } - } - - goToPreviousPage = () => { - this.props.getPage(this.props.device, -1, this.props.selectedPath) - } - - renderHdPathSelector () { - const { onPathChange, selectedPath } = this.props - - const options = this.getHdPaths() - return h('div', [ - h('h3.hw-connect__hdPath__title', {}, this.context.t('selectHdPath')), - h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')), - h('div.hw-connect__hdPath', [ - h(Select, { - className: 'hw-connect__hdPath__select', - name: 'hd-path-select', - clearable: false, - value: selectedPath, - options, - onChange: (opt) => { - onPathChange(opt.value) - }, - }), - ]), - ]) - } - - capitalizeDevice (device) { - return device.slice(0, 1).toUpperCase() + device.slice(1) - } - - renderHeader () { - const { device } = this.props - return ( - h('div.hw-connect', [ - - h('h3.hw-connect__unlock-title', {}, `${this.context.t('unlock')} ${this.capitalizeDevice(device)}`), - - device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null, - - h('h3.hw-connect__hdPath__title', {}, this.context.t('selectAnAccount')), - h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')), - ]) - ) - } - - renderAccounts () { - return h('div.hw-account-list', [ - this.props.accounts.map((a, i) => { - - return h('div.hw-account-list__item', { key: a.address }, [ - h('div.hw-account-list__item__radio', [ - h('input', { - type: 'radio', - name: 'selectedAccount', - id: `address-${i}`, - value: a.index, - onChange: (e) => this.props.onAccountChange(e.target.value), - checked: this.props.selectedAccount === a.index.toString(), - }), - h( - 'label.hw-account-list__item__label', - { - htmlFor: `address-${i}`, - }, - [ - h('span.hw-account-list__item__index', a.index + 1), - `${a.address.slice(0, 4)}...${a.address.slice(-4)}`, - h('span.hw-account-list__item__balance', `${a.balance}`), - ]), - ]), - h( - 'a.hw-account-list__item__link', - { - href: genAccountLink(a.address, this.props.network), - target: '_blank', - title: this.context.t('etherscanView'), - }, - h('img', { src: 'images/popout.svg' }) - ), - ]) - }), - ]) - } - - renderPagination () { - return h('div.hw-list-pagination', [ - h( - 'button.hw-list-pagination__button', - { - onClick: this.goToPreviousPage, - }, - `< ${this.context.t('prev')}` - ), - - h( - 'button.hw-list-pagination__button', - { - onClick: this.goToNextPage, - }, - `${this.context.t('next')} >` - ), - ]) - } - - renderButtons () { - const disabled = this.props.selectedAccount === null - const buttonProps = {} - if (disabled) { - buttonProps.disabled = true - } - - return h('div.new-account-connect-form__buttons', {}, [ - h(Button, { - type: 'default', - large: true, - className: 'new-account-connect-form__button', - onClick: this.props.onCancel.bind(this), - }, [this.context.t('cancel')]), - - h(Button, { - type: 'confirm', - large: true, - className: 'new-account-connect-form__button unlock', - disabled, - onClick: this.props.onUnlockAccount.bind(this, this.props.device), - }, [this.context.t('unlock')]), - ]) - } - - renderForgetDevice () { - return h('div.hw-forget-device-container', {}, [ - h('a', { - onClick: this.props.onForgetDevice.bind(this, this.props.device), - }, this.context.t('forgetDevice')), - ]) - } - - render () { - return h('div.new-account-connect-form.account-list', {}, [ - this.renderHeader(), - this.renderAccounts(), - this.renderPagination(), - this.renderButtons(), - this.renderForgetDevice(), - ]) - } - -} - - -AccountList.propTypes = { - onPathChange: PropTypes.func.isRequired, - selectedPath: PropTypes.string.isRequired, - device: PropTypes.string.isRequired, - accounts: PropTypes.array.isRequired, - onAccountChange: PropTypes.func.isRequired, - onForgetDevice: PropTypes.func.isRequired, - getPage: PropTypes.func.isRequired, - network: PropTypes.string, - selectedAccount: PropTypes.string, - history: PropTypes.object, - onUnlockAccount: PropTypes.func, - onCancel: PropTypes.func, - onAccountRestriction: PropTypes.func, -} - -AccountList.contextTypes = { - t: PropTypes.func, -} - -module.exports = AccountList diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js deleted file mode 100644 index 49a5610c1..000000000 --- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js +++ /dev/null @@ -1,197 +0,0 @@ -const { Component } = require('react') -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -import Button from '../../../button' - -class ConnectScreen extends Component { - constructor (props, context) { - super(props) - this.state = { - selectedDevice: null, - } - } - - connect = () => { - if (this.state.selectedDevice) { - this.props.connectToHardwareWallet(this.state.selectedDevice) - } - return null - } - - renderConnectToTrezorButton () { - return h( - `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`, - { onClick: _ => this.setState({selectedDevice: 'trezor'}) }, - h('img.hw-connect__btn__img', { - src: 'images/trezor-logo.svg', - }) - ) - } - - renderConnectToLedgerButton () { - return h( - `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`, - { onClick: _ => this.setState({selectedDevice: 'ledger'}) }, - h('img.hw-connect__btn__img', { - src: 'images/ledger-logo.svg', - }) - ) - } - - renderButtons () { - return ( - h('div', {}, [ - h('div.hw-connect__btn-wrapper', {}, [ - this.renderConnectToLedgerButton(), - this.renderConnectToTrezorButton(), - ]), - h(Button, { - type: 'confirm', - large: true, - className: 'hw-connect__connect-btn', - onClick: this.connect, - disabled: !this.state.selectedDevice, - }, this.context.t('connect')), - ]) - ) - } - - renderUnsupportedBrowser () { - return ( - h('div.new-account-connect-form.unsupported-browser', {}, [ - h('div.hw-connect', [ - h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')), - h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')), - ]), - h(Button, { - type: 'primary', - large: true, - onClick: () => global.platform.openWindow({ - url: 'https://google.com/chrome', - }), - }, this.context.t('downloadGoogleChrome')), - ]) - ) - } - - renderHeader () { - return ( - h('div.hw-connect__header', {}, [ - h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)), - h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)), - ]) - ) - } - - getAffiliateLinks () { - const links = { - trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`, - ledger: `<a class='hw-connect__get-hw__link' href='https://www.ledger.com/products/ledger-nano-s?r=17c4991a03fa&tracker=MY_TRACKER' target='_blank'>Ledger</a>`, - } - - const text = this.context.t('orderOneHere') - const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger) - - return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }}) - } - - renderTrezorAffiliateLink () { - return h('div.hw-connect__get-hw', {}, [ - h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)), - this.getAffiliateLinks(), - ]) - } - - - scrollToTutorial = (e) => { - if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'}) - } - - renderLearnMore () { - return ( - h('p.hw-connect__learn-more', { - onClick: this.scrollToTutorial, - }, [ - this.context.t('learnMore'), - h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}), - ]) - ) - } - - renderTutorialSteps () { - const steps = [ - { - asset: 'hardware-wallet-step-1', - dimensions: {width: '225px', height: '75px'}, - }, - { - asset: 'hardware-wallet-step-2', - dimensions: {width: '300px', height: '100px'}, - }, - { - asset: 'hardware-wallet-step-3', - dimensions: {width: '120px', height: '90px'}, - }, - ] - - return h('.hw-tutorial', { - ref: node => { this.referenceNode = node }, - }, - steps.map((step, i) => ( - h('div.hw-connect', {}, [ - h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)), - h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)), - h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }), - ]) - )) - ) - } - - renderFooter () { - return ( - h('div.hw-connect__footer', {}, [ - h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)), - this.renderButtons(), - h('p.hw-connect__footer__msg', {}, [ - this.context.t(`havingTroubleConnecting`), - h('a.hw-connect__footer__link', { - href: 'https://support.metamask.io/', - target: '_blank', - }, this.context.t('getHelp')), - ]), - ]) - ) - } - - renderConnectScreen () { - return ( - h('div.new-account-connect-form', {}, [ - this.renderHeader(), - this.renderButtons(), - this.renderTrezorAffiliateLink(), - this.renderLearnMore(), - this.renderTutorialSteps(), - this.renderFooter(), - ]) - ) - } - - render () { - if (this.props.browserSupported) { - return this.renderConnectScreen() - } - return this.renderUnsupportedBrowser() - } -} - -ConnectScreen.propTypes = { - connectToHardwareWallet: PropTypes.func.isRequired, - browserSupported: PropTypes.bool.isRequired, -} - -ConnectScreen.contextTypes = { - t: PropTypes.func, -} - -module.exports = ConnectScreen - diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js deleted file mode 100644 index 712cc5cbb..000000000 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ /dev/null @@ -1,293 +0,0 @@ -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 { getMetaMaskAccounts } = require('../../../../selectors') -const ConnectScreen = require('./connect-screen') -const AccountList = require('./account-list') -const { DEFAULT_ROUTE } = require('../../../../routes') -const { formatBalance } = require('../../../../util') -const { getPlatform } = require('../../../../../../app/scripts/lib/util') -const { PLATFORM_FIREFOX } = require('../../../../../../app/scripts/lib/enums') - -class ConnectHardwareForm extends Component { - constructor (props, context) { - super(props) - this.state = { - error: null, - selectedAccount: null, - accounts: [], - browserSupported: true, - unlocked: false, - device: null, - } - } - - componentWillReceiveProps (nextProps) { - const { accounts } = nextProps - const newAccounts = this.state.accounts.map(a => { - const normalizedAddress = a.address.toLowerCase() - const balanceValue = accounts[normalizedAddress] && accounts[normalizedAddress].balance || null - a.balance = balanceValue ? formatBalance(balanceValue, 6) : '...' - return a - }) - this.setState({accounts: newAccounts}) - } - - - componentDidMount () { - this.checkIfUnlocked() - } - - async checkIfUnlocked () { - ['trezor', 'ledger'].forEach(async device => { - const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device]) - if (unlocked) { - this.setState({unlocked: true}) - this.getPage(device, 0, this.props.defaultHdPaths[device]) - } - }) - } - - connectToHardwareWallet = (device) => { - // Ledger hardware wallets are not supported on firefox - if (getPlatform() === PLATFORM_FIREFOX && device === 'ledger') { - this.setState({ browserSupported: false, error: null}) - return null - } - - if (this.state.accounts.length) { - return null - } - - // Default values - this.getPage(device, 0, this.props.defaultHdPaths[device]) - } - - onPathChange = (path) => { - this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path}) - this.getPage(this.state.device, 0, path) - } - - onAccountChange = (account) => { - this.setState({selectedAccount: account.toString(), error: null}) - } - - onAccountRestriction = () => { - this.setState({error: this.context.t('ledgerAccountRestriction') }) - } - - showTemporaryAlert () { - this.props.showAlert(this.context.t('hardwareWalletConnected')) - // Autohide the alert after 5 seconds - setTimeout(_ => { - this.props.hideAlert() - }, 5000) - } - - getPage = (device, page, hdPath) => { - this.props - .connectHardware(device, page, hdPath) - .then(accounts => { - if (accounts.length) { - - // If we just loaded the accounts for the first time - // (device previously locked) show the global alert - if (this.state.accounts.length === 0 && !this.state.unlocked) { - this.showTemporaryAlert() - } - - const newState = { unlocked: true, device, error: null } - // Default to the first account - if (this.state.selectedAccount === null) { - accounts.forEach((a, i) => { - if (a.address.toLowerCase() === this.props.address) { - newState.selectedAccount = a.index.toString() - } - }) - // If the page doesn't contain the selected account, let's deselect it - } else if (!accounts.filter(a => a.index.toString() === this.state.selectedAccount).length) { - newState.selectedAccount = null - } - - - // Map accounts with balances - newState.accounts = accounts.map(account => { - const normalizedAddress = account.address.toLowerCase() - const balanceValue = this.props.accounts[normalizedAddress] && this.props.accounts[normalizedAddress].balance || null - account.balance = balanceValue ? formatBalance(balanceValue, 6) : '...' - return account - }) - - this.setState(newState) - } - }) - .catch(e => { - if (e === 'Window blocked') { - this.setState({ browserSupported: false, error: null}) - } else if (e !== 'Window closed' && e !== 'Popup closed') { - this.setState({ error: e.toString() }) - } - }) - } - - onForgetDevice = (device) => { - this.props.forgetDevice(device) - .then(_ => { - this.setState({ - error: null, - selectedAccount: null, - accounts: [], - unlocked: false, - }) - }).catch(e => { - this.setState({ error: e.toString() }) - }) - } - - onUnlockAccount = (device) => { - - if (this.state.selectedAccount === null) { - this.setState({ error: this.context.t('accountSelectionRequired') }) - } - - this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device) - .then(_ => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Connected Hardware Wallet', - name: 'Connected Account with: ' + device, - }, - }) - this.props.history.push(DEFAULT_ROUTE) - }).catch(e => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Connected Hardware Wallet', - name: 'Error connecting hardware wallet', - }, - customVariables: { - error: e.toString(), - }, - }) - this.setState({ error: e.toString() }) - }) - } - - onCancel = () => { - this.props.history.push(DEFAULT_ROUTE) - } - - renderError () { - return this.state.error - ? h('span.error', { style: { margin: '20px 20px 10px', display: 'block', textAlign: 'center' } }, this.state.error) - : null - } - - renderContent () { - if (!this.state.accounts.length) { - return h(ConnectScreen, { - connectToHardwareWallet: this.connectToHardwareWallet, - browserSupported: this.state.browserSupported, - }) - } - - return h(AccountList, { - onPathChange: this.onPathChange, - selectedPath: this.props.defaultHdPaths[this.state.device], - device: this.state.device, - accounts: this.state.accounts, - selectedAccount: this.state.selectedAccount, - onAccountChange: this.onAccountChange, - network: this.props.network, - getPage: this.getPage, - history: this.props.history, - onUnlockAccount: this.onUnlockAccount, - onForgetDevice: this.onForgetDevice, - onCancel: this.onCancel, - onAccountRestriction: this.onAccountRestriction, - }) - } - - render () { - return h('div', [ - this.renderError(), - this.renderContent(), - ]) - } -} - -ConnectHardwareForm.propTypes = { - hideModal: PropTypes.func, - showImportPage: PropTypes.func, - showConnectPage: PropTypes.func, - connectHardware: PropTypes.func, - checkHardwareStatus: PropTypes.func, - forgetDevice: PropTypes.func, - showAlert: PropTypes.func, - hideAlert: PropTypes.func, - unlockHardwareWalletAccount: PropTypes.func, - setHardwareWalletDefaultHdPath: PropTypes.func, - numberOfExistingAccounts: PropTypes.number, - history: PropTypes.object, - t: PropTypes.func, - network: PropTypes.string, - accounts: PropTypes.object, - address: PropTypes.string, - defaultHdPaths: PropTypes.object, -} - -const mapStateToProps = state => { - const { - metamask: { network, selectedAddress, identities = {} }, - } = state - const accounts = getMetaMaskAccounts(state) - const numberOfExistingAccounts = Object.keys(identities).length - const { - appState: { defaultHdPaths }, - } = state - - return { - network, - accounts, - address: selectedAddress, - numberOfExistingAccounts, - defaultHdPaths, - } -} - -const mapDispatchToProps = dispatch => { - return { - setHardwareWalletDefaultHdPath: ({device, path}) => { - return dispatch(actions.setHardwareWalletDefaultHdPath({device, path})) - }, - connectHardware: (deviceName, page, hdPath) => { - return dispatch(actions.connectHardware(deviceName, page, hdPath)) - }, - checkHardwareStatus: (deviceName, hdPath) => { - return dispatch(actions.checkHardwareStatus(deviceName, hdPath)) - }, - forgetDevice: (deviceName) => { - return dispatch(actions.forgetDevice(deviceName)) - }, - unlockHardwareWalletAccount: (index, deviceName, hdPath) => { - return dispatch(actions.unlockHardwareWalletAccount(index, deviceName, hdPath)) - }, - showImportPage: () => dispatch(actions.showImportPage()), - showConnectPage: () => dispatch(actions.showConnectPage()), - showAlert: (msg) => dispatch(actions.showAlert(msg)), - hideAlert: () => dispatch(actions.hideAlert()), - } -} - -ConnectHardwareForm.contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)( - ConnectHardwareForm -) diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js deleted file mode 100644 index 48d8f8838..000000000 --- a/ui/app/components/pages/create-account/import-account/index.js +++ /dev/null @@ -1,96 +0,0 @@ -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.zendesk.com/hc/en-us/articles/360015289932', - }) - }, - }, 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 deleted file mode 100644 index 9aeea5579..000000000 --- a/ui/app/components/pages/create-account/import-account/json.js +++ /dev/null @@ -1,170 +0,0 @@ -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 { getMetaMaskAccounts } = require('../../../../selectors') -const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' -import Button from '../../../button' - -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, { - type: 'default', - large: true, - className: 'new-account-create-form__button', - onClick: () => this.props.history.push(DEFAULT_ROUTE), - }, [this.context.t('cancel')]), - - h(Button, { - type: 'primary', - large: true, - className: '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 { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress, history } = this.props - const state = this.state - - if (!state) { - const message = this.context.t('validFileImport') - return displayWarning(message) - } - - const { fileContents } = state - - if (!fileContents) { - const message = this.context.t('needImportFile') - return displayWarning(message) - } - - const passwordInput = document.getElementById('json-password-box') - const password = passwordInput.value - - importNewJsonAccount([ fileContents, password ]) - .then(({ selectedAddress }) => { - if (selectedAddress) { - history.push(DEFAULT_ROUTE) - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Import Account', - name: 'Imported Account with JSON', - }, - }) - displayWarning(null) - } else { - displayWarning('Error importing account.') - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Import Account', - name: 'Error importing JSON', - }, - }) - setSelectedAddress(firstAddress) - } - }) - .catch(err => err && displayWarning(err.message || err)) - } -} - -JsonImportSubview.propTypes = { - error: PropTypes.string, - goHome: PropTypes.func, - displayWarning: PropTypes.func, - firstAddress: PropTypes.string, - importNewJsonAccount: PropTypes.func, - history: PropTypes.object, - setSelectedAddress: PropTypes.func, - t: PropTypes.func, -} - -const mapStateToProps = state => { - return { - error: state.appState.warning, - firstAddress: Object.keys(getMetaMaskAccounts(state))[0], - } -} - -const mapDispatchToProps = dispatch => { - return { - goHome: () => dispatch(actions.goHome()), - displayWarning: warning => dispatch(actions.displayWarning(warning)), - importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)), - setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)), - } -} - -JsonImportSubview.contextTypes = { - t: PropTypes.func, - metricsEvent: 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 deleted file mode 100644 index 4ba31806f..000000000 --- a/ui/app/components/pages/create-account/import-account/private-key.js +++ /dev/null @@ -1,128 +0,0 @@ -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') -const { getMetaMaskAccounts } = require('../../../../selectors') -import Button from '../../../button' - -PrivateKeyImportView.contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, -} - -module.exports = compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(PrivateKeyImportView) - - -function mapStateToProps (state) { - return { - error: state.appState.warning, - firstAddress: Object.keys(getMetaMaskAccounts(state))[0], - } -} - -function mapDispatchToProps (dispatch) { - return { - importNewAccount: (strategy, [ privateKey ]) => { - return dispatch(actions.importNewAccount(strategy, [ privateKey ])) - }, - displayWarning: (message) => dispatch(actions.displayWarning(message || null)), - setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)), - } -} - -inherits(PrivateKeyImportView, Component) -function PrivateKeyImportView () { - this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this) - Component.call(this) -} - -PrivateKeyImportView.prototype.render = function () { - const { error, displayWarning } = 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, { - type: 'default', - large: true, - className: 'new-account-create-form__button', - onClick: () => { - displayWarning(null) - this.props.history.push(DEFAULT_ROUTE) - }, - }, [this.context.t('cancel')]), - - h(Button, { - type: 'primary', - large: true, - className: '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, 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)) -} diff --git a/ui/app/components/pages/create-account/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js deleted file mode 100644 index d98909baa..000000000 --- a/ui/app/components/pages/create-account/import-account/seed.js +++ /dev/null @@ -1,35 +0,0 @@ -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 deleted file mode 100644 index d3de1ea01..000000000 --- a/ui/app/components/pages/create-account/index.js +++ /dev/null @@ -1,113 +0,0 @@ -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 ConnectHardwareForm = require('./connect-hardware') -const { - NEW_ACCOUNT_ROUTE, - IMPORT_ACCOUNT_ROUTE, - CONNECT_HARDWARE_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), - }, [ - this.context.t('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), - }, [ - this.context.t('import'), - ]), - h( - 'div.new-account__tabs__tab', - { - className: classnames('new-account__tabs__tab', { - 'new-account__tabs__selected': matchPath(location.pathname, { - path: CONNECT_HARDWARE_ROUTE, - exact: true, - }), - }), - onClick: () => history.push(CONNECT_HARDWARE_ROUTE), - }, - this.context.t('connect') - ), - ]) - } - - render () { - return h('div.new-account', {}, [ - h('div.new-account__header', [ - h('div.new-account__title', this.context.t('newAccount')), - 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, - }), - h(Route, { - exact: true, - path: CONNECT_HARDWARE_ROUTE, - component: ConnectHardwareForm, - }), - ]), - ]), - ]) - } -} - -CreateAccountPage.propTypes = { - location: PropTypes.object, - history: PropTypes.object, - t: PropTypes.func, -} - -CreateAccountPage.contextTypes = { - t: PropTypes.func, -} - -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()), - setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(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 deleted file mode 100644 index a7595e346..000000000 --- a/ui/app/components/pages/create-account/new-account.js +++ /dev/null @@ -1,130 +0,0 @@ -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') -import Button from '../../button' - -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, { - type: 'default', - large: true, - className: 'new-account-create-form__button', - onClick: () => history.push(DEFAULT_ROUTE), - }, [this.context.t('cancel')]), - - h(Button, { - type: 'primary', - large: true, - className: 'new-account-create-form__button', - onClick: () => { - createAccount(newAccountName || defaultAccountName) - .then(() => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Add New Account', - name: 'Added New Account', - }, - }) - history.push(DEFAULT_ROUTE) - }) - .catch((e) => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Add New Account', - name: 'Error', - }, - customVariables: { - errorMessage: e.message, - }, - }) - }) - }, - }, [this.context.t('create')]), - - ]), - - ]) - } -} - -NewAccountCreateForm.propTypes = { - hideModal: PropTypes.func, - showImportPage: PropTypes.func, - showConnectPage: 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.setAccountLabel(newAccountAddress, newAccountName)) - } - }) - }, - showImportPage: () => dispatch(actions.showImportPage()), - showConnectPage: () => dispatch(actions.showConnectPage()), - } -} - -NewAccountCreateForm.contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm) - |