From e9c7df28ed88f6dc3a5074cf873f3920429d1803 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 31 Jul 2019 17:26:44 -0230 Subject: Address book send plus contact list (#6914) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Style Send Header * Move Send to-row to send view and restyle * Add "Recents" group to select recipient view * Rename SendToRow to AddRecipient * Basic UI and Layout * New ENSInput component * wip - fuzzy search for input * small refactor * Add Dialog * contact list initial * initial error on invalid address * clean up edit * Click to open modal * Create AddToAddressBookModal component * Modal styling and layout * modal i18n * Add to Addressbook * ens wip * ens wip * ENS Resolution * Reset input * Send to explicit address * Happy Path Complete * Add back error checking * Reset send-to when emptying input * Add back warning object * Fix linter * Fix unit test #1 - fix import paths * Remove dead tests * One more to go * Fix all unit tests * add unit test for reducers and actions * test rendering AddRecipient * Add tests for dialog boxes in AddRecipient * Add test for validating * Fix linter * Fix e2e tests * Token send e2e fix * Style View Contact * Style edit-contact * Fix e2e * Fix from-import-beta-ui e2e spec * Make section header say "add recipient” by default * Auto-focus add recipient input * Update placeholder text * Update input title font size * Auto advance to next step if user paste a valid address * Ellipsify address when recipient is selected * Fix app header background color on desktop * Give each form row a margin of 16px * Use .container/.component naming pattern for ens-input * Auto-focus on input when add to addressbook modal is opened; Save on Enter * Fix and add unit test * Fix selectors name in e2e tests * Correct e2e test token amount for address-book-send changes * Adds e2e test for editing a transaction * Delete test/integration/lib/send-new-ui.js * Add tests for amount max button and high value error on send screen to test/e2e/metamask-ui.spec.js * lint and revert to address as object keys * add chainId based on current network to address book entry * fix test * only display contacts for the current network * Improve ENS message when not found on current network * Add error to indicate when network does not support ENS * bump gaba * address book, resolve comments * Move contact-list to its own component * De-duplicate getaddressbook selector and refactor name selection logic in contact-list-tab/ * Use contact-list component in contact-list-tab.component (i.e. in settings) * Improve/fix settings headers for popup and browser views * Lint fixes related to address book updates * Add 'My accounts' page to settings address book * Update add new contact button in settings to match floating circular design * Improve styles of view contact page * Improve styles and labels of the add-contact.component * Further lint fixes related to address book updates * Update unit tests as per address book updates * Ensure that contact list groups are sorted alphabetically * Refactor settings component to use a container for connection to redux; allow display of addressbook name in settings header * Decouple ens-input.component from send context * Add ens resolution to add contact screen in settings * Switching networks when an ens address is shown on send form removes the ens address. * Resolve send screen search for ensAddress to matching address book entry if it exists * Show resolved ens icon and address if exists (settings: add-contact.component) * Make the displayed and copied address in view-contact.component the checksummed address * Default alias state prop in AddToAddressBookModal to empty string * Use keyCode to detect enter key in AddToAddressBookModal * Ensure add-contact component properly updates after QR code detection * Fix display of all recents after clicking 'Load More' in contact list * Fix send screen contact searching after network switching * Code cleanup related to address book changes * Update unit tests for address book changes * Update ENS name not found on network message * Add ens registration error message * Cancel on edit mode takes user back to view screen * Adds support for memo to settings contact list view and edit screens * Modify designs of edit and view contact in popup environment * Update settings content list UX to show split columns in fullscreen and proper internal navigation * Correct background address book API usages in UI --- ui/app/components/app/app-header/index.scss | 3 +- .../app/contact-list/contact-list.component.js | 114 +++++++++ ui/app/components/app/contact-list/index.js | 1 + .../app/contact-list/recipient-group/index.js | 1 + .../recipient-group/recipient-group.component.js | 59 +++++ ui/app/components/app/ens-input.js | 181 -------------- .../add-to-addressbook-modal.component.js | 79 ++++++ .../add-to-addressbook-modal.container.js | 18 ++ .../app/modals/add-to-addressbook-modal/index.js | 1 + .../app/modals/add-to-addressbook-modal/index.scss | 37 +++ ui/app/components/app/modals/index.scss | 2 + ui/app/components/app/modals/modal.js | 31 ++- ui/app/components/ui/dialog/dialog.scss | 26 ++ ui/app/components/ui/dialog/index.js | 26 ++ .../page-container-header.component.js | 16 +- .../ui/text-field/text-field.component.js | 3 + ui/app/css/itcss/components/index.scss | 1 + ui/app/css/itcss/components/send.scss | 58 +++-- ui/app/css/itcss/settings/variables.scss | 100 ++++++++ ui/app/ducks/metamask/metamask.js | 20 ++ ui/app/helpers/constants/routes.js | 14 ++ ui/app/pages/index.scss | 2 + .../add-recipient/add-recipient.component.js | 243 +++++++++++++++++++ .../add-recipient/add-recipient.container.js | 44 ++++ .../send-content/add-recipient/add-recipient.js | 35 +++ .../add-recipient/add-recipient.selectors.js | 24 ++ .../add-recipient/ens-input.component.js | 268 +++++++++++++++++++++ .../add-recipient/ens-input.container.js | 20 ++ .../send/send-content/add-recipient/ens-input.js | 1 + .../pages/send/send-content/add-recipient/index.js | 1 + .../tests/add-recipient-component.test.js | 202 ++++++++++++++++ .../tests/add-recipient-container.test.js | 72 ++++++ .../tests/add-recipient-selectors.test.js | 59 +++++ .../tests/add-recipient-utils.test.js | 107 ++++++++ ui/app/pages/send/send-content/index.js | 2 +- .../send/send-content/send-content.component.js | 49 +++- .../send/send-content/send-content.container.js | 38 +++ .../pages/send/send-content/send-to-row/index.js | 1 - .../send-content/send-to-row/send-to-row-README.md | 0 .../send-to-row/send-to-row.component.js | 91 ------- .../send-to-row/send-to-row.container.js | 54 ----- .../send-to-row/send-to-row.selectors.js | 24 -- .../send-content/send-to-row/send-to-row.utils.js | 35 --- .../tests/send-to-row-component.test.js | 166 ------------- .../tests/send-to-row-container.test.js | 134 ----------- .../tests/send-to-row-selectors.test.js | 59 ----- .../send-to-row/tests/send-to-row-utils.test.js | 107 -------- .../tests/send-content-component.test.js | 63 +++-- .../send/send-header/send-header.component.js | 2 + .../send/send-header/send-header.selectors.js | 5 + .../tests/send-header-selectors.test.js | 17 +- ui/app/pages/send/send.component.js | 193 ++++++++++++--- ui/app/pages/send/send.container.js | 27 +++ ui/app/pages/send/send.scss | 233 ++++++++++++++++++ ui/app/pages/send/send.selectors.js | 22 +- ui/app/pages/send/send.utils.js | 5 + ui/app/pages/send/tests/send-component.test.js | 102 +++++++- ui/app/pages/send/tests/send-container.test.js | 12 + .../pages/send/tests/send-selectors-test-data.js | 1 + ui/app/pages/send/tests/send-selectors.test.js | 16 +- .../pages/send/to-autocomplete/to-autocomplete.js | 13 +- .../add-contact/add-contact.component.js | 131 ++++++++++ .../add-contact/add-contact.container.js | 30 +++ .../settings/contact-list-tab/add-contact/index.js | 1 + .../contact-list-tab/contact-list-tab.component.js | 132 ++++++++++ .../contact-list-tab/contact-list-tab.container.js | 54 +++++ .../edit-contact/edit-contact.component.js | 135 +++++++++++ .../edit-contact/edit-contact.container.js | 47 ++++ .../contact-list-tab/edit-contact/index.js | 1 + ui/app/pages/settings/contact-list-tab/index.js | 1 + ui/app/pages/settings/contact-list-tab/index.scss | 234 ++++++++++++++++++ .../settings/contact-list-tab/my-accounts/index.js | 1 + .../my-accounts/my-accounts.component.js | 39 +++ .../my-accounts/my-accounts.container.js | 18 ++ .../contact-list-tab/view-contact/index.js | 1 + .../view-contact/view-contact.component.js | 78 ++++++ .../view-contact/view-contact.container.js | 43 ++++ ui/app/pages/settings/index.js | 2 +- ui/app/pages/settings/index.scss | 47 +++- ui/app/pages/settings/settings.component.js | 142 ++++++++--- ui/app/pages/settings/settings.container.js | 92 +++++++ ui/app/selectors/selectors.js | 22 +- ui/app/selectors/tests/selectors-test-data.js | 232 ++++++++++++++++++ ui/app/selectors/tests/selectors.test.js | 25 ++ ui/app/store/actions.js | 51 +++- 85 files changed, 3865 insertions(+), 1034 deletions(-) create mode 100644 ui/app/components/app/contact-list/contact-list.component.js create mode 100644 ui/app/components/app/contact-list/index.js create mode 100644 ui/app/components/app/contact-list/recipient-group/index.js create mode 100644 ui/app/components/app/contact-list/recipient-group/recipient-group.component.js delete mode 100644 ui/app/components/app/ens-input.js create mode 100644 ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.component.js create mode 100644 ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.container.js create mode 100644 ui/app/components/app/modals/add-to-addressbook-modal/index.js create mode 100644 ui/app/components/app/modals/add-to-addressbook-modal/index.scss create mode 100644 ui/app/components/ui/dialog/dialog.scss create mode 100644 ui/app/components/ui/dialog/index.js create mode 100644 ui/app/pages/send/send-content/add-recipient/add-recipient.component.js create mode 100644 ui/app/pages/send/send-content/add-recipient/add-recipient.container.js create mode 100644 ui/app/pages/send/send-content/add-recipient/add-recipient.js create mode 100644 ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js create mode 100644 ui/app/pages/send/send-content/add-recipient/ens-input.component.js create mode 100644 ui/app/pages/send/send-content/add-recipient/ens-input.container.js create mode 100644 ui/app/pages/send/send-content/add-recipient/ens-input.js create mode 100644 ui/app/pages/send/send-content/add-recipient/index.js create mode 100644 ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js create mode 100644 ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js create mode 100644 ui/app/pages/send/send-content/add-recipient/tests/add-recipient-selectors.test.js create mode 100644 ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js create mode 100644 ui/app/pages/send/send-content/send-content.container.js delete mode 100644 ui/app/pages/send/send-content/send-to-row/index.js delete mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row-README.md delete mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row.component.js delete mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row.container.js delete mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js delete mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js delete mode 100644 ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js delete mode 100644 ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js delete mode 100644 ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js delete mode 100644 ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js create mode 100644 ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js create mode 100644 ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js create mode 100644 ui/app/pages/settings/contact-list-tab/add-contact/index.js create mode 100644 ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js create mode 100644 ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js create mode 100644 ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js create mode 100644 ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js create mode 100644 ui/app/pages/settings/contact-list-tab/edit-contact/index.js create mode 100644 ui/app/pages/settings/contact-list-tab/index.js create mode 100644 ui/app/pages/settings/contact-list-tab/index.scss create mode 100644 ui/app/pages/settings/contact-list-tab/my-accounts/index.js create mode 100644 ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js create mode 100644 ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js create mode 100644 ui/app/pages/settings/contact-list-tab/view-contact/index.js create mode 100644 ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js create mode 100644 ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js create mode 100644 ui/app/pages/settings/settings.container.js create mode 100644 ui/app/selectors/tests/selectors-test-data.js create mode 100644 ui/app/selectors/tests/selectors.test.js (limited to 'ui/app') diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss index d3f37b7a2..0ea1793ca 100644 --- a/ui/app/components/app/app-header/index.scss +++ b/ui/app/components/app/app-header/index.scss @@ -10,7 +10,6 @@ @media screen and (max-width: 575px) { padding: 1rem; - box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } @@ -24,7 +23,7 @@ position: absolute; width: 100%; height: 32px; - background: $gallery; + background: $Grey-000; bottom: -32px; } } diff --git a/ui/app/components/app/contact-list/contact-list.component.js b/ui/app/components/app/contact-list/contact-list.component.js new file mode 100644 index 000000000..ec9b5f8eb --- /dev/null +++ b/ui/app/components/app/contact-list/contact-list.component.js @@ -0,0 +1,114 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import RecipientGroup from './recipient-group/recipient-group.component' + +export default class ContactList extends PureComponent { + static propTypes = { + searchForContacts: PropTypes.func, + searchForRecents: PropTypes.func, + searchForMyAccounts: PropTypes.func, + selectRecipient: PropTypes.func, + children: PropTypes.node, + selectedAddress: PropTypes.string, + } + + static contextTypes = { + t: PropTypes.func, + } + + state = { + isShowingAllRecent: false, + } + + renderRecents () { + const { t } = this.context + const { isShowingAllRecent } = this.state + const nonContacts = this.props.searchForRecents() + + const showLoadMore = !isShowingAllRecent && nonContacts.length > 2 + + return ( +
+ + { + showLoadMore && ( +
this.setState({ isShowingAllRecent: true })} + > + {t('loadMore')} +
+ ) + } +
+ ) + } + + renderAddressBook () { + const contacts = this.props.searchForContacts() + + const contactGroups = contacts.reduce((acc, contact) => { + const firstLetter = contact.name.slice(0, 1).toUpperCase() + acc[firstLetter] = acc[firstLetter] || [] + const bucket = acc[firstLetter] + bucket.push(contact) + return acc + }, {}) + + return Object + .entries(contactGroups) + .sort(([letter1], [letter2]) => { + if (letter1 > letter2) { + return 1 + } else if (letter1 === letter2) { + return 0 + } else if (letter1 < letter2) { + return -1 + } + }) + .map(([letter, groupItems]) => ( + + )) + } + + renderMyAccounts () { + const myAccounts = this.props.searchForMyAccounts() + + return ( + + ) + } + + render () { + const { + children, + searchForRecents, + searchForContacts, + searchForMyAccounts, + } = this.props + + return ( +
+ { children || null } + { searchForRecents && this.renderRecents() } + { searchForContacts && this.renderAddressBook() } + { searchForMyAccounts && this.renderMyAccounts() } +
+ ) + } +} diff --git a/ui/app/components/app/contact-list/index.js b/ui/app/components/app/contact-list/index.js new file mode 100644 index 000000000..d90c29b2b --- /dev/null +++ b/ui/app/components/app/contact-list/index.js @@ -0,0 +1 @@ +export { default } from './contact-list.component' diff --git a/ui/app/components/app/contact-list/recipient-group/index.js b/ui/app/components/app/contact-list/recipient-group/index.js new file mode 100644 index 000000000..7d827523f --- /dev/null +++ b/ui/app/components/app/contact-list/recipient-group/index.js @@ -0,0 +1 @@ +export { default } from './recipient-group.component' diff --git a/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js b/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js new file mode 100644 index 000000000..a2248326e --- /dev/null +++ b/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js @@ -0,0 +1,59 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Identicon from '../../../ui/identicon' +import classnames from 'classnames' +import { ellipsify } from '../../../../pages/send/send.utils' + +function addressesEqual (address1, address2) { + return String(address1).toLowerCase() === String(address2).toLowerCase() +} + +export default function RecipientGroup ({ label, items, onSelect, selectedAddress }) { + if (!items || !items.length) { + return null + } + + return ( +
+ {label &&
+ {label} +
} + { + items.map(({ address, name }) => ( +
onSelect(address, name)} + className={classnames({ + 'send__select-recipient-wrapper__group-item': !addressesEqual(address, selectedAddress), + 'send__select-recipient-wrapper__group-item--selected': addressesEqual(address, selectedAddress), + })} + > + +
+
+ {name || ellipsify(address)} +
+ { + name && ( +
+ {ellipsify(address)} +
+ ) + } +
+
+ )) + } +
+ ) +} + +RecipientGroup.propTypes = { + label: PropTypes.string, + items: PropTypes.arrayOf(PropTypes.shape({ + address: PropTypes.string, + name: PropTypes.string, + })), + onSelect: PropTypes.func.isRequired, + selectedAddress: PropTypes.string, +} diff --git a/ui/app/components/app/ens-input.js b/ui/app/components/app/ens-input.js deleted file mode 100644 index 5eea0dd90..000000000 --- a/ui/app/components/app/ens-input.js +++ /dev/null @@ -1,181 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const extend = require('xtend') -const debounce = require('debounce') -const copyToClipboard = require('copy-to-clipboard') -const ENS = require('ethjs-ens') -const networkMap = require('ethjs-ens/lib/network-map.json') -const ensRE = /.+\..+$/ -const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' -const connect = require('react-redux').connect -const ToAutoComplete = require('../../pages/send/to-autocomplete').default -const log = require('loglevel') -const { isValidENSAddress } = require('../../helpers/utils/util') - -EnsInput.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect()(EnsInput) - - -inherits(EnsInput, Component) -function EnsInput () { - Component.call(this) -} - -EnsInput.prototype.onChange = function (recipient) { - - const network = this.props.network - const networkHasEnsSupport = getNetworkEnsSupport(network) - - this.props.onChange({ toAddress: recipient }) - - if (!networkHasEnsSupport) return - - if (recipient.match(ensRE) === null) { - return this.setState({ - loadingEns: false, - ensResolution: null, - ensFailure: null, - toError: null, - }) - } - - this.setState({ - loadingEns: true, - }) - this.checkName(recipient) -} - -EnsInput.prototype.render = function () { - const props = this.props - const opts = extend(props, { - list: 'addresses', - onChange: this.onChange.bind(this), - qrScanner: true, - }) - return h('div', { - style: { width: '100%', position: 'relative' }, - }, [ - h(ToAutoComplete, { ...opts }), - this.ensIcon(), - ]) -} - -EnsInput.prototype.componentDidMount = function () { - 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.bind(this), 200) - } -} - -EnsInput.prototype.lookupEnsName = function (recipient) { - const { ensResolution } = this.state - - log.info(`ENS attempting to resolve name: ${recipient}`) - this.ens.lookup(recipient.trim()) - .then((address) => { - if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName')) - if (address !== ensResolution) { - this.setState({ - loadingEns: false, - ensResolution: address, - nickname: recipient.trim(), - hoverText: address + '\n' + this.context.t('clickCopy'), - ensFailure: false, - toError: null, - }) - } - }) - .catch((reason) => { - const setStateObj = { - loadingEns: false, - ensResolution: recipient, - ensFailure: true, - toError: null, - } - if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') { - setStateObj.hoverText = this.context.t('ensNameNotFound') - setStateObj.toError = 'ensNameNotFound' - setStateObj.ensFailure = false - } else { - log.error(reason) - setStateObj.hoverText = reason.message - } - - return this.setState(setStateObj) - }) -} - -EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) { - const state = this.state || {} - const ensResolution = state.ensResolution - // 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. - const nickname = state.nickname || ' ' - if (prevProps.network !== this.props.network) { - const provider = global.ethereumProvider - this.ens = new ENS({ provider, network: this.props.network }) - this.onChange(ensResolution) - } - if (prevState && ensResolution && this.props.onChange && - ensResolution !== prevState.ensResolution) { - this.props.onChange({ toAddress: ensResolution, nickname, toError: state.toError, toWarning: state.toWarning }) - } -} - -EnsInput.prototype.ensIcon = function (recipient) { - const { hoverText } = this.state || {} - return h('span.#ensIcon', { - title: hoverText, - style: { - position: 'absolute', - top: '16px', - left: '-25px', - }, - }, this.ensIconContents(recipient)) -} - -EnsInput.prototype.ensIconContents = function () { - const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS } - - if (toError) return - - if (loadingEns) { - return h('img', { - src: 'images/loading.svg', - style: { - width: '30px', - height: '30px', - transform: 'translateY(-6px)', - }, - }) - } - - if (ensFailure) { - return h('i.fa.fa-warning.fa-lg.warning') - } - - if (ensResolution && (ensResolution !== ZERO_ADDRESS)) { - return h('i.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/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.component.js b/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.component.js new file mode 100644 index 000000000..1ce9e8a06 --- /dev/null +++ b/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.component.js @@ -0,0 +1,79 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Button from '../../../ui/button/button.component' + +export default class AddToAddressBookModal extends Component { + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + hideModal: PropTypes.func.isRequired, + addToAddressBook: PropTypes.func.isRequired, + recipient: PropTypes.string.isRequired, + } + + state = { + alias: '', + } + + onSave = () => { + const { recipient, addToAddressBook, hideModal } = this.props + addToAddressBook(recipient, this.state.alias) + hideModal() + } + + onChange = e => { + this.setState({ + alias: e.target.value, + }) + } + + onKeyPress = e => { + if (e.keyCode === 13 && this.state.alias) { + this.onSave() + } + } + + render () { + const { t } = this.context + + return ( +
+
+
+ {t('addToAddressBook')} +
+
+ {t('enterAnAlias')} +
+ +
+
+ + +
+
+ ) + } +} diff --git a/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.container.js b/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.container.js new file mode 100644 index 000000000..413d4aa4a --- /dev/null +++ b/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.container.js @@ -0,0 +1,18 @@ +import { connect } from 'react-redux' +import AddToAddressBookModal from './add-to-addressbook-modal.component' +import actions from '../../../../store/actions' + +function mapStateToProps (state) { + return { + ...state.appState.modal.modalState.props || {}, + } +} + +function mapDispatchToProps (dispatch) { + return { + hideModal: () => dispatch(actions.hideModal()), + addToAddressBook: (recipient, nickname) => dispatch(actions.addToAddressBook(recipient, nickname)), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(AddToAddressBookModal) diff --git a/ui/app/components/app/modals/add-to-addressbook-modal/index.js b/ui/app/components/app/modals/add-to-addressbook-modal/index.js new file mode 100644 index 000000000..9ed4f018f --- /dev/null +++ b/ui/app/components/app/modals/add-to-addressbook-modal/index.js @@ -0,0 +1 @@ +export { default } from './add-to-addressbook-modal.container' diff --git a/ui/app/components/app/modals/add-to-addressbook-modal/index.scss b/ui/app/components/app/modals/add-to-addressbook-modal/index.scss new file mode 100644 index 000000000..f6bf85a0a --- /dev/null +++ b/ui/app/components/app/modals/add-to-addressbook-modal/index.scss @@ -0,0 +1,37 @@ +.add-to-address-book-modal { + @extend %col-nowrap; + @extend %modal; + + &__content { + @extend %col-nowrap; + padding: 1.5rem; + border-bottom: 1px solid $Grey-100; + + &__header { + @extend %h3; + } + } + + &__input-label { + color: $Grey-600; + margin-top: 1.25rem; + } + + &__input { + @extend %input; + margin-top: 0.75rem; + + &::placeholder { + color: $Grey-300; + } + } + + &__footer { + @extend %row-nowrap; + padding: 1rem; + + button + button { + margin-left: 1rem; + } + } +} diff --git a/ui/app/components/app/modals/index.scss b/ui/app/components/app/modals/index.scss index 09b0bb73c..1bbfd2d07 100644 --- a/ui/app/components/app/modals/index.scss +++ b/ui/app/components/app/modals/index.scss @@ -9,3 +9,5 @@ @import 'transaction-confirmed/index'; @import 'metametrics-opt-in-modal/index'; + +@import './add-to-addressbook-modal/index'; diff --git a/ui/app/components/app/modals/modal.js b/ui/app/components/app/modals/modal.js index cd8ec0c7d..4044ded8c 100644 --- a/ui/app/components/app/modals/modal.js +++ b/ui/app/components/app/modals/modal.js @@ -30,6 +30,7 @@ import RejectTransactions from './reject-transactions' import ClearApprovedOrigins from './clear-approved-origins' import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container' import ConfirmDeleteNetwork from './confirm-delete-network' +import AddToAddressBookModal from './add-to-addressbook-modal' const modalContainerBaseStyle = { transform: 'translate3d(-50%, 0, 0px)', @@ -167,6 +168,35 @@ const MODALS = { }, }, + ADD_TO_ADDRESSBOOK: { + contents: [ + h(AddToAddressBookModal, {}, []), + ], + mobileModalStyle: { + width: '95%', + top: '10%', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', + borderRadius: '10px', + }, + laptopModalStyle: { + width: '375px', + top: '10%', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', + borderRadius: '10px', + }, + contentStyle: { + borderRadius: '10px', + }, + }, + ACCOUNT_DETAILS: { contents: [ h(AccountDetailsModal, {}, []), @@ -466,7 +496,6 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal) Modal.prototype.render = function () { const modal = MODALS[this.props.modalState.name || 'DEFAULT'] - const { contents: children, disableBackdropClick = false } = modal const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'] const contentStyle = modal.contentStyle || {} diff --git a/ui/app/components/ui/dialog/dialog.scss b/ui/app/components/ui/dialog/dialog.scss new file mode 100644 index 000000000..68b5ce329 --- /dev/null +++ b/ui/app/components/ui/dialog/dialog.scss @@ -0,0 +1,26 @@ +.dialog { + font-size: .75rem; + line-height: 1rem; + padding: 1rem; + border: 1px solid $black; + box-sizing: border-box; + border-radius: 8px; + + &--message { + border-color: $Blue-200; + color: $Blue-600; + background-color: $Blue-000; + } + + &--error { + border-color: $Red-300; + color: $Red-600; + background-color: $Red-000; + } + + &--warning { + border-color: $Orange-300; + color: $Orange-600; + background-color: $Orange-000; + } +} diff --git a/ui/app/components/ui/dialog/index.js b/ui/app/components/ui/dialog/index.js new file mode 100644 index 000000000..d7e522b22 --- /dev/null +++ b/ui/app/components/ui/dialog/index.js @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' +import c from 'classnames' + +export default function Dialog (props) { + const { children, type, className, onClick } = props + return ( +
+ { children } +
+ ) +} + +Dialog.propTypes = { + className: PropTypes.string, + children: PropTypes.node, + type: PropTypes.oneOf(['message', 'error', 'warning']), + onClick: PropTypes.func, +} diff --git a/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js b/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js index 08f9c7544..f1e15f10f 100644 --- a/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js +++ b/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import classnames from 'classnames' +import c from 'classnames' export default class PageContainerHeader extends Component { static propTypes = { @@ -13,6 +13,7 @@ export default class PageContainerHeader extends Component { backButtonString: PropTypes.string, tabs: PropTypes.node, headerCloseText: PropTypes.string, + className: PropTypes.string, } renderTabs () { @@ -42,15 +43,14 @@ export default class PageContainerHeader extends Component { } render () { - const { title, subtitle, onClose, tabs, headerCloseText } = this.props + const { title, subtitle, onClose, tabs, headerCloseText, className } = this.props return ( -
+
{ this.renderHeaderRow() } diff --git a/ui/app/components/ui/text-field/text-field.component.js b/ui/app/components/ui/text-field/text-field.component.js index 1153a595b..ac7712c65 100644 --- a/ui/app/components/ui/text-field/text-field.component.js +++ b/ui/app/components/ui/text-field/text-field.component.js @@ -61,6 +61,9 @@ const styles = { ...inputLabelBase, fontSize: '.75rem', }, + inputMultiline: { + lineHeight: 'initial !important', + }, } const TextField = props => { diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index dde66fbb3..0e2034670 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,4 +1,5 @@ @import '../../../components/ui/button/buttons'; +@import '../../../components/ui/dialog/dialog'; @import './footer.scss'; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index ee07c1a7e..81678408a 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -536,8 +536,6 @@ } &__form { - padding: 10px 0 25px; - @media screen and (max-width: $break-small) { margin: 0; flex: 1 1 auto; @@ -553,7 +551,7 @@ } &__form-row { - margin: 8px 18px 0px; + margin: 1rem 1rem 0px; position: relative; display: flex; flex-flow: row; @@ -570,7 +568,6 @@ &__form-field { flex: 1 1 auto; min-width: 0; - max-width: 277px; .currency-display { color: $tundora; @@ -758,16 +755,8 @@ &__to-autocomplete { position: relative; - &__down-caret { - z-index: 1026; - position: absolute; - top: 18px; - right: 12px; - } - &__qr-code { z-index: 1026; - position: absolute; top: 13px; right: 33px; cursor: pointer; @@ -778,13 +767,52 @@ &__qr-code:hover { background: #f1f1f1; } + } - &__input.with-qr { - padding-right: 65px; + &__to-autocomplete { + display: flex; + flex-direction: row; + z-index: 1025; + position: relative; + height: 54px; + width: 100%; + border: 1px solid $Grey-100; + border-radius: 8px; + background-color: $white; + color: $tundora; + padding: 0 10px; + font-family: Roboto; + line-height: 21px; + align-items: center; + + &__input { + font-size: 16px; + height: 100%; + border: none; + flex: 1 1 auto; + width: 0; + + &::placeholder { + color: #A1A5B3; + } + } + + &__resolved { + font-size: 12px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + height: 30px; + cursor: pointer; + + + .send-v2__to-autocomplete__qr-code { + top: 2px; + right: 0; + } } } - &__to-autocomplete, &__memo-text-area, &__hex-data { + &__memo-text-area, &__hex-data { &__input { z-index: 1025; position: relative; diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index c02be0d98..9257456ec 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -74,6 +74,36 @@ $send-card-z-index: 20; $sidebar-z-index: 26; $sidebar-overlay-z-index: 25; +// Flex +%row-nowrap { + display: flex; + flex-flow: row nowrap; +} + +%col-nowrap { + display: flex; + flex-flow: column nowrap; +} + +// Background Image Sizing +%bg-contain { + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +%ellipsify { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +%modal { + background-color: $white; + border-radius: 10px; + box-shadow: 0px 5px 16px rgba($black, 0.25);; +} + /* Z Indicies - Current app - 11 @@ -94,24 +124,73 @@ $break-large: 576px; $primary-font-type: Roboto; $Blue-000: #eaf6ff; +$Blue-100: #a7d9fe; +$Blue-200: #75c4fd; +$Blue-300: #43aefc; $Blue-400: #1098fc; $Blue-500: #037DD6; $Blue-600: #0260a4; +$Blue-700: #024272; +$Blue-800: #01253f; +$Blue-900: #00080d; $Grey-000: #f2f3f4; $Grey-100: #D6D9DC; $Grey-200: #bbc0c5; +$Grey-300: #9fa6ae; $Grey-400: #848c96; +$Grey-200: #bbc0c5; $Grey-500: #6A737D; +$Grey-600: #535a61; $Grey-800: #24272a; $Red-000: #fcf2f3; +$Red-100: #f7d5d8; +$Red-200: #f1b9be; +$Red-300: #e88f97; +$Red-400: #e06470; $Red-500: #D73A49; $Red-600: #b92534; +$Red-700: #8e1d28; +$Red-800: #64141c; +$Red-900: #3a0c10; $Orange-000: #fef5ef; +$Orange-300: #faa66c; +$Orange-600: #c65507; $Orange-500: #F66A0A; +// Font Sizes +%h3 { + font-size: 1.5rem; + line-height: 2.125rem; + font-weight: 400; +} + +%h4 { + font-size: 1.125rem; + line-height: 1.3125rem; + font-weight: 400; +} + +%h5 { + font-size: 1rem; + line-height: 1.25rem; + font-weight: 400; +} + +%h6 { + font-size: .875rem; + line-height: 1.25rem; + font-weight: 400; +} + +%h8 { + font-size: .75rem; + line-height: 1.0625rem; + font-weight: 400; +} + /* Spacing Variables @@ -127,3 +206,24 @@ $xlarge-spacing: 48px; $xxlarge-spacing: 64px; +%input { + background: $white; + border: 1px solid $Grey-100; + box-sizing: border-box; + border-radius: 8px; + padding: .625rem .75rem; + font-size: 1.25rem; +} +// Input mixin + +%input-2 { + border: 2px solid $Grey-200; + border-radius: 6px; + color: $Grey-800; + padding: 0.875rem 1rem; + font-size: 1.125rem; + + &:focus-within { + border-color: $Blue-500; + } +} diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js index 92f190cf1..64f983606 100644 --- a/ui/app/ducks/metamask/metamask.js +++ b/ui/app/ducks/metamask/metamask.js @@ -39,6 +39,8 @@ function reduceMetamask (state, action) { editingTransactionId: null, forceGasMin: null, toNickname: '', + ensResolution: null, + ensResolutionError: '', }, coinOptions: {}, useBlockie: false, @@ -273,6 +275,24 @@ function reduceMetamask (state, action) { }, }) + case actions.UPDATE_SEND_ENS_RESOLUTION: + return extend(metamaskState, { + send: { + ...metamaskState.send, + ensResolution: action.payload, + ensResolutionError: '', + }, + }) + + case actions.UPDATE_SEND_ENS_RESOLUTION_ERROR: + return extend(metamaskState, { + send: { + ...metamaskState.send, + ensResolution: null, + ensResolutionError: action.payload, + }, + }) + case actions.CLEAR_SEND: return extend(metamaskState, { send: { diff --git a/ui/app/helpers/constants/routes.js b/ui/app/helpers/constants/routes.js index 06b37274f..adcd3f14d 100644 --- a/ui/app/helpers/constants/routes.js +++ b/ui/app/helpers/constants/routes.js @@ -7,6 +7,13 @@ const ADVANCED_ROUTE = '/settings/advanced' const SECURITY_ROUTE = '/settings/security' const ABOUT_US_ROUTE = '/settings/about-us' const NETWORKS_ROUTE = '/settings/networks' +const CONTACT_LIST_ROUTE = '/settings/contact-list' +const CONTACT_EDIT_ROUTE = '/settings/contact-list/edit-contact' +const CONTACT_ADD_ROUTE = '/settings/contact-list/add-contact' +const CONTACT_VIEW_ROUTE = '/settings/contact-list/view-contact' +const CONTACT_MY_ACCOUNTS_ROUTE = '/settings/contact-list/my-accounts' +const CONTACT_MY_ACCOUNTS_VIEW_ROUTE = '/settings/contact-list/my-accounts/view' +const CONTACT_MY_ACCOUNTS_EDIT_ROUTE = '/settings/contact-list/my-accounts/edit' const REVEAL_SEED_ROUTE = '/seed' const MOBILE_SYNC_ROUTE = '/mobile-sync' const RESTORE_VAULT_ROUTE = '/restore-vault' @@ -75,5 +82,12 @@ module.exports = { SECURITY_ROUTE, GENERAL_ROUTE, ABOUT_US_ROUTE, + CONTACT_LIST_ROUTE, + CONTACT_EDIT_ROUTE, + CONTACT_ADD_ROUTE, + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, NETWORKS_ROUTE, } 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/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 ( +
+ { this.renderDialogs() } + { content || this.renderMain() } +
+ ) + } + + renderExplicitAddress (address, name) { + return ( +
this.selectRecipient(address, name)} + > + +
+
+ {name || ellipsify(address)} +
+ { + name && ( +
+ {ellipsify(address)} +
+ ) + } +
+
+ ) + } + + renderTransfer () { + const { ownedAccounts } = this.props + const { t } = this.context + + return ( +
+
this.setState({ isShowingTransfer: false })} + > +
+ { t('backToAll') } +
+ +
+ ) + } + + renderMain () { + const { t } = this.context + const { query, ownedAccounts = [], addressBook } = this.props + + return ( +
+ + { + (ownedAccounts && ownedAccounts.length > 1) && !query && ( +
this.setState({ isShowingTransfer: true })} + > + { t('transferBetweenAccounts') } +
+ ) + } + +
+ ) + } + + 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 ( + + {ensResolutionError} + + ) + } + + if (toError && toError !== 'required' && !ensResolution) { + return ( + + {t(toError)} + + ) + } + + + if (toWarning) { + return ( + + {t(toWarning)} + + ) + } + } + +} 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/add-recipient/add-recipient.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.js new file mode 100644 index 000000000..b3b0d2da3 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.js @@ -0,0 +1,35 @@ +const { + REQUIRED_ERROR, + INVALID_RECIPIENT_ADDRESS_ERROR, + KNOWN_RECIPIENT_ADDRESS_ERROR, + INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR, +} = require('../../send.constants') +const { isValidAddress, isEthNetwork } = require('../../../../helpers/utils/util') +import { checkExistingAddresses } from '../../../add-token/util' + +const ethUtil = require('ethereumjs-util') +const contractMap = require('eth-contract-metadata') + +function getToErrorObject (to, toError = null, hasHexData = false, _, __, network) { + if (!to) { + if (!hasHexData) { + toError = REQUIRED_ERROR + } + } else if (!isValidAddress(to, network) && !toError) { + toError = isEthNetwork(network) ? INVALID_RECIPIENT_ADDRESS_ERROR : INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR + } + + return { to: toError } +} + +function getToWarningObject (to, toWarning = null, tokens = [], selectedToken = null) { + if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) { + toWarning = KNOWN_RECIPIENT_ADDRESS_ERROR + } + return { to: toWarning } +} + +module.exports = { + getToErrorObject, + getToWarningObject, +} diff --git a/ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js new file mode 100644 index 000000000..a6160d335 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js @@ -0,0 +1,24 @@ +const selectors = { + getToDropdownOpen, + getTokens, + sendToIsInError, + sendToIsInWarning, +} + +module.exports = selectors + +function getToDropdownOpen (state) { + return state.send.toDropdownOpen +} + +function sendToIsInError (state) { + return Boolean(state.send.errors.to) +} + +function sendToIsInWarning (state) { + return Boolean(state.send.warnings.to) +} + +function getTokens (state) { + return state.metamask.tokens +} 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..c8d022079 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js @@ -0,0 +1,268 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import c from 'classnames' +import { isValidENSAddress, isValidAddress } 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, + } + + 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 } = 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 (!input || isValidAddress(input) || !networkHasEnsSupport) { + updateEnsResolution('') + updateEnsResolutionError(!networkHasEnsSupport ? 'Network does not support ENS' : '') + return + } + + if (isValidENSAddress(input)) { + this.lookupEnsName(input) + } else { + updateEnsResolution('') + updateEnsResolutionError('') + } + } + + render () { + const { t } = this.context + const { className, selectedAddress } = this.props + const { input } = this.state + + if (selectedAddress) { + return this.renderSelected() + } + + return ( +
+
+
+ +
{ + if (input) { + this.resetInput() + } else { + this.props.scanQrCode() + } + }} + /> +
+
+ ) + } + + 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 ( +
+
+
+
+
+ {name || ellipsify(selectedAddress)} +
+ { name &&
{selectedAddress}
} +
+
+
+
+ ) + } + + ensIcon (recipient) { + const { hoverText } = this.state + + return ( + + { this.ensIconContents(recipient) } + + ) + } + + ensIconContents () { + const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS } + + if (toError) return + + if (loadingEns) { + return ( + + ) + } + + if (ensFailure) { + return + } + + if (ensResolution && (ensResolution !== ZERO_ADDRESS)) { + return ( + { + 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(, { 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/add-recipient/tests/add-recipient-selectors.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-selectors.test.js new file mode 100644 index 000000000..82f481187 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-selectors.test.js @@ -0,0 +1,59 @@ +import assert from 'assert' +import { + getToDropdownOpen, + getTokens, + sendToIsInError, +} from '../add-recipient.selectors.js' + +describe('add-recipient selectors', () => { + + describe('getToDropdownOpen()', () => { + it('should return send.getToDropdownOpen', () => { + const state = { + send: { + toDropdownOpen: false, + }, + } + + assert.equal(getToDropdownOpen(state), false) + }) + }) + + describe('sendToIsInError()', () => { + it('should return true if send.errors.to is truthy', () => { + const state = { + send: { + errors: { + to: 'abc', + }, + }, + } + + assert.equal(sendToIsInError(state), true) + }) + + it('should return false if send.errors.to is falsy', () => { + const state = { + send: { + errors: { + to: null, + }, + }, + } + + assert.equal(sendToIsInError(state), false) + }) + }) + + describe('getTokens()', () => { + it('should return empty array if no tokens in state', () => { + const state = { + metamask: { + tokens: [], + }, + } + + assert.deepStrictEqual(getTokens(state), []) + }) + }) +}) diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js new file mode 100644 index 000000000..182504c5d --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js @@ -0,0 +1,107 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +import { + REQUIRED_ERROR, + INVALID_RECIPIENT_ADDRESS_ERROR, + KNOWN_RECIPIENT_ADDRESS_ERROR, +} from '../../../send.constants' + +const stubs = { + isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))), +} + +const toRowUtils = proxyquire('../add-recipient.js', { + '../../../../helpers/utils/util': { + isValidAddress: stubs.isValidAddress, + }, +}) +const { + getToErrorObject, + getToWarningObject, +} = toRowUtils + +describe('add-recipient utils', () => { + + describe('getToErrorObject()', () => { + it('should return a required error if to is falsy', () => { + assert.deepEqual(getToErrorObject(null), { + to: REQUIRED_ERROR, + }) + }) + + it('should return null if to is falsy and hexData is truthy', () => { + assert.deepEqual(getToErrorObject(null, undefined, true), { + to: null, + }) + }) + + it('should return an invalid recipient error if to is truthy but invalid', () => { + assert.deepEqual(getToErrorObject('mockInvalidTo'), { + to: INVALID_RECIPIENT_ADDRESS_ERROR, + }) + }) + + it('should return null if to is truthy and valid', () => { + assert.deepEqual(getToErrorObject('0xabc123'), { + to: null, + }) + }) + + it('should return the passed error if to is truthy but invalid if to is truthy and valid', () => { + assert.deepEqual(getToErrorObject('invalid #$ 345878', 'someExplicitError'), { + to: 'someExplicitError', + }) + }) + + it('should return null if to is truthy but part of state tokens', () => { + assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), { + to: null, + }) + }) + + it('should null if to is truthy part of tokens but selectedToken falsy', () => { + assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}]), { + to: null, + }) + }) + + it('should return null if to is truthy but part of contract metadata', () => { + assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), { + to: null, + }) + }) + it('should null if to is truthy part of contract metadata but selectedToken falsy', () => { + assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), { + to: null, + }) + }) + }) + + describe('getToWarningObject()', () => { + it('should return a known address recipient if to is truthy but part of state tokens', () => { + assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), { + to: KNOWN_RECIPIENT_ADDRESS_ERROR, + }) + }) + + it('should null if to is truthy part of tokens but selectedToken falsy', () => { + assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}]), { + to: null, + }) + }) + + it('should return a known address recipient if to is truthy but part of contract metadata', () => { + assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), { + to: KNOWN_RECIPIENT_ADDRESS_ERROR, + }) + }) + it('should null if to is truthy part of contract metadata but selectedToken falsy', () => { + assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), { + to: KNOWN_RECIPIENT_ADDRESS_ERROR, + }) + }) + }) + +}) 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-content.component.js b/ui/app/pages/send/send-content/send-content.component.js index d799806c7..c08a018da 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 (
- - this.props.scanQrCode()} - /> + { this.maybeRenderAddContact() } - {(this.props.showHexData && ( - - ))} + { + this.props.showHexData && ( + + ) + }
) } + maybeRenderAddContact () { + const { t } = this.context + const { to, addressBook = [], ownedAccounts = [], showAddToAddressBookModal } = this.props + const isOwnedAccount = !!ownedAccounts.find(({ address }) => address === to) + const contact = addressBook.find(({ address }) => address === to) || {} + + if (isOwnedAccount || contact.name) { + return + } + + return ( + + {t('newAccountDetectedDialogMessage')} + + ) + } } 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-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 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 ( - - { - 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} - /> - - ) - } - -} 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/send-to-row.selectors.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js deleted file mode 100644 index a6160d335..000000000 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js +++ /dev/null @@ -1,24 +0,0 @@ -const selectors = { - getToDropdownOpen, - getTokens, - sendToIsInError, - sendToIsInWarning, -} - -module.exports = selectors - -function getToDropdownOpen (state) { - return state.send.toDropdownOpen -} - -function sendToIsInError (state) { - return Boolean(state.send.errors.to) -} - -function sendToIsInWarning (state) { - return Boolean(state.send.warnings.to) -} - -function getTokens (state) { - return state.metamask.tokens -} diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js deleted file mode 100644 index b3b0d2da3..000000000 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js +++ /dev/null @@ -1,35 +0,0 @@ -const { - REQUIRED_ERROR, - INVALID_RECIPIENT_ADDRESS_ERROR, - KNOWN_RECIPIENT_ADDRESS_ERROR, - INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR, -} = require('../../send.constants') -const { isValidAddress, isEthNetwork } = require('../../../../helpers/utils/util') -import { checkExistingAddresses } from '../../../add-token/util' - -const ethUtil = require('ethereumjs-util') -const contractMap = require('eth-contract-metadata') - -function getToErrorObject (to, toError = null, hasHexData = false, _, __, network) { - if (!to) { - if (!hasHexData) { - toError = REQUIRED_ERROR - } - } else if (!isValidAddress(to, network) && !toError) { - toError = isEthNetwork(network) ? INVALID_RECIPIENT_ADDRESS_ERROR : INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR - } - - return { to: toError } -} - -function getToWarningObject (to, toWarning = null, tokens = [], selectedToken = null) { - if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) { - toWarning = KNOWN_RECIPIENT_ADDRESS_ERROR - } - return { to: toWarning } -} - -module.exports = { - getToErrorObject, - getToWarningObject, -} 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(, { 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/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js deleted file mode 100644 index 0fa342d1e..000000000 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js +++ /dev/null @@ -1,59 +0,0 @@ -import assert from 'assert' -import { - getToDropdownOpen, - getTokens, - sendToIsInError, -} from '../send-to-row.selectors.js' - -describe('send-to-row selectors', () => { - - describe('getToDropdownOpen()', () => { - it('should return send.getToDropdownOpen', () => { - const state = { - send: { - toDropdownOpen: false, - }, - } - - assert.equal(getToDropdownOpen(state), false) - }) - }) - - describe('sendToIsInError()', () => { - it('should return true if send.errors.to is truthy', () => { - const state = { - send: { - errors: { - to: 'abc', - }, - }, - } - - assert.equal(sendToIsInError(state), true) - }) - - it('should return false if send.errors.to is falsy', () => { - const state = { - send: { - errors: { - to: null, - }, - }, - } - - assert.equal(sendToIsInError(state), false) - }) - }) - - describe('getTokens()', () => { - it('should return empty array if no tokens in state', () => { - const state = { - metamask: { - tokens: [], - }, - } - - assert.deepStrictEqual(getTokens(state), []) - }) - }) -}) 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/send-to-row/tests/send-to-row-utils.test.js deleted file mode 100644 index f8a6dd96f..000000000 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js +++ /dev/null @@ -1,107 +0,0 @@ -import assert from 'assert' -import proxyquire from 'proxyquire' -import sinon from 'sinon' - -import { - REQUIRED_ERROR, - INVALID_RECIPIENT_ADDRESS_ERROR, - KNOWN_RECIPIENT_ADDRESS_ERROR, -} from '../../../send.constants' - -const stubs = { - isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))), -} - -const toRowUtils = proxyquire('../send-to-row.utils.js', { - '../../../../helpers/utils/util': { - isValidAddress: stubs.isValidAddress, - }, -}) -const { - getToErrorObject, - getToWarningObject, -} = toRowUtils - -describe('send-to-row utils', () => { - - describe('getToErrorObject()', () => { - it('should return a required error if to is falsy', () => { - assert.deepEqual(getToErrorObject(null), { - to: REQUIRED_ERROR, - }) - }) - - it('should return null if to is falsy and hexData is truthy', () => { - assert.deepEqual(getToErrorObject(null, undefined, true), { - to: null, - }) - }) - - it('should return an invalid recipient error if to is truthy but invalid', () => { - assert.deepEqual(getToErrorObject('mockInvalidTo'), { - to: INVALID_RECIPIENT_ADDRESS_ERROR, - }) - }) - - it('should return null if to is truthy and valid', () => { - assert.deepEqual(getToErrorObject('0xabc123'), { - to: null, - }) - }) - - it('should return the passed error if to is truthy but invalid if to is truthy and valid', () => { - assert.deepEqual(getToErrorObject('invalid #$ 345878', 'someExplicitError'), { - to: 'someExplicitError', - }) - }) - - it('should return null if to is truthy but part of state tokens', () => { - assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), { - to: null, - }) - }) - - it('should null if to is truthy part of tokens but selectedToken falsy', () => { - assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}]), { - to: null, - }) - }) - - it('should return null if to is truthy but part of contract metadata', () => { - assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), { - to: null, - }) - }) - it('should null if to is truthy part of contract metadata but selectedToken falsy', () => { - assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), { - to: null, - }) - }) - }) - - describe('getToWarningObject()', () => { - it('should return a known address recipient if to is truthy but part of state tokens', () => { - assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), { - to: KNOWN_RECIPIENT_ADDRESS_ERROR, - }) - }) - - it('should null if to is truthy part of tokens but selectedToken falsy', () => { - assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}]), { - to: null, - }) - }) - - it('should return a known address recipient if to is truthy but part of contract metadata', () => { - assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), { - to: KNOWN_RECIPIENT_ADDRESS_ERROR, - }) - }) - it('should null if to is truthy part of contract metadata but selectedToken falsy', () => { - assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), { - to: KNOWN_RECIPIENT_ADDRESS_ERROR, - }) - }) - }) - -}) 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 d172423ab..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() + wrapper = shallow( + , + { context: { t: str => str + '_t' } } + ) }) describe('render', () => { @@ -31,30 +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(2).is(SendAssetRow)) - assert(PageContainerContentChild.childAt(2).find('send-v2__asset-dropdown__single-asset'), true) + 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-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 ( 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..2c0a907d8 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) { 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..9cdf75536 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,103 @@ 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 (
- - this.updateGas(updateData)} - scanQrCode={_ => this.props.scanQrCode()} - showHexData={showHexData} - /> - + + { this.renderInput() } + { content }
) } + renderInput () { + return ( + { + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Used QR scanner', + }, + }) + this.props.scanQrCode() + }} + onChange={this.onRecipientInputChange} + 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 ( + this.updateGas({ to, amount, data })} + scanQrCode={scanQrCode} + query={this.state.query} + toError={toError} + toWarning={toWarning} + /> + ) + } + + renderSendContent () { + const { history, showHexData, scanQrCode } = this.props + + return [ + this.updateGas({ to, amount, data })} + scanQrCode={scanQrCode} + showHexData={showHexData} + />, + , + ] + } + } 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,9 +24,16 @@ 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, @@ -34,6 +41,8 @@ import { 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..daf61bc1b 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') { @@ -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/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/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..871b2128b --- /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 ( + { 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 ( +
+ {this.state.ensAddress &&
+ +
+ { this.state.ensAddress } +
+
} +
+
+
+ { t('userName') } +
+ this.setState({ newName: e.target.value })} + fullWidth + margin="dense" + /> +
+ +
+
+ { t('ethereumPublicAddress') } +
+ { this.renderInput() } + { errorToRender &&
{errorToRender}
} +
+
+ { + 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'} + /> +
+ ) + } +} 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 ( +
+ contacts} + searchForRecents={() => nonContacts} + selectRecipient={(address) => { + history.push(`${CONTACT_VIEW_ROUTE}/${address}`) + }} + selectedAddress={selectedAddress} + /> +
+ ) + } + + renderAddButton () { + const { history } = this.props + return
{ + history.push(CONTACT_ADD_ROUTE) + }}> + +
+ } + + renderMyAccountsButton () { + const { history } = this.props + const { t } = this.context + return ( +
{ + history.push(CONTACT_MY_ACCOUNTS_ROUTE) + }} + > +
{t('myWalletAccounts')}
+
+
+ { t('myWalletAccountsDescription') } +
+
+
+
+ ) + } + + 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 &&
+ +
) + } + + renderAddressBookContent () { + const { hideAddressBook, showingMyAccounts } = this.props + + if (!hideAddressBook && !showingMyAccounts) { + return (
+ { this.renderMyAccountsButton() } + { this.renderAddresses() } +
) + } else if (!hideAddressBook && showingMyAccounts) { + return () + } + } + + render () { + const { addingContact } = this.props + + return ( +
+ { this.renderAddressBookContent() } + { this.renderContactContent() } + {!addingContact &&
+ { this.renderAddButton() } +
} +
+ ) + } +} 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..e9c2fed6f --- /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 ( +
+
+ + +
+
+
+
+ { t('userName') } +
+ this.setState({ newName: e.target.value })} + fullWidth + margin="dense" + /> +
+ +
+
+ { t('ethereumPublicAddress') } +
+ this.setState({ newAddress: e.target.value })} + fullWidth + margin="dense" + /> +
+ +
+
+ { t('memo') } +
+ 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', + }} + /> +
+
+ { + 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'} + /> +
+ ) + } +} 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 ( +
+ myAccounts} + selectRecipient={(address) => { + history.push(`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${address}`) + }} + /> +
+ ) + } + + render () { + return ( +
+ { this.renderMyAccounts() } +
+ ) + } +} 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..4f37b853b --- /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 ( +
+
+
+ +
{ name }
+
+
+ +
+
+
+ { t('ethereumPublicAddress') } +
+
+
+ { quadSplit(checkSummedAddress) } +
+ copyToClipboard(checkSummedAddress)} + src="/images/copy-to-clipboard.svg" + /> +
+
+
+
+ { t('memo') } +
+
+ { memo } +
+
+
+
+ ) + } +} 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 d98a48c2f..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; @@ -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/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 (
{ - !this.isCurrentPath(SETTINGS_ROUTE) && !this.isCurrentPath(NETWORKS_ROUTE) && ( + currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && (
history.push(SETTINGS_ROUTE)} + onClick={() => history.push(backRoute)} /> ) } -
- {t(pathnameI18nKey && isPopupView ? pathnameI18nKey : 'settings')} -
+ { this.renderTitle() }
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 ( +
+ {titleText} +
+ ) + } + 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 && (
- {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')} +
initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)} + >{subheaderText}
+ {breadCrumbTextKey &&
{'> '}{t(breadCrumbTextKey)}
} + {isAddressEntryPage &&
{' > '}{addressName}
}
) } 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)} /> @@ -148,6 +193,41 @@ class SettingsPage extends PureComponent { path={SECURITY_ROUTE} component={SecurityTab} /> + + + + + + + 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) diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js index 56591b7b0..0cf382d2c 100644 --- a/ui/app/selectors/selectors.js +++ b/ui/app/selectors/selectors.js @@ -9,6 +9,9 @@ import { const { multiplyCurrencies, } = require('../helpers/utils/conversion-util') +import { + addressSlicer, +} from '../helpers/utils/util' const selectors = { getSelectedAddress, @@ -52,6 +55,8 @@ const selectors = { getMetaMetricState, getRpcPrefsForCurrentProvider, getKnownMethodData, + getAddressBookEntry, + getAddressBookEntryName, } module.exports = selectors @@ -203,7 +208,22 @@ function conversionRateSelector (state) { } function getAddressBook (state) { - return state.metamask.addressBook + const network = state.metamask.network + const addressBookEntries = Object.values(state.metamask.addressBook) + .filter(entry => entry.chainId && entry.chainId.toString() === network) + + return addressBookEntries +} + +function getAddressBookEntry (state, address) { + const addressBook = getAddressBook(state) + const entry = addressBook.find(contact => contact.address.toLowerCase() === address.toLowerCase()) + return entry +} + +function getAddressBookEntryName (state, address) { + const entry = getAddressBookEntry(state, address) || state.metamask.identities[address] + return entry && entry.name !== '' ? entry.name : addressSlicer(address) } function accountsWithSendEtherInfoSelector (state) { diff --git a/ui/app/selectors/tests/selectors-test-data.js b/ui/app/selectors/tests/selectors-test-data.js new file mode 100644 index 000000000..54a494b63 --- /dev/null +++ b/ui/app/selectors/tests/selectors-test-data.js @@ -0,0 +1,232 @@ +module.exports = { + 'metamask': { + 'isInitialized': true, + 'isUnlocked': true, + 'featureFlags': {'sendHexData': true}, + 'rpcTarget': 'https://rawtestrpc.metamask.io/', + 'identities': { + '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': { + 'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825', + 'name': 'Send Account 1', + }, + '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': { + 'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', + 'name': 'Send Account 2', + }, + '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': { + 'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', + 'name': 'Send Account 3', + }, + '0xd85a4b6a394794842887b8284293d69163007bbb': { + 'address': '0xd85a4b6a394794842887b8284293d69163007bbb', + 'name': 'Send Account 4', + }, + }, + 'cachedBalances': {}, + 'currentBlockGasLimit': '0x4c1878', + 'currentCurrency': 'USD', + 'conversionRate': 1200.88200327, + 'conversionDate': 1489013762, + 'nativeCurrency': 'ETH', + 'frequentRpcList': [], + 'network': '3', + 'accounts': { + '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': { + 'code': '0x', + 'balance': '0x47c9d71831c76efe', + 'nonce': '0x1b', + 'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825', + }, + '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': { + 'code': '0x', + 'balance': '0x37452b1315889f80', + 'nonce': '0xa', + 'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', + }, + '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': { + 'code': '0x', + 'balance': '0x30c9d71831c76efe', + 'nonce': '0x1c', + 'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', + }, + '0xd85a4b6a394794842887b8284293d69163007bbb': { + 'code': '0x', + 'balance': '0x0', + 'nonce': '0x0', + 'address': '0xd85a4b6a394794842887b8284293d69163007bbb', + }, + }, + 'addressBook': [ + { + 'address': '0x06195827297c7a80a443b6894d3bdb8824b43896', + 'name': 'Address Book Account 1', + 'chainId': '3', + }, + ], + 'tokens': [ + { + 'address': '0x1a195821297c7a80a433b6894d3bdb8824b43896', + 'decimals': 18, + 'symbol': 'ABC', + }, + { + 'address': '0x8d6b81208414189a58339873ab429b6c47ab92d3', + 'decimals': 4, + 'symbol': 'DEF', + }, + { + 'address': '0xa42084c8d1d9a2198631988579bb36b48433a72b', + 'decimals': 18, + 'symbol': 'GHI', + }, + ], + 'tokenExchangeRates': { + 'def_eth': { + rate: 2.0, + }, + 'ghi_eth': { + rate: 31.01, + }, + }, + 'transactions': {}, + 'selectedAddressTxList': [ + { + 'id': 'mockTokenTx1', + 'txParams': { + 'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + 'time': 1700000000000, + }, + { + 'id': 'mockTokenTx2', + 'txParams': { + 'to': '0xafaketokenaddress', + }, + 'time': 1600000000000, + }, + { + 'id': 'mockTokenTx3', + 'txParams': { + 'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3', + }, + 'time': 1500000000000, + }, + { + 'id': 'mockEthTx1', + 'txParams': { + 'to': '0xd85a4b6a394794842887b8284293d69163007bbb', + }, + 'time': 1400000000000, + }, + ], + 'selectedTokenAddress': '0x8d6b81208414189a58339873ab429b6c47ab92d3', + 'unapprovedMsgs': { + '0xabc': { id: 'unapprovedMessage1', 'time': 1650000000000 }, + '0xdef': { id: 'unapprovedMessage2', 'time': 1550000000000 }, + '0xghi': { id: 'unapprovedMessage3', 'time': 1450000000000 }, + }, + 'unapprovedMsgCount': 0, + 'unapprovedPersonalMsgs': {}, + 'unapprovedPersonalMsgCount': 0, + 'keyringTypes': [ + 'Simple Key Pair', + 'HD Key Tree', + ], + 'keyrings': [ + { + 'type': 'HD Key Tree', + 'accounts': [ + 'fdea65c8e26263f6d9a1b5de9555d2931a33b825', + 'c5b8dbac4c1d3f152cdeb400e2313f309c410acb', + '2f8d4a878cfa04a6e60d46362f5644deab66572d', + ], + }, + { + 'type': 'Simple Key Pair', + 'accounts': [ + '0xd85a4b6a394794842887b8284293d69163007bbb', + ], + }, + ], + 'selectedAddress': '0xd85a4b6a394794842887b8284293d69163007bbb', + 'provider': { + 'type': 'testnet', + }, + 'shapeShiftTxList': [ + { id: 'shapeShiftTx1', 'time': 1675000000000 }, + { id: 'shapeShiftTx2', 'time': 1575000000000 }, + { id: 'shapeShiftTx3', 'time': 1475000000000 }, + ], + 'lostAccounts': [], + 'send': { + 'gasLimit': '0xFFFF', + 'gasPrice': '0xaa', + 'gasTotal': '0xb451dc41b578', + 'tokenBalance': 3434, + 'from': { + 'address': '0xabcdefg', + 'balance': '0x5f4e3d2c1', + }, + 'to': '0x987fedabc', + 'amount': '0x080', + 'memo': '', + 'errors': { + 'someError': null, + }, + 'maxModeOn': false, + 'editingTransactionId': 97531, + 'forceGasMin': true, + }, + 'unapprovedTxs': { + '4768706228115573': { + 'id': 4768706228115573, + 'time': 1487363153561, + 'status': 'unapproved', + 'gasMultiplier': 1, + 'metamaskNetworkId': '3', + 'txParams': { + 'from': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', + 'to': '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761', + 'value': '0xde0b6b3a7640000', + 'metamaskId': 4768706228115573, + 'metamaskNetworkId': '3', + 'gas': '0x5209', + }, + 'gasLimitSpecified': false, + 'estimatedGas': '0x5209', + 'txFee': '17e0186e60800', + 'txValue': 'de0b6b3a7640000', + 'maxCost': 'de234b52e4a0800', + 'gasPrice': '4a817c800', + }, + }, + 'currentLocale': 'en', + recentBlocks: ['mockBlock1', 'mockBlock2', 'mockBlock3'], + }, + 'appState': { + 'menuOpen': false, + 'currentView': { + 'name': 'accountDetail', + 'detailView': null, + 'context': '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + }, + 'accountDetail': { + 'subview': 'transactions', + }, + 'modal': { + 'modalState': {}, + 'previousModalState': {}, + }, + 'transForward': true, + 'isLoading': false, + 'warning': null, + 'scrollToBottom': false, + 'forgottenPassword': null, + }, + 'identities': {}, + 'send': { + 'fromDropdownOpen': false, + 'toDropdownOpen': false, + 'errors': { 'someError': null }, + }, +} diff --git a/ui/app/selectors/tests/selectors.test.js b/ui/app/selectors/tests/selectors.test.js new file mode 100644 index 000000000..5560b9833 --- /dev/null +++ b/ui/app/selectors/tests/selectors.test.js @@ -0,0 +1,25 @@ +import assert from 'assert' +import selectors from '../selectors.js' +const { + getAddressBook, +} = selectors +import mockState from './selectors-test-data' + +describe('selectors', () => { + + describe('getAddressBook()', () => { + it('should return the address book', () => { + assert.deepEqual( + getAddressBook(mockState), + [ + { + address: '0x06195827297c7a80a443b6894d3bdb8824b43896', + name: 'Address Book Account 1', + chainId: '3', + }, + ], + ) + }) + }) + +}) diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js index f02cdd0fa..72d5a1788 100644 --- a/ui/app/store/actions.js +++ b/ui/app/store/actions.js @@ -1,7 +1,7 @@ const abi = require('human-standard-token-abi') const pify = require('pify') const getBuyEthUrl = require('../../../app/scripts/lib/buy-eth-url') -const { getTokenAddressFromTokenObject } = require('../helpers/utils/util') +const { getTokenAddressFromTokenObject, checksumAddress } = require('../helpers/utils/util') const { calcTokenBalance, estimateGas, @@ -135,6 +135,8 @@ var actions = { showSendTokenPage, ADD_TO_ADDRESS_BOOK: 'ADD_TO_ADDRESS_BOOK', addToAddressBook: addToAddressBook, + REMOVE_FROM_ADDRESS_BOOK: 'REMOVE_FROM_ADDRESS_BOOK', + removeFromAddressBook: removeFromAddressBook, REQUEST_ACCOUNT_EXPORT: 'REQUEST_ACCOUNT_EXPORT', requestExportAccount: requestExportAccount, EXPORT_ACCOUNT: 'EXPORT_ACCOUNT', @@ -194,6 +196,10 @@ var actions = { CLOSE_FROM_DROPDOWN: 'CLOSE_FROM_DROPDOWN', GAS_LOADING_STARTED: 'GAS_LOADING_STARTED', GAS_LOADING_FINISHED: 'GAS_LOADING_FINISHED', + UPDATE_SEND_ENS_RESOLUTION: 'UPDATE_SEND_ENS_RESOLUTION', + UPDATE_SEND_ENS_RESOLUTION_ERROR: 'UPDATE_SEND_ENS_RESOLUTION_ERROR', + updateSendEnsResolution, + updateSendEnsResolutionError, setGasLimit, setGasPrice, updateGasData, @@ -1079,6 +1085,20 @@ function clearSend () { } } +function updateSendEnsResolution (ensResolution) { + return { + type: actions.UPDATE_SEND_ENS_RESOLUTION, + payload: ensResolution, + } +} + +function updateSendEnsResolutionError (errorMessage) { + return { + type: actions.UPDATE_SEND_ENS_RESOLUTION_ERROR, + payload: errorMessage, + } +} + function sendTx (txData) { log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`) @@ -1924,17 +1944,28 @@ function delRpcTarget (oldRpc) { } } - // Calls the addressBookController to add a new address. -function addToAddressBook (recipient, nickname = '') { +function addToAddressBook (recipient, nickname = '', memo = '') { log.debug(`background.addToAddressBook`) - return (dispatch) => { - background.setAddressBook(recipient, nickname, (err) => { - if (err) { - log.error(err) - return dispatch(self.displayWarning('Address book failed to update')) - } - }) + + return (dispatch, getState) => { + const chainId = getState().metamask.network + const set = background.setAddressBook(checksumAddress(recipient), nickname, chainId, memo) + if (!set) { + return dispatch(displayWarning('Address book failed to update')) + } + } +} + +/** + * @description Calls the addressBookController to remove an existing address. + * @param {String} addressToRemove - Address of the entry to remove from the address book + */ +function removeFromAddressBook (addressToRemove) { + log.debug(`background.removeFromAddressBook`) + + return () => { + background.removeFromAddressBook(checksumAddress(addressToRemove)) } } -- cgit