diff options
Diffstat (limited to 'ui/app/pages')
104 files changed, 3549 insertions, 1377 deletions
diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js index 9a118a815..04e9c8dcf 100644 --- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js +++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js @@ -84,7 +84,7 @@ export default class ConfirmAddSuggestedToken extends Component { </div> </div> ) - }) + }) } </div> </div> diff --git a/ui/app/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/pages/confirm-add-token/confirm-add-token.component.js index f0a19e8d9..d918d7e39 100644 --- a/ui/app/pages/confirm-add-token/confirm-add-token.component.js +++ b/ui/app/pages/confirm-add-token/confirm-add-token.component.js @@ -80,7 +80,7 @@ export default class ConfirmAddToken extends Component { </div> </div> ) - }) + }) } </div> </div> diff --git a/ui/app/pages/confirm-transaction/conf-tx.js b/ui/app/pages/confirm-transaction/conf-tx.js index f9af6624e..d66cb699d 100644 --- a/ui/app/pages/confirm-transaction/conf-tx.js +++ b/ui/app/pages/confirm-transaction/conf-tx.js @@ -12,7 +12,6 @@ const R = require('ramda') const SignatureRequest = require('../../components/app/signature-request') const Loading = require('../../components/ui/loading-screen') const { DEFAULT_ROUTE } = require('../../helpers/constants/routes') -const { getMetaMaskAccounts } = require('../../selectors/selectors') module.exports = compose( withRouter, @@ -29,8 +28,6 @@ function mapStateToProps (state) { return { identities: state.metamask.identities, - accounts: getMetaMaskAccounts(state), - selectedAddress: state.metamask.selectedAddress, unapprovedTxs: state.metamask.unapprovedTxs, unapprovedMsgs: state.metamask.unapprovedMsgs, unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs, @@ -39,7 +36,6 @@ function mapStateToProps (state) { warning: state.appState.warning, network: state.metamask.network, provider: state.metamask.provider, - conversionRate: state.metamask.conversionRate, currentCurrency: state.metamask.currentCurrency, blockGasLimit: state.metamask.currentBlockGasLimit, computedBalances: state.metamask.computedBalances, @@ -146,7 +142,6 @@ ConfirmTxScreen.prototype.render = function () { const props = this.props const { currentCurrency, - conversionRate, blockGasLimit, } = props @@ -159,10 +154,7 @@ ConfirmTxScreen.prototype.render = function () { // Properties txData: txData, key: txData.id, - selectedAddress: props.selectedAddress, - accounts: props.accounts, identities: props.identities, - conversionRate, currentCurrency, blockGasLimit, // Actions diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js index 247c27a5d..71684783f 100644 --- a/ui/app/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/pages/create-account/connect-hardware/account-list.js @@ -6,18 +6,18 @@ const Select = require('react-select').default import Button from '../../../components/ui/button' class AccountList extends Component { - getHdPaths () { - return [ - { - label: `Ledger Live`, - value: `m/44'/60'/0'/0/0`, - }, - { - label: `Legacy (MEW / MyCrypto)`, - value: `m/44'/60'/0'`, - }, - ] - } + 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 @@ -74,128 +74,128 @@ class AccountList extends Component { } 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}`), - ]), + 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' }) - ), - ]) - }), - ]) + ]), + 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 + 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')} >` + ), + ]) } - 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: 'primary', - large: true, - className: 'new-account-connect-form__button unlock', - disabled, - onClick: this.props.onUnlockAccount.bind(this, this.props.device), - }, [this.context.t('unlock')]), - ]) - } + renderButtons () { + const disabled = this.props.selectedAccount === null + const buttonProps = {} + if (disabled) { + buttonProps.disabled = true + } - renderForgetDevice () { - return h('div.hw-forget-device-container', {}, [ - h('a', { - onClick: this.props.onForgetDevice.bind(this, this.props.device), - }, this.context.t('forgetDevice')), - ]) - } + 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: 'primary', + large: true, + className: 'new-account-connect-form__button unlock', + disabled, + onClick: this.props.onUnlockAccount.bind(this, this.props.device), + }, [this.context.t('unlock')]), + ]) + } - render () { - return h('div.new-account-connect-form.account-list', {}, [ + 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, + 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, + t: PropTypes.func, } module.exports = AccountList diff --git a/ui/app/pages/create-account/connect-hardware/connect-screen.js b/ui/app/pages/create-account/connect-hardware/connect-screen.js index a3b8ad246..fe7c1e027 100644 --- a/ui/app/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/pages/create-account/connect-hardware/connect-screen.js @@ -4,12 +4,12 @@ const h = require('react-hyperscript') import Button from '../../../components/ui/button' class ConnectScreen extends Component { - constructor (props) { - super(props) - this.state = { - selectedDevice: null, - } + constructor (props) { + super(props) + this.state = { + selectedDevice: null, } + } connect = () => { if (this.state.selectedDevice) { @@ -19,23 +19,23 @@ class ConnectScreen extends Component { } 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', - }) - ) + 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', - }) - ) + 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 () { @@ -57,30 +57,30 @@ class ConnectScreen extends Component { } 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')), - ]) - ) + 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`)), - ]) - ) + 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 () { @@ -96,10 +96,10 @@ class ConnectScreen extends Component { } renderTrezorAffiliateLink () { - return h('div.hw-connect__get-hw', {}, [ - h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)), - this.getAffiliateLinks(), - ]) + return h('div.hw-connect__get-hw', {}, [ + h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)), + this.getAffiliateLinks(), + ]) } @@ -108,89 +108,89 @@ class ConnectScreen extends Component { } 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'}), - ]) - ) + 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 }, + const steps = [ + { + asset: 'hardware-wallet-step-1', + dimensions: {width: '225px', height: '75px'}, + }, + { + asset: 'hardware-wallet-step-2', + dimensions: {width: '300px', height: '100px'}, }, - 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 }), - ]) - )) - ) + { + 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')), - ]), - ]) - ) + 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(), - ]) - ) + 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() + if (this.props.browserSupported) { + return this.renderConnectScreen() + } + return this.renderUnsupportedBrowser() } } ConnectScreen.propTypes = { - connectToHardwareWallet: PropTypes.func.isRequired, - browserSupported: PropTypes.bool.isRequired, + connectToHardwareWallet: PropTypes.func.isRequired, + browserSupported: PropTypes.bool.isRequired, } ConnectScreen.contextTypes = { - t: PropTypes.func, + t: PropTypes.func, } module.exports = ConnectScreen diff --git a/ui/app/pages/create-account/connect-hardware/index.js b/ui/app/pages/create-account/connect-hardware/index.js index 80a160205..66851c780 100644 --- a/ui/app/pages/create-account/connect-hardware/index.js +++ b/ui/app/pages/create-account/connect-hardware/index.js @@ -126,16 +126,16 @@ class ConnectHardwareForm extends Component { onForgetDevice = (device) => { this.props.forgetDevice(device) - .then(_ => { - this.setState({ - error: null, - selectedAccount: null, - accounts: [], - unlocked: false, + .then(_ => { + this.setState({ + error: null, + selectedAccount: null, + accounts: [], + unlocked: false, + }) + }).catch(e => { + this.setState({ error: e.toString() }) }) - }).catch(e => { - this.setState({ error: e.toString() }) - }) } onUnlockAccount = (device) => { @@ -145,28 +145,28 @@ class ConnectHardwareForm extends Component { } 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(), - }, + .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() }) }) - this.setState({ error: e.toString() }) - }) } onCancel = () => { diff --git a/ui/app/pages/first-time-flow/create-password/create-password.component.js b/ui/app/pages/first-time-flow/create-password/create-password.component.js index 5e67a2244..fbeb34d77 100644 --- a/ui/app/pages/first-time-flow/create-password/create-password.component.js +++ b/ui/app/pages/first-time-flow/create-password/create-password.component.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { Switch, Route } from 'react-router-dom' import NewAccount from './new-account' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import ImportWithSeedPhrase from './import-with-seed-phrase' import { INITIALIZE_CREATE_PASSWORD_ROUTE, @@ -30,19 +31,7 @@ export default class CreatePassword extends PureComponent { return ( <div className="first-time-flow__wrapper"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <Switch> <Route exact diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index a2fb5a3bf..48eff96cb 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -17,6 +17,7 @@ export default class ImportWithSeedPhrase extends PureComponent { static propTypes = { history: PropTypes.object, onSubmit: PropTypes.func.isRequired, + setSeedPhraseBackedUp: PropTypes.func, } state = { @@ -126,7 +127,7 @@ export default class ImportWithSeedPhrase extends PureComponent { } const { password, seedPhrase } = this.state - const { history, onSubmit } = this.props + const { history, onSubmit, setSeedPhraseBackedUp } = this.props try { await onSubmit(password, this.parseSeedPhrase(seedPhrase)) @@ -137,7 +138,10 @@ export default class ImportWithSeedPhrase extends PureComponent { name: 'Import Complete', }, }) - history.push(INITIALIZE_END_OF_FLOW_ROUTE) + + setSeedPhraseBackedUp(true).then(() => { + history.push(INITIALIZE_END_OF_FLOW_ROUTE) + }) } catch (error) { this.setState({ seedPhraseError: error.message }) } @@ -174,7 +178,7 @@ export default class ImportWithSeedPhrase extends PureComponent { }) this.setState((prevState) => ({ - termsChecked: !prevState.termsChecked, + termsChecked: !prevState.termsChecked, })) } diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js new file mode 100644 index 000000000..0cfeee1f4 --- /dev/null +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux' +import ImportWithSeedPhrase from './import-with-seed-phrase.component' +import { + setSeedPhraseBackedUp, +} from '../../../../store/actions' + +const mapDispatchToProps = dispatch => { + return { + setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)), + } +} + +export default connect(null, mapDispatchToProps)(ImportWithSeedPhrase) diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js index e5ff1fde5..9d4ad7d0f 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './import-with-seed-phrase.component' +export { default } from './import-with-seed-phrase.container' diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js index 83b0e7fc6..31658d87a 100644 --- a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../components/ui/button' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import { DEFAULT_ROUTE } from '../../../helpers/constants/routes' export default class EndOfFlowScreen extends PureComponent { @@ -21,19 +22,7 @@ export default class EndOfFlowScreen extends PureComponent { return ( <div className="end-of-flow"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <div className="end-of-flow__emoji">🎉</div> <div className="first-time-flow__header"> { t('congratulations') } @@ -66,9 +55,9 @@ export default class EndOfFlowScreen extends PureComponent { rel="noopener noreferrer" > <span className="first-time-flow__link-text"> - Learn More + {t('endOfFlowMessage9')} </span> - </a>. + </a> </div> <Button type="primary" @@ -85,7 +74,7 @@ export default class EndOfFlowScreen extends PureComponent { history.push(DEFAULT_ROUTE) }} > - { 'All Done' } + { t('endOfFlowMessage10') } </Button> </div> ) diff --git a/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js index 4fd028482..6bc89245b 100644 --- a/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js +++ b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js @@ -6,7 +6,6 @@ import { LOCK_ROUTE, INITIALIZE_WELCOME_ROUTE, INITIALIZE_UNLOCK_ROUTE, - INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../helpers/constants/routes' @@ -15,7 +14,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding: PropTypes.bool, isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, - seedPhrase: PropTypes.string, optInMetaMetrics: PropTypes.bool, } @@ -24,7 +22,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding, isInitialized, isUnlocked, - seedPhrase, optInMetaMetrics, } = this.props @@ -32,7 +29,7 @@ export default class FirstTimeFlowSwitch extends PureComponent { return <Redirect to={{ pathname: DEFAULT_ROUTE }} /> } - if (isUnlocked && !seedPhrase) { + if (isUnlocked) { return <Redirect to={{ pathname: LOCK_ROUTE }} /> } @@ -44,10 +41,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { return <Redirect to={{ pathname: INITIALIZE_UNLOCK_ROUTE }} /> } - if (seedPhrase) { - return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }} /> - } - if (optInMetaMetrics === null) { return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} /> } diff --git a/ui/app/pages/first-time-flow/first-time-flow.component.js b/ui/app/pages/first-time-flow/first-time-flow.component.js index 0d206bf42..91415d2ee 100644 --- a/ui/app/pages/first-time-flow/first-time-flow.component.js +++ b/ui/app/pages/first-time-flow/first-time-flow.component.js @@ -18,6 +18,7 @@ import { INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_METAMETRICS_OPT_IN_ROUTE, + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, } from '../../helpers/constants/routes' export default class FirstTimeFlow extends PureComponent { @@ -30,6 +31,9 @@ export default class FirstTimeFlow extends PureComponent { isUnlocked: PropTypes.bool, unlockAccount: PropTypes.func, nextRoute: PropTypes.string, + showingSeedPhraseBackupAfterOnboarding: PropTypes.bool, + seedPhraseBackedUp: PropTypes.bool, + verifySeedPhrase: PropTypes.func, } state = { @@ -38,9 +42,16 @@ export default class FirstTimeFlow extends PureComponent { } componentDidMount () { - const { completedOnboarding, history, isInitialized, isUnlocked } = this.props + const { + completedOnboarding, + history, + isInitialized, + isUnlocked, + showingSeedPhraseBackupAfterOnboarding, + seedPhraseBackedUp, + } = this.props - if (completedOnboarding) { + if (completedOnboarding && (!showingSeedPhraseBackupAfterOnboarding || seedPhraseBackedUp)) { history.push(DEFAULT_ROUTE) return } @@ -88,6 +99,7 @@ export default class FirstTimeFlow extends PureComponent { render () { const { seedPhrase, isImportedKeyring } = this.state + const { verifySeedPhrase } = this.props return ( <div className="first-time-flow"> @@ -98,6 +110,17 @@ export default class FirstTimeFlow extends PureComponent { <SeedPhrase { ...props } seedPhrase={seedPhrase} + verifySeedPhrase={verifySeedPhrase} + /> + )} + /> + <Route + path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE} + render={props => ( + <SeedPhrase + { ...props } + seedPhrase={seedPhrase} + verifySeedPhrase={verifySeedPhrase} /> )} /> diff --git a/ui/app/pages/first-time-flow/first-time-flow.container.js b/ui/app/pages/first-time-flow/first-time-flow.container.js index 16025a489..ec9920d74 100644 --- a/ui/app/pages/first-time-flow/first-time-flow.container.js +++ b/ui/app/pages/first-time-flow/first-time-flow.container.js @@ -5,16 +5,23 @@ import { createNewVaultAndGetSeedPhrase, createNewVaultAndRestore, unlockAndGetSeedPhrase, + verifySeedPhrase, } from '../../store/actions' +import { + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, +} from '../../helpers/constants/routes' -const mapStateToProps = state => { - const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state +const mapStateToProps = (state, ownProps) => { + const { metamask: { completedOnboarding, isInitialized, isUnlocked, seedPhraseBackedUp } } = state + const showingSeedPhraseBackupAfterOnboarding = Boolean(ownProps.location.pathname.match(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)) return { completedOnboarding, isInitialized, isUnlocked, nextRoute: getFirstTimeFlowTypeRoute(state), + showingSeedPhraseBackupAfterOnboarding, + seedPhraseBackedUp, } } @@ -25,6 +32,7 @@ const mapDispatchToProps = dispatch => { return dispatch(createNewVaultAndRestore(password, seedPhrase)) }, unlockAccount: password => dispatch(unlockAndGetSeedPhrase(password)), + verifySeedPhrase: () => verifySeedPhrase(), } } diff --git a/ui/app/pages/first-time-flow/index.scss b/ui/app/pages/first-time-flow/index.scss index 6c65cfdae..dec80cb60 100644 --- a/ui/app/pages/first-time-flow/index.scss +++ b/ui/app/pages/first-time-flow/index.scss @@ -26,6 +26,10 @@ .app-header__metafox-logo { margin-bottom: 40px; + + @media screen and (max-width: $break-small) { + margin-bottom: 0px; + } } } diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js index 6b9d06cf9..bb187d634 100644 --- a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js +++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import PageContainerFooter from '../../../components/ui/page-container/page-container-footer' export default class MetaMetricsOptIn extends Component { @@ -28,19 +29,7 @@ export default class MetaMetricsOptIn extends Component { return ( <div className="metametrics-opt-in"> <div className="metametrics-opt-in__main"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <div className="metametrics-opt-in__body-graphic"> <img src="images/metrics-chart.svg" /> </div> @@ -113,7 +102,7 @@ export default class MetaMetricsOptIn extends Component { .then(() => { history.push(nextRoute) }) - }) + }) }} cancelText={'No Thanks'} hideCancel={false} @@ -146,7 +135,7 @@ export default class MetaMetricsOptIn extends Component { .then(() => { history.push(nextRoute) }) - }) + }) }} submitText={'I agree'} submitButtonType={'primary'} diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index 4cfc38fdf..9256c3d8d 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -6,6 +6,7 @@ import Button from '../../../../components/ui/button' import { INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, + DEFAULT_ROUTE, } from '../../../../helpers/constants/routes' import { exportAsFile } from '../../../../helpers/utils/util' import DraggableSeed from './draggable-seed.component' @@ -88,7 +89,7 @@ export default class ConfirmSeedPhrase extends PureComponent { } handleSubmit = async () => { - const { history } = this.props + const { history, setSeedPhraseBackedUp, showingSeedPhraseBackupAfterOnboarding, hideSeedPhraseBackupAfterOnboarding } = this.props if (!this.isValid()) { return @@ -102,7 +103,15 @@ export default class ConfirmSeedPhrase extends PureComponent { name: 'Verify Complete', }, }) - history.push(INITIALIZE_END_OF_FLOW_ROUTE) + + setSeedPhraseBackedUp(true).then(() => { + if (showingSeedPhraseBackupAfterOnboarding) { + hideSeedPhraseBackupAfterOnboarding() + history.push(DEFAULT_ROUTE) + } else { + history.push(INITIALIZE_END_OF_FLOW_ROUTE) + } + }) } catch (error) { console.error(error.message) } diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js new file mode 100644 index 000000000..ac5a26979 --- /dev/null +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js @@ -0,0 +1,23 @@ +import { connect } from 'react-redux' +import ConfirmSeedPhrase from './confirm-seed-phrase.component' +import { + setSeedPhraseBackedUp, + hideSeedPhraseBackupAfterOnboarding, +} from '../../../../store/actions' + +const mapStateToProps = state => { + const { appState: { showingSeedPhraseBackupAfterOnboarding } } = state + + return { + showingSeedPhraseBackupAfterOnboarding, + } +} + +const mapDispatchToProps = dispatch => { + return { + setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)), + hideSeedPhraseBackupAfterOnboarding: () => dispatch(hideSeedPhraseBackupAfterOnboarding()), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(ConfirmSeedPhrase) diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js index c7b511503..beb53b383 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './confirm-seed-phrase.component' +export { default } from './confirm-seed-phrase.container' diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js index 4a1b191b5..a528f95a2 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './reveal-seed-phrase.component' +export { default } from './reveal-seed-phrase.container' diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss index 8a47447ed..dfe9868cf 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss @@ -1,4 +1,12 @@ .reveal-seed-phrase { + @media screen and (max-width: 576px) { + display: flex; + flex-direction: column; + width: 96%; + margin-left: 2%; + margin-right: 2%; + } + &__secret { position: relative; display: flex; @@ -54,4 +62,12 @@ button { margin-top: 0xp; } + + &__buttons { + display: flex; + + .first-time-flow__button:last-of-type { + margin-left: 20px; + } + } } diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js index 4e9948a0e..78981bae8 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import classnames from 'classnames' import LockIcon from '../../../../components/ui/lock-icon' import Button from '../../../../components/ui/button' -import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../helpers/constants/routes' +import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes' import { exportAsFile } from '../../../../helpers/utils/util' export default class RevealSeedPhrase extends PureComponent { @@ -15,6 +15,8 @@ export default class RevealSeedPhrase extends PureComponent { static propTypes = { history: PropTypes.object, seedPhrase: PropTypes.string, + setSeedPhraseBackedUp: PropTypes.func, + setCompletedOnboarding: PropTypes.func, } state = { @@ -45,6 +47,24 @@ export default class RevealSeedPhrase extends PureComponent { history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE) } + handleSkip = event => { + event.preventDefault() + const { history, setSeedPhraseBackedUp, setCompletedOnboarding } = this.props + + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Seed Phrase Setup', + name: 'Remind me later', + }, + }) + + Promise.all([setCompletedOnboarding(), setSeedPhraseBackedUp(false)]) + .then(() => { + history.push(DEFAULT_ROUTE) + }) + } + renderSecretWordsContainer () { const { t } = this.context const { seedPhrase } = this.props @@ -129,14 +149,23 @@ export default class RevealSeedPhrase extends PureComponent { </div> </div> </div> - <Button - type="primary" - className="first-time-flow__button" - onClick={this.handleNext} - disabled={!isShowingSeedPhrase} - > - { t('next') } - </Button> + <div className="reveal-seed-phrase__buttons"> + <Button + type="secondary" + className="first-time-flow__button" + onClick={this.handleSkip} + > + { t('remindMeLater') } + </Button> + <Button + type="primary" + className="first-time-flow__button" + onClick={this.handleNext} + disabled={!isShowingSeedPhrase} + > + { t('next') } + </Button> + </div> </div> ) } diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js new file mode 100644 index 000000000..7ada36afc --- /dev/null +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux' +import RevealSeedPhrase from './reveal-seed-phrase.component' +import { + setCompletedOnboarding, + setSeedPhraseBackedUp, +} from '../../../../store/actions' + +const mapDispatchToProps = dispatch => { + return { + setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)), + setCompletedOnboarding: () => dispatch(setCompletedOnboarding()), + } +} + +export default connect(null, mapDispatchToProps)(RevealSeedPhrase) diff --git a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js index 0b19af18c..ae38757d9 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js @@ -6,45 +6,48 @@ import ConfirmSeedPhrase from './confirm-seed-phrase' import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, DEFAULT_ROUTE, } from '../../../helpers/constants/routes' import HTML5Backend from 'react-dnd-html5-backend' import {DragDropContextProvider} from 'react-dnd' +import MetaFoxLogo from '../../../components/ui/metafox-logo' export default class SeedPhrase extends PureComponent { static propTypes = { address: PropTypes.string, history: PropTypes.object, seedPhrase: PropTypes.string, + verifySeedPhrase: PropTypes.func, + } + + state = { + verifiedSeedPhrase: '', } componentDidMount () { - const { seedPhrase, history } = this.props + const { seedPhrase, history, verifySeedPhrase } = this.props if (!seedPhrase) { - history.push(DEFAULT_ROUTE) + verifySeedPhrase() + .then(verifiedSeedPhrase => { + if (!verifiedSeedPhrase) { + history.push(DEFAULT_ROUTE) + } else { + this.setState({ verifiedSeedPhrase }) + } + }) } } render () { const { seedPhrase } = this.props + const { verifiedSeedPhrase } = this.state return ( <DragDropContextProvider backend={HTML5Backend}> <div className="first-time-flow__wrapper"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <Switch> <Route exact @@ -52,7 +55,7 @@ export default class SeedPhrase extends PureComponent { render={props => ( <ConfirmSeedPhrase { ...props } - seedPhrase={seedPhrase} + seedPhrase={seedPhrase || verifiedSeedPhrase} /> )} /> @@ -62,7 +65,17 @@ export default class SeedPhrase extends PureComponent { render={props => ( <RevealSeedPhrase { ...props } - seedPhrase={seedPhrase} + seedPhrase={seedPhrase || verifiedSeedPhrase} + /> + )} + /> + <Route + exact + path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE} + render={props => ( + <RevealSeedPhrase + { ...props } + seedPhrase={seedPhrase || verifiedSeedPhrase} /> )} /> diff --git a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js index 8339a6f6f..3d5f7f066 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js +++ b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js @@ -131,7 +131,7 @@ describe('ConfirmSeedPhrase Component', () => { assert.deepEqual(root.state().pendingSeedIndices, [2, 0, 1]) }) - it('should submit correctly', () => { + it('should submit correctly', async () => { const originalSeed = ['鼠', '牛', '虎', '兔', '龍', '蛇', '馬', '羊', '猴', '雞', '狗', '豬'] const metricsEventSpy = sinon.spy() const pushSpy = sinon.spy() @@ -139,6 +139,7 @@ describe('ConfirmSeedPhrase Component', () => { { seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬', history: { push: pushSpy }, + setSeedPhraseBackedUp: () => Promise.resolve(), }, { metricsEvent: metricsEventSpy, @@ -157,6 +158,9 @@ describe('ConfirmSeedPhrase Component', () => { root.update() root.find('.first-time-flow__button').simulate('click') + + await (new Promise(resolve => setTimeout(resolve, 100))) + assert.deepEqual(metricsEventSpy.args[0][0], { eventOpts: { category: 'Onboarding', diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js index 5af29a505..5379952f1 100644 --- a/ui/app/pages/first-time-flow/select-action/select-action.component.js +++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../components/ui/button' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import { INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../helpers/constants/routes' @@ -39,20 +40,8 @@ export default class SelectAction extends PureComponent { const { t } = this.context return ( - <div className="select-action"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <div className="select-action"> + <MetaFoxLogo /> <div className="select-action__wrapper"> @@ -106,7 +95,7 @@ export default class SelectAction extends PureComponent { </div> </div> - </div> + </div> ) } } diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js index 4d96c3131..66d962ff1 100644 --- a/ui/app/pages/home/home.component.js +++ b/ui/app/pages/home/home.component.js @@ -2,25 +2,49 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Media from 'react-media' import { Redirect } from 'react-router-dom' +import HomeNotification from '../../components/app/home-notification' +import MultipleNotifications from '../../components/app/multiple-notifications' import WalletView from '../../components/app/wallet-view' import TransactionView from '../../components/app/transaction-view' import ProviderApproval from '../provider-approval' import { - INITIALIZE_SEED_PHRASE_ROUTE, RESTORE_VAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE, CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, } from '../../helpers/constants/routes' export default class Home extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + + static defaultProps = { + activeTab: {}, + unsetMigratedPrivacyMode: null, + forceApproveProviderRequestByOrigin: null, + } + static propTypes = { + activeTab: PropTypes.shape({ + origin: PropTypes.string, + protocol: PropTypes.string, + title: PropTypes.string, + url: PropTypes.string, + }), history: PropTypes.object, forgottenPassword: PropTypes.bool, - seedWords: PropTypes.string, suggestedTokens: PropTypes.object, unconfirmedTransactionsCount: PropTypes.number, providerRequests: PropTypes.array, + showPrivacyModeNotification: PropTypes.bool.isRequired, + unsetMigratedPrivacyMode: PropTypes.func, + viewingUnconnectedDapp: PropTypes.bool.isRequired, + forceApproveProviderRequestByOrigin: PropTypes.func, + shouldShowSeedPhraseReminder: PropTypes.bool, + rejectProviderRequestByOrigin: PropTypes.func, + isPopup: PropTypes.bool, } componentWillMount () { @@ -42,23 +66,26 @@ export default class Home extends PureComponent { // suggested new tokens if (Object.keys(suggestedTokens).length > 0) { - history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE) + history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE) } } render () { + const { t } = this.context const { + activeTab, forgottenPassword, - seedWords, providerRequests, history, + showPrivacyModeNotification, + unsetMigratedPrivacyMode, + viewingUnconnectedDapp, + forceApproveProviderRequestByOrigin, + shouldShowSeedPhraseReminder, + rejectProviderRequestByOrigin, + isPopup, } = this.props - // seed words - if (seedWords) { - return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }}/> - } - if (forgottenPassword) { return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} /> } @@ -68,7 +95,6 @@ export default class Home extends PureComponent { <ProviderApproval providerRequest={providerRequests[0]} /> ) } - return ( <div className="main-container"> <div className="account-and-transaction-details"> @@ -76,7 +102,58 @@ export default class Home extends PureComponent { query="(min-width: 576px)" render={() => <WalletView />} /> - { !history.location.pathname.match(/^\/confirm-transaction/) ? <TransactionView /> : null } + { !history.location.pathname.match(/^\/confirm-transaction/) + ? ( + <TransactionView> + <MultipleNotifications + className + notifications={[ + { + shouldBeRendered: showPrivacyModeNotification, + component: <HomeNotification + descriptionText={t('privacyModeDefault')} + acceptText={t('learnMore')} + onAccept={() => { + window.open('https://medium.com/metamask/42549d4870fa', '_blank', 'noopener') + unsetMigratedPrivacyMode() + }} + key="home-privacyModeDefault" + />, + }, + { + shouldBeRendered: viewingUnconnectedDapp, + component: <HomeNotification + descriptionText={t('shareAddressToConnect', [activeTab.origin])} + acceptText={t('shareAddress')} + onAccept={() => { + forceApproveProviderRequestByOrigin(activeTab.origin) + }} + ignoreText={t('dismiss')} + onIgnore={() => rejectProviderRequestByOrigin(activeTab.origin)} + infoText={t('shareAddressInfo', [activeTab.origin])} + key="home-shareAddressToConnect" + />, + }, + { + shouldBeRendered: shouldShowSeedPhraseReminder, + component: <HomeNotification + descriptionText={t('backupApprovalNotice')} + acceptText={t('backupNow')} + onAccept={() => { + if (isPopup) { + global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE) + } else { + history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE) + } + }} + infoText={t('backupApprovalInfo')} + key="home-backupApprovalNotice" + />, + }, + ]}/> + </TransactionView> + ) + : null } </div> </div> ) diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js index d0a5d7b47..f03ffdc02 100644 --- a/ui/app/pages/home/home.container.js +++ b/ui/app/pages/home/home.container.js @@ -3,28 +3,65 @@ import { compose } from 'recompose' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction' -`` +import { getCurrentEthBalance } from '../../selectors/selectors' +import { + forceApproveProviderRequestByOrigin, + unsetMigratedPrivacyMode, + rejectProviderRequestByOrigin, +} from '../../store/actions' +import { getEnvironmentType } from '../../../../app/scripts/lib/util' +import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums' + +const activeTabDappProtocols = ['http:', 'https:', 'dweb:', 'ipfs:', 'ipns:', 'ssb:'] + const mapStateToProps = state => { - const { metamask, appState } = state + const { activeTab, metamask, appState } = state const { + approvedOrigins, + dismissedOrigins, lostAccounts, - seedWords, suggestedTokens, providerRequests, + migratedPrivacyMode, + featureFlags: { + privacyMode, + } = {}, + seedPhraseBackedUp, + tokens, } = metamask + const accountBalance = getCurrentEthBalance(state) const { forgottenPassword } = appState + const isUnconnected = Boolean( + activeTab && + activeTabDappProtocols.includes(activeTab.protocol) && + privacyMode && + !approvedOrigins[activeTab.origin] && + !dismissedOrigins[activeTab.origin] + ) + const isPopup = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP + return { lostAccounts, forgottenPassword, - seedWords, suggestedTokens, unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state), providerRequests, + showPrivacyModeNotification: migratedPrivacyMode, + activeTab, + viewingUnconnectedDapp: isUnconnected && isPopup, + shouldShowSeedPhraseReminder: !seedPhraseBackedUp && (parseInt(accountBalance, 16) > 0 || tokens.length > 0), + isPopup, } } +const mapDispatchToProps = (dispatch) => ({ + unsetMigratedPrivacyMode: () => dispatch(unsetMigratedPrivacyMode()), + forceApproveProviderRequestByOrigin: (origin) => dispatch(forceApproveProviderRequestByOrigin(origin)), + rejectProviderRequestByOrigin: origin => dispatch(rejectProviderRequestByOrigin(origin)), +}) + export default compose( withRouter, - connect(mapStateToProps) + connect(mapStateToProps, mapDispatchToProps) )(Home) diff --git a/ui/app/pages/index.scss b/ui/app/pages/index.scss index cb9f0d80c..e7242392b 100644 --- a/ui/app/pages/index.scss +++ b/ui/app/pages/index.scss @@ -2,6 +2,8 @@ @import 'add-token/index'; +@import 'send/send'; + @import 'confirm-add-token/index'; @import 'settings/index'; diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js index a8de4fce9..bd2385808 100644 --- a/ui/app/pages/mobile-sync/index.js +++ b/ui/app/pages/mobile-sync/index.js @@ -84,6 +84,9 @@ class MobileSyncPage extends Component { } initWebsockets () { + // Make sure there are no existing listeners + this.disconnectWebsockets() + this.pubnub = new PubNub({ subscribeKey: process.env.PUBNUB_SUB_KEY, publishKey: process.env.PUBNUB_PUB_KEY, @@ -91,7 +94,7 @@ class MobileSyncPage extends Component { ssl: true, }) - this.pubnubListener = this.pubnub.addListener({ + this.pubnubListener = { message: (data) => { const {channel, message} = data // handle message @@ -100,18 +103,20 @@ class MobileSyncPage extends Component { } if (message.event === 'start-sync') { - this.startSyncing() + this.startSyncing() } else if (message.event === 'connection-info') { - this.handle && clearTimeout(this.handle) - this.disconnectWebsockets() - this.initWithCipherKeyAndChannelName(message.cipher, message.channel) - this.initWebsockets() + this.handle && clearTimeout(this.handle) + this.disconnectWebsockets() + this.initWithCipherKeyAndChannelName(message.cipher, message.channel) + this.initWebsockets() } else if (message.event === 'end-sync') { - this.disconnectWebsockets() - this.setState({syncing: false, completed: true}) + this.disconnectWebsockets() + this.setState({syncing: false, completed: true}) } }, - }) + } + + this.pubnub.addListener(this.pubnubListener) this.pubnub.subscribe({ channels: [this.channelName], @@ -122,14 +127,14 @@ class MobileSyncPage extends Component { disconnectWebsockets () { if (this.pubnub && this.pubnubListener) { - this.pubnub.disconnect(this.pubnubListener) + this.pubnub.removeListener(this.pubnubListener) } } - // Calculating a PubNub Message Payload Size. + // Calculating a PubNub Message Payload Size. calculatePayloadSize (channel, message) { return encodeURIComponent( - channel + JSON.stringify(message) + channel + JSON.stringify(message) ).length + 100 } @@ -153,14 +158,14 @@ class MobileSyncPage extends Component { channel: this.channelName, sendByPost: false, // true to send via post storeInHistory: false, - }, - (status, response) => { - if (!status.error) { - resolve() - } else { - reject(response) - } - }) + }, + (status, response) => { + if (!status.error) { + resolve() + } else { + reject(response) + } + }) }) } @@ -199,16 +204,16 @@ class MobileSyncPage extends Component { sendMessage (data, pkg, count) { return new Promise((resolve, reject) => { this.pubnub.publish( - { - message: { - event: 'syncing-data', - data, - totalPkg: count, - currentPkg: pkg, - }, - channel: this.channelName, - sendByPost: false, // true to send via post - storeInHistory: false, + { + message: { + event: 'syncing-data', + data, + totalPkg: count, + currentPkg: pkg, + }, + channel: this.channelName, + sendByPost: false, // true to send via post + storeInHistory: false, }, (status, response) => { if (!status.error) { @@ -229,7 +234,7 @@ class MobileSyncPage extends Component { renderWarning (text) { return ( h('.page-container__warning-container', [ - h('.page-container__warning-message', [ + h('.page-container__warning-message', [ h('div', [text]), ]), ]) @@ -245,12 +250,12 @@ class MobileSyncPage extends Component { if (this.state.completed) { return h('div.reveal-seed__content', {}, - h('label.reveal-seed__label', { - style: { - width: '100%', - textAlign: 'center', - }, - }, t('syncWithMobileComplete')), + h('label.reveal-seed__label', { + style: { + width: '100%', + textAlign: 'center', + }, + }, t('syncWithMobileComplete')), ) } @@ -303,8 +308,8 @@ class MobileSyncPage extends Component { h('div', [ h('label.reveal-seed__label', { style: { - width: '100%', - textAlign: 'center', + width: '100%', + textAlign: 'center', }, }, t('syncWithMobileScanThisCode')), h('.div.qr-wrapper', { @@ -370,7 +375,7 @@ class MobileSyncPage extends Component { this.state.screen === PASSWORD_PROMPT_SCREEN ? h('.page-container__subtitle', this.context.t('syncWithMobileDescNewUsers')) : null, ]), h('.page-container__content', [ - this.renderContent(), + this.renderContent(), ]), this.renderFooter(), ]) diff --git a/ui/app/pages/routes/index.js b/ui/app/pages/routes/index.js index 9eeac2da2..2f7caf3bf 100644 --- a/ui/app/pages/routes/index.js +++ b/ui/app/pages/routes/index.js @@ -6,7 +6,8 @@ import { compose } from 'recompose' import actions from '../../store/actions' import log from 'loglevel' import IdleTimer from 'react-idle-timer' -import {getMetaMaskAccounts, getNetworkIdentifier, preferencesSelector} from '../../selectors/selectors' +import {getNetworkIdentifier, preferencesSelector} from '../../selectors/selectors' +import classnames from 'classnames' // init import FirstTimeFlow from '../first-time-flow' @@ -24,7 +25,6 @@ import Settings from '../settings' import Authenticated from '../../helpers/higher-order-components/authenticated' import Initialized from '../../helpers/higher-order-components/initialized' import Lock from '../lock' -import UiMigrationAnnouncement from '../../components/app/ui-migration-annoucement' const RestoreVaultPage = require('../keychains/restore-vault').default const RevealSeedConfirmation = require('../keychains/reveal-seed') const MobileSyncPage = require('../mobile-sync') @@ -178,12 +178,21 @@ class Routes extends Component { setMouseUserState, sidebar, submittedPendingTransactions, + isMouseUser, } = this.props const isLoadingNetwork = network === 'loading' && currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? this.getConnectingLabel(loadingMessage) : null log.debug('Main ui render function') + const { + isOpen: sidebarIsOpen, + transitionName: sidebarTransitionName, + type: sidebarType, + props, + } = sidebar + const { transaction: sidebarTransaction } = props || {} + const sidebarOnOverlayClose = sidebarType === WALLET_VIEW_SIDEBAR ? () => { this.context.metricsEvent({ @@ -196,17 +205,9 @@ class Routes extends Component { } : null - const { - isOpen: sidebarIsOpen, - transitionName: sidebarTransitionName, - type: sidebarType, - props, - } = sidebar - const { transaction: sidebarTransaction } = props || {} - return ( <div - className="app" + className={classnames('app', { 'mouse-user-styles': isMouseUser})} onClick={() => setMouseUserState(true)} onKeyDown={e => { if (e.keyCode === 9) { @@ -214,7 +215,6 @@ class Routes extends Component { } }} > - <UiMigrationAnnouncement /> <Modal /> <Alert visible={this.props.alertOpen} @@ -259,7 +259,7 @@ class Routes extends Component { passwordBox.focus() } else { // currently active: deactivate - this.props.dispatch(actions.lockMetamask(false)) + this.props.lockMetaMask() } } @@ -330,32 +330,14 @@ Routes.propTypes = { sidebar: PropTypes.object, alertOpen: PropTypes.bool, hideSidebar: PropTypes.func, - isOnboarding: PropTypes.bool, isUnlocked: PropTypes.bool, - networkDropdownOpen: PropTypes.bool, - showNetworkDropdown: PropTypes.func, - hideNetworkDropdown: PropTypes.func, setLastActiveTime: PropTypes.func, history: PropTypes.object, location: PropTypes.object, - dispatch: PropTypes.func, - toggleAccountMenu: PropTypes.func, - selectedAddress: PropTypes.string, - lostAccounts: PropTypes.array, - isInitialized: PropTypes.bool, - forgottenPassword: PropTypes.bool, - activeAddress: PropTypes.string, - unapprovedTxs: PropTypes.object, - seedWords: PropTypes.string, + lockMetaMask: PropTypes.func, submittedPendingTransactions: PropTypes.array, - unapprovedMsgCount: PropTypes.number, - unapprovedPersonalMsgCount: PropTypes.number, - unapprovedTypedMessagesCount: PropTypes.number, - welcomeScreenSeen: PropTypes.bool, - isPopup: PropTypes.bool, isMouseUser: PropTypes.bool, setMouseUserState: PropTypes.func, - t: PropTypes.func, providerId: PropTypes.string, providerRequests: PropTypes.array, autoLogoutTimeLimit: PropTypes.number, @@ -364,7 +346,6 @@ Routes.propTypes = { function mapStateToProps (state) { const { appState, metamask } = state const { - networkDropdownOpen, sidebar, alertOpen, alertMessage, @@ -372,77 +353,34 @@ function mapStateToProps (state) { loadingMessage, } = appState - const accounts = getMetaMaskAccounts(state) const { autoLogoutTimeLimit = 0 } = preferencesSelector(state) - const { - identities, - address, - keyrings, - isInitialized, - seedWords, - unapprovedTxs, - lostAccounts, - unapprovedMsgCount, - unapprovedPersonalMsgCount, - unapprovedTypedMessagesCount, - providerRequests, - } = metamask - const selected = address || Object.keys(accounts)[0] - return { // state from plugin - networkDropdownOpen, sidebar, alertOpen, alertMessage, isLoading, loadingMessage, - isInitialized, isUnlocked: state.metamask.isUnlocked, - selectedAddress: state.metamask.selectedAddress, currentView: state.appState.currentView, - activeAddress: state.appState.activeAddress, - transForward: state.appState.transForward, - isOnboarding: Boolean(seedWords || !isInitialized), - isPopup: state.metamask.isPopup, - seedWords: state.metamask.seedWords, submittedPendingTransactions: submittedPendingTransactionsSelector(state), - unapprovedTxs, - unapprovedMsgs: state.metamask.unapprovedMsgs, - unapprovedMsgCount, - unapprovedPersonalMsgCount, - unapprovedTypedMessagesCount, - menuOpen: state.appState.menuOpen, network: state.metamask.network, provider: state.metamask.provider, - forgottenPassword: state.appState.forgottenPassword, - lostAccounts, frequentRpcListDetail: state.metamask.frequentRpcListDetail || [], currentCurrency: state.metamask.currentCurrency, isMouseUser: state.appState.isMouseUser, - isRevealingSeedWords: state.metamask.isRevealingSeedWords, - Qr: state.appState.Qr, - welcomeScreenSeen: state.metamask.welcomeScreenSeen, providerId: getNetworkIdentifier(state), autoLogoutTimeLimit, - - // state needed to get account dropdown temporarily rendering from app bar - identities, - selected, - keyrings, - providerRequests, + providerRequests: metamask.providerRequests, } } function mapDispatchToProps (dispatch) { return { - dispatch, + lockMetaMask: () => dispatch(actions.lockMetamask(false)), hideSidebar: () => dispatch(actions.hideSidebar()), - showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), - hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), - toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)), setLastActiveTime: () => dispatch(actions.setLastActiveTime()), } diff --git a/ui/app/pages/send/account-list-item/account-list-item.container.js b/ui/app/pages/send/account-list-item/account-list-item.container.js index 21f800306..3fadec4f8 100644 --- a/ui/app/pages/send/account-list-item/account-list-item.container.js +++ b/ui/app/pages/send/account-list-item/account-list-item.container.js @@ -1,8 +1,8 @@ import { connect } from 'react-redux' import { - getConversionRate, - getCurrentCurrency, - getNativeCurrency, + getConversionRate, + getCurrentCurrency, + getNativeCurrency, } from '../send.selectors.js' import { getIsMainnet, diff --git a/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js new file mode 100644 index 000000000..e5edbc08d --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js @@ -0,0 +1,243 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Fuse from 'fuse.js' +import Identicon from '../../../../components/ui/identicon' +import {isValidAddress} from '../../../../helpers/utils/util' +import Dialog from '../../../../components/ui/dialog' +import ContactList from '../../../../components/app/contact-list' +import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component' +import {ellipsify} from '../../send.utils' + +export default class AddRecipient extends Component { + + static propTypes = { + className: PropTypes.string, + query: PropTypes.string, + ownedAccounts: PropTypes.array, + addressBook: PropTypes.array, + updateGas: PropTypes.func, + updateSendTo: PropTypes.func, + ensResolution: PropTypes.string, + toError: PropTypes.string, + toWarning: PropTypes.string, + ensResolutionError: PropTypes.string, + selectedToken: PropTypes.object, + hasHexData: PropTypes.bool, + tokens: PropTypes.array, + addressBookEntryName: PropTypes.string, + contacts: PropTypes.array, + nonContacts: PropTypes.array, + } + + constructor (props) { + super(props) + this.recentFuse = new Fuse(props.nonContacts, { + shouldSort: true, + threshold: 0.45, + location: 0, + distance: 100, + maxPatternLength: 32, + minMatchCharLength: 1, + keys: [ + { name: 'address', weight: 0.5 }, + ], + }) + + this.contactFuse = new Fuse(props.contacts, { + shouldSort: true, + threshold: 0.45, + location: 0, + distance: 100, + maxPatternLength: 32, + minMatchCharLength: 1, + keys: [ + { name: 'name', weight: 0.5 }, + { name: 'address', weight: 0.5 }, + ], + }) + } + + static contextTypes = { + t: PropTypes.func, + metricsEvent: PropTypes.func, + } + + state = { + isShowingTransfer: false, + isShowingAllRecent: false, + } + + selectRecipient = (to, nickname = '') => { + const { updateSendTo, updateGas } = this.props + + updateSendTo(to, nickname) + updateGas({ to }) + } + + searchForContacts = () => { + const { query, contacts } = this.props + + let _contacts = contacts + + if (query) { + this.contactFuse.setCollection(contacts) + _contacts = this.contactFuse.search(query) + } + + return _contacts + } + + searchForRecents = () => { + const { query, nonContacts } = this.props + + let _nonContacts = nonContacts + + if (query) { + this.recentFuse.setCollection(nonContacts) + _nonContacts = this.recentFuse.search(query) + } + + return _nonContacts + } + + render () { + const { ensResolution, query, addressBookEntryName } = this.props + const { isShowingTransfer } = this.state + + let content + + if (isValidAddress(query)) { + content = this.renderExplicitAddress(query) + } else if (ensResolution) { + content = this.renderExplicitAddress(ensResolution, addressBookEntryName || query) + } else if (isShowingTransfer) { + content = this.renderTransfer() + } + + return ( + <div className="send__select-recipient-wrapper"> + { this.renderDialogs() } + { content || this.renderMain() } + </div> + ) + } + + renderExplicitAddress (address, name) { + return ( + <div + key={address} + className="send__select-recipient-wrapper__group-item" + onClick={() => this.selectRecipient(address, name)} + > + <Identicon address={address} diameter={28} /> + <div className="send__select-recipient-wrapper__group-item__content"> + <div className="send__select-recipient-wrapper__group-item__title"> + {name || ellipsify(address)} + </div> + { + name && ( + <div className="send__select-recipient-wrapper__group-item__subtitle"> + {ellipsify(address)} + </div> + ) + } + </div> + </div> + ) + } + + renderTransfer () { + const { ownedAccounts } = this.props + const { t } = this.context + + return ( + <div className="send__select-recipient-wrapper__list"> + <div + className="send__select-recipient-wrapper__list__link" + onClick={() => this.setState({ isShowingTransfer: false })} + > + <div className="send__select-recipient-wrapper__list__back-caret"/> + { t('backToAll') } + </div> + <RecipientGroup + label={t('myAccounts')} + items={ownedAccounts} + onSelect={this.selectRecipient} + /> + </div> + ) + } + + renderMain () { + const { t } = this.context + const { query, ownedAccounts = [], addressBook } = this.props + + return ( + <div className="send__select-recipient-wrapper__list"> + <ContactList + addressBook={addressBook} + searchForContacts={this.searchForContacts.bind(this)} + searchForRecents={this.searchForRecents.bind(this)} + selectRecipient={this.selectRecipient.bind(this)} + > + { + (ownedAccounts && ownedAccounts.length > 1) && !query && ( + <div + className="send__select-recipient-wrapper__list__link" + onClick={() => this.setState({ isShowingTransfer: true })} + > + { t('transferBetweenAccounts') } + </div> + ) + } + </ContactList> + </div> + ) + } + + renderDialogs () { + const { toError, toWarning, ensResolutionError, ensResolution } = this.props + const { t } = this.context + const contacts = this.searchForContacts() + const recents = this.searchForRecents() + + if (contacts.length || recents.length) { + return null + } + + if (ensResolutionError) { + return ( + <Dialog + type="error" + className="send__error-dialog" + > + {ensResolutionError} + </Dialog> + ) + } + + if (toError && toError !== 'required' && !ensResolution) { + return ( + <Dialog + type="error" + className="send__error-dialog" + > + {t(toError)} + </Dialog> + ) + } + + + if (toWarning) { + return ( + <Dialog + type="warning" + className="send__error-dialog" + > + {t(toWarning)} + </Dialog> + ) + } + } + +} diff --git a/ui/app/pages/send/send-content/add-recipient/add-recipient.container.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.container.js new file mode 100644 index 000000000..eb980aa82 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.container.js @@ -0,0 +1,44 @@ +import { connect } from 'react-redux' +import { + accountsWithSendEtherInfoSelector, + getSendEnsResolution, + getSendEnsResolutionError, +} from '../../send.selectors.js' +import { + getAddressBook, + getAddressBookEntry, +} from '../../../../selectors/selectors' +import { + updateSendTo, +} from '../../../../store/actions' +import AddRecipient from './add-recipient.component' + +export default connect(mapStateToProps, mapDispatchToProps)(AddRecipient) + +function mapStateToProps (state) { + const ensResolution = getSendEnsResolution(state) + + let addressBookEntryName = '' + if (ensResolution) { + const addressBookEntry = getAddressBookEntry(state, ensResolution) || {} + addressBookEntryName = addressBookEntry.name + } + + const addressBook = getAddressBook(state) + + return { + ownedAccounts: accountsWithSendEtherInfoSelector(state), + addressBook, + ensResolution, + addressBookEntryName, + ensResolutionError: getSendEnsResolutionError(state), + contacts: addressBook.filter(({ name }) => !!name), + nonContacts: addressBook.filter(({ name }) => !name), + } +} + +function mapDispatchToProps (dispatch) { + return { + updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), + } +} diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.js index b3b0d2da3..b3b0d2da3 100644 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.js diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js index a6160d335..a39db7813 100644 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js @@ -12,7 +12,7 @@ function getToDropdownOpen (state) { } function sendToIsInError (state) { - return Boolean(state.send.errors.to) + return Boolean(state.send.errors.to) } function sendToIsInWarning (state) { diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js new file mode 100644 index 000000000..498d72605 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js @@ -0,0 +1,272 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import c from 'classnames' +import { isValidENSAddress, isValidAddress, isValidAddressHead } from '../../../../helpers/utils/util' +import {ellipsify} from '../../send.utils' + +import debounce from 'debounce' +import copyToClipboard from 'copy-to-clipboard/index' +import ENS from 'ethjs-ens' +import networkMap from 'ethjs-ens/lib/network-map.json' +import log from 'loglevel' + + +// Local Constants +const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' +const ZERO_X_ERROR_ADDRESS = '0x' + +export default class EnsInput extends Component { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + className: PropTypes.string, + network: PropTypes.string, + selectedAddress: PropTypes.string, + selectedName: PropTypes.string, + onChange: PropTypes.func, + updateSendTo: PropTypes.func, + updateEnsResolution: PropTypes.func, + scanQrCode: PropTypes.func, + updateEnsResolutionError: PropTypes.func, + addressBook: PropTypes.array, + onPaste: PropTypes.func, + onReset: PropTypes.func, + onValidAddressTyped: PropTypes.func, + } + + state = { + recipient: null, + input: '', + toError: null, + toWarning: null, + } + + componentDidMount () { + const network = this.props.network + const networkHasEnsSupport = getNetworkEnsSupport(network) + this.setState({ ensResolution: ZERO_ADDRESS }) + + if (networkHasEnsSupport) { + const provider = global.ethereumProvider + this.ens = new ENS({ provider, network }) + this.checkName = debounce(this.lookupEnsName, 200) + } + } + + // If an address is sent without a nickname, meaning not from ENS or from + // the user's own accounts, a default of a one-space string is used. + componentDidUpdate (prevProps) { + const { + input, + } = this.state + const { + network, + } = this.props + + if (prevProps.network !== network) { + const provider = global.ethereumProvider + this.ens = new ENS({ provider, network }) + this.onChange({ target: { value: input } }) + } + } + + resetInput = () => { + const { updateEnsResolution, updateEnsResolutionError, onReset } = this.props + this.onChange({ target: { value: '' } }) + onReset() + updateEnsResolution('') + updateEnsResolutionError('') + } + + lookupEnsName = (recipient) => { + recipient = recipient.trim() + + log.info(`ENS attempting to resolve name: ${recipient}`) + this.ens.lookup(recipient) + .then((address) => { + if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName')) + if (address === ZERO_X_ERROR_ADDRESS) throw new Error(this.context.t('ensRegistrationError')) + this.props.updateEnsResolution(address) + }) + .catch((reason) => { + if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') { + this.props.updateEnsResolutionError(this.context.t('ensNotFoundOnCurrentNetwork')) + } else { + log.error(reason) + this.props.updateEnsResolutionError(reason.message) + } + }) + } + + onPaste = event => { + event.clipboardData.items[0].getAsString(text => { + if (isValidAddress(text)) { + this.props.onPaste(text) + } + }) + } + + onChange = e => { + const { network, onChange, updateEnsResolution, updateEnsResolutionError, onValidAddressTyped } = this.props + const input = e.target.value + const networkHasEnsSupport = getNetworkEnsSupport(network) + + this.setState({ input }, () => onChange(input)) + + // Empty ENS state if input is empty + // maybe scan ENS + + if (!networkHasEnsSupport && !isValidAddress(input) && !isValidAddressHead(input)) { + updateEnsResolution('') + updateEnsResolutionError(!networkHasEnsSupport ? 'Network does not support ENS' : '') + return + } + + if (isValidENSAddress(input)) { + this.lookupEnsName(input) + } else if (onValidAddressTyped && isValidAddress(input)) { + onValidAddressTyped(input) + } else { + updateEnsResolution('') + updateEnsResolutionError('') + } + } + + render () { + const { t } = this.context + const { className, selectedAddress } = this.props + const { input } = this.state + + if (selectedAddress) { + return this.renderSelected() + } + + return ( + <div className={c('ens-input', className)}> + <div + className={c('ens-input__wrapper', { + 'ens-input__wrapper__status-icon--error': false, + 'ens-input__wrapper__status-icon--valid': false, + })} + > + <div className="ens-input__wrapper__status-icon" /> + <input + className="ens-input__wrapper__input" + type="text" + placeholder={t('recipientAddressPlaceholder')} + onChange={this.onChange} + onPaste={this.onPaste} + value={selectedAddress || input} + autoFocus + /> + <div + className={c('ens-input__wrapper__action-icon', { + 'ens-input__wrapper__action-icon--erase': input, + 'ens-input__wrapper__action-icon--qrcode': !input, + })} + onClick={() => { + if (input) { + this.resetInput() + } else { + this.props.scanQrCode() + } + }} + /> + </div> + </div> + ) + } + + renderSelected () { + const { t } = this.context + const { className, selectedAddress, selectedName, addressBook } = this.props + const contact = addressBook.filter(item => item.address === selectedAddress)[0] || {} + const name = contact.name || selectedName + + + return ( + <div className={c('ens-input', className)}> + <div + className="ens-input__wrapper ens-input__wrapper--valid" + > + <div className="ens-input__wrapper__status-icon ens-input__wrapper__status-icon--valid" /> + <div + className="ens-input__wrapper__input ens-input__wrapper__input--selected" + placeholder={t('recipientAddress')} + onChange={this.onChange} + > + <div className="ens-input__selected-input__title"> + {name || ellipsify(selectedAddress)} + </div> + { name && <div className="ens-input__selected-input__subtitle">{selectedAddress}</div> } + </div> + <div + className="ens-input__wrapper__action-icon ens-input__wrapper__action-icon--erase" + onClick={this.resetInput} + /> + </div> + </div> + ) + } + + ensIcon (recipient) { + const { hoverText } = this.state + + return ( + <span + className="#ensIcon" + title={hoverText} + style={{ + position: 'absolute', + top: '16px', + left: '-25px', + }} + > + { this.ensIconContents(recipient) } + </span> + ) + } + + ensIconContents () { + const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS } + + if (toError) return + + if (loadingEns) { + return ( + <img + src="images/loading.svg" + style={{ + width: '30px', + height: '30px', + transform: 'translateY(-6px)', + }} + /> + ) + } + + if (ensFailure) { + return <i className="fa fa-warning fa-lg warning'" /> + } + + if (ensResolution && (ensResolution !== ZERO_ADDRESS)) { + return ( + <i + className="fa fa-check-circle fa-lg cursor-pointer" + style={{ color: 'green' }} + onClick={event => { + event.preventDefault() + event.stopPropagation() + copyToClipboard(ensResolution) + }} + /> + ) + } + } +} + +function getNetworkEnsSupport (network) { + return Boolean(networkMap[network]) +} diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.container.js b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js new file mode 100644 index 000000000..d74f44832 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js @@ -0,0 +1,20 @@ +import EnsInput from './ens-input.component' +import { + getCurrentNetwork, + getSendTo, + getSendToNickname, +} from '../../send.selectors' +import { + getAddressBook, +} from '../../../../selectors/selectors' +const connect = require('react-redux').connect + + +export default connect( + state => ({ + network: getCurrentNetwork(state), + selectedAddress: getSendTo(state), + selectedName: getSendToNickname(state), + addressBook: getAddressBook(state), + }) +)(EnsInput) diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.js b/ui/app/pages/send/send-content/add-recipient/ens-input.js new file mode 100644 index 000000000..6833ccd03 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.js @@ -0,0 +1 @@ +export { default } from './ens-input.container' diff --git a/ui/app/pages/send/send-content/add-recipient/index.js b/ui/app/pages/send/send-content/add-recipient/index.js new file mode 100644 index 000000000..d661bd74b --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/index.js @@ -0,0 +1 @@ +export { default } from './add-recipient.container' diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js new file mode 100644 index 000000000..7570e7fcb --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js @@ -0,0 +1,202 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import AddRecipient from '../add-recipient.component' +import Dialog from '../../../../../components/ui/dialog' + +const propsMethodSpies = { + closeToDropdown: sinon.spy(), + openToDropdown: sinon.spy(), + updateGas: sinon.spy(), + updateSendTo: sinon.spy(), + updateSendToError: sinon.spy(), + updateSendToWarning: sinon.spy(), +} + +describe('AddRecipient Component', function () { + let wrapper + let instance + + beforeEach(() => { + wrapper = shallow(<AddRecipient + closeToDropdown={propsMethodSpies.closeToDropdown} + inError={false} + inWarning={false} + network={'mockNetwork'} + openToDropdown={propsMethodSpies.openToDropdown} + to={'mockTo'} + toAccounts={['mockAccount']} + toDropdownOpen={false} + updateGas={propsMethodSpies.updateGas} + updateSendTo={propsMethodSpies.updateSendTo} + updateSendToError={propsMethodSpies.updateSendToError} + updateSendToWarning={propsMethodSpies.updateSendToWarning} + addressBook={[{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 5' }]} + nonContacts={[{ address: '0x70F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 7' }]} + contacts={[{ address: '0x60F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 6' }]} + />, { context: { t: str => str + '_t' } }) + instance = wrapper.instance() + }) + + afterEach(() => { + propsMethodSpies.closeToDropdown.resetHistory() + propsMethodSpies.openToDropdown.resetHistory() + propsMethodSpies.updateSendTo.resetHistory() + propsMethodSpies.updateSendToError.resetHistory() + propsMethodSpies.updateSendToWarning.resetHistory() + propsMethodSpies.updateGas.resetHistory() + }) + + describe('selectRecipient', () => { + + it('should call updateSendTo', () => { + assert.equal(propsMethodSpies.updateSendTo.callCount, 0) + instance.selectRecipient('mockTo2', 'mockNickname') + assert.equal(propsMethodSpies.updateSendTo.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateSendTo.getCall(0).args, + ['mockTo2', 'mockNickname'] + ) + }) + + it('should call updateGas if there is no to error', () => { + assert.equal(propsMethodSpies.updateGas.callCount, 0) + instance.selectRecipient(false) + assert.equal(propsMethodSpies.updateGas.callCount, 1) + }) + }) + + describe('render', () => { + it('should render a component', () => { + assert.equal(wrapper.find('.send__select-recipient-wrapper').length, 1) + }) + + it('should render no content if there are no recents, transfers, and contacts', () => { + wrapper.setProps({ + ownedAccounts: [], + addressBook: [], + }) + + assert.equal(wrapper.find('.send__select-recipient-wrapper__list__link').length, 0) + assert.equal(wrapper.find('.send__select-recipient-wrapper__group').length, 0) + }) + + it('should render transfer', () => { + wrapper.setProps({ + ownedAccounts: [{ address: '0x123', name: '123' }, { address: '0x124', name: '124' }], + addressBook: [{ address: '0x456', name: 'test-name' }], + }) + wrapper.setState({ isShowingTransfer: true }) + + const xferLink = wrapper.find('.send__select-recipient-wrapper__list__link') + assert.equal(xferLink.length, 1) + + + const groups = wrapper.find('RecipientGroup') + assert.equal(groups.shallow().find('.send__select-recipient-wrapper__group').length, 1) + }) + + it('should render ContactList', () => { + wrapper.setProps({ + ownedAccounts: [{ address: '0x123', name: '123' }, { address: '0x124', name: '124' }], + addressBook: [{ address: '0x125' }], + }) + + const contactList = wrapper.find('ContactList') + + assert.equal(contactList.length, 1) + }) + + it('should render contacts', () => { + wrapper.setProps({ + addressBook: [ + { address: '0x125', name: 'alice' }, + { address: '0x126', name: 'alex' }, + { address: '0x127', name: 'catherine' }, + ], + }) + wrapper.setState({ isShowingTransfer: false }) + + const xferLink = wrapper.find('.send__select-recipient-wrapper__list__link') + assert.equal(xferLink.length, 0) + + const groups = wrapper.find('ContactList') + assert.equal(groups.length, 1) + + assert.equal(groups.find('.send__select-recipient-wrapper__group-item').length, 0) + }) + + it('should render error when query has no results', () => { + wrapper.setProps({ + addressBook: [], + toError: 'bad', + contacts: [], + nonContacts: [], + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.props().type, 'error') + assert.equal(dialog.props().children, 'bad_t') + assert.equal(dialog.length, 1) + }) + + it('should render error when query has ens does not resolve', () => { + wrapper.setProps({ + addressBook: [], + toError: 'bad', + ensResolutionError: 'very bad', + contacts: [], + nonContacts: [], + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.props().type, 'error') + assert.equal(dialog.props().children, 'very bad') + assert.equal(dialog.length, 1) + }) + + it('should render warning', () => { + wrapper.setProps({ + addressBook: [], + query: 'yo', + toWarning: 'watchout', + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.props().type, 'warning') + assert.equal(dialog.props().children, 'watchout_t') + assert.equal(dialog.length, 1) + }) + + it('should not render error when ens resolved', () => { + wrapper.setProps({ + addressBook: [], + toError: 'bad', + ensResolution: '0x128', + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.length, 0) + }) + + it('should not render error when query has results', () => { + wrapper.setProps({ + addressBook: [ + { address: '0x125', name: 'alice' }, + { address: '0x126', name: 'alex' }, + { address: '0x127', name: 'catherine' }, + ], + toError: 'bad', + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.length, 0) + }) + }) +}) diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js new file mode 100644 index 000000000..5ca0b2c23 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js @@ -0,0 +1,72 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + updateSendTo: sinon.spy(), +} + +proxyquire('../add-recipient.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../send.selectors.js': { + getSendEnsResolution: (s) => `mockSendEnsResolution:${s}`, + getSendEnsResolutionError: (s) => `mockSendEnsResolutionError:${s}`, + accountsWithSendEtherInfoSelector: (s) => `mockAccountsWithSendEtherInfoSelector:${s}`, + }, + '../../../../selectors/selectors': { + getAddressBook: (s) => [{ name: `mockAddressBook:${s}` }], + getAddressBookEntry: (s) => `mockAddressBookEntry:${s}`, + }, + '../../../../store/actions': actionSpies, +}) + +describe('add-recipient container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + addressBook: [{ name: 'mockAddressBook:mockState' }], + contacts: [{ name: 'mockAddressBook:mockState' }], + ensResolution: 'mockSendEnsResolution:mockState', + ensResolutionError: 'mockSendEnsResolutionError:mockState', + ownedAccounts: 'mockAccountsWithSendEtherInfoSelector:mockState', + addressBookEntryName: undefined, + nonContacts: [], + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('updateSendTo()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname') + assert(dispatchSpy.calledOnce) + assert(actionSpies.updateSendTo.calledOnce) + assert.deepEqual( + actionSpies.updateSendTo.getCall(0).args, + ['mockTo', 'mockNickname'] + ) + }) + }) + }) + +}) diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-selectors.test.js index 0fa342d1e..82f481187 100644 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-selectors.test.js @@ -3,9 +3,9 @@ import { getToDropdownOpen, getTokens, sendToIsInError, -} from '../send-to-row.selectors.js' +} from '../add-recipient.selectors.js' -describe('send-to-row selectors', () => { +describe('add-recipient selectors', () => { describe('getToDropdownOpen()', () => { it('should return send.getToDropdownOpen', () => { diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js index f8a6dd96f..182504c5d 100644 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js @@ -12,7 +12,7 @@ const stubs = { isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))), } -const toRowUtils = proxyquire('../send-to-row.utils.js', { +const toRowUtils = proxyquire('../add-recipient.js', { '../../../../helpers/utils/util': { isValidAddress: stubs.isValidAddress, }, @@ -22,7 +22,7 @@ const { getToWarningObject, } = toRowUtils -describe('send-to-row utils', () => { +describe('add-recipient utils', () => { describe('getToErrorObject()', () => { it('should return a required error if to is falsy', () => { diff --git a/ui/app/pages/send/send-content/index.js b/ui/app/pages/send/send-content/index.js index 891c17e6a..542da4674 100644 --- a/ui/app/pages/send/send-content/index.js +++ b/ui/app/pages/send/send-content/index.js @@ -1 +1 @@ -export { default } from './send-content.component' +export { default } from './send-content.container' diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js index 7901ccef6..05545669a 100644 --- a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js @@ -64,12 +64,12 @@ export default class AmountMaxButton extends Component { const { maxModeOn, buttonDataLoading, inError } = this.props return ( - <div className={'send-v2__amount-max'} onClick={buttonDataLoading || inError ? null : this.onMaxClick}> - <input type="checkbox" checked={maxModeOn} /> - <div className={classnames('send-v2__amount-max__button', { 'send-v2__amount-max__button__disabled': buttonDataLoading || inError })}> - {this.context.t('max')} - </div> - </div> - ) + <div className={'send-v2__amount-max'} onClick={buttonDataLoading || inError ? null : this.onMaxClick}> + <input type="checkbox" checked={maxModeOn} /> + <div className={classnames('send-v2__amount-max__button', { 'send-v2__amount-max__button__disabled': buttonDataLoading || inError })}> + {this.context.t('max')} + </div> + </div> + ) } } diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js index de2d9462f..1dcd0bd2c 100644 --- a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js +++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js @@ -59,7 +59,7 @@ export default class SendAssetRow extends Component { <SendRowWrapper label={`${t('asset')}:`}> <div className="send-v2__asset-dropdown"> { this.renderSelectedToken() } - { this.renderAssetDropdown() } + { this.props.tokens.length > 0 ? this.renderAssetDropdown() : null } </div> </SendRowWrapper> ) @@ -101,7 +101,7 @@ export default class SendAssetRow extends Component { return ( <div - className="send-v2__asset-dropdown__asset" + className={ this.props.tokens.length > 0 ? 'send-v2__asset-dropdown__asset' : 'send-v2__asset-dropdown__single-asset' } onClick={() => this.selectToken()} > <div className="send-v2__asset-dropdown__asset-icon"> diff --git a/ui/app/pages/send/send-content/send-content.component.js b/ui/app/pages/send/send-content/send-content.component.js index d799806c7..aff675e7a 100644 --- a/ui/app/pages/send/send-content/send-content.component.js +++ b/ui/app/pages/send/send-content/send-content.component.js @@ -2,18 +2,25 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import PageContainerContent from '../../../components/ui/page-container/page-container-content.component' import SendAmountRow from './send-amount-row' -import SendFromRow from './send-from-row' import SendGasRow from './send-gas-row' import SendHexDataRow from './send-hex-data-row' -import SendToRow from './send-to-row' import SendAssetRow from './send-asset-row' +import Dialog from '../../../components/ui/dialog' export default class SendContent extends Component { + static contextTypes = { + t: PropTypes.func, + } + static propTypes = { updateGas: PropTypes.func, scanQrCode: PropTypes.func, + showAddToAddressBookModal: PropTypes.func, showHexData: PropTypes.bool, + to: PropTypes.string, + ownedAccounts: PropTypes.array, + addressBook: PropTypes.array, } updateGas = (updateData) => this.props.updateGas(updateData) @@ -22,22 +29,40 @@ export default class SendContent extends Component { return ( <PageContainerContent> <div className="send-v2__form"> - <SendFromRow /> - <SendToRow - updateGas={this.updateGas} - scanQrCode={ _ => this.props.scanQrCode()} - /> + { this.maybeRenderAddContact() } <SendAssetRow /> <SendAmountRow updateGas={this.updateGas} /> <SendGasRow /> - {(this.props.showHexData && ( - <SendHexDataRow - updateGas={this.updateGas} - /> - ))} + { + this.props.showHexData && ( + <SendHexDataRow + updateGas={this.updateGas} + /> + ) + } </div> </PageContainerContent> ) } + maybeRenderAddContact () { + const { t } = this.context + const { to, addressBook = [], ownedAccounts = [], showAddToAddressBookModal } = this.props + const isOwnedAccount = !!ownedAccounts.find(({ address }) => address.toLowerCase() === to.toLowerCase()) + const contact = addressBook.find(({ address }) => address === to) || {} + + if (isOwnedAccount || contact.name) { + return + } + + return ( + <Dialog + type="message" + className="send__dialog" + onClick={showAddToAddressBookModal} + > + {t('newAccountDetectedDialogMessage')} + </Dialog> + ) + } } diff --git a/ui/app/pages/send/send-content/send-content.container.js b/ui/app/pages/send/send-content/send-content.container.js new file mode 100644 index 000000000..a0732fc20 --- /dev/null +++ b/ui/app/pages/send/send-content/send-content.container.js @@ -0,0 +1,38 @@ +import { connect } from 'react-redux' +import SendContent from './send-content.component' +import { + accountsWithSendEtherInfoSelector, + getSendTo, +} from '../send.selectors' +import { + getAddressBook, +} from '../../../selectors/selectors' +import actions from '../../../store/actions' + +function mapStateToProps (state) { + return { + to: getSendTo(state), + addressBook: getAddressBook(state), + ownedAccounts: accountsWithSendEtherInfoSelector(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + showAddToAddressBookModal: (recipient) => dispatch(actions.showModal({ + name: 'ADD_TO_ADDRESSBOOK', + recipient, + })), + } +} + +function mergeProps (stateProps, dispatchProps, ownProps) { + return { + ...ownProps, + ...stateProps, + ...dispatchProps, + showAddToAddressBookModal: () => dispatchProps.showAddToAddressBookModal(stateProps.to), + } +} + +export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendContent) diff --git a/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js index 3f5587318..37af59e29 100644 --- a/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js +++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js @@ -39,11 +39,11 @@ export default class GasFeeDisplay extends Component { ) : gasLoadingError ? <div className="currency-display.currency-display--message"> - {this.context.t('setGasPrice')} - </div> + {this.context.t('setGasPrice')} + </div> : <div className="currency-display"> - {this.context.t('loading')} - </div> + {this.context.t('loading')} + </div> } <button className="gas-fee-reset" diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js index 4c09ed564..ed064695e 100644 --- a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js @@ -90,26 +90,26 @@ export default class SendGasRow extends Component { const { metricsEvent } = this.context const gasPriceButtonGroup = <div> - <GasPriceButtonGroup - className="gas-price-button-group--small" - showCheck={false} - {...gasPriceButtonGroupProps} - handleGasPriceSelection={async (...args) => { - metricsEvent({ - eventOpts: { - category: 'Transactions', - action: 'Edit Screen', - name: 'Changed Gas Button', - }, - }) - await gasPriceButtonGroupProps.handleGasPriceSelection(...args) - if (maxModeOn) { - this.setMaxAmount() - } - }} - /> - { this.renderAdvancedOptionsButton() } - </div> + <GasPriceButtonGroup + className="gas-price-button-group--small" + showCheck={false} + {...gasPriceButtonGroupProps} + handleGasPriceSelection={async (...args) => { + metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Changed Gas Button', + }, + }) + await gasPriceButtonGroupProps.handleGasPriceSelection(...args) + if (maxModeOn) { + this.setMaxAmount() + } + }} + /> + { this.renderAdvancedOptionsButton() } + </div> const gasFeeDisplay = <GasFeeDisplay conversionRate={conversionRate} convertedCurrency={convertedCurrency} @@ -134,7 +134,7 @@ export default class SendGasRow extends Component { isSpeedUp={false} /> { this.renderAdvancedOptionsButton() } - </div> + </div> if (advancedInlineGasShown) { return advancedGasInputs diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js index f1caa8f99..6ddddbb3d 100644 --- a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js @@ -18,7 +18,7 @@ export default class SendRowWarningMessage extends Component { const warningMessage = warningType in warnings && warnings[warningType] return ( - warningMessage + warningMessage ? <div className="send-v2__warning">{this.context.t(warningMessage)}</div> : null ) diff --git a/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js index 30280e1d0..533ca2ebe 100644 --- a/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js @@ -54,25 +54,25 @@ describe('SendContent Component', function () { it('should render its second child as a child of the send-v2__form-field, if it has two children', () => { wrapper = shallow(<SendRowWrapper - errorType={'mockErrorType'} - label={'mockLabel'} - showError={false} - > - <span>Mock Custom Label Content</span> - <span>Mock Form Field</span> - </SendRowWrapper>) + errorType={'mockErrorType'} + label={'mockLabel'} + showError={false} + > + <span>Mock Custom Label Content</span> + <span>Mock Form Field</span> + </SendRowWrapper>) assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field') }) it('should render its first child as the last child of the send-v2__form-label, if it has two children', () => { wrapper = shallow(<SendRowWrapper - errorType={'mockErrorType'} - label={'mockLabel'} - showError={false} - > - <span>Mock Custom Label Content</span> - <span>Mock Form Field</span> - </SendRowWrapper>) + errorType={'mockErrorType'} + label={'mockLabel'} + showError={false} + > + <span>Mock Custom Label Content</span> + <span>Mock Form Field</span> + </SendRowWrapper>) assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content') }) }) diff --git a/ui/app/pages/send/send-content/send-to-row/index.js b/ui/app/pages/send/send-content/send-to-row/index.js deleted file mode 100644 index 121f15148..000000000 --- a/ui/app/pages/send/send-content/send-to-row/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './send-to-row.container' diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md b/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md deleted file mode 100644 index e69de29bb..000000000 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md +++ /dev/null diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js deleted file mode 100644 index 9baf327c1..000000000 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js +++ /dev/null @@ -1,91 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import SendRowWrapper from '../send-row-wrapper' -import EnsInput from '../../../../components/app/ens-input' -import { getToErrorObject, getToWarningObject } from './send-to-row.utils.js' - -export default class SendToRow extends Component { - - static propTypes = { - closeToDropdown: PropTypes.func, - hasHexData: PropTypes.bool.isRequired, - inError: PropTypes.bool, - inWarning: PropTypes.bool, - network: PropTypes.string, - openToDropdown: PropTypes.func, - selectedToken: PropTypes.object, - to: PropTypes.string, - toAccounts: PropTypes.array, - toDropdownOpen: PropTypes.bool, - tokens: PropTypes.array, - updateGas: PropTypes.func, - updateSendTo: PropTypes.func, - updateSendToError: PropTypes.func, - updateSendToWarning: PropTypes.func, - scanQrCode: PropTypes.func, - } - - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - handleToChange (to, nickname = '', toError, toWarning, network) { - const { hasHexData, updateSendTo, updateSendToError, updateGas, tokens, selectedToken, updateSendToWarning } = this.props - const toErrorObject = getToErrorObject(to, toError, hasHexData, tokens, selectedToken, network) - const toWarningObject = getToWarningObject(to, toWarning, tokens, selectedToken) - updateSendTo(to, nickname) - updateSendToError(toErrorObject) - updateSendToWarning(toWarningObject) - if (toErrorObject.to === null) { - updateGas({ to }) - } - } - - render () { - const { - closeToDropdown, - inError, - inWarning, - network, - openToDropdown, - to, - toAccounts, - toDropdownOpen, - } = this.props - - return ( - <SendRowWrapper - errorType={'to'} - label={`${this.context.t('to')}: `} - showError={inError} - showWarning={inWarning} - warningType={'to'} - > - <EnsInput - scanQrCode={_ => { - this.context.metricsEvent({ - eventOpts: { - category: 'Transactions', - action: 'Edit Screen', - name: 'Used QR scanner', - }, - }) - this.props.scanQrCode() - }} - accounts={toAccounts} - closeDropdown={() => closeToDropdown()} - dropdownOpen={toDropdownOpen} - inError={inError} - name={'address'} - network={network} - onChange={({ toAddress, nickname, toError, toWarning }) => this.handleToChange(toAddress, nickname, toError, toWarning, this.props.network)} - openDropdown={() => openToDropdown()} - placeholder={this.context.t('recipientAddress')} - to={to} - /> - </SendRowWrapper> - ) - } - -} diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js deleted file mode 100644 index 2cbe9fcd0..000000000 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js +++ /dev/null @@ -1,54 +0,0 @@ -import { connect } from 'react-redux' -import { - getCurrentNetwork, - getSelectedToken, - getSendTo, - getSendToAccounts, - getSendHexData, -} from '../../send.selectors.js' -import { - getToDropdownOpen, - getTokens, - sendToIsInError, - sendToIsInWarning, -} from './send-to-row.selectors.js' -import { - updateSendTo, -} from '../../../../store/actions' -import { - updateSendErrors, - updateSendWarnings, - openToDropdown, - closeToDropdown, -} from '../../../../ducks/send/send.duck' -import SendToRow from './send-to-row.component' - -export default connect(mapStateToProps, mapDispatchToProps)(SendToRow) - -function mapStateToProps (state) { - return { - hasHexData: Boolean(getSendHexData(state)), - inError: sendToIsInError(state), - inWarning: sendToIsInWarning(state), - network: getCurrentNetwork(state), - selectedToken: getSelectedToken(state), - to: getSendTo(state), - toAccounts: getSendToAccounts(state), - toDropdownOpen: getToDropdownOpen(state), - tokens: getTokens(state), - } -} - -function mapDispatchToProps (dispatch) { - return { - closeToDropdown: () => dispatch(closeToDropdown()), - openToDropdown: () => dispatch(openToDropdown()), - updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), - updateSendToError: (toErrorObject) => { - dispatch(updateSendErrors(toErrorObject)) - }, - updateSendToWarning: (toWarningObject) => { - dispatch(updateSendWarnings(toWarningObject)) - }, - } -} diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js deleted file mode 100644 index c180d97f1..000000000 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js +++ /dev/null @@ -1,166 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import sinon from 'sinon' -import proxyquire from 'proxyquire' - -const SendToRow = proxyquire('../send-to-row.component.js', { - './send-to-row.utils.js': { - getToErrorObject: (to, toError) => ({ - to: to === false ? null : `mockToErrorObject:${to}${toError}`, - }), - getToWarningObject: (to, toWarning) => ({ - to: to === false ? null : `mockToWarningObject:${to}${toWarning}`, - }), - }, -}).default - -import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' -import EnsInput from '../../../../../components/app/ens-input' - -const propsMethodSpies = { - closeToDropdown: sinon.spy(), - openToDropdown: sinon.spy(), - updateGas: sinon.spy(), - updateSendTo: sinon.spy(), - updateSendToError: sinon.spy(), - updateSendToWarning: sinon.spy(), -} - -sinon.spy(SendToRow.prototype, 'handleToChange') - -describe('SendToRow Component', function () { - let wrapper - let instance - - beforeEach(() => { - wrapper = shallow(<SendToRow - closeToDropdown={propsMethodSpies.closeToDropdown} - inError={false} - inWarning={false} - network={'mockNetwork'} - openToDropdown={propsMethodSpies.openToDropdown} - to={'mockTo'} - toAccounts={['mockAccount']} - toDropdownOpen={false} - updateGas={propsMethodSpies.updateGas} - updateSendTo={propsMethodSpies.updateSendTo} - updateSendToError={propsMethodSpies.updateSendToError} - updateSendToWarning={propsMethodSpies.updateSendToWarning} - />, { context: { t: str => str + '_t' } }) - instance = wrapper.instance() - }) - - afterEach(() => { - propsMethodSpies.closeToDropdown.resetHistory() - propsMethodSpies.openToDropdown.resetHistory() - propsMethodSpies.updateSendTo.resetHistory() - propsMethodSpies.updateSendToError.resetHistory() - propsMethodSpies.updateSendToWarning.resetHistory() - SendToRow.prototype.handleToChange.resetHistory() - }) - - describe('handleToChange', () => { - - it('should call updateSendTo', () => { - assert.equal(propsMethodSpies.updateSendTo.callCount, 0) - instance.handleToChange('mockTo2', 'mockNickname') - assert.equal(propsMethodSpies.updateSendTo.callCount, 1) - assert.deepEqual( - propsMethodSpies.updateSendTo.getCall(0).args, - ['mockTo2', 'mockNickname'] - ) - }) - - it('should call updateSendToError', () => { - assert.equal(propsMethodSpies.updateSendToError.callCount, 0) - instance.handleToChange('mockTo2', '', 'mockToError') - assert.equal(propsMethodSpies.updateSendToError.callCount, 1) - assert.deepEqual( - propsMethodSpies.updateSendToError.getCall(0).args, - [{ to: 'mockToErrorObject:mockTo2mockToError' }] - ) - }) - - it('should call updateSendToWarning', () => { - assert.equal(propsMethodSpies.updateSendToWarning.callCount, 0) - instance.handleToChange('mockTo2', '', '', 'mockToWarning') - assert.equal(propsMethodSpies.updateSendToWarning.callCount, 1) - assert.deepEqual( - propsMethodSpies.updateSendToWarning.getCall(0).args, - [{ to: 'mockToWarningObject:mockTo2mockToWarning' }] - ) - }) - - it('should not call updateGas if there is a to error', () => { - assert.equal(propsMethodSpies.updateGas.callCount, 0) - instance.handleToChange('mockTo2') - assert.equal(propsMethodSpies.updateGas.callCount, 0) - }) - - it('should call updateGas if there is no to error', () => { - assert.equal(propsMethodSpies.updateGas.callCount, 0) - instance.handleToChange(false) - assert.equal(propsMethodSpies.updateGas.callCount, 1) - }) - }) - - describe('render', () => { - it('should render a SendRowWrapper component', () => { - assert.equal(wrapper.find(SendRowWrapper).length, 1) - }) - - it('should pass the correct props to SendRowWrapper', () => { - const { - errorType, - label, - showError, - } = wrapper.find(SendRowWrapper).props() - - assert.equal(errorType, 'to') - - assert.equal(label, 'to_t: ') - - assert.equal(showError, false) - }) - - it('should render an EnsInput as a child of the SendRowWrapper', () => { - assert(wrapper.find(SendRowWrapper).childAt(0).is(EnsInput)) - }) - - it('should render the EnsInput with the correct props', () => { - const { - accounts, - closeDropdown, - dropdownOpen, - inError, - name, - network, - onChange, - openDropdown, - placeholder, - to, - } = wrapper.find(SendRowWrapper).childAt(0).props() - assert.deepEqual(accounts, ['mockAccount']) - assert.equal(dropdownOpen, false) - assert.equal(inError, false) - assert.equal(name, 'address') - assert.equal(network, 'mockNetwork') - assert.equal(placeholder, 'recipientAddress_t') - assert.equal(to, 'mockTo') - assert.equal(propsMethodSpies.closeToDropdown.callCount, 0) - closeDropdown() - assert.equal(propsMethodSpies.closeToDropdown.callCount, 1) - assert.equal(propsMethodSpies.openToDropdown.callCount, 0) - openDropdown() - assert.equal(propsMethodSpies.openToDropdown.callCount, 1) - assert.equal(SendToRow.prototype.handleToChange.callCount, 0) - onChange({ toAddress: 'mockNewTo', nickname: 'mockNewNickname', toError: 'mockToError', toWarning: 'mockToWarning' }) - assert.equal(SendToRow.prototype.handleToChange.callCount, 1) - assert.deepEqual( - SendToRow.prototype.handleToChange.getCall(0).args, - ['mockNewTo', 'mockNewNickname', 'mockToError', 'mockToWarning', 'mockNetwork' ] - ) - }) - }) -}) diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js deleted file mode 100644 index bb8702e9a..000000000 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js +++ /dev/null @@ -1,134 +0,0 @@ -import assert from 'assert' -import proxyquire from 'proxyquire' -import sinon from 'sinon' - -let mapStateToProps -let mapDispatchToProps - -const actionSpies = { - updateSendTo: sinon.spy(), -} -const duckActionSpies = { - closeToDropdown: sinon.spy(), - openToDropdown: sinon.spy(), - updateSendErrors: sinon.spy(), - updateSendWarnings: sinon.spy(), -} - -proxyquire('../send-to-row.container.js', { - 'react-redux': { - connect: (ms, md) => { - mapStateToProps = ms - mapDispatchToProps = md - return () => ({}) - }, - }, - '../../send.selectors.js': { - getCurrentNetwork: (s) => `mockNetwork:${s}`, - getSelectedToken: (s) => `mockSelectedToken:${s}`, - getSendHexData: (s) => s, - getSendTo: (s) => `mockTo:${s}`, - getSendToAccounts: (s) => `mockToAccounts:${s}`, - }, - './send-to-row.selectors.js': { - getToDropdownOpen: (s) => `mockToDropdownOpen:${s}`, - sendToIsInError: (s) => `mockInError:${s}`, - sendToIsInWarning: (s) => `mockInWarning:${s}`, - getTokens: (s) => `mockTokens:${s}`, - }, - '../../../../store/actions': actionSpies, - '../../../../ducks/send/send.duck': duckActionSpies, -}) - -describe('send-to-row container', () => { - - describe('mapStateToProps()', () => { - - it('should map the correct properties to props', () => { - assert.deepEqual(mapStateToProps('mockState'), { - hasHexData: true, - inError: 'mockInError:mockState', - inWarning: 'mockInWarning:mockState', - network: 'mockNetwork:mockState', - selectedToken: 'mockSelectedToken:mockState', - to: 'mockTo:mockState', - toAccounts: 'mockToAccounts:mockState', - toDropdownOpen: 'mockToDropdownOpen:mockState', - tokens: 'mockTokens:mockState', - }) - }) - - }) - - describe('mapDispatchToProps()', () => { - let dispatchSpy - let mapDispatchToPropsObject - - beforeEach(() => { - dispatchSpy = sinon.spy() - mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) - }) - - describe('closeToDropdown()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.closeToDropdown() - assert(dispatchSpy.calledOnce) - assert(duckActionSpies.closeToDropdown.calledOnce) - assert.equal( - duckActionSpies.closeToDropdown.getCall(0).args[0], - undefined - ) - }) - }) - - describe('openToDropdown()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.openToDropdown() - assert(dispatchSpy.calledOnce) - assert(duckActionSpies.openToDropdown.calledOnce) - assert.equal( - duckActionSpies.openToDropdown.getCall(0).args[0], - undefined - ) - }) - }) - - describe('updateSendTo()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname') - assert(dispatchSpy.calledOnce) - assert(actionSpies.updateSendTo.calledOnce) - assert.deepEqual( - actionSpies.updateSendTo.getCall(0).args, - ['mockTo', 'mockNickname'] - ) - }) - }) - - describe('updateSendToError()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.updateSendToError('mockToErrorObject') - assert(dispatchSpy.calledOnce) - assert(duckActionSpies.updateSendErrors.calledOnce) - assert.equal( - duckActionSpies.updateSendErrors.getCall(0).args[0], - 'mockToErrorObject' - ) - }) - }) - - describe('updateSendToWarning()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.updateSendToWarning('mockToWarningObject') - assert(dispatchSpy.calledOnce) - assert(duckActionSpies.updateSendWarnings.calledOnce) - assert.equal( - duckActionSpies.updateSendWarnings.getCall(0).args[0], - 'mockToWarningObject' - ) - }) - }) - - }) - -}) diff --git a/ui/app/pages/send/send-content/tests/send-content-component.test.js b/ui/app/pages/send/send-content/tests/send-content-component.test.js index 521c6523e..451d2ea53 100644 --- a/ui/app/pages/send/send-content/tests/send-content-component.test.js +++ b/ui/app/pages/send/send-content/tests/send-content-component.test.js @@ -5,17 +5,21 @@ import SendContent from '../send-content.component.js' import PageContainerContent from '../../../../components/ui/page-container/page-container-content.component' import SendAmountRow from '../send-amount-row/send-amount-row.container' -import SendFromRow from '../send-from-row/send-from-row.container' import SendGasRow from '../send-gas-row/send-gas-row.container' -import SendToRow from '../send-to-row/send-to-row.container' import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container' import SendAssetRow from '../send-asset-row/send-asset-row.container' +import Dialog from '../../../../components/ui/dialog' describe('SendContent Component', function () { let wrapper beforeEach(() => { - wrapper = shallow(<SendContent showHexData={true} />) + wrapper = shallow( + <SendContent + showHexData={true} + />, + { context: { t: str => str + '_t' } } + ) }) describe('render', () => { @@ -31,23 +35,55 @@ describe('SendContent Component', function () { it('should render the correct row components as grandchildren of the PageContainerContent component', () => { const PageContainerContentChild = wrapper.find(PageContainerContent).children() - assert(PageContainerContentChild.childAt(0).is(SendFromRow)) - assert(PageContainerContentChild.childAt(1).is(SendToRow)) - assert(PageContainerContentChild.childAt(2).is(SendAssetRow)) - assert(PageContainerContentChild.childAt(3).is(SendAmountRow)) - assert(PageContainerContentChild.childAt(4).is(SendGasRow)) - assert(PageContainerContentChild.childAt(5).is(SendHexDataRow)) + assert(PageContainerContentChild.childAt(0).is(Dialog), 'row[0] should be Dialog') + assert(PageContainerContentChild.childAt(1).is(SendAssetRow), 'row[1] should be SendAssetRow') + assert(PageContainerContentChild.childAt(2).is(SendAmountRow), 'row[2] should be SendAmountRow') + assert(PageContainerContentChild.childAt(3).is(SendGasRow), 'row[3] should be SendGasRow') + assert(PageContainerContentChild.childAt(4).is(SendHexDataRow), 'row[4] should be SendHexDataRow') }) it('should not render the SendHexDataRow if props.showHexData is false', () => { wrapper.setProps({ showHexData: false }) const PageContainerContentChild = wrapper.find(PageContainerContent).children() - assert(PageContainerContentChild.childAt(0).is(SendFromRow)) - assert(PageContainerContentChild.childAt(1).is(SendToRow)) - assert(PageContainerContentChild.childAt(2).is(SendAssetRow)) - assert(PageContainerContentChild.childAt(3).is(SendAmountRow)) - assert(PageContainerContentChild.childAt(4).is(SendGasRow)) - assert.equal(PageContainerContentChild.childAt(5).exists(), false) + assert(PageContainerContentChild.childAt(0).is(Dialog), 'row[0] should be Dialog') + assert(PageContainerContentChild.childAt(1).is(SendAssetRow), 'row[1] should be SendAssetRow') + assert(PageContainerContentChild.childAt(2).is(SendAmountRow), 'row[2] should be SendAmountRow') + assert(PageContainerContentChild.childAt(3).is(SendGasRow), 'row[3] should be SendGasRow') + assert.equal(PageContainerContentChild.childAt(4).exists(), false) }) + + it('should not render the Dialog if addressBook contains "to" address', () => { + wrapper.setProps({ + showHexData: false, + to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + addressBook: [{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'dinodan' }], + }) + const PageContainerContentChild = wrapper.find(PageContainerContent).children() + assert(PageContainerContentChild.childAt(0).is(SendAssetRow), 'row[1] should be SendAssetRow') + assert(PageContainerContentChild.childAt(1).is(SendAmountRow), 'row[2] should be SendAmountRow') + assert(PageContainerContentChild.childAt(2).is(SendGasRow), 'row[3] should be SendGasRow') + assert.equal(PageContainerContentChild.childAt(3).exists(), false) + }) + + it('should not render the Dialog if ownedAccounts contains "to" address', () => { + wrapper.setProps({ + showHexData: false, + to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + addressBook: [], + ownedAccounts: [{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'dinodan' }], + }) + const PageContainerContentChild = wrapper.find(PageContainerContent).children() + assert(PageContainerContentChild.childAt(0).is(SendAssetRow), 'row[1] should be SendAssetRow') + assert(PageContainerContentChild.childAt(1).is(SendAmountRow), 'row[2] should be SendAmountRow') + assert(PageContainerContentChild.childAt(2).is(SendGasRow), 'row[3] should be SendGasRow') + assert.equal(PageContainerContentChild.childAt(3).exists(), false) + }) + }) + + it('should not render the asset dropdown if token length is 0 ', () => { + wrapper.setProps({ tokens: [] }) + const PageContainerContentChild = wrapper.find(PageContainerContent).children() + assert(PageContainerContentChild.childAt(1).is(SendAssetRow)) + assert(PageContainerContentChild.childAt(1).find('send-v2__asset-dropdown__single-asset'), true) }) }) diff --git a/ui/app/pages/send/send-footer/send-footer.utils.js b/ui/app/pages/send/send-footer/send-footer.utils.js index 91ac29014..ce65535a6 100644 --- a/ui/app/pages/send/send-footer/send-footer.utils.js +++ b/ui/app/pages/send/send-footer/send-footer.utils.js @@ -76,7 +76,7 @@ function constructUpdatedTx ({ function addressIsNew (toAccounts, newAddress) { const newAddressNormalized = newAddress.toLowerCase() - const foundMatching = toAccounts.some(({ address }) => address === newAddressNormalized) + const foundMatching = toAccounts.some(({ address }) => address.toLowerCase() === newAddressNormalized) return !foundMatching } diff --git a/ui/app/pages/send/send-header/send-header.component.js b/ui/app/pages/send/send-header/send-header.component.js index 76e35494a..5bc76fcd3 100644 --- a/ui/app/pages/send/send-header/send-header.component.js +++ b/ui/app/pages/send/send-header/send-header.component.js @@ -24,8 +24,10 @@ export default class SendHeader extends Component { render () { return ( <PageContainerHeader + className="send__header" onClose={() => this.onClose()} title={this.context.t(this.props.titleKey)} + headerCloseText={this.context.t('cancel')} /> ) } diff --git a/ui/app/pages/send/send-header/send-header.selectors.js b/ui/app/pages/send/send-header/send-header.selectors.js index d7c9d3766..01b90409b 100644 --- a/ui/app/pages/send/send-header/send-header.selectors.js +++ b/ui/app/pages/send/send-header/send-header.selectors.js @@ -1,6 +1,7 @@ const { getSelectedToken, getSendEditingTransactionId, + getSendTo, } = require('../send.selectors.js') const selectors = { @@ -14,6 +15,10 @@ function getTitleKey (state) { const isEditing = Boolean(getSendEditingTransactionId(state)) const isToken = Boolean(getSelectedToken(state)) + if (!getSendTo(state)) { + return 'addRecipient' + } + if (isEditing) { return 'edit' } else if (isToken) { @@ -24,14 +29,14 @@ function getTitleKey (state) { } function getSubtitleParams (state) { - const isEditing = Boolean(getSendEditingTransactionId(state)) - const token = getSelectedToken(state) + const isEditing = Boolean(getSendEditingTransactionId(state)) + const token = getSelectedToken(state) - if (isEditing) { - return [ 'editingTransaction' ] - } else if (token) { - return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ] - } else { - return [ 'onlySendToEtherAddress' ] - } + if (isEditing) { + return [ 'editingTransaction' ] + } else if (token) { + return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ] + } else { + return [ 'onlySendToEtherAddress' ] + } } diff --git a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js index e0c6a3ab3..d22845f84 100644 --- a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js @@ -8,39 +8,44 @@ const { '../send.selectors': { getSelectedToken: (mockState) => mockState.t, getSendEditingTransactionId: (mockState) => mockState.e, + getSendTo: (mockState) => mockState.to, }, }) describe('send-header selectors', () => { describe('getTitleKey()', () => { + it('should return the correct key when "to" is empty', () => { + assert.equal(getTitleKey({ e: 1, t: true, to: '' }), 'addRecipient') + }) + it('should return the correct key when getSendEditingTransactionId is truthy', () => { - assert.equal(getTitleKey({ e: 1, t: true }), 'edit') + assert.equal(getTitleKey({ e: 1, t: true, to: '0x123' }), 'edit') }) it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => { - assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens') + assert.equal(getTitleKey({ e: null, t: 'abc', to: '0x123' }), 'sendTokens') }) it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => { - assert.equal(getTitleKey({ e: null }), 'sendETH') + assert.equal(getTitleKey({ e: null, to: '0x123' }), 'sendETH') }) }) describe('getSubtitleParams()', () => { it('should return the correct params when getSendEditingTransactionId is truthy', () => { - assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ]) + assert.deepEqual(getSubtitleParams({ e: 1, t: true, to: '0x123' }), [ 'editingTransaction' ]) }) it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => { assert.deepEqual( - getSubtitleParams({ e: null, t: { symbol: 'ABC' } }), + getSubtitleParams({ e: null, t: { symbol: 'ABC' }, to: '0x123' }), [ 'onlySendTokensToAccountAddress', [ 'ABC' ] ] ) }) it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => { - assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ]) + assert.deepEqual(getSubtitleParams({ e: null, to: '0x123' }), [ 'onlySendToEtherAddress' ]) }) }) diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js index 5f0c9c9f2..cb07dcb59 100644 --- a/ui/app/pages/send/send.component.js +++ b/ui/app/pages/send/send.component.js @@ -7,10 +7,14 @@ import { getToAddressForGasUpdate, doesAmountErrorRequireUpdate, } from './send.utils' - +import debounce from 'lodash.debounce' +import { getToWarningObject, getToErrorObject } from './send-content/add-recipient/add-recipient' import SendHeader from './send-header' +import AddRecipient from './send-content/add-recipient' import SendContent from './send-content' import SendFooter from './send-footer' +import EnsInput from './send-content/add-recipient/ens-input' + export default class SendTransactionScreen extends PersistentForm { @@ -27,12 +31,14 @@ export default class SendTransactionScreen extends PersistentForm { gasLimit: PropTypes.string, gasPrice: PropTypes.string, gasTotal: PropTypes.string, + to: PropTypes.string, history: PropTypes.object, network: PropTypes.string, primaryCurrency: PropTypes.string, recentBlocks: PropTypes.array, selectedAddress: PropTypes.string, selectedToken: PropTypes.object, + tokens: PropTypes.array, tokenBalance: PropTypes.string, tokenContract: PropTypes.object, fetchBasicGasEstimates: PropTypes.func, @@ -42,10 +48,24 @@ export default class SendTransactionScreen extends PersistentForm { scanQrCode: PropTypes.func, qrCodeDetected: PropTypes.func, qrCodeData: PropTypes.object, + ensResolution: PropTypes.string, + ensResolutionError: PropTypes.string, } static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, + } + + state = { + query: '', + toError: null, + toWarning: null, + } + + constructor (props) { + super(props) + this.dValidate = debounce(this.validate, 1000) } componentWillReceiveProps (nextProps) { @@ -63,34 +83,6 @@ export default class SendTransactionScreen extends PersistentForm { } } - updateGas ({ to: updatedToAddress, amount: value, data } = {}) { - const { - amount, - blockGasLimit, - editingTransactionId, - gasLimit, - gasPrice, - recentBlocks, - selectedAddress, - selectedToken = {}, - to: currentToAddress, - updateAndSetGasLimit, - } = this.props - - updateAndSetGasLimit({ - blockGasLimit, - editingTransactionId, - gasLimit, - gasPrice, - recentBlocks, - selectedAddress, - selectedToken, - to: getToAddressForGasUpdate(updatedToAddress, currentToAddress), - value: value || amount, - data, - }) - } - componentDidUpdate (prevProps) { const { amount, @@ -105,6 +97,10 @@ export default class SendTransactionScreen extends PersistentForm { updateSendErrors, updateSendTokenBalance, tokenContract, + to, + toNickname, + addressBook, + updateToNicknameIfNecessary, } = this.props const { @@ -159,6 +155,7 @@ export default class SendTransactionScreen extends PersistentForm { tokenContract, address, }) + updateToNicknameIfNecessary(to, toNickname, addressBook) this.updateGas() } } @@ -173,9 +170,9 @@ export default class SendTransactionScreen extends PersistentForm { componentDidMount () { this.props.fetchBasicGasEstimates() - .then(() => { - this.updateGas() - }) + .then(() => { + this.updateGas() + }) } componentWillMount () { @@ -196,6 +193,39 @@ export default class SendTransactionScreen extends PersistentForm { this.props.resetSendState() } + onRecipientInputChange = query => { + if (query) { + this.dValidate(query) + } else { + this.validate(query) + } + + this.setState({ + query, + }) + } + + validate (query) { + const { + hasHexData, + tokens, + selectedToken, + network, + } = this.props + + if (!query) { + return this.setState({ toError: '', toWarning: '' }) + } + + const toErrorObject = getToErrorObject(query, null, hasHexData, tokens, selectedToken, network) + const toWarningObject = getToWarningObject(query, null, tokens, selectedToken) + + this.setState({ + toError: toErrorObject.to, + toWarning: toWarningObject.to, + }) + } + updateSendToken () { const { from: { address }, @@ -211,20 +241,104 @@ export default class SendTransactionScreen extends PersistentForm { }) } + updateGas ({ to: updatedToAddress, amount: value, data } = {}) { + const { + amount, + blockGasLimit, + editingTransactionId, + gasLimit, + gasPrice, + recentBlocks, + selectedAddress, + selectedToken = {}, + to: currentToAddress, + updateAndSetGasLimit, + } = this.props + + updateAndSetGasLimit({ + blockGasLimit, + editingTransactionId, + gasLimit, + gasPrice, + recentBlocks, + selectedAddress, + selectedToken, + to: getToAddressForGasUpdate(updatedToAddress, currentToAddress), + value: value || amount, + data, + }) + } + render () { - const { history, showHexData } = this.props + const { history, to } = this.props + let content + + if (to) { + content = this.renderSendContent() + } else { + content = this.renderAddRecipient() + } return ( <div className="page-container"> - <SendHeader history={history}/> - <SendContent - updateGas={(updateData) => this.updateGas(updateData)} - scanQrCode={_ => this.props.scanQrCode()} - showHexData={showHexData} - /> - <SendFooter history={history}/> + <SendHeader history={history} /> + { this.renderInput() } + { content } </div> ) } + renderInput () { + return ( + <EnsInput + className="send__to-row" + scanQrCode={_ => { + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Used QR scanner', + }, + }) + this.props.scanQrCode() + }} + onChange={this.onRecipientInputChange} + onValidAddressTyped={(address) => this.props.updateSendTo(address, '')} + onPaste={text => this.props.updateSendTo(text)} + onReset={() => this.props.updateSendTo('', '')} + updateEnsResolution={this.props.updateSendEnsResolution} + updateEnsResolutionError={this.props.updateSendEnsResolutionError} + /> + ) + } + + renderAddRecipient () { + const { scanQrCode } = this.props + const { toError, toWarning } = this.state + + return ( + <AddRecipient + updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })} + scanQrCode={scanQrCode} + query={this.state.query} + toError={toError} + toWarning={toWarning} + /> + ) + } + + renderSendContent () { + const { history, showHexData, scanQrCode } = this.props + + return [ + <SendContent + key="send-content" + updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })} + scanQrCode={scanQrCode} + showHexData={showHexData} + />, + <SendFooter key="send-footer" history={history} />, + ] + } + } diff --git a/ui/app/pages/send/send.container.js b/ui/app/pages/send/send.container.js index 69adbb765..0863c60d4 100644 --- a/ui/app/pages/send/send.container.js +++ b/ui/app/pages/send/send.container.js @@ -24,16 +24,25 @@ import { getSendHexDataFeatureFlagState, getSendFromObject, getSendTo, + getSendToNickname, getTokenBalance, getQrCodeData, + getSendEnsResolution, + getSendEnsResolutionError, } from './send.selectors' import { + getAddressBook, +} from '../../selectors/selectors' +import { getTokens } from './send-content/add-recipient/add-recipient.selectors' +import { updateSendTo, updateSendTokenBalance, updateGasData, setGasTotal, showQrScanner, qrCodeDetected, + updateSendEnsResolution, + updateSendEnsResolutionError, } from '../../store/actions' import { resetSendState, @@ -45,6 +54,9 @@ import { import { calcGasTotal, } from './send.utils.js' +import { + isValidENSAddress, +} from '../../helpers/utils/util' import { SEND_ROUTE, @@ -72,11 +84,16 @@ function mapStateToProps (state) { selectedAddress: getSelectedAddress(state), selectedToken: getSelectedToken(state), showHexData: getSendHexDataFeatureFlagState(state), + ensResolution: getSendEnsResolution(state), + ensResolutionError: getSendEnsResolutionError(state), to: getSendTo(state), + toNickname: getSendToNickname(state), + tokens: getTokens(state), tokenBalance: getTokenBalance(state), tokenContract: getSelectedTokenContract(state), tokenToFiatRate: getSelectedTokenToFiatRate(state), qrCodeData: getQrCodeData(state), + addressBook: getAddressBook(state), } } @@ -111,5 +128,15 @@ function mapDispatchToProps (dispatch) { qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()), + updateSendEnsResolution: (ensResolution) => dispatch(updateSendEnsResolution(ensResolution)), + updateSendEnsResolutionError: (message) => dispatch(updateSendEnsResolutionError(message)), + updateToNicknameIfNecessary: (to, toNickname, addressBook) => { + if (isValidENSAddress(toNickname)) { + const addressBookEntry = addressBook.find(({ address}) => to === address) || {} + if (!addressBookEntry.name !== toNickname) { + dispatch(updateSendTo(to, addressBookEntry.name || '')) + } + } + }, } } diff --git a/ui/app/pages/send/send.scss b/ui/app/pages/send/send.scss index e69de29bb..9b95f1b39 100644 --- a/ui/app/pages/send/send.scss +++ b/ui/app/pages/send/send.scss @@ -0,0 +1,233 @@ +.send { + &__header { + position: relative; + background-color: $Grey-000; + border-bottom: none; + padding: 14px 0 3px 0; + + .page-container__title { + @extend %h4; + text-align: center; + } + + .page-container__header-close-text { + @extend %link; + font-size: 1rem; + line-height: 1.1875rem; + position: absolute; + right: 1rem; + } + } + + &__dialog { + margin: 1rem; + cursor: pointer; + } + + &__error-dialog { + margin: 1rem; + } + + &__to-row { + margin: 0; + padding: .5rem; + flex: 0 0 auto; + background-color: $Grey-000; + border-bottom: 1px solid $alto; + } + + &__select-recipient-wrapper { + @extend %col-nowrap; + flex: 1 1 auto; + height: 0; + + &__list { + overflow-y: auto; + + &__link { + @extend %link; + @extend %row-nowrap; + padding: 1rem; + font-size: 1rem; + border-bottom: 1px solid $alto; + align-items: center; + } + + &__back-caret { + @extend %bg-contain; + display: block; + background-image: url('/images/caret-left.svg'); + width: 18px; + height: 18px; + margin-right: .5rem; + } + } + + &__recent-group-wrapper { + @extend %col-nowrap; + + &__load-more { + @extend %link; + font-size: .75rem; + line-height: 1.0625rem; + padding: .5rem; + text-align: center; + border-bottom: 1px solid $alto; + } + } + + &__group { + @extend %col-nowrap; + } + + &__group-label { + @extend %h8; + background-color: $Grey-000; + color: $Grey-600; + line-height: .875rem; + padding: .5rem 1rem; + border-bottom: 1px solid $alto; + + &:first-of-type { + border-top: 1px solid $alto; + } + } + + &__group-item, &__group-item--selected { + @extend %row-nowrap; + padding: .75rem 1rem; + align-items: center; + border-bottom: 1px solid $alto; + cursor: pointer; + + &:hover { + background-color: rgba($alto, 0.2); + } + + .identicon { + margin-right: 1rem; + flex: 0 0 auto; + } + + &__content { + @extend %col-nowrap; + flex: 1 1 auto; + width: 0; + } + + &__title { + font-size: .875rem; + line-height: 1.25rem; + color: $black; + } + + &__subtitle { + @extend %h8; + color: $Grey-500; + } + } + + &__group-item--selected { + border: 2px solid #2b7cd6; + border-radius: 8px; + } + } +} + +.ens-input { + @extend %row-nowrap; + + &__wrapper { + @extend %row-nowrap; + flex: 1 1 auto; + width: 0; + align-items: center; + background: $white; + border-radius: .5rem; + padding: .75rem .5rem; + border: 1px solid $Grey-100; + transition: border-color 150ms ease-in-out; + + &:focus-within { + border-color: $Grey-500; + } + + &__status-icon { + @extend %bg-contain; + background-image: url("/images/search-black.svg"); + width: 1.125rem; + height: 1.125rem; + margin: .25rem .5rem .25rem .25rem; + + &--error { + + } + + &--valid { + background-image: url("/images/check-green-solid.svg"); + } + } + + &__input { + @extend %h6; + flex: 1 1 auto; + width: 0; + border: 0; + outline: none; + + &::placeholder { + color: $Grey-200; + } + } + + &__action-icon { + @extend %bg-contain; + cursor: pointer; + + &--erase { + background-image: url("/images/close-gray.svg"); + width: .75rem; + height: .75rem; + margin: 0 .25rem; + } + + &--qrcode { + background-image: url("/images/qr-blue.svg"); + width: 1.5rem; + height: 1.5rem; + margin: 0 .25rem; + } + } + + &--valid { + border-color: $Blue-500; + + .ens-input__wrapper { + &__status-icon { + background-image: url("/images/check-green-solid.svg"); + } + + &__input { + @extend %col-nowrap; + font-size: .75rem; + line-height: .75rem; + font-weight: 400; + color: $Blue-500; + } + } + } + } + + &__selected-input { + &__title { + @extend %ellipsify; + font-size: .875rem; + } + + &__subtitle { + font-size: 0.75rem; + color: $Grey-500; + margin-top: .25rem; + } + } +} diff --git a/ui/app/pages/send/send.selectors.js b/ui/app/pages/send/send.selectors.js index d4035df28..ed2917020 100644 --- a/ui/app/pages/send/send.selectors.js +++ b/ui/app/pages/send/send.selectors.js @@ -6,6 +6,7 @@ const { const { getMetaMaskAccounts, getSelectedAddress, + getAddressBook, } = require('../../selectors/selectors') const { estimateGasPriceFromRecentBlocks, @@ -17,7 +18,6 @@ import { const selectors = { accountsWithSendEtherInfoSelector, - getAddressBook, getAmountConversionRate, getBlockGasLimit, getConversionRate, @@ -43,6 +43,8 @@ const selectors = { getSendHexData, getSendHexDataFeatureFlagState, getSendEditingTransactionId, + getSendEnsResolution, + getSendEnsResolutionError, getSendErrors, getSendFrom, getSendFromBalance, @@ -50,6 +52,7 @@ const selectors = { getSendMaxModeState, getSendTo, getSendToAccounts, + getSendToNickname, getSendWarnings, getTokenBalance, getTokenExchangeRate, @@ -63,7 +66,6 @@ module.exports = selectors function accountsWithSendEtherInfoSelector (state) { const accounts = getMetaMaskAccounts(state) const { identities } = state.metamask - const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => { return Object.assign({}, account, identities[key]) }) @@ -71,10 +73,6 @@ function accountsWithSendEtherInfoSelector (state) { return accountsWithSendEtherInfo } -function getAddressBook (state) { - return state.metamask.addressBook -} - function getAmountConversionRate (state) { return getSelectedToken(state) ? getSelectedTokenToFiatRate(state) @@ -237,6 +235,10 @@ function getSendTo (state) { return state.metamask.send.to } +function getSendToNickname (state) { + return state.metamask.send.toNickname +} + function getSendToAccounts (state) { const fromAccounts = accountsWithSendEtherInfoSelector(state) const addressBookAccounts = getAddressBook(state) @@ -251,6 +253,14 @@ function getTokenBalance (state) { return state.metamask.send.tokenBalance } +function getSendEnsResolution (state) { + return state.metamask.send.ensResolution +} + +function getSendEnsResolutionError (state) { + return state.metamask.send.ensResolutionError +} + function getTokenExchangeRate (state, tokenSymbol) { const pair = `${tokenSymbol.toLowerCase()}_eth` const tokenExchangeRates = state.metamask.tokenExchangeRates diff --git a/ui/app/pages/send/send.utils.js b/ui/app/pages/send/send.utils.js index 4acc174f9..1f9bc202a 100644 --- a/ui/app/pages/send/send.utils.js +++ b/ui/app/pages/send/send.utils.js @@ -35,6 +35,7 @@ module.exports = { isBalanceSufficient, isTokenBalanceSufficient, removeLeadingZeroes, + ellipsify, } function calcGasTotal (gasLimit = '0', gasPrice = '0') { @@ -318,7 +319,7 @@ function estimateGasPriceFromRecentBlocks (recentBlocks) { return parseInt(next, 16) < parseInt(currentLowest, 16) ? next : currentLowest }) }) - .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1) + .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1) return lowestPrices[Math.floor(lowestPrices.length / 2)] } @@ -330,3 +331,7 @@ function getToAddressForGasUpdate (...addresses) { function removeLeadingZeroes (str) { return str.replace(/^0*(?=\d)/, '') } + +function ellipsify (text, first = 6, last = 4) { + return `${text.slice(0, first)}...${text.slice(-last)}` +} diff --git a/ui/app/pages/send/tests/send-component.test.js b/ui/app/pages/send/tests/send-component.test.js index 81955cc1d..5b7cafed5 100644 --- a/ui/app/pages/send/tests/send-component.test.js +++ b/ui/app/pages/send/tests/send-component.test.js @@ -5,8 +5,9 @@ import { shallow } from 'enzyme' import sinon from 'sinon' import timeout from '../../../../lib/test-timeout' +import AddRecipient from '../send-content/add-recipient/add-recipient.container' import SendHeader from '../send-header/send-header.container' -import SendContent from '../send-content/send-content.component' +import SendContent from '../send-content/send-content.container' import SendFooter from '../send-footer/send-footer.container' const mockBasicGasEstimates = { @@ -20,6 +21,7 @@ const propsMethodSpies = { resetSendState: sinon.spy(), fetchBasicGasEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)), fetchGasEstimates: sinon.spy(), + updateToNicknameIfNecessary: sinon.spy(), } const utilsMethodStubs = { getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }), @@ -63,6 +65,7 @@ describe('Send Component', function () { updateSendErrors={propsMethodSpies.updateSendErrors} updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance} resetSendState={propsMethodSpies.resetSendState} + updateToNicknameIfNecessary={propsMethodSpies.updateToNicknameIfNecessary} />) }) @@ -332,13 +335,18 @@ describe('Send Component', function () { assert.equal(wrapper.find('.page-container').length, 1) }) - it('should render SendHeader, SendContent and SendFooter', () => { + it('should render SendHeader and AddRecipient', () => { assert.equal(wrapper.find(SendHeader).length, 1) - assert.equal(wrapper.find(SendContent).length, 1) - assert.equal(wrapper.find(SendFooter).length, 1) + assert.equal(wrapper.find(AddRecipient).length, 1) }) it('should pass the history prop to SendHeader and SendFooter', () => { + wrapper.setProps({ + to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + }) + assert.equal(wrapper.find(SendHeader).length, 1) + assert.equal(wrapper.find(SendContent).length, 1) + assert.equal(wrapper.find(SendFooter).length, 1) assert.deepEqual( wrapper.find(SendFooter).props(), { @@ -348,7 +356,93 @@ describe('Send Component', function () { }) it('should pass showHexData to SendContent', () => { + wrapper.setProps({ + to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + }) assert.equal(wrapper.find(SendContent).props().showHexData, true) }) }) + + describe('validate when input change', () => { + let clock + + beforeEach(() => { + clock = sinon.useFakeTimers() + }) + + afterEach(() => { + clock.restore() + }) + + it('should validate when input changes', () => { + const instance = wrapper.instance() + instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7A3BedD70cd4510') + + assert.deepEqual(instance.state, { + query: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + toError: null, + toWarning: null, + }) + }) + + it('should validate when input changes and has error', () => { + const instance = wrapper.instance() + instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510') + + clock.tick(1001) + assert.deepEqual(instance.state, { + query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510', + toError: 'invalidAddressRecipient', + toWarning: null, + }) + }) + + it('should validate when input changes and has error', () => { + wrapper.setProps({ network: 'bad' }) + const instance = wrapper.instance() + instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510') + + clock.tick(1001) + assert.deepEqual(instance.state, { + query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510', + toError: 'invalidAddressRecipientNotEthNetwork', + toWarning: null, + }) + }) + + it('should synchronously validate when input changes to ""', () => { + wrapper.setProps({ network: 'bad' }) + const instance = wrapper.instance() + instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510') + + clock.tick(1001) + assert.deepEqual(instance.state, { + query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510', + toError: 'invalidAddressRecipientNotEthNetwork', + toWarning: null, + }) + + instance.onRecipientInputChange('') + assert.deepEqual(instance.state, { + query: '', + toError: '', + toWarning: '', + }) + }) + + it('should warn when send to a known token contract address', () => { + wrapper.setProps({ + selectedToken: '0x888', + }) + const instance = wrapper.instance() + instance.onRecipientInputChange('0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64') + + clock.tick(1001) + assert.deepEqual(instance.state, { + query: '0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64', + toError: null, + toWarning: 'knownAddressRecipient', + }) + }) + }) }) diff --git a/ui/app/pages/send/tests/send-container.test.js b/ui/app/pages/send/tests/send-container.test.js index 131c42f59..f4142bc2d 100644 --- a/ui/app/pages/send/tests/send-container.test.js +++ b/ui/app/pages/send/tests/send-container.test.js @@ -41,12 +41,19 @@ proxyquire('../send.container.js', { getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`, getSendAmount: (s) => `mockAmount:${s}`, getSendTo: (s) => `mockTo:${s}`, + getSendToNickname: (s) => `mockToNickname:${s}`, getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`, getSendFromObject: (s) => `mockFrom:${s}`, getTokenBalance: (s) => `mockTokenBalance:${s}`, getQrCodeData: (s) => `mockQrCodeData:${s}`, + getSendEnsResolution: (s) => `mockSendEnsResolution:${s}`, + getSendEnsResolutionError: (s) => `mockSendEnsResolutionError:${s}`, + }, + './send-content/add-recipient/add-recipient.selectors': { + getTokens: s => `mockTokens:${s}`, }, '../../selectors/selectors': { + getAddressBook: (s) => `mockAddressBook:${s}`, getSelectedAddress: (s) => `mockSelectedAddress:${s}`, }, '../../store/actions': actionSpies, @@ -83,6 +90,11 @@ describe('send container', () => { tokenContract: 'mockTokenContract:mockState', tokenToFiatRate: 'mockTokenToFiatRate:mockState', qrCodeData: 'mockQrCodeData:mockState', + tokens: 'mockTokens:mockState', + ensResolution: 'mockSendEnsResolution:mockState', + ensResolutionError: 'mockSendEnsResolutionError:mockState', + toNickname: 'mockToNickname:mockState', + addressBook: 'mockAddressBook:mockState', }) }) diff --git a/ui/app/pages/send/tests/send-selectors-test-data.js b/ui/app/pages/send/tests/send-selectors-test-data.js index cff26a191..54a494b63 100644 --- a/ui/app/pages/send/tests/send-selectors-test-data.js +++ b/ui/app/pages/send/tests/send-selectors-test-data.js @@ -60,6 +60,7 @@ module.exports = { { 'address': '0x06195827297c7a80a443b6894d3bdb8824b43896', 'name': 'Address Book Account 1', + 'chainId': '3', }, ], 'tokens': [ diff --git a/ui/app/pages/send/tests/send-selectors.test.js b/ui/app/pages/send/tests/send-selectors.test.js index ccc126795..e199aa97e 100644 --- a/ui/app/pages/send/tests/send-selectors.test.js +++ b/ui/app/pages/send/tests/send-selectors.test.js @@ -4,7 +4,6 @@ import selectors from '../send.selectors.js' const { accountsWithSendEtherInfoSelector, // autoAddToBetaUI, - getAddressBook, getBlockGasLimit, getAmountConversionRate, getConversionRate, @@ -103,20 +102,6 @@ describe('send selectors', () => { // }) // }) - describe('getAddressBook()', () => { - it('should return the address book', () => { - assert.deepEqual( - getAddressBook(mockState), - [ - { - address: '0x06195827297c7a80a443b6894d3bdb8824b43896', - name: 'Address Book Account 1', - }, - ], - ) - }) - }) - describe('getAmountConversionRate()', () => { it('should return the token conversion rate if a token is selected', () => { assert.equal( @@ -511,6 +496,7 @@ describe('send selectors', () => { { address: '0x06195827297c7a80a443b6894d3bdb8824b43896', name: 'Address Book Account 1', + chainId: '3', }, ] ) diff --git a/ui/app/pages/send/tests/send-utils.test.js b/ui/app/pages/send/tests/send-utils.test.js index bf9cba14a..4930b7ee1 100644 --- a/ui/app/pages/send/tests/send-utils.test.js +++ b/ui/app/pages/send/tests/send-utils.test.js @@ -72,9 +72,9 @@ describe('send utils', () => { call_, [12, 15, { toNumericBase: 'hex', - multiplicandBase: 16, - multiplierBase: 16, - } ] + multiplicandBase: 16, + multiplierBase: 16, + } ] ) }) }) diff --git a/ui/app/pages/send/to-autocomplete.component.js b/ui/app/pages/send/to-autocomplete.component.js index 183967c58..c65f93c07 100644 --- a/ui/app/pages/send/to-autocomplete.component.js +++ b/ui/app/pages/send/to-autocomplete.component.js @@ -27,10 +27,10 @@ export default class ToAutoComplete extends Component { getListItemIcon (listItemAddress, toAddress) { return toAddress && listItemAddress === toAddress ? <i className={'fa fa-check fa-lg'} - style={{ - color: '#02c9b1', - }} - /> + style={{ + color: '#02c9b1', + }} + /> : null } @@ -121,8 +121,8 @@ export default class ToAutoComplete extends Component { /> { to - ? null - : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'} + ? null + : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'} onClick={() => this.handleInputEvent()} style={{ style: {color: '#dedede'}, @@ -131,8 +131,8 @@ export default class ToAutoComplete extends Component { } { dropdownOpen - ? this.renderDropdown() - : null + ? this.renderDropdown() + : null } </div> ) diff --git a/ui/app/pages/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js index 328a5b62b..8ad579958 100644 --- a/ui/app/pages/send/to-autocomplete/to-autocomplete.js +++ b/ui/app/pages/send/to-autocomplete/to-autocomplete.js @@ -37,11 +37,7 @@ ToAutoComplete.prototype.renderDropdown = function () { } = this.props const { accountsToRender } = this.state - return accountsToRender.length && h('div', {}, [ - - h('div.send-v2__from-dropdown__close-area', { - onClick: closeDropdown, - }), + return !!accountsToRender.length && h('div', {}, [ h('div.send-v2__from-dropdown__list', {}, [ @@ -93,7 +89,6 @@ ToAutoComplete.prototype.componentDidUpdate = function (nextProps) { ToAutoComplete.prototype.render = function () { const { to, - dropdownOpen, onChange, inError, qrScanner, @@ -118,12 +113,8 @@ ToAutoComplete.prototype.render = function () { style: { color: '#33333' }, onClick: () => this.props.scanQrCode(), })), - !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, { - style: { color: '#dedede' }, - onClick: () => this.handleInputEvent(), - }), - dropdownOpen && this.renderDropdown(), + this.renderDropdown(), ]) } diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js index 3d27fe349..d92b14501 100644 --- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js @@ -1,8 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import validUrl from 'valid-url' import { exportAsFile } from '../../../helpers/utils/util' -import ToggleButton from 'react-toggle-button' +import ToggleButton from '../../../components/ui/toggle-button' import TextField from '../../../components/ui/text-field' import Button from '../../../components/ui/button' import { MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes' @@ -29,160 +28,12 @@ export default class AdvancedTab extends PureComponent { setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired, } - state = { - newRpc: '', - chainId: '', - showOptions: false, - ticker: '', - nickname: '', - } - - renderNewRpcUrl () { - const { t } = this.context - const { newRpc, chainId, ticker, nickname } = this.state - - return ( - <div className="settings-page__content-row"> - <div className="settings-page__content-item"> - <span>{ t('newNetwork') }</span> - </div> - <div className="settings-page__content-item"> - <div className="settings-page__content-item-col"> - <TextField - type="text" - id="new-rpc" - placeholder={t('rpcUrl')} - value={newRpc} - onChange={e => this.setState({ newRpc: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - fullWidth - margin="dense" - /> - <TextField - type="text" - id="chainid" - placeholder={t('optionalChainId')} - value={chainId} - onChange={e => this.setState({ chainId: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - style={{ - display: this.state.showOptions ? null : 'none', - }} - fullWidth - margin="dense" - /> - <TextField - type="text" - id="ticker" - placeholder={t('optionalSymbol')} - value={ticker} - onChange={e => this.setState({ ticker: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - style={{ - display: this.state.showOptions ? null : 'none', - }} - fullWidth - margin="dense" - /> - <TextField - type="text" - id="nickname" - placeholder={t('optionalNickname')} - value={nickname} - onChange={e => this.setState({ nickname: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - style={{ - display: this.state.showOptions ? null : 'none', - }} - fullWidth - margin="dense" - /> - <div className="flex-row flex-align-center space-between"> - <span className="settings-tab__advanced-link" - onClick={e => { - e.preventDefault() - this.setState({ showOptions: !this.state.showOptions }) - }} - > - { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') } - </span> - <button - className="button btn-primary settings-tab__rpc-save-button" - onClick={e => { - e.preventDefault() - this.validateRpc(newRpc, chainId, ticker, nickname) - }} - > - { t('save') } - </button> - </div> - </div> - </div> - </div> - ) - } - - validateRpc (newRpc, chainId, ticker = 'ETH', nickname) { - const { setRpcTarget, displayWarning } = this.props - if (validUrl.isWebUri(newRpc)) { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', - action: 'Custom RPC', - name: 'Success', - }, - customVariables: { - networkId: newRpc, - chainId, - }, - }) - if (!!chainId && Number.isNaN(parseInt(chainId))) { - return displayWarning(`${this.context.t('invalidInput')} chainId`) - } - - setRpcTarget(newRpc, chainId, ticker, nickname) - } else { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', - action: 'Custom RPC', - name: 'Error', - }, - customVariables: { - networkId: newRpc, - chainId, - }, - }) - const appendedRpc = `http://${newRpc}` - - if (validUrl.isWebUri(appendedRpc)) { - displayWarning(this.context.t('uriErrorMsg')) - } else { - displayWarning(this.context.t('invalidRPC')) - } - } - } + state = { autoLogoutTimeLimit: this.props.autoLogoutTimeLimit } renderMobileSync () { const { t } = this.context const { history } = this.props -// + // return ( <div className="settings-page__content-row"> <div className="settings-page__content-item"> @@ -293,8 +144,8 @@ export default class AdvancedTab extends PureComponent { <ToggleButton value={sendHexData} onToggle={value => setHexDataFeatureFlag(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -319,8 +170,8 @@ export default class AdvancedTab extends PureComponent { <ToggleButton value={advancedInlineGas} onToggle={value => setAdvancedInlineGasFeatureFlag(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -348,8 +199,8 @@ export default class AdvancedTab extends PureComponent { <ToggleButton value={showFiatInTestnets} onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -407,7 +258,6 @@ export default class AdvancedTab extends PureComponent { { warning && <div className="settings-tab__error">{ warning }</div> } { this.renderStateLogs() } { this.renderMobileSync() } - { this.renderNewRpcUrl() } { this.renderResetAccount() } { this.renderAdvancedGasInputInline() } { this.renderHexDataOptIn() } diff --git a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js index f81329533..31cdd747c 100644 --- a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js +++ b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js @@ -16,7 +16,7 @@ describe('AdvancedTab Component', () => { } ) - assert.equal(root.find('.settings-page__content-row').length, 8) + assert.equal(root.find('.settings-page__content-row').length, 7) }) it('should update autoLogoutTimeLimit', () => { diff --git a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js index 62122073d..3f54350c5 100644 --- a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js +++ b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js @@ -35,12 +35,12 @@ describe('AdvancedTab Container', () => { it('should map dispatch to props correctly', () => { const props = mapDispatchToProps(() => 'mockDispatch') - assert.ok(typeof props.setHexDataFeatureFlag === 'function') - assert.ok(typeof props.setRpcTarget === 'function') - assert.ok(typeof props.displayWarning === 'function') - assert.ok(typeof props.showResetAccountConfirmationModal === 'function') - assert.ok(typeof props.setAdvancedInlineGasFeatureFlag === 'function') - assert.ok(typeof props.setShowFiatConversionOnTestnetsPreference === 'function') - assert.ok(typeof props.setAutoLogoutTimeLimit === 'function') + assert.ok(typeof props.setHexDataFeatureFlag === 'function') + assert.ok(typeof props.setRpcTarget === 'function') + assert.ok(typeof props.displayWarning === 'function') + assert.ok(typeof props.showResetAccountConfirmationModal === 'function') + assert.ok(typeof props.setAdvancedInlineGasFeatureFlag === 'function') + assert.ok(typeof props.setShowFiatConversionOnTestnetsPreference === 'function') + assert.ok(typeof props.setAutoLogoutTimeLimit === 'function') }) }) diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js new file mode 100644 index 000000000..f8c079fc3 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js @@ -0,0 +1,131 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Identicon from '../../../../components/ui/identicon' +import TextField from '../../../../components/ui/text-field' +import { CONTACT_LIST_ROUTE } from '../../../../helpers/constants/routes' +import { isValidAddress, isValidENSAddress } from '../../../../helpers/utils/util' +import EnsInput from '../../../../pages/send/send-content/add-recipient/ens-input' +import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' +import debounce from 'lodash.debounce' + +export default class AddContact extends PureComponent { + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + addToAddressBook: PropTypes.func, + history: PropTypes.object, + scanQrCode: PropTypes.func, + qrCodeData: PropTypes.object, + qrCodeDetected: PropTypes.func, + } + + state = { + nickname: '', + ethAddress: '', + ensAddress: '', + error: '', + ensError: '', + } + + constructor (props) { + super(props) + this.dValidate = debounce(this.validate, 1000) + } + + componentWillReceiveProps (nextProps) { + if (nextProps.qrCodeData) { + if (nextProps.qrCodeData.type === 'address') { + const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase() + const currentAddress = this.state.ensAddress || this.state.ethAddress + if (currentAddress.toLowerCase() !== scannedAddress) { + this.setState({ ethAddress: scannedAddress, ensAddress: '' }) + // Clean up QR code data after handling + this.props.qrCodeDetected(null) + } + } + } + } + + validate = address => { + const valid = isValidAddress(address) + const validEnsAddress = isValidENSAddress(address) + if (valid || validEnsAddress || address === '') { + this.setState({ error: '', ethAddress: address }) + } else { + this.setState({ error: 'Invalid Address' }) + } + } + + renderInput () { + return ( + <EnsInput + className="send__to-row" + scanQrCode={_ => { this.props.scanQrCode() }} + onChange={this.dValidate} + onPaste={text => this.setState({ ethAddress: text })} + onReset={() => this.setState({ ethAddress: '', ensAddress: '' })} + updateEnsResolution={address => { + this.setState({ ensAddress: address, error: '', ensError: '' }) + }} + updateEnsResolutionError={message => this.setState({ ensError: message })} + /> + ) + } + + render () { + const { t } = this.context + const { history, addToAddressBook } = this.props + + const errorToRender = this.state.ensError || this.state.error + + return ( + <div className="settings-page__content-row address-book__add-contact"> + {this.state.ensAddress && <div className="address-book__view-contact__group"> + <Identicon address={this.state.ensAddress} diameter={60} /> + <div className="address-book__view-contact__group__value"> + { this.state.ensAddress } + </div> + </div>} + <div className="address-book__add-contact__content"> + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('userName') } + </div> + <TextField + type="text" + id="nickname" + value={this.state.newName} + onChange={e => this.setState({ newName: e.target.value })} + fullWidth + margin="dense" + /> + </div> + + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('ethereumPublicAddress') } + </div> + { this.renderInput() } + { errorToRender && <div className="address-book__add-contact__error">{errorToRender}</div>} + </div> + </div> + <PageContainerFooter + cancelText={this.context.t('cancel')} + disabled={Boolean(this.state.error)} + onSubmit={() => { + addToAddressBook(this.state.ensAddress || this.state.ethAddress, this.state.newName) + history.push(CONTACT_LIST_ROUTE) + }} + onCancel={() => { + history.push(CONTACT_LIST_ROUTE) + }} + submitText={this.context.t('save')} + submitButtonType={'confirm'} + /> + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js new file mode 100644 index 000000000..0a0fc450c --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js @@ -0,0 +1,30 @@ +import AddContact from './add-contact.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { addToAddressBook, showQrScanner, qrCodeDetected } from '../../../../store/actions' +import { + CONTACT_ADD_ROUTE, +} from '../../../../helpers/constants/routes' +import { + getQrCodeData, +} from '../../../../pages/send/send.selectors' + +const mapStateToProps = state => { + return { + qrCodeData: getQrCodeData(state), + } +} + +const mapDispatchToProps = dispatch => { + return { + addToAddressBook: (recipient, nickname) => dispatch(addToAddressBook(recipient, nickname)), + scanQrCode: () => dispatch(showQrScanner(CONTACT_ADD_ROUTE)), + qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(AddContact) diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/index.js b/ui/app/pages/settings/contact-list-tab/add-contact/index.js new file mode 100644 index 000000000..ce73025a3 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/add-contact/index.js @@ -0,0 +1 @@ +export { default } from './add-contact.container' diff --git a/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js new file mode 100644 index 000000000..f7a01d672 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js @@ -0,0 +1,132 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import ContactList from '../../../components/app/contact-list' +import EditContact from './edit-contact' +import AddContact from './add-contact' +import ViewContact from './view-contact' +import MyAccounts from './my-accounts' +import { + CONTACT_ADD_ROUTE, + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, +} from '../../../helpers/constants/routes' + +export default class ContactListTab extends Component { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + addressBook: PropTypes.array, + history: PropTypes.object, + selectedAddress: PropTypes.string, + viewingContact: PropTypes.bool, + editingContact: PropTypes.bool, + addingContact: PropTypes.bool, + showContactContent: PropTypes.bool, + hideAddressBook: PropTypes.bool, + showingMyAccounts: PropTypes.bool, + } + + renderAddresses () { + const { addressBook, history, selectedAddress } = this.props + const contacts = addressBook.filter(({ name }) => !!name) + const nonContacts = addressBook.filter(({ name }) => !name) + + return ( + <div> + <ContactList + searchForContacts={() => contacts} + searchForRecents={() => nonContacts} + selectRecipient={(address) => { + history.push(`${CONTACT_VIEW_ROUTE}/${address}`) + }} + selectedAddress={selectedAddress} + /> + </div> + ) + } + + renderAddButton () { + const { history } = this.props + return <div + className="address-book-add-button__button" + onClick={() => { + history.push(CONTACT_ADD_ROUTE) + }}> + <img + className="account-menu__item-icon" + src="images/plus-btn-white.svg" + /> + </div> + } + + renderMyAccountsButton () { + const { history } = this.props + const { t } = this.context + return ( + <div + className="address-book__my-accounts-button" + onClick={() => { + history.push(CONTACT_MY_ACCOUNTS_ROUTE) + }} + > + <div className="address-book__my-accounts-button__header">{t('myWalletAccounts')}</div> + <div className="address-book__my-accounts-button__content"> + <div className="address-book__my-accounts-button__text"> + { t('myWalletAccountsDescription') } + </div> + <div className="address-book__my-accounts-button__caret" /> + </div> + </div> + ) + } + + renderContactContent () { + const { viewingContact, editingContact, addingContact, showContactContent } = this.props + + if (!showContactContent) { + return null + } + + let ContactContentComponent = null + if (viewingContact) { + ContactContentComponent = ViewContact + } else if (editingContact) { + ContactContentComponent = EditContact + } else if (addingContact) { + ContactContentComponent = AddContact + } + + return (ContactContentComponent && <div className="address-book-contact-content"> + <ContactContentComponent /> + </div>) + } + + renderAddressBookContent () { + const { hideAddressBook, showingMyAccounts } = this.props + + if (!hideAddressBook && !showingMyAccounts) { + return (<div className="address-book"> + { this.renderMyAccountsButton() } + { this.renderAddresses() } + </div>) + } else if (!hideAddressBook && showingMyAccounts) { + return (<MyAccounts />) + } + } + + render () { + const { addingContact } = this.props + + return ( + <div className="address-book-wrapper"> + { this.renderAddressBookContent() } + { this.renderContactContent() } + {!addingContact && <div className="address-book-add-button"> + { this.renderAddButton() } + </div>} + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js b/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js new file mode 100644 index 000000000..2c7139b5d --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js @@ -0,0 +1,54 @@ +import ContactListTab from './contact-list-tab.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { getAddressBook } from '../../../selectors/selectors' +import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums' +import { getEnvironmentType } from '../../../../../app/scripts/lib/util' + +import { + CONTACT_ADD_ROUTE, + CONTACT_EDIT_ROUTE, + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, +} from '../../../helpers/constants/routes' + + +const mapStateToProps = (state, ownProps) => { + const { location } = ownProps + const { pathname } = location + + const pathNameTail = pathname.match(/[^/]+$/)[0] + const pathNameTailIsAddress = pathNameTail.includes('0x') + + const viewingContact = Boolean(pathname.match(CONTACT_VIEW_ROUTE) || pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE)) + const editingContact = Boolean(pathname.match(CONTACT_EDIT_ROUTE) || pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE)) + const addingContact = Boolean(pathname.match(CONTACT_ADD_ROUTE)) + const showingMyAccounts = Boolean( + pathname.match(CONTACT_MY_ACCOUNTS_ROUTE) || + pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE) || + pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE) + ) + const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP + + const hideAddressBook = envIsPopup && (viewingContact || editingContact || addingContact) + + return { + viewingContact, + editingContact, + addingContact, + showingMyAccounts, + addressBook: getAddressBook(state), + selectedAddress: pathNameTailIsAddress ? pathNameTail : '', + hideAddressBook, + envIsPopup, + showContactContent: !envIsPopup || hideAddressBook, + } +} + +export default compose( + withRouter, + connect(mapStateToProps) +)(ContactListTab) diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js new file mode 100644 index 000000000..4852bbc6a --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js @@ -0,0 +1,135 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Identicon from '../../../../components/ui/identicon' +import Button from '../../../../components/ui/button/button.component' +import TextField from '../../../../components/ui/text-field' +import { isValidAddress } from '../../../../helpers/utils/util' +import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' + +export default class EditContact extends PureComponent { + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + addToAddressBook: PropTypes.func, + removeFromAddressBook: PropTypes.func, + history: PropTypes.object, + name: PropTypes.string, + address: PropTypes.string, + memo: PropTypes.string, + viewRoute: PropTypes.string, + listRoute: PropTypes.string, + setAccountLabel: PropTypes.func, + } + + state = { + newName: '', + newAddress: '', + newMemo: '', + error: '', + } + + render () { + const { t } = this.context + const { history, name, addToAddressBook, removeFromAddressBook, address, memo, viewRoute, listRoute, setAccountLabel } = this.props + + return ( + <div className="settings-page__content-row address-book__edit-contact"> + <div className="settings-page__header address-book__header--edit"> + <Identicon address={address} diameter={60}/> + <Button + type="link" + className="settings-page__address-book-button" + onClick={() => { + removeFromAddressBook(address) + history.push(listRoute) + }} + > + {t('deleteAccount')} + </Button> + </div> + <div className="address-book__edit-contact__content"> + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('userName') } + </div> + <TextField + type="text" + id="nickname" + placeholder={this.context.t('addAlias')} + value={this.state.newName || name} + onChange={e => this.setState({ newName: e.target.value })} + fullWidth + margin="dense" + /> + </div> + + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('ethereumPublicAddress') } + </div> + <TextField + type="text" + id="address" + placeholder={address} + value={this.state.newAddress || address} + error={this.state.error} + onChange={e => this.setState({ newAddress: e.target.value })} + fullWidth + margin="dense" + /> + </div> + + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label--capitalized"> + { t('memo') } + </div> + <TextField + type="text" + id="memo" + placeholder={memo} + value={this.state.newMemo || memo} + onChange={e => this.setState({ newMemo: e.target.value })} + fullWidth + margin="dense" + multiline={true} + rows={3} + classes={{ + inputMultiline: 'address-book__view-contact__text-area', + inputRoot: 'address-book__view-contact__text-area-wrapper', + }} + /> + </div> + </div> + <PageContainerFooter + cancelText={this.context.t('cancel')} + onSubmit={() => { + if (this.state.newAddress !== '' && this.state.newAddress !== address) { + // if the user makes a valid change to the address field, remove the original address + if (isValidAddress(this.state.newAddress)) { + removeFromAddressBook(address) + addToAddressBook(this.state.newAddress, this.state.newName || name, this.state.newMemo || memo) + setAccountLabel(this.state.newAddress, this.state.newName || name) + history.push(listRoute) + } else { + this.setState({ error: 'invalid address' }) + } + } else { + // update name + addToAddressBook(address, this.state.newName || name, this.state.newMemo || memo) + setAccountLabel(address, this.state.newName || name) + history.push(listRoute) + } + }} + onCancel={() => { + history.push(`${viewRoute}/${address}`) + }} + submitText={this.context.t('save')} + submitButtonType={'confirm'} + /> + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js new file mode 100644 index 000000000..8841ff791 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js @@ -0,0 +1,47 @@ +import EditContact from './edit-contact.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { getAddressBookEntry } from '../../../../selectors/selectors' +import { + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, + CONTACT_LIST_ROUTE, +} from '../../../../helpers/constants/routes' +import { addToAddressBook, removeFromAddressBook, setAccountLabel } from '../../../../store/actions' + +const mapStateToProps = (state, ownProps) => { + const { location } = ownProps + const { pathname } = location + const pathNameTail = pathname.match(/[^/]+$/)[0] + const pathNameTailIsAddress = pathNameTail.includes('0x') + const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id + + const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address] + + const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE)) + + return { + address, + name, + memo, + viewRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_VIEW_ROUTE : CONTACT_VIEW_ROUTE, + listRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_ROUTE : CONTACT_LIST_ROUTE, + showingMyAccounts, + } +} + +const mapDispatchToProps = dispatch => { + return { + addToAddressBook: (recipient, nickname, memo) => dispatch(addToAddressBook(recipient, nickname, memo)), + removeFromAddressBook: (addressToRemove) => dispatch(removeFromAddressBook(addressToRemove)), + setAccountLabel: (address, label) => dispatch(setAccountLabel(address, label)), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(EditContact) diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/index.js b/ui/app/pages/settings/contact-list-tab/edit-contact/index.js new file mode 100644 index 000000000..fe5ee206a --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/edit-contact/index.js @@ -0,0 +1 @@ +export { default } from './edit-contact.container' diff --git a/ui/app/pages/settings/contact-list-tab/index.js b/ui/app/pages/settings/contact-list-tab/index.js new file mode 100644 index 000000000..c09e9787b --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/index.js @@ -0,0 +1 @@ +export { default } from './contact-list-tab.container' diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss new file mode 100644 index 000000000..c7e99095f --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/index.scss @@ -0,0 +1,234 @@ +.address-book-wrapper { + display: flex; + justify-content: space-between; + height: 100%; +} + +.address-book { + flex: 0.4 1 40%; + max-width: 40%; + + @media screen and (max-width: 576px) { + flex: 1; + max-width: 100%; + } + + &__entry { + display: flex; + flex-flow: row nowrap; + padding: 16px 14px; + flex: 0 0 auto; + border-bottom: 1px solid #dedede; + + &:hover { + border: 1px solid #037DD6; + cursor: pointer; + } + } + + &__name { + padding: 3px; + } + + &__header, &__header--edit { + &__name { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 34px; + margin-left: 24px; + } + } + + &__header--edit { + display: flex; + justify-content: space-between; + + .button { + justify-content: flex-end; + color: #D73A49; + font-size: 14px; + } + } + + &__input { + @extend %input-2; + margin-top: .25rem; + + &--address { + font-size: 0.875rem; + } + } + + &__view-contact { + &__text-area-wrapper { + height: 96px !important; + } + + &__text-area { + line-height: initial !important; + } + + &__group { + display: flex; + flex-flow: column nowrap; + padding: 1.5rem 1.5rem 0 1.5rem; + + &__label, &__label--capitalized { + font-size: .75rem; + color: $Grey-500; + margin-bottom: .25rem; + } + + &__label--capitalized { + text-transform: capitalize; + } + + &__value, &__static-address { + display: flex; + flex-flow: row nowrap; + font-size: 1.125rem; + color: $Grey-800; + word-break: break-word; + + &--address { + font-size: 0.875rem; + } + + &--copy-icon { + padding-left: 4px; + } + } + + &__static-address { + font-size: 0.875rem; + &--copy-icon { + cursor: pointer; + + &:hover { + color: black; + } + } + } + + .unit-input__input { + max-width: 100%; + width: 100%; + } + } + } + + &__edit-contact { + display: flex; + flex-flow: column nowrap; + padding-bottom: 0 !important; + height: 100%; + + &__content { + flex: 1 1 auto; + + > div { + padding-top: 0; + } + + } + + .page-container__footer { + border-top: none; + } + } + + &__add-contact { + display: flex; + flex-flow: column nowrap; + padding-bottom: 0 !important; + height: 100%; + + &__content { + flex: 1 1 auto; + height: 100%; + } + + &__error { + font-size: 12px; + line-height: 12px; + left: 8px; + color: $red; + } + } + + &__my-accounts-button { + display: flex; + flex-flow: column; + cursor: pointer; + padding: 15px; + + &:hover { + background-color: rgba(222, 222, 222, 0.2); + } + + &__header { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 25px; + color: #000000; + } + + &__content { + display: flex; + justify-content: space-between; + } + + &__text { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 20px; + color: #6A737D; + } + + &__caret { + display: block; + background-image: url(/images/caret-right.svg); + width: 30px; + opacity: .5; + background-repeat: no-repeat; + } + } +} + +.address-book-add-button { + &__button { + position: absolute; + top: 10px; + right: 16px; + height: 56px; + width: 56px; + border-radius: 18px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + border-width: 2px; + background: #037DD6; + margin-right: 5px; + cursor: pointer; + box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.25); + } +} + +.address-book--hidden { + display: none; +} + +.address-book-contact-content { + flex: 0.4 1 40%; + + @media screen and (max-width: 576px) { + flex: 1 + } +} diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/index.js b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js new file mode 100644 index 000000000..13a7a9cbf --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js @@ -0,0 +1 @@ +export { default } from './my-accounts.container' diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js new file mode 100644 index 000000000..f43b59e07 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js @@ -0,0 +1,39 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import ContactList from '../../../../components/app/contact-list' +import { CONTACT_MY_ACCOUNTS_VIEW_ROUTE } from '../../../../helpers/constants/routes' + +export default class ViewContact extends PureComponent { + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + myAccounts: PropTypes.array, + history: PropTypes.object, + } + + renderMyAccounts () { + const { myAccounts, history } = this.props + + return ( + <div> + <ContactList + searchForMyAccounts={() => myAccounts} + selectRecipient={(address) => { + history.push(`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${address}`) + }} + /> + </div> + ) + } + + render () { + return ( + <div className="address-book"> + { this.renderMyAccounts() } + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js new file mode 100644 index 000000000..6380c9d4c --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js @@ -0,0 +1,18 @@ +import ViewContact from './my-accounts.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { accountsWithSendEtherInfoSelector } from '../../../../selectors/selectors' + +const mapStateToProps = (state,) => { + const myAccounts = accountsWithSendEtherInfoSelector(state) + + return { + myAccounts, + } +} + +export default compose( + withRouter, + connect(mapStateToProps) +)(ViewContact) diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/index.js b/ui/app/pages/settings/contact-list-tab/view-contact/index.js new file mode 100644 index 000000000..78bf19d18 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/view-contact/index.js @@ -0,0 +1 @@ +export { default } from './view-contact.container' diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js new file mode 100644 index 000000000..d4fe045eb --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js @@ -0,0 +1,78 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Identicon from '../../../../components/ui/identicon' + +import Button from '../../../../components/ui/button/button.component' +import copyToClipboard from 'copy-to-clipboard' + +function quadSplit (address) { + return '0x ' + address.slice(2).match(/.{1,4}/g).join(' ') +} + +export default class ViewContact extends PureComponent { + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + removeFromAddressBook: PropTypes.func, + name: PropTypes.string, + address: PropTypes.string, + history: PropTypes.object, + checkSummedAddress: PropTypes.string, + memo: PropTypes.string, + editRoute: PropTypes.string, + } + + render () { + const { t } = this.context + const { history, name, address, checkSummedAddress, memo, editRoute } = this.props + + return ( + <div className="settings-page__content-row"> + <div className="settings-page__content-item"> + <div className="settings-page__header address-book__header"> + <Identicon address={address} diameter={60} /> + <div className="address-book__header__name">{ name }</div> + </div> + <div className="address-book__view-contact__group"> + <Button + type="secondary" + onClick={() => { + history.push(`${editRoute}/${address}`) + }} + > + {t('edit')} + </Button> + </div> + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('ethereumPublicAddress') } + </div> + <div className="address-book__view-contact__group__value"> + <div + className="address-book__view-contact__group__static-address" + > + { quadSplit(checkSummedAddress) } + </div> + <img + className="address-book__view-contact__group__static-address--copy-icon" + onClick={() => copyToClipboard(checkSummedAddress)} + src="/images/copy-to-clipboard.svg" + /> + </div> + </div> + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label--capitalized"> + { t('memo') } + </div> + <div className="address-book__view-contact__group__static-address"> + { memo } + </div> + </div> + </div> + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js new file mode 100644 index 000000000..b1196d936 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js @@ -0,0 +1,43 @@ +import ViewContact from './view-contact.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { getAddressBookEntry } from '../../../../selectors/selectors' +import { removeFromAddressBook } from '../../../../store/actions' +import { checksumAddress } from '../../../../helpers/utils/util' +import { + CONTACT_EDIT_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, +} from '../../../../helpers/constants/routes' + +const mapStateToProps = (state, ownProps) => { + const { location } = ownProps + const { pathname } = location + const pathNameTail = pathname.match(/[^/]+$/)[0] + const pathNameTailIsAddress = pathNameTail.includes('0x') + const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id + + const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address] + + const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE)) + + return { + name, + address, + checkSummedAddress: checksumAddress(address), + memo, + editRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_EDIT_ROUTE : CONTACT_EDIT_ROUTE, + } +} + +const mapDispatchToProps = dispatch => { + return { + removeFromAddressBook: (addressToRemove) => dispatch(removeFromAddressBook(addressToRemove)), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(ViewContact) diff --git a/ui/app/pages/settings/index.js b/ui/app/pages/settings/index.js index 44a9ffa63..d2dd7f795 100644 --- a/ui/app/pages/settings/index.js +++ b/ui/app/pages/settings/index.js @@ -1 +1 @@ -export { default } from './settings.component' +export { default } from './settings.container' diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index c516a84bb..73f36806d 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -4,6 +4,8 @@ @import 'settings-tab/index'; +@import 'contact-list-tab/index'; + .settings-page { position: relative; background: $white; @@ -23,7 +25,7 @@ } } - &__subheader { + &__subheader, &__subheader--link { padding: 16px 4px; font-size: 20px; border-bottom: 1px solid $alto; @@ -38,6 +40,16 @@ } } + &__subheader--link { + cursor: pointer; + margin-right: 4px; + } + + &__subheader--link:hover { + cursor: pointer; + color: #037DD6; + } + &__sub-header { height: 72px; border-bottom: 1px solid #D8D8D8; @@ -116,6 +128,8 @@ &__modules { overflow-y: auto; flex: 1 1 auto; + display: flex; + flex-flow: column; @media screen and (max-width: 575px) { display: none; @@ -142,7 +156,7 @@ min-width: 0; display: flex; flex-direction: column; - min-height: 71px; + margin-bottom: 20px; @media screen and (max-width: 575px) { height: initial; @@ -175,6 +189,37 @@ } } + &__copyable-address { + display: flex; + } + + &__copy-icon { + padding-left: 4px; + } + + &__button-group { + display:flex; + margin-left: auto; + } + + &__address-book-button { + //align-self: flex-end; + //padding: 5px; + //text-transform: uppercase; + //cursor: pointer; + //width: 25%; + //min-width: 80px; + //height: 33px; + font-size: 1rem; + line-height: 1.1875rem; + padding: 0; + + } + + &__address-book-button + &__address-book-button { + margin-left: 1.875rem; + } + &--selected { .settings-page { &__content { diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js index 388e2665f..0349aa14f 100644 --- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js +++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js @@ -12,7 +12,7 @@ export default class NetworkForm extends PureComponent { static propTypes = { editRpc: PropTypes.func.isRequired, - delRpcTarget: PropTypes.func.isRequired, + showConfirmDeleteNetworkModal: PropTypes.func.isRequired, rpcUrl: PropTypes.string, chainId: PropTypes.string, ticker: PropTypes.string, @@ -131,10 +131,14 @@ export default class NetworkForm extends PureComponent { } onDelete = () => { - const { delRpcTarget, rpcUrl, onClear } = this.props - delRpcTarget(rpcUrl) - this.resetForm() - onClear() + const { showConfirmDeleteNetworkModal, rpcUrl, onClear } = this.props + showConfirmDeleteNetworkModal({ + target: rpcUrl, + onConfirm: () => { + this.resetForm() + onClear() + }, + }) } stateIsUnchanged () { diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js index f6c8443cf..40e1a902f 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.component.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js @@ -25,7 +25,7 @@ export default class NetworksTab extends PureComponent { setNetworksTabAddMode: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired, setSelectedSettingsRpcUrl: PropTypes.func.isRequired, - delRpcTarget: PropTypes.func.isRequired, + showConfirmDeleteNetworkModal: PropTypes.func.isRequired, providerUrl: PropTypes.string, providerType: PropTypes.string, networkDefaultedToProvider: PropTypes.bool, @@ -50,16 +50,16 @@ export default class NetworksTab extends PureComponent { return ( <div className="settings-page__sub-header"> - <div - className="networks-tab__back-button" - onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode - ? () => { - setNetworksTabAddMode(false) - setSelectedSettingsRpcUrl(null) - } - : () => this.props.history.push(SETTINGS_ROUTE) + <div + className="networks-tab__back-button" + onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode + ? () => { + setNetworksTabAddMode(false) + setSelectedSettingsRpcUrl(null) } - /> + : () => this.props.history.push(SETTINGS_ROUTE) + } + /> <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span> <div className="networks-tab__add-network-header-button-wrapper"> <Button @@ -109,7 +109,7 @@ export default class NetworksTab extends PureComponent { setNetworksTabAddMode(false) setSelectedSettingsRpcUrl(rpcUrl) }} - > + > <NetworkDropdownIcon backgroundColor={iconColor || 'white'} innerBorder={border} @@ -126,7 +126,7 @@ export default class NetworksTab extends PureComponent { renderNetworksList () { const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props - console.log(networksToRender) + return ( <div className={classnames('networks-tab__networks-list', { @@ -160,7 +160,7 @@ export default class NetworksTab extends PureComponent { const { t } = this.context const { setRpcTarget, - delRpcTarget, + showConfirmDeleteNetworkModal, setSelectedSettingsRpcUrl, setNetworksTabAddMode, selectedNetwork: { @@ -199,7 +199,7 @@ export default class NetworksTab extends PureComponent { setNetworksTabAddMode(false) setSelectedSettingsRpcUrl(null) }} - delRpcTarget={delRpcTarget} + showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal} viewOnly={viewOnly} isCurrentRpcTarget={providerUrl === rpcUrl} networksTabIsInAddMode={networksTabIsInAddMode} @@ -223,16 +223,16 @@ export default class NetworksTab extends PureComponent { {this.renderNetworksTabContent()} {!networkIsSelected && !networksTabIsInAddMode ? <div className="networks-tab__add-network-button-wrapper"> - <Button - type="primary" - onClick={event => { - event.preventDefault() - setSelectedSettingsRpcUrl(null) - setNetworksTabAddMode(true) - }} - > - { this.context.t('addNetwork') } - </Button> + <Button + type="primary" + onClick={event => { + event.preventDefault() + setSelectedSettingsRpcUrl(null) + setNetworksTabAddMode(true) + }} + > + { this.context.t('addNetwork') } + </Button> </div> : null } diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js index 9e1098922..8cc18a4bd 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.container.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js @@ -8,7 +8,7 @@ import { displayWarning, setNetworksTabAddMode, editRpc, - delRpcTarget, + showModal, } from '../../../store/actions' import { defaultNetworksData } from './networks-tab.constants' const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true })) @@ -64,8 +64,8 @@ const mapDispatchToProps = dispatch => { setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => { dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs)) }, - delRpcTarget: (target) => { - dispatch(delRpcTarget(target)) + showConfirmDeleteNetworkModal: ({ target, onConfirm }) => { + return dispatch(showModal({ name: 'CONFIRM_DELETE_NETWORK', target, onConfirm })) }, displayWarning: warning => dispatch(displayWarning(warning)), setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)), diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js index 01a28bac7..0d367abfb 100644 --- a/ui/app/pages/settings/security-tab/security-tab.component.js +++ b/ui/app/pages/settings/security-tab/security-tab.component.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { exportAsFile } from '../../../helpers/utils/util' -import ToggleButton from 'react-toggle-button' +import ToggleButton from '../../../components/ui/toggle-button' import { REVEAL_SEED_ROUTE } from '../../../helpers/constants/routes' import Button from '../../../components/ui/button' @@ -140,8 +140,8 @@ export default class SecurityTab extends PureComponent { <ToggleButton value={privacyMode} onToggle={value => setPrivacyMode(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -166,8 +166,8 @@ export default class SecurityTab extends PureComponent { <ToggleButton value={participateInMetaMetrics} onToggle={value => setParticipateInMetaMetrics(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> diff --git a/ui/app/pages/settings/settings-tab/settings-tab.component.js b/ui/app/pages/settings/settings-tab/settings-tab.component.js index 57e80be0d..f8daa98f9 100644 --- a/ui/app/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/app/pages/settings/settings-tab/settings-tab.component.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import infuraCurrencies from '../../../helpers/constants/infura-conversion.json' import SimpleDropdown from '../../../components/app/dropdowns/simple-dropdown' -import ToggleButton from 'react-toggle-button' +import ToggleButton from '../../../components/ui/toggle-button' import locales from '../../../../../app/_locales/index.json' const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -105,6 +105,7 @@ export default class SettingsTab extends PureComponent { renderBlockieOptIn () { + const { t } = this.context const { useBlockie, setUseBlockie } = this.props return ( @@ -117,8 +118,8 @@ export default class SettingsTab extends PureComponent { <ToggleButton value={useBlockie} onToggle={value => setUseBlockie(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js index 7f2045244..79f383dc4 100644 --- a/ui/app/pages/settings/settings.component.js +++ b/ui/app/pages/settings/settings.component.js @@ -1,8 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { Switch, Route, matchPath, withRouter } from 'react-router-dom' -import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums' -import { getEnvironmentType } from '../../../../app/scripts/lib/util' import TabBar from '../../components/app/tab-bar' import c from 'classnames' import SettingsTab from './settings-tab' @@ -10,6 +8,7 @@ import NetworksTab from './networks-tab' import AdvancedTab from './advanced-tab' import InfoTab from './info-tab' import SecurityTab from './security-tab' +import ContactListTab from './contact-list-tab' import { DEFAULT_ROUTE, ADVANCED_ROUTE, @@ -18,19 +17,28 @@ import { ABOUT_US_ROUTE, SETTINGS_ROUTE, NETWORKS_ROUTE, + CONTACT_LIST_ROUTE, + CONTACT_ADD_ROUTE, + CONTACT_EDIT_ROUTE, + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, } from '../../helpers/constants/routes' -const ROUTES_TO_I18N_KEYS = { - [GENERAL_ROUTE]: 'general', - [ADVANCED_ROUTE]: 'advanced', - [SECURITY_ROUTE]: 'securityAndPrivacy', - [ABOUT_US_ROUTE]: 'about', -} - class SettingsPage extends PureComponent { static propTypes = { - location: PropTypes.object, + addressName: PropTypes.string, + backRoute: PropTypes.string, + currentPath: PropTypes.string, history: PropTypes.object, + isAddressEntryPage: PropTypes.bool, + isPopupView: PropTypes.bool, + location: PropTypes.object, + pathnameI18nKey: PropTypes.string, + initialBreadCrumbRoute: PropTypes.string, + breadCrumbTextKey: PropTypes.string, + initialBreadCrumbKey: PropTypes.string, t: PropTypes.func, } @@ -38,35 +46,25 @@ class SettingsPage extends PureComponent { t: PropTypes.func, } - isCurrentPath (pathname) { - return this.props.location.pathname === pathname - } - render () { - const { t } = this.context - const { history, location } = this.props - - const pathnameI18nKey = ROUTES_TO_I18N_KEYS[location.pathname] - const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP + const { history, backRoute, currentPath } = this.props return ( <div className={c('main-container settings-page', { - 'settings-page--selected': !this.isCurrentPath(SETTINGS_ROUTE), + 'settings-page--selected': currentPath !== SETTINGS_ROUTE, })} > <div className="settings-page__header"> { - !this.isCurrentPath(SETTINGS_ROUTE) && !this.isCurrentPath(NETWORKS_ROUTE) && ( + currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && ( <div className="settings-page__back-button" - onClick={() => history.push(SETTINGS_ROUTE)} + onClick={() => history.push(backRoute)} /> ) } - <div className="settings-page__header__title"> - {t(pathnameI18nKey && isPopupView ? pathnameI18nKey : 'settings')} - </div> + { this.renderTitle() } <div className="settings-page__close-button" onClick={() => history.push(DEFAULT_ROUTE)} @@ -85,19 +83,65 @@ class SettingsPage extends PureComponent { ) } + renderTitle () { + const { t } = this.context + const { isPopupView, pathnameI18nKey, addressName } = this.props + + let titleText + + if (isPopupView && addressName) { + titleText = addressName + } else if (pathnameI18nKey && isPopupView) { + titleText = t(pathnameI18nKey) + } else { + titleText = t('settings') + } + + return ( + <div className="settings-page__header__title"> + {titleText} + </div> + ) + } + renderSubHeader () { const { t } = this.context - const { location: { pathname } } = this.props + const { + currentPath, + isPopupView, + isAddressEntryPage, + pathnameI18nKey, + addressName, + initialBreadCrumbRoute, + breadCrumbTextKey, + history, + initialBreadCrumbKey, + } = this.props + + let subheaderText - return pathname !== NETWORKS_ROUTE && ( + if (isPopupView && isAddressEntryPage) { + subheaderText = t('settings') + } else if (initialBreadCrumbKey) { + subheaderText = t(initialBreadCrumbKey) + } else { + subheaderText = t(pathnameI18nKey || 'general') + } + + return currentPath !== NETWORKS_ROUTE && ( <div className="settings-page__subheader"> - {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')} + <div + className={c({ 'settings-page__subheader--link': initialBreadCrumbRoute })} + onClick={() => initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)} + >{subheaderText}</div> + {breadCrumbTextKey && <div><span>{'> '}</span>{t(breadCrumbTextKey)}</div>} + {isAddressEntryPage && <div><span>{' > '}</span>{addressName}</div>} </div> ) } renderTabs () { - const { history, location } = this.props + const { history, currentPath } = this.props const { t } = this.context return ( @@ -105,15 +149,16 @@ class SettingsPage extends PureComponent { tabs={[ { content: t('general'), description: t('generalSettingsDescription'), key: GENERAL_ROUTE }, { content: t('advanced'), description: t('advancedSettingsDescription'), key: ADVANCED_ROUTE }, + { content: t('contactList'), description: t('contactListDescription'), key: CONTACT_LIST_ROUTE }, { content: t('securityAndPrivacy'), description: t('securitySettingsDescription'), key: SECURITY_ROUTE }, { content: t('networks'), description: t('networkSettingsDescription'), key: NETWORKS_ROUTE }, { content: t('about'), description: t('aboutSettingsDescription'), key: ABOUT_US_ROUTE }, ]} isActive={key => { - if (key === GENERAL_ROUTE && this.isCurrentPath(SETTINGS_ROUTE)) { + if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) { return true } - return matchPath(location.pathname, { path: key, exact: true }) + return matchPath(currentPath, { path: key, exact: true }) }} onSelect={key => history.push(key)} /> @@ -149,6 +194,41 @@ class SettingsPage extends PureComponent { component={SecurityTab} /> <Route + exact + path={CONTACT_LIST_ROUTE} + component={ContactListTab} + /> + <Route + exact + path={CONTACT_ADD_ROUTE} + component={ContactListTab} + /> + <Route + exact + path={CONTACT_MY_ACCOUNTS_ROUTE} + component={ContactListTab} + /> + <Route + exact + path={`${CONTACT_EDIT_ROUTE}/:id`} + component={ContactListTab} + /> + <Route + exact + path={`${CONTACT_VIEW_ROUTE}/:id`} + component={ContactListTab} + /> + <Route + exact + path={`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/:id`} + component={ContactListTab} + /> + <Route + exact + path={`${CONTACT_MY_ACCOUNTS_EDIT_ROUTE}/:id`} + component={ContactListTab} + /> + <Route component={SettingsTab} /> </Switch> diff --git a/ui/app/pages/settings/settings.container.js b/ui/app/pages/settings/settings.container.js new file mode 100644 index 000000000..79b191483 --- /dev/null +++ b/ui/app/pages/settings/settings.container.js @@ -0,0 +1,92 @@ +import Settings from './settings.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { getAddressBookEntryName } from '../../selectors/selectors' +import { isValidAddress } from '../../helpers/utils/util' +import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums' +import { getEnvironmentType } from '../../../../app/scripts/lib/util' + +import { + ADVANCED_ROUTE, + SECURITY_ROUTE, + GENERAL_ROUTE, + ABOUT_US_ROUTE, + SETTINGS_ROUTE, + CONTACT_LIST_ROUTE, + CONTACT_ADD_ROUTE, + CONTACT_EDIT_ROUTE, + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, +} from '../../helpers/constants/routes' + +const ROUTES_TO_I18N_KEYS = { + [GENERAL_ROUTE]: 'general', + [ADVANCED_ROUTE]: 'advanced', + [SECURITY_ROUTE]: 'securityAndPrivacy', + [ABOUT_US_ROUTE]: 'about', + [CONTACT_LIST_ROUTE]: 'contactList', + [CONTACT_ADD_ROUTE]: 'newContact', + [CONTACT_EDIT_ROUTE]: 'editContact', + [CONTACT_VIEW_ROUTE]: 'viewContact', + [CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts', +} + +const mapStateToProps = (state, ownProps) => { + const { location } = ownProps + const { pathname } = location + const pathNameTail = pathname.match(/[^/]+$/)[0] + + const isAddressEntryPage = pathNameTail.includes('0x') + const isMyAccountsPage = pathname.match('my-accounts') + const isAddContactPage = Boolean(pathname.match(CONTACT_ADD_ROUTE)) + const isEditContactPage = Boolean(pathname.match(CONTACT_EDIT_ROUTE)) + const isEditMyAccountsContactPage = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE)) + + const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP + const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname] + + let backRoute + if (isMyAccountsPage && isAddressEntryPage) { + backRoute = CONTACT_MY_ACCOUNTS_ROUTE + } else if (isEditContactPage) { + backRoute = `${CONTACT_VIEW_ROUTE}/${pathNameTail}` + } else if (isEditMyAccountsContactPage) { + backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}` + } else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) { + backRoute = CONTACT_LIST_ROUTE + } else { + backRoute = SETTINGS_ROUTE + } + + let initialBreadCrumbRoute + let breadCrumbTextKey + let initialBreadCrumbKey + if (isMyAccountsPage) { + initialBreadCrumbRoute = CONTACT_LIST_ROUTE + breadCrumbTextKey = 'myWalletAccounts' + initialBreadCrumbKey = ROUTES_TO_I18N_KEYS[initialBreadCrumbRoute] + } + + const addressName = getAddressBookEntryName(state, isValidAddress(pathNameTail) ? pathNameTail : '') + + return { + isAddressEntryPage, + isMyAccountsPage, + backRoute, + currentPath: pathname, + isPopupView, + pathnameI18nKey, + addressName, + initialBreadCrumbRoute, + breadCrumbTextKey, + initialBreadCrumbKey, + } +} + +export default compose( + withRouter, + connect(mapStateToProps) +)(Settings) |