diff options
Diffstat (limited to 'ui')
253 files changed, 6356 insertions, 3211 deletions
diff --git a/ui/app/components/app/account-details/account-details.component.js b/ui/app/components/app/account-details/account-details.component.js new file mode 100644 index 000000000..ecf2f9428 --- /dev/null +++ b/ui/app/components/app/account-details/account-details.component.js @@ -0,0 +1,99 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' +import Identicon from '../../ui/identicon' +import Tooltip from '../../ui/tooltip-v2' +import copyToClipboard from 'copy-to-clipboard' + +export default class AccountDetails extends Component { + static contextTypes = { + t: PropTypes.func.isRequired, + metricsEvent: PropTypes.func, + } + + static defaultProps = { + hideSidebar: () => {}, + showAccountDetailModal: () => {}, + } + + static propTypes = { + hideSidebar: PropTypes.func, + showAccountDetailModal: PropTypes.func, + label: PropTypes.string.isRequired, + checksummedAddress: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + } + + state = { + hasCopied: false, + copyToClipboardPressed: false, + } + + copyAddress () { + copyToClipboard(this.props.checksummedAddress) + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Home', + name: 'Copied Address', + }, + }) + this.setState({ hasCopied: true }) + setTimeout(() => this.setState({ hasCopied: false }), 3000) + } + + render () { + const { t } = this.context + + const { + hideSidebar, + showAccountDetailModal, + label, + checksummedAddress, + name, + } = this.props + + const { + hasCopied, + copyToClipboardPressed, + } = this.state + + return ( + <div> + <div className="flex-column account-details"> + <div className="account-details__sidebar-close" onClick={hideSidebar} /> + <div className="account-details__keyring-label allcaps"> + {label} + </div> + <div className="flex-column flex-center account-details__name-container" onClick={showAccountDetailModal}> + <Identicon diameter={54} address={checksummedAddress} /> + <span className="account-details__account-name"> + {name} + </span> + <button className="btn-secondary account-details__details-button"> + {t('details')} + </button> + </div> + </div> + <Tooltip + position={'bottom'} + title={hasCopied ? t('copiedExclamation') : t('copyToClipboard')} + wrapperClassName="account-details__tooltip" + > + <button + className={classnames({ + 'account-details__address': true, + 'account-details__address__pressed': copyToClipboardPressed, + })} + onClick={() => this.copyAddress()} + onMouseDown={() => this.setState({ copyToClipboardPressed: true })} + onMouseUp={() => this.setState({ copyToClipboardPressed: false })} + > + {checksummedAddress.slice(0, 6)}...{checksummedAddress.slice(-4)} + <i className="fa fa-clipboard" style={{ marginLeft: '8px' }} /> + </button> + </Tooltip> + </div> + ) + } +} diff --git a/ui/app/components/app/account-details/account-details.container.js b/ui/app/components/app/account-details/account-details.container.js new file mode 100644 index 000000000..581ff1e2f --- /dev/null +++ b/ui/app/components/app/account-details/account-details.container.js @@ -0,0 +1,14 @@ +import { connect } from 'react-redux' +import { hideSidebar, showModal } from '../../../store/actions' +import AccountDetails from './account-details.component' + +function mapDispatchToProps (dispatch) { + return { + hideSidebar: () => dispatch(hideSidebar()), + showAccountDetailModal: () => { + dispatch(showModal({ name: 'ACCOUNT_DETAILS' })) + }, + } +} + +export default connect(null, mapDispatchToProps)(AccountDetails) diff --git a/ui/app/components/app/account-details/index.js b/ui/app/components/app/account-details/index.js new file mode 100644 index 000000000..dca244fee --- /dev/null +++ b/ui/app/components/app/account-details/index.js @@ -0,0 +1 @@ +export { default } from './account-details.container' diff --git a/ui/app/components/app/account-details/index.scss b/ui/app/components/app/account-details/index.scss new file mode 100644 index 000000000..b0a921df3 --- /dev/null +++ b/ui/app/components/app/account-details/index.scss @@ -0,0 +1,79 @@ +.account-details { + flex: 0 0 auto; + + &__keyring-label { + height: 50px; + color: $dusty-gray; + font-family: Roboto; + font-size: 10px; + text-align: right; + padding: 17px 20px 0; + box-sizing: border-box; + } + + &__name-container { + flex: 0 0 auto; + cursor: pointer; + width: 100%; + margin: 0 auto; + } + + &__account-name { + font-size: 24px; + color: $black; + margin-top: 8px; + margin-bottom: .9rem; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + padding: 0 8px; + text-align: center; + } + + &__details-button { + font-size: 10px; + border-radius: 17px; + background-color: transparent; + margin: 0 auto; + padding: 4px 12px; + flex: 0 0 auto; + } + + &__tooltip { + display: flex; + justify-content: center; + align-items: center; + padding: 24px; + } + + &__address { + border-radius: 3px; + background-color: $alto; + color: $scorpion; + font-size: 14px; + line-height: 12px; + padding: 4px 12px; + cursor: pointer; + flex: 0 0 auto; + + &__pressed { + background-color: $manatee, + } + } + + &__sidebar-close { + + @media screen and (max-width: 575px) { + &::after { + content: '\00D7'; + font-size: 40px; + color: $tundora; + position: absolute; + top: 12px; + left: 12px; + cursor: pointer; + } + } + } +} diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js index 171a3499f..7bf7a39bd 100644 --- a/ui/app/components/app/app-header/app-header.component.js +++ b/ui/app/components/app/app-header/app-header.component.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import Identicon from '../../ui/identicon' +import MetaFoxLogo from '../../ui/metafox-logo' import { DEFAULT_ROUTE } from '../../../helpers/constants/routes' const NetworkIndicator = require('../network') @@ -70,6 +71,7 @@ export default class AppHeader extends PureComponent { <Identicon address={selectedAddress} diameter={32} + addBorder={true} /> </div> ) @@ -89,20 +91,10 @@ export default class AppHeader extends PureComponent { <div className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}> <div className="app-header__contents"> - <div - className="app-header__logo-container" + <MetaFoxLogo + unsetIconHeight={true} onClick={() => history.push(DEFAULT_ROUTE)} - > - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - /> - </div> + /> <div className="app-header__account-menu-container"> { !hideNetworkIndicator && ( 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/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js b/ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js index c8507985d..95ca8144a 100644 --- a/ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js +++ b/ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js @@ -27,7 +27,7 @@ describe('Confirm Detail Row Component', function () { ) }) - describe('render', () => { + describe('render', () => { it('should render a div with a confirm-detail-row class', () => { assert.equal(wrapper.find('div.confirm-detail-row').length, 1) }) @@ -60,5 +60,5 @@ describe('Confirm Detail Row Component', function () { wrapper.find('.confirm-detail-row__header-text').props().onClick() assert.equal(assert.equal(propsMethodSpies.onHeaderClick.callCount, 1)) }) - }) + }) }) diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js index 8327f997b..c24d24b17 100755 --- a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js +++ b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js @@ -6,9 +6,9 @@ const ConfirmPageContainerNavigation = props => { return ( <div className="confirm-page-container-navigation" - style={{ - display: showNavigation ? 'flex' : 'none', - }} + style={{ + display: showNavigation ? 'flex' : 'none', + }} > <div className="confirm-page-container-navigation__container" style={{ diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js index 326e4f83e..1ff797fa1 100644 --- a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js @@ -106,16 +106,16 @@ export default class ConfirmPageContainer extends Component { return ( <div className="page-container"> <ConfirmPageContainerNavigation - totalTx={totalTx} - positionOfCurrentTx={positionOfCurrentTx} - nextTxId={nextTxId} - prevTxId={prevTxId} - showNavigation={showNavigation} - onNextTx={(txId) => onNextTx(txId)} - firstTx={firstTx} - lastTx={lastTx} - ofText={ofText} - requestsWaitingText={requestsWaitingText} + totalTx={totalTx} + positionOfCurrentTx={positionOfCurrentTx} + nextTxId={nextTxId} + prevTxId={prevTxId} + showNavigation={showNavigation} + onNextTx={(txId) => onNextTx(txId)} + firstTx={firstTx} + lastTx={lastTx} + ofText={ofText} + requestsWaitingText={requestsWaitingText} /> <ConfirmPageContainerHeader showEdit={showEdit} 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 ( + <div className="send__select-recipient-wrapper__recent-group-wrapper"> + <RecipientGroup + label={t('recents')} + items={showLoadMore ? nonContacts.slice(0, 2) : nonContacts} + onSelect={this.props.selectRecipient} + selectedAddress={this.props.selectedAddress} + /> + { + showLoadMore && ( + <div + className="send__select-recipient-wrapper__recent-group-wrapper__load-more" + onClick={() => this.setState({ isShowingAllRecent: true })} + > + {t('loadMore')} + </div> + ) + } + </div> + ) + } + + 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]) => ( + <RecipientGroup + key={`${letter}-contract-group`} + label={letter} + items={groupItems} + onSelect={this.props.selectRecipient} + selectedAddress={this.props.selectedAddress} + /> + )) + } + + renderMyAccounts () { + const myAccounts = this.props.searchForMyAccounts() + + return ( + <RecipientGroup + items={myAccounts} + onSelect={this.props.selectRecipient} + selectedAddress={this.props.selectedAddress} + /> + ) + } + + render () { + const { + children, + searchForRecents, + searchForContacts, + searchForMyAccounts, + } = this.props + + return ( + <div className="send__select-recipient-wrapper__list"> + { children || null } + { searchForRecents && this.renderRecents() } + { searchForContacts && this.renderAddressBook() } + { searchForMyAccounts && this.renderMyAccounts() } + </div> + ) + } +} 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 ( + <div className="send__select-recipient-wrapper__group"> + {label && <div className="send__select-recipient-wrapper__group-label"> + {label} + </div>} + { + items.map(({ address, name }) => ( + <div + key={address} + onClick={() => onSelect(address, name)} + className={classnames({ + 'send__select-recipient-wrapper__group-item': !addressesEqual(address, selectedAddress), + 'send__select-recipient-wrapper__group-item--selected': addressesEqual(address, selectedAddress), + })} + > + <Identicon address={address} diameter={28} /> + <div className="send__select-recipient-wrapper__group-item__content"> + <div className="send__select-recipient-wrapper__group-item__title"> + {name || ellipsify(address)} + </div> + { + name && ( + <div className="send__select-recipient-wrapper__group-item__subtitle"> + {ellipsify(address)} + </div> + ) + } + </div> + </div> + )) + } + </div> + ) +} + +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/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js index a4c33620a..cf2aa8ae8 100644 --- a/ui/app/components/app/dropdowns/account-details-dropdown.js +++ b/ui/app/components/app/dropdowns/account-details-dropdown.js @@ -59,7 +59,7 @@ AccountDetailsDropdown.prototype.render = function () { viewOnEtherscan, showRemoveAccountConfirmationModal, rpcPrefs, - } = this.props + } = this.props const address = selectedIdentity.address diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js index 378ad3ba6..e6a24ef11 100644 --- a/ui/app/components/app/dropdowns/network-dropdown.js +++ b/ui/app/components/app/dropdowns/network-dropdown.js @@ -32,9 +32,6 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - hideModal: () => { - dispatch(actions.hideModal()) - }, setProviderType: (type) => { dispatch(actions.setProviderType(type)) }, @@ -47,7 +44,6 @@ function mapDispatchToProps (dispatch) { delRpcTarget: (target) => { dispatch(actions.delRpcTarget(target)) }, - showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), setNetworksTabAddMode: isInAddMode => dispatch(actions.setNetworksTabAddMode(isInAddMode)), } @@ -357,12 +353,12 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) { }, }, nickname || rpc), h('i.fa.fa-times.delete', - { - onClick: (e) => { - e.stopPropagation() - props.delRpcTarget(rpc) - }, - }), + { + onClick: (e) => { + e.stopPropagation() + props.delRpcTarget(rpc) + }, + }), ] ) } 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/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js index d942fd150..7b87b3033 100644 --- a/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js +++ b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js @@ -131,8 +131,8 @@ export default class AdvancedTabContent extends Component { </div> { isInError ? <div className={`advanced-gas-inputs__gas-edit-row__${errorType}-text`}> - { errorText } - </div> + { errorText } + </div> : null } </div> ) diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js index eab3434df..88d28b9ed 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js @@ -104,8 +104,8 @@ export default class AdvancedTabContent extends Component { </div> { isInError ? <div className={`advanced-tab__gas-edit-row__${errorType}-text`}> - { errorText } - </div> + { errorText } + </div> : null } </div> ) @@ -126,7 +126,7 @@ export default class AdvancedTabContent extends Component { <div className="advanced-tab__transaction-data-summary__fee"> {transactionFee} </div> - <div className="time-remaining">{timeRemaining}</div> + <div className="advanced-tab__transaction-data-summary__time-remaining">{timeRemaining}</div> </div> </div> ) diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss index 20a503018..e35b6d594 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss @@ -1,5 +1,3 @@ -@import './time-remaining/index'; - .advanced-tab { display: flex; flex-flow: column; @@ -36,6 +34,24 @@ font-size: 16px; color: #313A5E; } + + &__time-remaining { + color: #313A5E; + font-size: 16px; + + .minutes-num, .seconds-num { + font-size: 16px; + } + + .seconds-num { + margin-left: 7px; + font-size: 16px; + } + + .minutes-label, .seconds-label { + font-size: 16px; + } + } } &__fee-chart { @@ -94,7 +110,7 @@ display: flex; justify-content: space-between; align-items: center; - + .fa-info-circle { color: $silver; margin-left: 10px; @@ -204,4 +220,4 @@ color: $dusty-gray; } } -}
\ No newline at end of file +} diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js index 5f7d90922..683eeda9b 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js @@ -124,7 +124,7 @@ describe('AdvancedTabContent Component', function () { const dataNode = dataSummary.children().at(1) assert(dataNode.hasClass('advanced-tab__transaction-data-summary__container')) assert.equal(dataNode.children().at(0).text(), 'mockTotalFee') - assert(dataNode.children().at(1).hasClass('time-remaining')) + assert(dataNode.children().at(1).hasClass('advanced-tab__transaction-data-summary__time-remaining')) assert.equal(dataNode.children().at(1).text(), 'mockMsRemaining') }) }) diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js deleted file mode 100644 index 61b681e1a..000000000 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './time-remaining.component' diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss deleted file mode 100644 index e2115af7f..000000000 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss +++ /dev/null @@ -1,17 +0,0 @@ -.time-remaining { - color: #313A5E; - font-size: 16px; - - .minutes-num, .seconds-num { - font-size: 16px; - } - - .seconds-num { - margin-left: 7px; - font-size: 16px; - } - - .minutes-label, .seconds-label { - font-size: 16px; - } -}
\ No newline at end of file diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js deleted file mode 100644 index 17f0345d5..000000000 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import assert from 'assert' -import shallow from '../../../../../../../../lib/shallow-with-context' -import TimeRemaining from '../time-remaining.component.js' - -describe('TimeRemaining Component', function () { - let wrapper - - beforeEach(() => { - wrapper = shallow(<TimeRemaining - milliseconds={495000} - />) - }) - - describe('render()', () => { - it('should render the time-remaining root node', () => { - assert(wrapper.hasClass('time-remaining')) - }) - - it('should render minutes and seconds numbers and labels', () => { - const timeRemainingChildren = wrapper.children() - assert.equal(timeRemainingChildren.length, 4) - assert.equal(timeRemainingChildren.at(0).text(), 8) - assert.equal(timeRemainingChildren.at(1).text(), 'minutesShorthand') - assert.equal(timeRemainingChildren.at(2).text(), 15) - assert.equal(timeRemainingChildren.at(3).text(), 'secondsShorthand') - }) - }) - -}) diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js deleted file mode 100644 index 826d41f9c..000000000 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js +++ /dev/null @@ -1,33 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import { getTimeBreakdown } from './time-remaining.utils' - -export default class TimeRemaining extends Component { - static contextTypes = { - t: PropTypes.func, - } - - static propTypes = { - milliseconds: PropTypes.number, - } - - render () { - const { - milliseconds, - } = this.props - - const { - minutes, - seconds, - } = getTimeBreakdown(milliseconds) - - return ( - <div className="time-remaining"> - <span className="minutes-num">{minutes}</span> - <span className="minutes-label">{this.context.t('minutesShorthand')}</span> - <span className="seconds-num">{seconds}</span> - <span className="seconds-label">{this.context.t('secondsShorthand')}</span> - </div> - ) - } -} diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js deleted file mode 100644 index cf43e0acb..000000000 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js +++ /dev/null @@ -1,11 +0,0 @@ -function getTimeBreakdown (milliseconds) { - return { - hours: Math.floor(milliseconds / 3600000), - minutes: Math.floor((milliseconds % 3600000) / 60000), - seconds: Math.floor((milliseconds % 60000) / 1000), - } -} - -module.exports = { - getTimeBreakdown, -} diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js index 5f3925fa5..931611460 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js @@ -21,12 +21,12 @@ export default class BasicTabContent extends Component { <div className="basic-tab-content__title">{ t('estimatedProcessingTimes') }</div> <div className="basic-tab-content__blurb">{ t('selectAHigherGasFee') }</div> {!gasPriceButtonGroupProps.loading - ? <GasPriceButtonGroup - className="gas-price-button-group--alt" - showCheck={true} - {...gasPriceButtonGroupProps} - /> - : <Loading /> + ? <GasPriceButtonGroup + className="gas-price-button-group--alt" + showCheck={true} + {...gasPriceButtonGroupProps} + /> + : <Loading /> } <div className="basic-tab-content__footer-blurb">{ t('acceleratingATransaction') }</div> </div> diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js index e18c1067e..5e557f660 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js @@ -47,7 +47,7 @@ export default class GasModalPageContainer extends Component { const promise = this.props.hideBasic ? Promise.resolve(this.props.blockTime) : this.props.fetchBasicGasAndTimeEstimates() - .then(basicEstimates => basicEstimates.blockTime) + .then(basicEstimates => basicEstimates.blockTime) promise .then(blockTime => { @@ -144,11 +144,11 @@ export default class GasModalPageContainer extends Component { return ( <Tabs> {tabsToRender.map(({ name, content }, i) => <Tab name={this.context.t(name)} key={`gas-modal-tab-${i}`}> - <div className="gas-modal-content"> - { content } - { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) } - </div> - </Tab> + <div className="gas-modal-content"> + { content } + { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) } + </div> + </Tab> )} </Tabs> ) diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js index 03d254eee..d5f3837a9 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js @@ -341,44 +341,44 @@ describe('gas-modal-page-container container', () => { }) describe('mergeProps', () => { - let stateProps - let dispatchProps - let ownProps - - beforeEach(() => { - stateProps = { - gasPriceButtonGroupProps: { - someGasPriceButtonGroupProp: 'foo', - anotherGasPriceButtonGroupProp: 'bar', - }, - isConfirm: true, - someOtherStateProp: 'baz', - transaction: {}, - } - dispatchProps = { - updateCustomGasPrice: sinon.spy(), - hideGasButtonGroup: sinon.spy(), - setGasData: sinon.spy(), - updateConfirmTxGasAndCalculate: sinon.spy(), - someOtherDispatchProp: sinon.spy(), - createSpeedUpTransaction: sinon.spy(), - hideSidebar: sinon.spy(), - hideModal: sinon.spy(), - cancelAndClose: sinon.spy(), - } - ownProps = { someOwnProp: 123 } - }) + let stateProps + let dispatchProps + let ownProps - afterEach(() => { - dispatchProps.updateCustomGasPrice.resetHistory() - dispatchProps.hideGasButtonGroup.resetHistory() - dispatchProps.setGasData.resetHistory() - dispatchProps.updateConfirmTxGasAndCalculate.resetHistory() - dispatchProps.someOtherDispatchProp.resetHistory() - dispatchProps.createSpeedUpTransaction.resetHistory() - dispatchProps.hideSidebar.resetHistory() - dispatchProps.hideModal.resetHistory() - }) + beforeEach(() => { + stateProps = { + gasPriceButtonGroupProps: { + someGasPriceButtonGroupProp: 'foo', + anotherGasPriceButtonGroupProp: 'bar', + }, + isConfirm: true, + someOtherStateProp: 'baz', + transaction: {}, + } + dispatchProps = { + updateCustomGasPrice: sinon.spy(), + hideGasButtonGroup: sinon.spy(), + setGasData: sinon.spy(), + updateConfirmTxGasAndCalculate: sinon.spy(), + someOtherDispatchProp: sinon.spy(), + createSpeedUpTransaction: sinon.spy(), + hideSidebar: sinon.spy(), + hideModal: sinon.spy(), + cancelAndClose: sinon.spy(), + } + ownProps = { someOwnProp: 123 } + }) + + afterEach(() => { + dispatchProps.updateCustomGasPrice.resetHistory() + dispatchProps.hideGasButtonGroup.resetHistory() + dispatchProps.setGasData.resetHistory() + dispatchProps.updateConfirmTxGasAndCalculate.resetHistory() + dispatchProps.someOtherDispatchProp.resetHistory() + dispatchProps.createSpeedUpTransaction.resetHistory() + dispatchProps.hideSidebar.resetHistory() + dispatchProps.hideModal.resetHistory() + }) it('should return the expected props when isConfirm is true', () => { const result = mergeProps(stateProps, dispatchProps, ownProps) diff --git a/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js b/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js index 55512ce09..b941f1cf9 100644 --- a/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js +++ b/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js @@ -210,17 +210,17 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate }, padding: {left: 20, right: 15, top: 6, bottom: 10}, data: { - x: 'x', - columns: [ - ['x', ...gasPrices], - ['data1', ...estimatedTimes], - ], - types: { - data1: 'area', - }, - selection: { - enabled: false, - }, + x: 'x', + columns: [ + ['x', ...gasPrices], + ['data1', ...estimatedTimes], + ], + types: { + data1: 'area', + }, + selection: { + enabled: false, + }, }, color: { data1: '#259de5', @@ -254,13 +254,13 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate }, }, legend: { - show: false, + show: false, }, grid: { - x: {}, - lines: { - front: false, - }, + x: {}, + lines: { + front: false, + }, }, point: { focus: { @@ -296,8 +296,8 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate const flipTooltip = circleY - circleWidth < chartYStart + 5 d3 - .select('.tooltip-arrow') - .style('margin-top', flipTooltip ? '-16px' : '4px') + .select('.tooltip-arrow') + .style('margin-top', flipTooltip ? '-16px' : '4px') return { top: bigNumMinus(circleY, chartYStart).minus(19).plus(flipTooltip ? circleWidth + 38 : 0).toNumber(), diff --git a/ui/app/components/app/home-notification/home-notification.component.js b/ui/app/components/app/home-notification/home-notification.component.js new file mode 100644 index 000000000..cc86ef6d8 --- /dev/null +++ b/ui/app/components/app/home-notification/home-notification.component.js @@ -0,0 +1,112 @@ +import React, { PureComponent } from 'react' +import classnames from 'classnames' +import {Tooltip as ReactTippy} from 'react-tippy' +import PropTypes from 'prop-types' +import Button from '../../ui/button' + +export default class HomeNotification extends PureComponent { + static contextTypes = { + metricsEvent: PropTypes.func, + } + + static defaultProps = { + onAccept: null, + ignoreText: null, + onIgnore: null, + infoText: null, + } + + static propTypes = { + acceptText: PropTypes.string.isRequired, + onAccept: PropTypes.func, + ignoreText: PropTypes.string, + onIgnore: PropTypes.func, + descriptionText: PropTypes.string.isRequired, + infoText: PropTypes.string, + classNames: PropTypes.array, + } + + handleAccept = () => { + this.props.onAccept() + } + + handleIgnore = () => { + this.props.onIgnore() + } + + render () { + const { descriptionText, acceptText, onAccept, ignoreText, onIgnore, infoText, classNames = [] } = this.props + + return ( + <div className={classnames('home-notification', ...classNames)}> + <div className="home-notification__header"> + <div className="home-notification__header-container"> + <img + className="home-notification__icon" + alt="" + src="images/icons/connect.svg" + /> + <div className="home-notification__text"> + { descriptionText } + </div> + </div> + { + infoText ? ( + <ReactTippy + style={{ + display: 'flex', + }} + html={( + <p className="home-notification-tooltip__content"> + {infoText} + </p> + )} + offset={-36} + distance={36} + animation="none" + position="top" + arrow + theme="info" + > + <img + alt="" + src="images/icons/info.svg" + /> + </ReactTippy> + ) : ( + null + ) + } + </div> + <div className="home-notification__buttons"> + { + (onAccept && acceptText) ? ( + <Button + type="primary" + className="home-notification__accept-button" + onClick={this.handleAccept} + > + { acceptText } + </Button> + ) : ( + null + ) + } + { + (onIgnore && ignoreText) ? ( + <Button + type="secondary" + className="home-notification__ignore-button" + onClick={this.handleIgnore} + > + { ignoreText } + </Button> + ) : ( + null + ) + } + </div> + </div> + ) + } +} diff --git a/ui/app/components/app/home-notification/index.js b/ui/app/components/app/home-notification/index.js new file mode 100644 index 000000000..918a35be2 --- /dev/null +++ b/ui/app/components/app/home-notification/index.js @@ -0,0 +1 @@ +export { default } from './home-notification.component' diff --git a/ui/app/components/app/home-notification/index.scss b/ui/app/components/app/home-notification/index.scss new file mode 100644 index 000000000..c855a0814 --- /dev/null +++ b/ui/app/components/app/home-notification/index.scss @@ -0,0 +1,118 @@ +.tippy-tooltip.info-theme { + background: rgba(36, 41, 46, 0.9); + color: $white; + border-radius: 8px; +} + +.home-notification { + background: rgba(36, 41, 46, 0.9); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); + border-radius: 8px; + height: 116px; + padding: 16px; + + @media screen and (min-width: 576px) { + min-width: 472px; + } + + display: flex; + flex-flow: column; + justify-content: space-between; + + &__header-container { + display: flex; + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__text { + font-family: Roboto, 'sans-serif'; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: $white; + margin-left: 10px; + margin-right: 8px; + } + + .fa-info-circle { + color: #6A737D; + } + + &__ignore-button { + border: 2px solid #6A737D; + box-sizing: border-box; + border-radius: 6px; + color: $white; + background-color: inherit; + height: 34px; + width: 155px; + padding: 0; + + @media screen and (max-width: 575px) { + width: 135px; + } + + &:hover { + border-color: #6A737D; + background-color: #6A737D; + } + + &:active { + background-color: #141618; + } + } + + &__accept-button { + border: 2px solid #6A737D; + box-sizing: border-box; + border-radius: 6px; + color: $white; + background-color: inherit; + height: 34px; + width: 155px; + padding: 0; + margin-left: 4px; + + @media screen and (max-width: 575px) { + width: 135px; + } + + &:hover { + border-color: #6A737D; + background-color: #6A737D; + } + + &:active { + background-color: #141618; + } + } + + &__buttons { + display: flex; + width: 100%; + justify-content: flex-start; + flex-direction: row-reverse; + } +} + +.home-notification-tooltip { + &__tooltip-container { + display: flex; + } + + &__content { + font-family: Roboto, 'sans-serif'; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: $white; + text-align: left; + display: inline-block; + width: 200px; + } +} diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss index e9bb4ac9f..1ccb6a94a 100644 --- a/ui/app/components/app/index.scss +++ b/ui/app/components/app/index.scss @@ -1,3 +1,5 @@ +@import 'account-details/index'; + @import 'account-menu/index'; @import 'add-token-button/index'; @@ -78,4 +80,8 @@ @import 'gas-customization/gas-price-button-group/index'; -@import 'ui-migration-annoucement/index'; +@import '../ui/toggle-button/index'; + +@import 'home-notification/index'; + +@import 'multiple-notifications/index'; diff --git a/ui/app/components/app/menu-droppo.js b/ui/app/components/app/menu-droppo.js index c80bee2be..a88cad4b4 100644 --- a/ui/app/components/app/menu-droppo.js +++ b/ui/app/components/app/menu-droppo.js @@ -2,7 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const findDOMNode = require('react-dom').findDOMNode -const ReactCSSTransitionGroup = require('react-addons-css-transition-group') +const ReactCSSTransitionGroup = require('react-transition-group/CSSTransitionGroup') module.exports = MenuDroppoComponent diff --git a/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js b/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js index e3919edcf..1b9a6a718 100644 --- a/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js +++ b/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js @@ -72,14 +72,14 @@ export default class AccountDetailsModal extends Component { </Button> {exportPrivateKeyFeatureEnabled - ? <Button - type="secondary" - className="account-modal__button" - onClick={() => showExportPrivateKeyModal()} - > - {this.context.t('exportPrivateKey')} - </Button> - : null + ? <Button + type="secondary" + className="account-modal__button" + onClick={() => showExportPrivateKeyModal()} + > + {this.context.t('exportPrivateKey')} + </Button> + : null } </AccountModalContainer> ) 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..64161a632 --- /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.key === 'Enter' && this.state.alias) { + this.onSave() + } + } + + render () { + const { t } = this.context + + return ( + <div className="add-to-address-book-modal"> + <div className="add-to-address-book-modal__content"> + <div className="add-to-address-book-modal__content__header"> + {t('addToAddressBook')} + </div> + <div className="add-to-address-book-modal__input-label"> + {t('enterAnAlias')} + </div> + <input + type="text" + className="add-to-address-book-modal__input" + placeholder={t('addToAddressBookModalPlaceholder')} + onChange={this.onChange} + onKeyPress={this.onKeyPress} + value={this.state.alias} + autoFocus + /> + </div> + <div className="add-to-address-book-modal__footer"> + <Button + type="secondary" + onClick={this.props.hideModal} + > + {t('cancel')} + </Button> + <Button + type="primary" + onClick={this.onSave} + disabled={!this.state.alias} + > + {t('save')} + </Button> + </div> + </div> + ) + } +} 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/confirm-delete-network/confirm-delete-network.component.js b/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.component.js new file mode 100644 index 000000000..ea92e340c --- /dev/null +++ b/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.component.js @@ -0,0 +1,43 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Modal, { ModalContent } from '../../modal' + +export default class ConfirmDeleteNetwork extends PureComponent { + static propTypes = { + hideModal: PropTypes.func.isRequired, + delRpcTarget: PropTypes.func.isRequired, + onConfirm: PropTypes.func.isRequired, + target: PropTypes.string.isRequired, + } + + static contextTypes = { + t: PropTypes.func, + } + + handleDelete = () => { + this.props.delRpcTarget(this.props.target) + .then(() => { + this.props.onConfirm() + this.props.hideModal() + }) + } + + render () { + const { t } = this.context + + return ( + <Modal + onSubmit={this.handleDelete} + onCancel={() => this.props.hideModal()} + submitText={t('delete')} + cancelText={t('cancel')} + submitType="danger" + > + <ModalContent + title={t('deleteNetwork')} + description={t('deleteNetworkDescription')} + /> + </Modal> + ) + } +} diff --git a/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.container.js b/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.container.js new file mode 100644 index 000000000..4c9bb279f --- /dev/null +++ b/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.container.js @@ -0,0 +1,16 @@ +import { connect } from 'react-redux' +import { compose } from 'recompose' +import withModalProps from '../../../../helpers/higher-order-components/with-modal-props' +import ConfirmDeleteNetwork from './confirm-delete-network.component' +import { delRpcTarget } from '../../../../store/actions' + +const mapDispatchToProps = dispatch => { + return { + delRpcTarget: (target) => dispatch(delRpcTarget(target)), + } +} + +export default compose( + withModalProps, + connect(null, mapDispatchToProps) +)(ConfirmDeleteNetwork) diff --git a/ui/app/components/app/modals/confirm-delete-network/index.js b/ui/app/components/app/modals/confirm-delete-network/index.js new file mode 100644 index 000000000..de9543eea --- /dev/null +++ b/ui/app/components/app/modals/confirm-delete-network/index.js @@ -0,0 +1 @@ +export { default } from './confirm-delete-network.container' diff --git a/ui/app/components/app/modals/deposit-ether-modal.js b/ui/app/components/app/modals/deposit-ether-modal.js index 20c4d018c..ff2411209 100644 --- a/ui/app/components/app/modals/deposit-ether-modal.js +++ b/ui/app/components/app/modals/deposit-ether-modal.js @@ -87,8 +87,8 @@ DepositEtherModal.prototype.renderRow = function ({ } return h('div', { - className: className || 'deposit-ether-modal__buy-row', - }, [ + className: className || 'deposit-ether-modal__buy-row', + }, [ onBackClick && showBackButton && h('div.deposit-ether-modal__buy-row__back', { onClick: onBackClick, @@ -100,22 +100,22 @@ DepositEtherModal.prototype.renderRow = function ({ h('div.deposit-ether-modal__buy-row__logo-container', [logo]), - h('div.deposit-ether-modal__buy-row__description', [ + h('div.deposit-ether-modal__buy-row__description', [ - !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]), + !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]), - h('div.deposit-ether-modal__buy-row__description__text', [text]), + h('div.deposit-ether-modal__buy-row__description__text', [text]), - ]), + ]), - !hideButton && h('div.deposit-ether-modal__buy-row__button', [ - h(Button, { - type: 'secondary', - className: 'deposit-ether-modal__deposit-button', - large: true, - onClick: onButtonClick, - }, [buttonLabel]), - ]), + !hideButton && h('div.deposit-ether-modal__buy-row__button', [ + h(Button, { + type: 'secondary', + className: 'deposit-ether-modal__deposit-button', + large: true, + onClick: onButtonClick, + }, [buttonLabel]), + ]), ]) } diff --git a/ui/app/components/app/modals/export-private-key-modal.js b/ui/app/components/app/modals/export-private-key-modal.js index c3098a16c..43d7bcd74 100644 --- a/ui/app/components/app/modals/export-private-key-modal.js +++ b/ui/app/components/app/modals/export-private-key-modal.js @@ -86,12 +86,12 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) { return privateKey ? h(ReadOnlyInput, { - wrapperClass: 'private-key-password-display-wrapper', - inputClass: 'private-key-password-display-textarea', - textarea: true, - value: plainKey, - onClick: () => copyToClipboard(plainKey), - }) + wrapperClass: 'private-key-password-display-wrapper', + inputClass: 'private-key-password-display-textarea', + textarea: true, + value: plainKey, + onClick: () => copyToClipboard(plainKey), + }) : h('input.private-key-password-input', { type: 'password', onChange: event => this.setState({ password: event.target.value }), @@ -109,14 +109,14 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, address, h (privateKey ? ( - h(Button, { + h(Button, { type: 'secondary', large: true, className: 'export-private-key__button', onClick: () => hideModal(), }, this.context.t('done')) ) : ( - h(Button, { + h(Button, { type: 'secondary', large: true, className: 'export-private-key__button', @@ -149,29 +149,29 @@ ExportPrivateKeyModal.prototype.render = function () { backButtonAction: () => showAccountDetailModal(), }, [ - h('span.account-name', name), + h('span.account-name', name), - h(ReadOnlyInput, { - wrapperClass: 'ellip-address-wrapper', - inputClass: 'qr-ellip-address ellip-address', - value: checksumAddress(address), - }), + h(ReadOnlyInput, { + wrapperClass: 'ellip-address-wrapper', + inputClass: 'qr-ellip-address ellip-address', + value: checksumAddress(address), + }), - h('div.account-modal-divider'), + h('div.account-modal-divider'), - h('span.modal-body-title', this.context.t('showPrivateKeys')), + h('span.modal-body-title', this.context.t('showPrivateKeys')), - h('div.private-key-password', {}, [ - this.renderPasswordLabel(privateKey), + h('div.private-key-password', {}, [ + this.renderPasswordLabel(privateKey), - this.renderPasswordInput(privateKey), + this.renderPasswordInput(privateKey), - showWarning && warning ? h('span.private-key-password-error', warning) : null, - ]), + showWarning && warning ? h('span.private-key-password-error', warning) : null, + ]), - h('div.private-key-password-warning', this.context.t('privateKeyWarning')), + h('div.private-key-password-warning', this.context.t('privateKeyWarning')), - this.renderButtons(privateKey, address, hideModal), + this.renderButtons(privateKey, address, hideModal), ]) } 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/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js index 0335991fc..1bf7c21b5 100644 --- a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js +++ b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import MetaFoxLogo from '../../../ui/metafox-logo' import PageContainerFooter from '../../../ui/page-container/page-container-footer' export default class MetaMetricsOptInModal extends Component { @@ -20,19 +21,7 @@ export default class MetaMetricsOptInModal extends Component { <div className="metametrics-opt-in metametrics-opt-in-modal"> <div className="metametrics-opt-in__main"> <div className="metametrics-opt-in__content"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <div className="metametrics-opt-in__body-graphic"> <img src="images/metrics-chart.svg" /> </div> diff --git a/ui/app/components/app/modals/modal.js b/ui/app/components/app/modals/modal.js index 394367c46..4044ded8c 100644 --- a/ui/app/components/app/modals/modal.js +++ b/ui/app/components/app/modals/modal.js @@ -29,6 +29,8 @@ import MetaMetricsOptInModal from './metametrics-opt-in-modal' 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)', @@ -166,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, {}, []), @@ -301,6 +332,19 @@ const MODALS = { }, }, + CONFIRM_DELETE_NETWORK: { + contents: h(ConfirmDeleteNetwork), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), @@ -452,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/app/modals/new-account-modal.js b/ui/app/components/app/modals/new-account-modal.js index 27c81a701..4b18c52ba 100644 --- a/ui/app/components/app/modals/new-account-modal.js +++ b/ui/app/components/app/modals/new-account-modal.js @@ -69,7 +69,7 @@ NewAccountModal.propTypes = { showImportPage: PropTypes.func, createAccount: PropTypes.func, numberOfExistingAccounts: PropTypes.number, - t: PropTypes.func, + t: PropTypes.func, } const mapStateToProps = state => { diff --git a/ui/app/components/app/modals/notification-modal.js b/ui/app/components/app/modals/notification-modal.js index b8503ec1a..84d9004b7 100644 --- a/ui/app/components/app/modals/notification-modal.js +++ b/ui/app/components/app/modals/notification-modal.js @@ -62,7 +62,7 @@ NotificationModal.propTypes = { showCancelButton: PropTypes.bool, showConfirmButton: PropTypes.bool, onConfirm: PropTypes.func, - t: PropTypes.func, + t: PropTypes.func, } const mapDispatchToProps = dispatch => { diff --git a/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js index a83ba8f8e..afeaef0da 100644 --- a/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js +++ b/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { BrowserQRCodeReader } from '@zxing/library' -import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars +import 'webrtc-adapter' import Spinner from '../../../ui/spinner' import WebcamUtils from '../../../../../lib/webcam-utils' import PageContainerFooter from '../../../ui/page-container/page-container-footer/page-container-footer.component' @@ -75,23 +75,23 @@ export default class QrScanner extends Component { clearTimeout(this.permissionChecker) this.checkPermisisions() this.codeReader.decodeFromInputVideoDevice(undefined, 'video') - .then(content => { - const result = this.parseContent(content.text) - if (result.type !== 'unknown') { - this.props.qrCodeDetected(result) - this.stopAndClose() - } else { - this.setState({msg: this.context.t('unknownQrCode')}) - } - }) - .catch(err => { - if (err && err.name === 'NotAllowedError') { - this.setState({msg: this.context.t('youNeedToAllowCameraAccess')}) - clearTimeout(this.permissionChecker) - this.needsToReinit = true - this.checkPermisisions() - } - }) + .then(content => { + const result = this.parseContent(content.text) + if (result.type !== 'unknown') { + this.props.qrCodeDetected(result) + this.stopAndClose() + } else { + this.setState({msg: this.context.t('unknownQrCode')}) + } + }) + .catch(err => { + if (err && err.name === 'NotAllowedError') { + this.setState({msg: this.context.t('youNeedToAllowCameraAccess')}) + clearTimeout(this.permissionChecker) + this.needsToReinit = true + this.checkPermisisions() + } + }) }).catch(err => { console.error('[QR-SCANNER]: getVideoInputDevices threw an exception: ', err) }) diff --git a/ui/app/components/app/multiple-notifications/index.js b/ui/app/components/app/multiple-notifications/index.js new file mode 100644 index 000000000..a27a65187 --- /dev/null +++ b/ui/app/components/app/multiple-notifications/index.js @@ -0,0 +1 @@ +export { default } from './multiple-notifications.component' diff --git a/ui/app/components/app/multiple-notifications/index.scss b/ui/app/components/app/multiple-notifications/index.scss new file mode 100644 index 000000000..e8d064bc0 --- /dev/null +++ b/ui/app/components/app/multiple-notifications/index.scss @@ -0,0 +1,78 @@ +.home-notification-wrapper--show-all, +.home-notification-wrapper--show-first { + display: flex; + flex-direction: column; + width: 472px; + position: absolute; + bottom: 0; + right: 0; + margin: 8px; + + @media screen and (max-width: 576px) { + width: 340px; + } + + .home-notification-wrapper__i-container { + position: relative; + width: 100%; + height: 100%; + visibility: none; + + .fa-sm { + display: initial; + position: absolute; + bottom: 14px; + left: 16px; + color: white; + cursor: pointer; + visibility: visible; + + &:hover { + color: #b0d7f2; + font-size: 1.1rem; + } + } + } +} + +.home-notification-wrapper--show-all { + justify-content: flex-end; + margin-bottom: 0; + + .home-notification-wrapper__i-container { + height: 0; + } + + > div { + position: relative; + margin-top: 8px; + } + + .fa-sm { + margin-bottom: 8px; + } + +} + +.home-notification-wrapper--show-first { + > div { + position: absolute; + bottom: 0; + right: 0; + visibility: hidden; + } + + > div:first-of-type { + visibility: visible; + + } + + .fa-sm { + position: relative; + display: initial; + } +} + +.flipped { + transform: rotate(180deg); +} diff --git a/ui/app/components/app/multiple-notifications/multiple-notifications.component.js b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js new file mode 100644 index 000000000..040890e18 --- /dev/null +++ b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js @@ -0,0 +1,44 @@ +import React, { PureComponent } from 'react' +import classnames from 'classnames' +import PropTypes from 'prop-types' + +export default class MultipleNotifications extends PureComponent { + static propTypes = { + notifications: PropTypes.array, + classNames: PropTypes.array, + } + + state = { + showAll: false, + } + + render () { + const { showAll } = this.state + const { notifications, classNames = [] } = this.props + + const notificationsToBeRendered = notifications.filter(notificationConfig => notificationConfig.shouldBeRendered) + + if (notificationsToBeRendered.length === 0) { + return null + } + + return ( + <div + className={classnames(...classNames, { + 'home-notification-wrapper--show-all': showAll, + 'home-notification-wrapper--show-first': !showAll, + })} + > + { notificationsToBeRendered.map(notificationConfig => notificationConfig.component) } + <div + className="home-notification-wrapper__i-container" + onClick={() => this.setState({ showAll: !showAll })} + > + {notificationsToBeRendered.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', { + 'flipped': !showAll, + })} /> : null} + </div> + </div> + ) + } +} diff --git a/ui/app/components/app/network-display/network-display.component.js b/ui/app/components/app/network-display/network-display.component.js index 9ef5341b0..266476267 100644 --- a/ui/app/components/app/network-display/network-display.component.js +++ b/ui/app/components/app/network-display/network-display.component.js @@ -39,12 +39,12 @@ export default class NetworkDisplay extends Component { return networkClass ? <div className={`network-display__icon network-display__icon--${networkClass}`} /> : <div - className="i fa fa-question-circle fa-med" - style={{ - margin: '0 4px', - color: 'rgb(125, 128, 130)', - }} - /> + className="i fa fa-question-circle fa-med" + style={{ + margin: '0 4px', + color: 'rgb(125, 128, 130)', + }} + /> } render () { @@ -62,12 +62,12 @@ export default class NetworkDisplay extends Component { networkClass ? <div className={`network-display__icon network-display__icon--${networkClass}`} /> : <div - className="i fa fa-question-circle fa-med" - style={{ - margin: '0 4px', - color: 'rgb(125, 128, 130)', - }} - /> + className="i fa fa-question-circle fa-med" + style={{ + margin: '0 4px', + color: 'rgb(125, 128, 130)', + }} + /> } <div className="network-display__name"> { type === 'rpc' && nickname ? nickname : this.context.t(type) } diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js index e778700cd..d46906a66 100644 --- a/ui/app/components/app/network.js +++ b/ui/app/components/app/network.js @@ -127,19 +127,19 @@ Network.prototype.render = function () { default: return h('.network-indicator', [ networkNumber === 'loading' - ? h('span.pointer.network-loading-spinner', { - onClick: (event) => this.props.onClick(event), - }, [ - h('img', { - title: context.t('attemptingConnect'), - src: 'images/loading.svg', + ? h('span.pointer.network-loading-spinner', { + onClick: (event) => this.props.onClick(event), + }, [ + h('img', { + title: context.t('attemptingConnect'), + src: 'images/loading.svg', + }), + ]) + : h('i.fa.fa-question-circle.fa-lg', { + style: { + color: 'rgb(125, 128, 130)', + }, }), - ]) - : h('i.fa.fa-question-circle.fa-lg', { - style: { - color: 'rgb(125, 128, 130)', - }, - }), h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')), h('.network-indicator__down-arrow'), diff --git a/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js b/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js index 0eb1d616a..7eda7f2b7 100644 --- a/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js +++ b/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js @@ -5,7 +5,7 @@ import Identicon from '../../../ui/identicon' export default class ProviderPageContainerContent extends PureComponent { static propTypes = { origin: PropTypes.string.isRequired, - selectedIdentity: PropTypes.string.isRequired, + selectedIdentity: PropTypes.object.isRequired, siteImage: PropTypes.string, siteTitle: PropTypes.string.isRequired, } diff --git a/ui/app/components/app/sidebars/sidebar.component.js b/ui/app/components/app/sidebars/sidebar.component.js index b9e0f9e81..e532ba7e5 100644 --- a/ui/app/components/app/sidebars/sidebar.component.js +++ b/ui/app/components/app/sidebars/sidebar.component.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import ReactCSSTransitionGroup from 'react-addons-css-transition-group' +import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' import WalletView from '../wallet-view' import { WALLET_VIEW_SIDEBAR } from './sidebar.constants' import CustomizeGas from '../gas-customization/gas-modal-page-container/' @@ -26,7 +26,7 @@ export default class Sidebar extends Component { onOverlayClose && onOverlayClose() this.props.hideSidebar() } - } /> + } /> } renderSidebarContent () { diff --git a/ui/app/components/app/sidebars/tests/sidebars-component.test.js b/ui/app/components/app/sidebars/tests/sidebars-component.test.js index cee22aca8..e2daea9b6 100644 --- a/ui/app/components/app/sidebars/tests/sidebars-component.test.js +++ b/ui/app/components/app/sidebars/tests/sidebars-component.test.js @@ -2,7 +2,7 @@ import React from 'react' import assert from 'assert' import { shallow } from 'enzyme' import sinon from 'sinon' -import ReactCSSTransitionGroup from 'react-addons-css-transition-group' +import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' import Sidebar from '../sidebar.component.js' import WalletView from '../../wallet-view' diff --git a/ui/app/components/app/signature-request.js b/ui/app/components/app/signature-request.js index fa237f1d1..9c0f53f57 100644 --- a/ui/app/components/app/signature-request.js +++ b/ui/app/components/app/signature-request.js @@ -12,7 +12,7 @@ const { compose } = require('recompose') const { withRouter } = require('react-router-dom') const { ObjectInspector } = require('react-inspector') -import AccountDropdownMini from '../ui/account-dropdown-mini' +import AccountListItem from '../../pages/send/account-list-item/account-list-item.component' const actions = require('../../store/actions') const { conversionUtil } = require('../../helpers/utils/conversion-util') @@ -21,7 +21,6 @@ const { getSelectedAccount, getCurrentAccountWithSendEtherInfo, getSelectedAddress, - accountsWithSendEtherInfoSelector, conversionRateSelector, } = require('../../selectors/selectors.js') @@ -37,7 +36,6 @@ function mapStateToProps (state) { selectedAddress: getSelectedAddress(state), requester: null, requesterAddress: null, - accounts: accountsWithSendEtherInfoSelector(state), conversionRate: conversionRateSelector(state), } } @@ -76,9 +74,9 @@ function mergeProps (stateProps, dispatchProps, ownProps) { } return { + ...ownProps, ...stateProps, ...dispatchProps, - ...ownProps, txData, cancel, sign, @@ -137,23 +135,19 @@ SignatureRequest.prototype.renderHeader = function () { ]) } -SignatureRequest.prototype.renderAccountDropdown = function () { +SignatureRequest.prototype.renderAccount = function () { const { selectedAccount } = this.state - const { - accounts, - } = this.props - return h('div.request-signature__account', [ h('div.request-signature__account-text', [this.context.t('account') + ':']), - h(AccountDropdownMini, { - selectedAccount, - accounts, - disabled: true, - }), - + h('div.request-signature__account-item', [ + h(AccountListItem, { + account: selectedAccount, + displayBalance: false, + }), + ]), ]) } @@ -180,7 +174,7 @@ SignatureRequest.prototype.renderBalance = function () { SignatureRequest.prototype.renderAccountInfo = function () { return h('div.request-signature__account-info', [ - this.renderAccountDropdown(), + this.renderAccount(), this.renderRequestIcon(), @@ -257,7 +251,7 @@ SignatureRequest.prototype.renderBody = function () { url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751', }) }, - }, this.context.t('learnMore'))] + }, this.context.t('learnMore'))] } return h('div.request-signature__body', {}, [ diff --git a/ui/app/components/app/token-list.js b/ui/app/components/app/token-list.js index 2188e7020..000ca6b3f 100644 --- a/ui/app/components/app/token-list.js +++ b/ui/app/components/app/token-list.js @@ -67,8 +67,8 @@ TokenList.prototype.render = function () { }, onClick: () => { global.platform.openWindow({ - url: `https://ethplorer.io/address/${userAddress}`, - }) + url: `https://ethplorer.io/address/${userAddress}`, + }) }, }, this.context.t('here')), ]) @@ -125,13 +125,13 @@ TokenList.prototype.createFreshTokenTracker = function () { this.tracker.on('error', this.showError) this.tracker.updateBalances() - .then(() => { - this.updateBalances(this.tracker.serialize()) - }) - .catch((reason) => { - log.error(`Problem updating balances`, reason) - this.setState({ isLoading: false }) - }) + .then(() => { + this.updateBalances(this.tracker.serialize()) + }) + .catch((reason) => { + log.error(`Problem updating balances`, reason) + this.setState({ isLoading: false }) + }) } TokenList.prototype.componentDidUpdate = function (prevProps) { diff --git a/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js index 871716002..6124325be 100644 --- a/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js +++ b/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js @@ -40,15 +40,15 @@ export default class TransactionActivityLogIcon extends PureComponent { return ( <div className={classnames('transaction-activity-log-icon', className)}> - { - imagePath && ( - <img - src={imagePath} - height={9} - width={9} - /> - ) - } + { + imagePath && ( + <img + src={imagePath} + height={9} + width={9} + /> + ) + } </div> ) } diff --git a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js index c4e118b01..583980d26 100644 --- a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js +++ b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js @@ -78,4 +78,73 @@ describe('TransactionListItemDetails Component', () => { assert.ok(wrapper.hasClass('transaction-list-item-details')) assert.equal(wrapper.find(Button).length, 3) }) + + it('should disable the Copy Tx ID and View In Etherscan buttons when tx hash is missing', () => { + const transaction = { + history: [], + id: 1, + status: 'confirmed', + txParams: { + from: '0x1', + gas: '0x5208', + gasPrice: '0x3b9aca00', + nonce: '0xa4', + to: '0x2', + value: '0x2386f26fc10000', + }, + } + + const transactionGroup = { + transactions: [transaction], + primaryTransaction: transaction, + initialTransaction: transaction, + } + + const wrapper = shallow( + <TransactionListItemDetails + transactionGroup={transactionGroup} + />, + { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } } + ) + + assert.ok(wrapper.hasClass('transaction-list-item-details')) + const buttons = wrapper.find(Button) + assert.strictEqual(buttons.at(0).prop('disabled'), true) + assert.strictEqual(buttons.at(1).prop('disabled'), true) + }) + + it('should render functional Copy Tx ID and View In Etherscan buttons when tx hash exists', () => { + const transaction = { + history: [], + id: 1, + status: 'confirmed', + hash: '0xaa', + txParams: { + from: '0x1', + gas: '0x5208', + gasPrice: '0x3b9aca00', + nonce: '0xa4', + to: '0x2', + value: '0x2386f26fc10000', + }, + } + + const transactionGroup = { + transactions: [transaction], + primaryTransaction: transaction, + initialTransaction: transaction, + } + + const wrapper = shallow( + <TransactionListItemDetails + transactionGroup={transactionGroup} + />, + { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } } + ) + + assert.ok(wrapper.hasClass('transaction-list-item-details')) + const buttons = wrapper.find(Button) + assert.strictEqual(buttons.at(0).prop('disabled'), false) + assert.strictEqual(buttons.at(1).prop('disabled'), false) + }) }) diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js index 72ca784e2..d8dd965fc 100644 --- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js +++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js @@ -128,7 +128,7 @@ export default class TransactionListItemDetails extends PureComponent { rpcPrefs: { blockExplorerUrl } = {}, } = this.props const { primaryTransaction: transaction } = transactionGroup - const { txParams: { to, from } = {} } = transaction + const { hash, txParams: { to, from } = {} } = transaction return ( <div className="transaction-list-item-details"> @@ -152,6 +152,7 @@ export default class TransactionListItemDetails extends PureComponent { type="raised" onClick={this.handleCopyTxId} className="transaction-list-item-details__header-button" + disabled={!hash} > <img className="transaction-list-item-details__header-button__copy-icon" @@ -164,7 +165,8 @@ export default class TransactionListItemDetails extends PureComponent { type="raised" onClick={this.handleEtherscanClick} className="transaction-list-item-details__header-button" - > + disabled={!hash} + > <img src="/images/arrow-popout.svg" /> </Button> </Tooltip> diff --git a/ui/app/components/app/transaction-list/transaction-list.component.js b/ui/app/components/app/transaction-list/transaction-list.component.js index fc5488884..157e7200b 100644 --- a/ui/app/components/app/transaction-list/transaction-list.component.js +++ b/ui/app/components/app/transaction-list/transaction-list.component.js @@ -10,11 +10,13 @@ export default class TransactionList extends PureComponent { } static defaultProps = { + children: null, pendingTransactions: [], completedTransactions: [], } static propTypes = { + children: PropTypes.node, pendingTransactions: PropTypes.array, completedTransactions: PropTypes.array, selectedToken: PropTypes.object, @@ -39,7 +41,7 @@ export default class TransactionList extends PureComponent { const { transactions = [], hasRetried } = transactionGroup const [earliestTransaction = {}] = transactions const { submittedTime } = earliestTransaction - return Date.now() - submittedTime > 30000 && isEarliestNonce && !hasRetried + return Date.now() - submittedTime > 5000 && isEarliestNonce && !hasRetried } shouldShowCancel (transactionGroup) { @@ -75,8 +77,8 @@ export default class TransactionList extends PureComponent { { completedTransactions.length > 0 ? completedTransactions.map((transactionGroup, index) => ( - this.renderTransaction(transactionGroup, index) - )) + this.renderTransaction(transactionGroup, index) + )) : this.renderEmpty() } </div> @@ -120,6 +122,7 @@ export default class TransactionList extends PureComponent { return ( <div className="transaction-list"> { this.renderTransactions() } + { this.props.children } </div> ) } diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss index 024cbf2a1..99884d28c 100644 --- a/ui/app/components/app/transaction-status/index.scss +++ b/ui/app/components/app/transaction-status/index.scss @@ -43,4 +43,10 @@ border: 1px solid $monzo; } } + + &__pending-spinner { + height: 16px; + width: 16px; + margin-right: 6px; + } } diff --git a/ui/app/components/app/transaction-status/transaction-status.component.js b/ui/app/components/app/transaction-status/transaction-status.component.js index d3a239539..a97b79bde 100644 --- a/ui/app/components/app/transaction-status/transaction-status.component.js +++ b/ui/app/components/app/transaction-status/transaction-status.component.js @@ -2,6 +2,8 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import Tooltip from '../../ui/tooltip-v2' +import Spinner from '../../ui/spinner' + import { UNAPPROVED_STATUS, REJECTED_STATUS, @@ -51,6 +53,7 @@ export default class TransactionStatus extends PureComponent { return ( <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}> + { statusToTextHash[statusKey] === 'pending' ? <Spinner className="transaction-status__pending-spinner" /> : null } <Tooltip position="top" title={title} diff --git a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js index 3f6abbb00..feb701dbe 100644 --- a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js +++ b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js @@ -43,38 +43,38 @@ export default class TransactionViewBalance extends PureComponent { /> </div> ) : ( - <Tooltip position="top" title={this.context.t('balanceOutdated')} disabled={!balanceIsCached}> - <div className="transaction-view-balance__balance"> - <div className="transaction-view-balance__primary-container"> - <UserPreferencedCurrencyDisplay - className={classnames('transaction-view-balance__primary-balance', { - 'transaction-view-balance__cached-balance': balanceIsCached, - })} - value={balance} - type={PRIMARY} - ethNumberOfDecimals={4} - hideTitle={true} - /> - { - balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null - } - </div> - { - showFiat && ( - <UserPreferencedCurrencyDisplay - className={classnames({ - 'transaction-view-balance__cached-secondary-balance': balanceIsCached, - 'transaction-view-balance__secondary-balance': !balanceIsCached, - })} - value={balance} - type={SECONDARY} - ethNumberOfDecimals={4} - hideTitle={true} - /> - ) - } + <Tooltip position="top" title={this.context.t('balanceOutdated')} disabled={!balanceIsCached}> + <div className="transaction-view-balance__balance"> + <div className="transaction-view-balance__primary-container"> + <UserPreferencedCurrencyDisplay + className={classnames('transaction-view-balance__primary-balance', { + 'transaction-view-balance__cached-balance': balanceIsCached, + })} + value={balance} + type={PRIMARY} + ethNumberOfDecimals={4} + hideTitle={true} + /> + { + balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null + } </div> - </Tooltip> + { + showFiat && ( + <UserPreferencedCurrencyDisplay + className={classnames({ + 'transaction-view-balance__cached-secondary-balance': balanceIsCached, + 'transaction-view-balance__secondary-balance': !balanceIsCached, + })} + value={balance} + type={SECONDARY} + ethNumberOfDecimals={4} + hideTitle={true} + /> + ) + } + </div> + </Tooltip> ) } diff --git a/ui/app/components/app/transaction-view/transaction-view.component.js b/ui/app/components/app/transaction-view/transaction-view.component.js index 7014ca173..fb2c2145c 100644 --- a/ui/app/components/app/transaction-view/transaction-view.component.js +++ b/ui/app/components/app/transaction-view/transaction-view.component.js @@ -10,6 +10,14 @@ export default class TransactionView extends PureComponent { t: PropTypes.func, } + static propTypes = { + children: PropTypes.node, + } + + static defaultProps = { + children: null, + } + render () { return ( <div className="transaction-view"> @@ -20,7 +28,9 @@ export default class TransactionView extends PureComponent { <div className="transaction-view__balance-wrapper"> <TransactionViewBalance /> </div> - <TransactionList /> + <TransactionList> + { this.props.children } + </TransactionList> </div> ) } diff --git a/ui/app/components/app/ui-migration-annoucement/index.js b/ui/app/components/app/ui-migration-annoucement/index.js deleted file mode 100644 index c6c8cc619..000000000 --- a/ui/app/components/app/ui-migration-annoucement/index.js +++ /dev/null @@ -1 +0,0 @@ -export {default} from './ui-migration-announcement.container' diff --git a/ui/app/components/app/ui-migration-annoucement/index.scss b/ui/app/components/app/ui-migration-annoucement/index.scss deleted file mode 100644 index 6138a3079..000000000 --- a/ui/app/components/app/ui-migration-annoucement/index.scss +++ /dev/null @@ -1,22 +0,0 @@ -.ui-migration-announcement { - position: absolute; - z-index: 9999; - width: 100vw; - height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - background: $white; - - p { - box-sizing: border-box; - padding: 1em; - font-size: 12pt; - } - - p:last-of-type { - cursor: pointer; - text-decoration: underline; - font-weight: bold; - } -} diff --git a/ui/app/components/app/ui-migration-annoucement/ui-migration-annoucement.component.js b/ui/app/components/app/ui-migration-annoucement/ui-migration-annoucement.component.js deleted file mode 100644 index 7a4124972..000000000 --- a/ui/app/components/app/ui-migration-annoucement/ui-migration-annoucement.component.js +++ /dev/null @@ -1,33 +0,0 @@ -import PropTypes from 'prop-types' -import React, {PureComponent} from 'react' - -export default class UiMigrationAnnouncement extends PureComponent { - static contextTypes = { - t: PropTypes.func.isRequired, - } - - static defaultProps = { - shouldShowAnnouncement: true, - }; - - static propTypes = { - onClose: PropTypes.func.isRequired, - shouldShowAnnouncement: PropTypes.bool, - } - - render () { - const { t } = this.context - const { onClose, shouldShowAnnouncement } = this.props - - if (!shouldShowAnnouncement) { - return null - } - - return ( - <div className="ui-migration-announcement"> - <p>{t('uiMigrationAnnouncement')}</p> - <p onClick={onClose}>{t('close')}</p> - </div> - ) - } -} diff --git a/ui/app/components/app/ui-migration-annoucement/ui-migration-announcement.container.js b/ui/app/components/app/ui-migration-annoucement/ui-migration-announcement.container.js deleted file mode 100644 index 55efd5a44..000000000 --- a/ui/app/components/app/ui-migration-annoucement/ui-migration-announcement.container.js +++ /dev/null @@ -1,21 +0,0 @@ -import { connect } from 'react-redux' -import UiMigrationAnnouncement from './ui-migration-annoucement.component' -import { setCompletedUiMigration } from '../../../store/actions' - -const mapStateToProps = (state) => { - const shouldShowAnnouncement = !state.metamask.completedUiMigration - - return { - shouldShowAnnouncement, - } -} - -const mapDispatchToProps = dispatch => { - return { - onClose () { - dispatch(setCompletedUiMigration()) - }, - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(UiMigrationAnnouncement) diff --git a/ui/app/components/app/wallet-view.js b/ui/app/components/app/wallet-view.js index b8bae5421..55aeec333 100644 --- a/ui/app/components/app/wallet-view.js +++ b/ui/app/components/app/wallet-view.js @@ -5,12 +5,8 @@ const h = require('react-hyperscript') const { withRouter } = require('react-router-dom') const { compose } = require('recompose') const inherits = require('util').inherits -const classnames = require('classnames') const { checksumAddress } = require('../../helpers/utils/util') -import Identicon from '../ui/identicon' // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns -const Tooltip = require('../ui/tooltip-v2.js').default -const copyToClipboard = require('copy-to-clipboard') const actions = require('../../store/actions') import BalanceComponent from '../ui/balance' const TokenList = require('./token-list') @@ -18,6 +14,7 @@ const selectors = require('../../selectors/selectors') const { ADD_TOKEN_ROUTE } = require('../../helpers/constants/routes') import AddTokenButton from './add-token-button' +import AccountDetails from './account-details' module.exports = compose( withRouter, @@ -52,9 +49,6 @@ function mapDispatchToProps (dispatch) { showSendPage: () => dispatch(actions.showSendPage()), hideSidebar: () => dispatch(actions.hideSidebar()), unsetSelectedToken: () => dispatch(actions.setSelectedToken()), - showAccountDetailModal: () => { - dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) - }, showAddTokenPage: () => dispatch(actions.showAddTokenPage()), } } @@ -62,10 +56,6 @@ function mapDispatchToProps (dispatch) { inherits(WalletView, Component) function WalletView () { Component.call(this) - this.state = { - hasCopied: false, - copyToClipboardPressed: false, - } } WalletView.prototype.renderWalletBalance = function () { @@ -130,8 +120,6 @@ WalletView.prototype.render = function () { responsiveDisplayClassname, selectedAddress, keyrings, - showAccountDetailModal, - hideSidebar, identities, network, } = this.props @@ -165,67 +153,11 @@ WalletView.prototype.render = function () { className: responsiveDisplayClassname, }, [ - // TODO: Separate component: wallet account details - h('div.flex-column.wallet-view-account-details', { - style: {}, - }, [ - h('div.wallet-view__sidebar-close', { - onClick: hideSidebar, - }), - - h('div.wallet-view__keyring-label.allcaps', label), - - h('div.flex-column.flex-center.wallet-view__name-container', { - style: { margin: '0 auto' }, - onClick: showAccountDetailModal, - }, [ - h(Identicon, { - diameter: 54, - address: checksummedAddress, - }), - - h('span.account-name', { - style: {}, - }, [ - identities[selectedAddress].name, - ]), - - h('button.btn-secondary.wallet-view__details-button', this.context.t('details')), - ]), - ]), - - h(Tooltip, { - position: 'bottom', - title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'), - wrapperClassName: 'wallet-view__tooltip', - }, [ - h('button.wallet-view__address', { - className: classnames({ - 'wallet-view__address__pressed': this.state.copyToClipboardPressed, - }), - onClick: () => { - copyToClipboard(checksummedAddress) - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Copied Address', - }, - }) - this.setState({ hasCopied: true }) - setTimeout(() => this.setState({ hasCopied: false }), 3000) - }, - onMouseDown: () => { - this.setState({ copyToClipboardPressed: true }) - }, - onMouseUp: () => { - this.setState({ copyToClipboardPressed: false }) - }, - }, [ - `${checksummedAddress.slice(0, 6)}...${checksummedAddress.slice(-4)}`, - h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), - ]), - ]), + h(AccountDetails, { + label, + checksummedAddress, + name: identities[selectedAddress].name, + }), this.renderWalletBalance(), diff --git a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js deleted file mode 100644 index d9627e31b..000000000 --- a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js +++ /dev/null @@ -1,84 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import AccountListItem from '../../../pages/send/account-list-item/account-list-item.component' - -export default class AccountDropdownMini extends PureComponent { - static propTypes = { - accounts: PropTypes.array.isRequired, - closeDropdown: PropTypes.func, - disabled: PropTypes.bool, - dropdownOpen: PropTypes.bool, - onSelect: PropTypes.func, - openDropdown: PropTypes.func, - selectedAccount: PropTypes.object.isRequired, - } - - static defaultProps = { - closeDropdown: () => {}, - disabled: false, - dropdownOpen: false, - onSelect: () => {}, - openDropdown: () => {}, - } - - getListItemIcon (currentAccount, selectedAccount) { - return currentAccount.address === selectedAccount.address && ( - <i - className="fa fa-check fa-lg" - style={{ color: '#02c9b1' }} - /> - ) - } - - renderDropdown () { - const { accounts, selectedAccount, closeDropdown, onSelect } = this.props - - return ( - <div> - <div - className="account-dropdown-mini__close-area" - onClick={closeDropdown} - /> - <div className="account-dropdown-mini__list"> - { - accounts.map(account => ( - <AccountListItem - key={account.address} - account={account} - displayBalance={false} - displayAddress={false} - handleClick={() => { - onSelect(account) - closeDropdown() - }} - icon={this.getListItemIcon(account, selectedAccount)} - /> - )) - } - </div> - </div> - ) - } - - render () { - const { disabled, selectedAccount, openDropdown, dropdownOpen } = this.props - - return ( - <div className="account-dropdown-mini"> - <AccountListItem - account={selectedAccount} - handleClick={() => !disabled && openDropdown()} - displayBalance={false} - displayAddress={false} - icon={ - !disabled && <i - className="fa fa-caret-down fa-lg" - style={{ color: '#dedede' }} - /> - } - /> - { !disabled && dropdownOpen && this.renderDropdown() } - </div> - ) - } -} diff --git a/ui/app/components/ui/account-dropdown-mini/index.js b/ui/app/components/ui/account-dropdown-mini/index.js deleted file mode 100644 index cb0839e72..000000000 --- a/ui/app/components/ui/account-dropdown-mini/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './account-dropdown-mini.component' diff --git a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js deleted file mode 100644 index 9691f38aa..000000000 --- a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js +++ /dev/null @@ -1,107 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import AccountDropdownMini from '../account-dropdown-mini.component' -import AccountListItem from '../../../../pages/send/account-list-item/account-list-item.component' - -describe('AccountDropdownMini', () => { - it('should render an account with an icon', () => { - const accounts = [ - { - address: '0x1', - name: 'account1', - balance: '0x1', - }, - { - address: '0x2', - name: 'account2', - balance: '0x2', - }, - { - address: '0x3', - name: 'account3', - balance: '0x3', - }, - ] - - const wrapper = shallow( - <AccountDropdownMini - selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }} - accounts={accounts} - /> - ) - - assert.ok(wrapper) - assert.equal(wrapper.find(AccountListItem).length, 1) - const accountListItemProps = wrapper.find(AccountListItem).at(0).props() - assert.equal(accountListItemProps.account.address, '0x1') - const iconProps = accountListItemProps.icon.props - assert.equal(iconProps.className, 'fa fa-caret-down fa-lg') - }) - - it('should render a list of accounts', () => { - const accounts = [ - { - address: '0x1', - name: 'account1', - balance: '0x1', - }, - { - address: '0x2', - name: 'account2', - balance: '0x2', - }, - { - address: '0x3', - name: 'account3', - balance: '0x3', - }, - ] - - const wrapper = shallow( - <AccountDropdownMini - selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }} - accounts={accounts} - dropdownOpen={true} - /> - ) - - assert.ok(wrapper) - assert.equal(wrapper.find(AccountListItem).length, 4) - }) - - it('should render a single account when disabled', () => { - const accounts = [ - { - address: '0x1', - name: 'account1', - balance: '0x1', - }, - { - address: '0x2', - name: 'account2', - balance: '0x2', - }, - { - address: '0x3', - name: 'account3', - balance: '0x3', - }, - ] - - const wrapper = shallow( - <AccountDropdownMini - selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }} - accounts={accounts} - dropdownOpen={false} - disabled={true} - /> - ) - - assert.ok(wrapper) - assert.equal(wrapper.find(AccountListItem).length, 1) - const accountListItemProps = wrapper.find(AccountListItem).at(0).props() - assert.equal(accountListItemProps.account.address, '0x1') - assert.equal(accountListItemProps.icon, false) - }) -}) diff --git a/ui/app/components/ui/alert/index.js b/ui/app/components/ui/alert/index.js index b1229f502..da2ca4b66 100644 --- a/ui/app/components/ui/alert/index.js +++ b/ui/app/components/ui/alert/index.js @@ -4,59 +4,59 @@ const h = require('react-hyperscript') class Alert extends Component { - constructor (props) { - super(props) - - this.state = { - visble: false, - msg: false, - className: '', - } - } - - componentWillReceiveProps (nextProps) { - if (!this.props.visible && nextProps.visible) { - this.animateIn(nextProps) - } else if (this.props.visible && !nextProps.visible) { - this.animateOut() - } - } + constructor (props) { + super(props) - animateIn (props) { - this.setState({ - msg: props.msg, - visible: true, - className: '.visible', - }) + this.state = { + visble: false, + msg: false, + className: '', } + } - animateOut () { - this.setState({ - msg: null, - className: '.hidden', - }) - - setTimeout(_ => { - this.setState({visible: false}) - }, 500) - + componentWillReceiveProps (nextProps) { + if (!this.props.visible && nextProps.visible) { + this.animateIn(nextProps) + } else if (this.props.visible && !nextProps.visible) { + this.animateOut() } - - render () { - if (this.state.visible) { - return ( - h(`div.global-alert${this.state.className}`, {}, - h('a.msg', {}, this.state.msg) - ) - ) - } - return null + } + + animateIn (props) { + this.setState({ + msg: props.msg, + visible: true, + className: '.visible', + }) + } + + animateOut () { + this.setState({ + msg: null, + className: '.hidden', + }) + + setTimeout(_ => { + this.setState({visible: false}) + }, 500) + + } + + render () { + if (this.state.visible) { + return ( + h(`div.global-alert${this.state.className}`, {}, + h('a.msg', {}, this.state.msg) + ) + ) } + return null + } } Alert.propTypes = { - visible: PropTypes.bool.isRequired, - msg: PropTypes.string, + visible: PropTypes.bool.isRequired, + msg: PropTypes.string, } module.exports = Alert diff --git a/ui/app/components/ui/button-group/tests/button-group-component.test.js b/ui/app/components/ui/button-group/tests/button-group-component.test.js index 0bece90d6..f2e512445 100644 --- a/ui/app/components/ui/button-group/tests/button-group-component.test.js +++ b/ui/app/components/ui/button-group/tests/button-group-component.test.js @@ -59,40 +59,40 @@ describe('ButtonGroup Component', function () { describe('renderButtons', () => { it('should render a button for each child', () => { - const childButtons = wrapper.find('.button-group__button') - assert.equal(childButtons.length, 3) + const childButtons = wrapper.find('.button-group__button') + assert.equal(childButtons.length, 3) }) it('should render the correct button with an active state', () => { - const childButtons = wrapper.find('.button-group__button') - const activeChildButton = wrapper.find('.button-group__button--active') - assert.deepEqual(childButtons.get(1), activeChildButton.get(0)) + const childButtons = wrapper.find('.button-group__button') + const activeChildButton = wrapper.find('.button-group__button--active') + assert.deepEqual(childButtons.get(1), activeChildButton.get(0)) }) it('should call handleButtonClick and the respective button\'s onClick method when a button is clicked', () => { - assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 0) - assert.equal(childButtonSpies.onClick.callCount, 0) - const childButtons = wrapper.find('.button-group__button') - childButtons.at(0).props().onClick() - childButtons.at(1).props().onClick() - childButtons.at(2).props().onClick() - assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 3) - assert.equal(childButtonSpies.onClick.callCount, 3) + assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 0) + assert.equal(childButtonSpies.onClick.callCount, 0) + const childButtons = wrapper.find('.button-group__button') + childButtons.at(0).props().onClick() + childButtons.at(1).props().onClick() + childButtons.at(2).props().onClick() + assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 3) + assert.equal(childButtonSpies.onClick.callCount, 3) }) it('should render all child buttons as disabled if props.disabled is true', () => { - const childButtons = wrapper.find('.button-group__button') - childButtons.forEach(button => { - assert.equal(button.props().disabled, undefined) - }) - wrapper.setProps({ disabled: true }) - const disabledChildButtons = wrapper.find('[disabled=true]') - assert.equal(disabledChildButtons.length, 3) + const childButtons = wrapper.find('.button-group__button') + childButtons.forEach(button => { + assert.equal(button.props().disabled, undefined) + }) + wrapper.setProps({ disabled: true }) + const disabledChildButtons = wrapper.find('[disabled=true]') + assert.equal(disabledChildButtons.length, 3) }) it('should render the children of the button', () => { - const mockClass = wrapper.find('.mockClass') - assert.equal(mockClass.length, 1) + const mockClass = wrapper.find('.mockClass') + assert.equal(mockClass.length, 1) }) }) @@ -103,9 +103,9 @@ describe('ButtonGroup Component', function () { }) it('should call renderButtons when rendering', () => { - assert.equal(ButtonGroup.prototype.renderButtons.callCount, 1) - wrapper.instance().render() - assert.equal(ButtonGroup.prototype.renderButtons.callCount, 2) + assert.equal(ButtonGroup.prototype.renderButtons.callCount, 1) + wrapper.instance().render() + assert.equal(ButtonGroup.prototype.renderButtons.callCount, 2) }) }) }) diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss index f1366cffe..f6388fa47 100644 --- a/ui/app/components/ui/button/buttons.scss +++ b/ui/app/components/ui/button/buttons.scss @@ -22,7 +22,6 @@ $hover-orange: #FFD3B5; box-sizing: border-box; border-radius: 6px; width: 100%; - outline: none; transition: border-color .3s ease, background-color .3s ease; &--disabled, diff --git a/ui/app/components/ui/currency-input/currency-input.component.js b/ui/app/components/ui/currency-input/currency-input.component.js index 1876c9591..f7db2b829 100644 --- a/ui/app/components/ui/currency-input/currency-input.component.js +++ b/ui/app/components/ui/currency-input/currency-input.component.js @@ -141,22 +141,22 @@ export default class CurrencyInput extends PureComponent { const { decimalValue } = this.state return ( - <UnitInput - {...restProps} - suffix={this.shouldUseFiat() ? fiatSuffix : nativeSuffix} - onChange={this.handleChange} - onBlur={this.handleBlur} - value={decimalValue} - maxModeOn={maxModeOn} - actionComponent={( - <div - className="currency-input__swap-component" - onClick={this.swap} - /> - )} - > - { this.renderConversionComponent() } - </UnitInput> + <UnitInput + {...restProps} + suffix={this.shouldUseFiat() ? fiatSuffix : nativeSuffix} + onChange={this.handleChange} + onBlur={this.handleBlur} + value={decimalValue} + maxModeOn={maxModeOn} + actionComponent={( + <div + className="currency-input__swap-component" + onClick={this.swap} + /> + )} + > + { this.renderConversionComponent() } + </UnitInput> ) } } 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 ( + <div + className={c('dialog', className, { + 'dialog--message': type === 'message', + 'dialog--error': type === 'error', + 'dialog--warning': type === 'warning', + })} + onClick={onClick} + > + { children } + </div> + ) +} + +Dialog.propTypes = { + className: PropTypes.string, + children: PropTypes.node, + type: PropTypes.oneOf(['message', 'error', 'warning']), + onClick: PropTypes.func, +} diff --git a/ui/app/components/ui/identicon/identicon.component.js b/ui/app/components/ui/identicon/identicon.component.js index 88521247c..5582c7d12 100644 --- a/ui/app/components/ui/identicon/identicon.component.js +++ b/ui/app/components/ui/identicon/identicon.component.js @@ -16,6 +16,7 @@ const getStyles = diameter => ( export default class Identicon extends PureComponent { static propTypes = { + addBorder: PropTypes.bool, address: PropTypes.string, className: PropTypes.string, diameter: PropTypes.number, @@ -70,7 +71,7 @@ export default class Identicon extends PureComponent { } render () { - const { className, address, image, diameter, useBlockie } = this.props + const { className, address, image, diameter, useBlockie, addBorder } = this.props if (image) { return this.renderImage() @@ -83,9 +84,11 @@ export default class Identicon extends PureComponent { return this.renderJazzicon() } - return useBlockie - ? this.renderBlockie() - : this.renderJazzicon() + return ( + <div className={classnames({ 'identicon__address-wrapper': addBorder })}> + { useBlockie ? this.renderBlockie() : this.renderJazzicon() } + </div> + ) } return ( diff --git a/ui/app/components/ui/identicon/index.scss b/ui/app/components/ui/identicon/index.scss index 657afc48f..4c8213f01 100644 --- a/ui/app/components/ui/identicon/index.scss +++ b/ui/app/components/ui/identicon/index.scss @@ -4,4 +4,17 @@ align-items: center; justify-content: center; overflow: hidden; + + &__address-wrapper { + height: 40px; + width: 40px; + border-radius: 18px; + display: flex; + justify-content: center; + align-items: center; + border-style: solid; + border-radius: 50%; + border-width: 2px; + border-color: $curious-blue; + } } diff --git a/ui/app/components/ui/metafox-logo/index.js b/ui/app/components/ui/metafox-logo/index.js new file mode 100644 index 000000000..0aeaed743 --- /dev/null +++ b/ui/app/components/ui/metafox-logo/index.js @@ -0,0 +1 @@ +export { default } from './metafox-logo.component' diff --git a/ui/app/components/ui/metafox-logo/metafox-logo.component.js b/ui/app/components/ui/metafox-logo/metafox-logo.component.js new file mode 100644 index 000000000..041e354ef --- /dev/null +++ b/ui/app/components/ui/metafox-logo/metafox-logo.component.js @@ -0,0 +1,31 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' + +export default class MetaFoxLogo extends PureComponent { + static propTypes = { + onClick: PropTypes.func, + unsetIconHeight: PropTypes.bool, + } + + render () { + const iconProps = this.props.unsetIconHeight ? {} : { height: 42, width: 42 } + + return ( + <div + onClick={this.props.onClick} + className="app-header__logo-container" + > + <img + height={30} + src="/images/logo/metamask-logo-horizontal.svg" + className="app-header__metafox-logo app-header__metafox-logo--horizontal" + /> + <img + {...iconProps} + src="/images/logo/metamask-fox.svg" + className="app-header__metafox-logo app-header__metafox-logo--icon" + /> + </div> + ) + } +} diff --git a/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js b/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js new file mode 100644 index 000000000..c794a004f --- /dev/null +++ b/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js @@ -0,0 +1,25 @@ +import React from 'react' +import assert from 'assert' +import { mount } from 'enzyme' +import MetaFoxLogo from '../' + +describe('MetaFoxLogo', () => { + + it('sets icon height and width to 42 by default', () => { + const wrapper = mount( + <MetaFoxLogo /> + ) + + assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), 42) + assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('height'), 42) + }) + + it('does not set icon height and width when unsetIconHeight is true', () => { + const wrapper = mount( + <MetaFoxLogo unsetIconHeight={true} /> + ) + + assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), null) + assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('height'), null) + }) +}) 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 ( - <div className={ - classnames( - 'page-container__header', - { 'page-container__header--no-padding-bottom': Boolean(tabs) } - ) - }> + <div + className={c('page-container__header', className, { + 'page-container__header--no-padding-bottom': Boolean(tabs), + })} + > { this.renderHeaderRow() } diff --git a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js index 57b595d48..a98a94101 100644 --- a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js +++ b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js @@ -64,10 +64,10 @@ export default class SenderToRecipient extends PureComponent { containerClassName="sender-to-recipient__tooltip-container" onHidden={() => this.setState({ senderAddressCopied: false })} > - <div className="sender-to-recipient__name"> - { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName } - </div> - </Tooltip> + <div className="sender-to-recipient__name"> + { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName } + </div> + </Tooltip> ) } 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/components/ui/toggle-button/index.js b/ui/app/components/ui/toggle-button/index.js new file mode 100644 index 000000000..7948d3ca1 --- /dev/null +++ b/ui/app/components/ui/toggle-button/index.js @@ -0,0 +1,2 @@ +import ToggleButton from './toggle-button.component' +module.exports = ToggleButton diff --git a/ui/app/components/ui/toggle-button/index.scss b/ui/app/components/ui/toggle-button/index.scss new file mode 100644 index 000000000..868d416c8 --- /dev/null +++ b/ui/app/components/ui/toggle-button/index.scss @@ -0,0 +1,14 @@ +.toggle-button { + display: flex; + + &__status-label { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 23px; + display: flex; + align-items: center; + text-transform: uppercase; + } +}
\ No newline at end of file diff --git a/ui/app/components/ui/toggle-button/toggle-button.component.js b/ui/app/components/ui/toggle-button/toggle-button.component.js new file mode 100644 index 000000000..3f13203a5 --- /dev/null +++ b/ui/app/components/ui/toggle-button/toggle-button.component.js @@ -0,0 +1,75 @@ +import React from 'react' +import PropTypes from 'prop-types' +import ReactToggleButton from 'react-toggle-button' + +const trackStyle = { + width: '40px', + height: '24px', + padding: '0px', + borderRadius: '26px', + border: '2px solid rgb(3, 125, 214)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +} + +const offTrackStyle = { + ...trackStyle, + border: '2px solid #8E8E8E', +} + +const thumbStyle = { + width: '18px', + height: '18px', + display: 'flex', + boxShadow: 'none', + alignSelf: 'center', + borderRadius: '50%', + position: 'relative', +} + +const colors = { + activeThumb: { + base: '#037DD6', + }, + inactiveThumb: { + base: '#037DD6', + }, + active: { + base: '#ffffff', + hover: '#ffffff', + }, + inactive: { + base: '#DADADA', + hover: '#DADADA', + }, +} + +const ToggleButton = props => { + const { value, onToggle, offLabel, onLabel } = props + + return ( + <div className="toggle-button"> + <ReactToggleButton + value={value} + onToggle={onToggle} + activeLabel="" + inactiveLabel="" + trackStyle={value ? trackStyle : offTrackStyle} + thumbStyle={thumbStyle} + thumbAnimateRange={[3, 18]} + colors={colors} + /> + <div className="toggle-button__status-label">{ value ? onLabel : offLabel }</div> + </div> + ) +} + +ToggleButton.propTypes = { + value: PropTypes.bool, + onToggle: PropTypes.func, + offLabel: PropTypes.string, + onLabel: PropTypes.string, +} + +export default ToggleButton diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss index 58a10c9a1..338b3829f 100644 --- a/ui/app/components/ui/unit-input/index.scss +++ b/ui/app/components/ui/unit-input/index.scss @@ -38,7 +38,6 @@ font-size: 1rem; font-family: Roboto; border: none; - outline: 0 !important; max-width: 22ch; height: 16px; line-height: 18px; diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss index ffccbd64f..865b23127 100644 --- a/ui/app/css/index.scss +++ b/ui/app/css/index.scss @@ -16,3 +16,7 @@ @import './itcss/components/index.scss'; @import './itcss/trumps/index.scss'; + +@import '../../../node_modules/react-tooltip-component/dist/react-tooltip-component'; + +@import '../../../node_modules/react-select/dist/react-select'; diff --git a/ui/app/css/itcss/components/account-dropdown-mini.scss b/ui/app/css/itcss/components/account-dropdown-mini.scss deleted file mode 100644 index 996993db7..000000000 --- a/ui/app/css/itcss/components/account-dropdown-mini.scss +++ /dev/null @@ -1,48 +0,0 @@ -.account-dropdown-mini { - height: 22px; - background-color: $white; - font-family: Roboto; - line-height: 16px; - font-size: 12px; - width: 124px; - - &__close-area { - position: fixed; - top: 0; - left: 0; - z-index: 1000; - width: 100%; - height: 100%; - } - - &__list { - z-index: 1050; - position: absolute; - height: 180px; - width: 96pxpx; - border: 1px solid $geyser; - border-radius: 4px; - background-color: $white; - box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); - overflow-y: scroll; - } - - .account-list-item { - margin-top: 6px; - } - - .account-list-item__account-name { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: 80px; - } - - .account-list-item__top-row { - margin: 0; - } - - .account-list-item__icon { - position: initial; - } -}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 716404cc3..283b083da 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -84,7 +84,6 @@ &__account-primary-balance { color: $scorpion; border: none; - outline: 0 !important; } &__account-secondary-balance { diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index b1a74dce2..9ece7a672 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -19,7 +19,6 @@ font-size: 16px; line-height: 22px; border: none; - outline: 0 !important; max-width: 22ch; } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 3d426a33c..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'; @@ -42,8 +43,6 @@ @import './account-details-dropdown.scss'; -@import './account-dropdown-mini.scss'; - @import './editable-label.scss'; @import './pages/index.scss'; diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index b3aae8eec..162aac38f 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -3,7 +3,11 @@ background-color: #FFFFFF; box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); z-index: 25; - height: 100%; + height: unset; + + @media screen and (min-width: 576px) { + position: absolute; + } &__header { display: flex; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 9a0b81aed..ff5f6f6cf 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -65,72 +65,6 @@ $wallet-view-bg: $alabaster; @media #{$sub-mid-size-breakpoint-range} { min-width: 160px; } - - .wallet-view-account-details { - flex: 0 0 auto; - } - - &__name-container { - flex: 0 0 auto; - cursor: pointer; - width: 100%; - } - - &__keyring-label { - height: 50px; - color: $dusty-gray; - font-family: Roboto; - font-size: 10px; - text-align: right; - padding: 17px 20px 0; - box-sizing: border-box; - } - - &__details-button { - font-size: 10px; - border-radius: 17px; - background-color: transparent; - margin: 0 auto; - padding: 4px 12px; - flex: 0 0 auto; - } - - &__tooltip { - display: flex; - justify-content: center; - align-items: center; - padding: 24px; - } - - &__address { - border-radius: 3px; - background-color: $alto; - color: $scorpion; - font-size: 14px; - line-height: 12px; - padding: 4px 12px; - cursor: pointer; - flex: 0 0 auto; - - &__pressed { - background-color: $manatee, - } - } - - &__sidebar-close { - - @media screen and (max-width: 575px) { - &::after { - content: '\00D7'; - font-size: 40px; - color: $tundora; - position: absolute; - top: 12px; - left: 12px; - cursor: pointer; - } - } - } } @media screen and (min-width: 576px) { @@ -228,20 +162,6 @@ $wallet-view-bg: $alabaster; } } -// wallet view -.account-name { - font-size: 24px; - color: $black; - margin-top: 8px; - margin-bottom: .9rem; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - width: 100%; - padding: 0 8px; - text-align: center; -} - // account options dropdown .account-options-menu { align-items: center; diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 6c950d846..25924b6c0 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -101,6 +101,30 @@ font-size: 14px; } + &__account-item { + height: 22px; + background-color: $white; + font-family: Roboto; + line-height: 16px; + font-size: 12px; + width: 124px; + + .account-list-item { + margin-top: 6px; + } + + .account-list-item__account-name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 80px; + } + + .account-list-item__top-row { + margin: 0; + } + } + &__balance { color: $dusty-gray; margin-right: 17px; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index c1a7381b6..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; @@ -646,6 +643,17 @@ height: 54px; border: none; + &__single-asset { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 8px 8px; + + &:hover { + background-color: rgba($alto, 0.2); + } + } + &__asset { display: flex; flex-flow: row nowrap; @@ -747,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; @@ -767,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/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 8b282aa1e..aaf6c7c0e 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -38,9 +38,17 @@ html { display: flex; } -input:focus, -textarea:focus { - outline: none; +.mouse-user-styles { + button:focus, + input:focus, + textarea:focus, + .unit-input__input, + .account-list-item__account-primary-balance, + .account-list-item__input, + .currency-display__input + { + outline: none; + } } /* stylelint-disable */ @@ -122,3 +130,14 @@ input.form-control { overflow: hidden; text-overflow: ellipsis; } + +.pinned-to-bottom { + position: absolute; + bottom: 0px; +} + +.pinned-to-bottom-right { + position: absolute; + bottom: 0px; + right: 0; +} 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/app/app.js b/ui/app/ducks/app/app.js index 04c8c7422..029c755cd 100644 --- a/ui/app/ducks/app/app.js +++ b/ui/app/ducks/app/app.js @@ -27,13 +27,6 @@ function reduceApp (state, action) { context: selectedAddress, } - // confirm seed words - var seedWords = state.metamask.seedWords - var seedConfView = { - name: 'createVaultComplete', - seedWords, - } - // default state var appState = extend({ shouldClose: false, @@ -58,7 +51,7 @@ function reduceApp (state, action) { alertMessage: null, qrCodeData: null, networkDropdownOpen: false, - currentView: seedWords ? seedConfView : defaultView, + currentView: defaultView, accountDetail: { subview: 'transactions', }, @@ -167,7 +160,7 @@ function reduceApp (state, action) { transForward: false, }) - // intialize + // intialize case actions.SHOW_CREATE_VAULT: return extend(appState, { @@ -269,7 +262,7 @@ function reduceApp (state, action) { transForward: true, }) - case actions.CREATE_NEW_VAULT_IN_PROGRESS: + case actions.CREATE_NEW_VAULT_IN_PROGRESS: return extend(appState, { currentView: { name: 'createVault', @@ -279,16 +272,6 @@ function reduceApp (state, action) { isLoading: true, }) - case actions.SHOW_NEW_VAULT_SEED: - return extend(appState, { - currentView: { - name: 'createVaultComplete', - seedWords: action.value, - }, - transForward: true, - isLoading: false, - }) - case actions.NEW_ACCOUNT_SCREEN: return extend(appState, { currentView: { @@ -327,7 +310,7 @@ function reduceApp (state, action) { transForward: true, }) - // unlock + // unlock case actions.UNLOCK_METAMASK: return extend(appState, { @@ -364,7 +347,7 @@ function reduceApp (state, action) { name: 'UnlockScreen', }, }) - // reveal seed words + // reveal seed words case actions.REVEAL_SEED_CONFIRMATION: return extend(appState, { @@ -375,7 +358,7 @@ function reduceApp (state, action) { warning: null, }) - // accounts + // accounts case actions.SET_SELECTED_ACCOUNT: return extend(appState, { @@ -428,8 +411,7 @@ function reduceApp (state, action) { case actions.SHOW_ACCOUNTS_PAGE: return extend(appState, { currentView: { - name: seedWords ? 'createVaultComplete' : 'accounts', - seedWords, + name: 'accounts', }, transForward: true, isLoading: false, @@ -774,7 +756,6 @@ function reduceApp (state, action) { loadingMethodData: false, }) - default: return appState } diff --git a/ui/app/ducks/gas/gas-duck.test.js b/ui/app/ducks/gas/gas-duck.test.js index b7e83a81c..82a91d5e7 100644 --- a/ui/app/ducks/gas/gas-duck.test.js +++ b/ui/app/ducks/gas/gas-duck.test.js @@ -2,12 +2,10 @@ import assert from 'assert' import sinon from 'sinon' import proxyquire from 'proxyquire' +const fakeLocalStorage = {} const GasDuck = proxyquire('./gas.duck.js', { - '../../../lib/local-storage-helpers': { - loadLocalStorageData: sinon.spy(), - saveLocalStorageData: sinon.spy(), - }, + '../../../lib/local-storage-helpers': fakeLocalStorage, }) const { @@ -68,24 +66,28 @@ describe('Gas Duck', () => { { expectedTime: 1.1, expectedWait: 0.6, gasprice: 19.9, somethingElse: 'foobar' }, { expectedTime: 1, expectedWait: 0.5, gasprice: 20, somethingElse: 'foobar' }, ] - const fetchStub = sinon.stub().callsFake((url) => new Promise(resolve => { + const fakeFetch = (url) => new Promise(resolve => { const dataToResolve = url.match(/ethgasAPI|gasexpress/) ? mockEthGasApiResponse : mockPredictTableResponse resolve({ json: () => new Promise(resolve => resolve(dataToResolve)), }) - })) + }) beforeEach(() => { tempFetch = global.fetch tempDateNow = global.Date.now - global.fetch = fetchStub + + fakeLocalStorage.loadLocalStorageData = sinon.stub() + fakeLocalStorage.saveLocalStorageData = sinon.spy() + global.fetch = sinon.stub().callsFake(fakeFetch) global.Date.now = () => 2000000 }) afterEach(() => { - fetchStub.resetHistory() + sinon.restore() + global.fetch = tempFetch global.Date.now = tempDateNow }) @@ -118,7 +120,6 @@ describe('Gas Duck', () => { gasEstimatesLoading: true, priceAndTimeEstimates: [], priceAndTimeEstimatesLastRetrieved: 0, - basicPriceAndTimeEstimates: [], basicPriceAndTimeEstimatesLastRetrieved: 0, basicPriceEstimatesLastRetrieved: 0, } @@ -305,8 +306,9 @@ describe('Gas Duck', () => { }) describe('fetchBasicGasEstimates', () => { - const mockDistpatch = sinon.spy() it('should call fetch with the expected params', async () => { + const mockDistpatch = sinon.spy() + await fetchBasicGasEstimates()(mockDistpatch, () => ({ gas: Object.assign( {}, initState, @@ -330,12 +332,109 @@ describe('Gas Duck', () => { }, ] ) - assert.deepEqual( mockDistpatch.getCall(1).args, [{ type: SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ] ) + assert.deepEqual( + mockDistpatch.getCall(2).args, + [{ + type: SET_BASIC_GAS_ESTIMATE_DATA, + value: { + average: 20, + blockTime: 'mockBlock_time', + blockNum: 'mockBlockNum', + fast: 30, + fastest: 40, + safeLow: 10, + }, + }] + ) + assert.deepEqual( + mockDistpatch.getCall(3).args, + [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }] + ) + }) + + it('should fetch recently retrieved estimates from local storage', async () => { + const mockDistpatch = sinon.spy() + fakeLocalStorage.loadLocalStorageData + .withArgs('BASIC_PRICE_ESTIMATES_LAST_RETRIEVED') + .returns(2000000 - 1) // one second ago from "now" + fakeLocalStorage.loadLocalStorageData + .withArgs('BASIC_PRICE_ESTIMATES') + .returns({ + average: 25, + blockTime: 'mockBlock_time', + blockNum: 'mockBlockNum', + fast: 35, + fastest: 45, + safeLow: 15, + }) + + await fetchBasicGasEstimates()(mockDistpatch, () => ({ gas: Object.assign( + {}, + initState, + {} + ) })) + assert.deepEqual( + mockDistpatch.getCall(0).args, + [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ] + ) + assert.ok(global.fetch.notCalled) + assert.deepEqual( + mockDistpatch.getCall(1).args, + [{ + type: SET_BASIC_GAS_ESTIMATE_DATA, + value: { + average: 25, + blockTime: 'mockBlock_time', + blockNum: 'mockBlockNum', + fast: 35, + fastest: 45, + safeLow: 15, + }, + }] + ) + assert.deepEqual( + mockDistpatch.getCall(2).args, + [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }] + ) + }) + + it('should fallback to network if retrieving estimates from local storage fails', async () => { + const mockDistpatch = sinon.spy() + fakeLocalStorage.loadLocalStorageData + .withArgs('BASIC_PRICE_ESTIMATES_LAST_RETRIEVED') + .returns(2000000 - 1) // one second ago from "now" + await fetchBasicGasEstimates()(mockDistpatch, () => ({ gas: Object.assign( + {}, + initState, + {} + ) })) + assert.deepEqual( + mockDistpatch.getCall(0).args, + [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ] + ) + assert.deepEqual( + global.fetch.getCall(0).args, + [ + 'https://dev.blockscale.net/api/gasexpress.json', + { + 'headers': {}, + 'referrer': 'https://dev.blockscale.net/api/', + 'referrerPolicy': 'no-referrer-when-downgrade', + 'body': null, + 'method': 'GET', + 'mode': 'cors', + }, + ] + ) + assert.deepEqual( + mockDistpatch.getCall(1).args, + [{ type: SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ] + ) assert.deepEqual( mockDistpatch.getCall(2).args, [{ @@ -358,14 +457,15 @@ describe('Gas Duck', () => { }) describe('fetchBasicGasAndTimeEstimates', () => { - const mockDistpatch = sinon.spy() it('should call fetch with the expected params', async () => { + const mockDistpatch = sinon.spy() + await fetchBasicGasAndTimeEstimates()(mockDistpatch, () => ({ gas: Object.assign( {}, initState, { basicPriceAndTimeEstimatesLastRetrieved: 1000000 } ), - metamask: { provider: { type: 'ropsten' } }, + metamask: { provider: { type: 'ropsten' } }, })) assert.deepEqual( mockDistpatch.getCall(0).args, @@ -415,23 +515,139 @@ describe('Gas Duck', () => { [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }] ) }) - }) - describe('fetchGasEstimates', () => { - const mockDistpatch = sinon.spy() + it('should fetch recently retrieved estimates from local storage', async () => { + const mockDistpatch = sinon.spy() + fakeLocalStorage.loadLocalStorageData + .withArgs('BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') + .returns(2000000 - 1) // one second ago from "now" + fakeLocalStorage.loadLocalStorageData + .withArgs('BASIC_GAS_AND_TIME_API_ESTIMATES') + .returns({ + average: 5, + avgWait: 'mockAvgWait', + blockTime: 'mockBlock_time', + blockNum: 'mockBlockNum', + fast: 6, + fastest: 7, + fastestWait: 'mockFastestWait', + fastWait: 'mockFastWait', + safeLow: 1, + safeLowWait: 'mockSafeLowWait', + speed: 'mockSpeed', + }) + + await fetchBasicGasAndTimeEstimates()(mockDistpatch, () => ({ gas: Object.assign( + {}, + initState, + {} + ), + metamask: { provider: { type: 'ropsten' } }, + })) + assert.deepEqual( + mockDistpatch.getCall(0).args, + [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ] + ) + assert.ok(global.fetch.notCalled) + + assert.deepEqual( + mockDistpatch.getCall(1).args, + [{ + type: SET_BASIC_GAS_ESTIMATE_DATA, + value: { + average: 5, + avgWait: 'mockAvgWait', + blockTime: 'mockBlock_time', + blockNum: 'mockBlockNum', + fast: 6, + fastest: 7, + fastestWait: 'mockFastestWait', + fastWait: 'mockFastWait', + safeLow: 1, + safeLowWait: 'mockSafeLowWait', + speed: 'mockSpeed', + }, + }] + ) + assert.deepEqual( + mockDistpatch.getCall(2).args, + [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }] + ) + }) + + it('should fallback to network if retrieving estimates from local storage fails', async () => { + const mockDistpatch = sinon.spy() + fakeLocalStorage.loadLocalStorageData + .withArgs('BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') + .returns(2000000 - 1) // one second ago from "now" + + await fetchBasicGasAndTimeEstimates()(mockDistpatch, () => ({ gas: Object.assign( + {}, + initState, + {} + ), + metamask: { provider: { type: 'ropsten' } }, + })) + assert.deepEqual( + mockDistpatch.getCall(0).args, + [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ] + ) + assert.deepEqual( + global.fetch.getCall(0).args, + [ + 'https://ethgasstation.info/json/ethgasAPI.json', + { + 'headers': {}, + 'referrer': 'http://ethgasstation.info/json/', + 'referrerPolicy': 'no-referrer-when-downgrade', + 'body': null, + 'method': 'GET', + 'mode': 'cors', + }, + ] + ) - beforeEach(() => { - mockDistpatch.resetHistory() + assert.deepEqual( + mockDistpatch.getCall(1).args, + [{ type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ] + ) + + assert.deepEqual( + mockDistpatch.getCall(2).args, + [{ + type: SET_BASIC_GAS_ESTIMATE_DATA, + value: { + average: 2, + avgWait: 'mockAvgWait', + blockTime: 'mockBlock_time', + blockNum: 'mockBlockNum', + fast: 3, + fastest: 4, + fastestWait: 'mockFastestWait', + fastWait: 'mockFastWait', + safeLow: 1, + safeLowWait: 'mockSafeLowWait', + speed: 'mockSpeed', + }, + }] + ) + assert.deepEqual( + mockDistpatch.getCall(3).args, + [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }] + ) }) + }) + describe('fetchGasEstimates', () => { it('should call fetch with the expected params', async () => { - global.fetch.resetHistory() + const mockDistpatch = sinon.spy() + await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign( {}, initState, { priceAndTimeEstimatesLastRetrieved: 1000000 } ), - metamask: { provider: { type: 'ropsten' } }, + metamask: { provider: { type: 'ropsten' } }, })) assert.deepEqual( mockDistpatch.getCall(0).args, @@ -471,7 +687,8 @@ describe('Gas Duck', () => { }) it('should not call fetch if the estimates were retrieved < 75000 ms ago', async () => { - global.fetch.resetHistory() + const mockDistpatch = sinon.spy() + await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign( {}, initState, @@ -484,7 +701,7 @@ describe('Gas Duck', () => { }], } ), - metamask: { provider: { type: 'ropsten' } }, + metamask: { provider: { type: 'ropsten' } }, })) assert.deepEqual( mockDistpatch.getCall(0).args, diff --git a/ui/app/ducks/gas/gas.duck.js b/ui/app/ducks/gas/gas.duck.js index 5a0a236e6..e272455fc 100644 --- a/ui/app/ducks/gas/gas.duck.js +++ b/ui/app/ducks/gas/gas.duck.js @@ -50,7 +50,6 @@ const initState = { basicEstimateIsLoading: true, gasEstimatesLoading: true, priceAndTimeEstimates: [], - basicPriceAndTimeEstimates: [], priceAndTimeEstimatesLastRetrieved: 0, basicPriceAndTimeEstimatesLastRetrieved: 0, basicPriceEstimatesLastRetrieved: 0, @@ -177,134 +176,132 @@ export function gasEstimatesLoadingFinished () { } export function fetchBasicGasEstimates () { - return (dispatch, getState) => { - const { - basicPriceEstimatesLastRetrieved, - basicPriceAndTimeEstimates, - } = getState().gas + return async (dispatch, getState) => { + const { basicPriceEstimatesLastRetrieved } = getState().gas const timeLastRetrieved = basicPriceEstimatesLastRetrieved || loadLocalStorageData('BASIC_PRICE_ESTIMATES_LAST_RETRIEVED') || 0 dispatch(basicGasEstimatesLoadingStarted()) - const promiseToFetch = Date.now() - timeLastRetrieved > 75000 - ? fetch('https://dev.blockscale.net/api/gasexpress.json', { - 'headers': {}, - 'referrer': 'https://dev.blockscale.net/api/', - 'referrerPolicy': 'no-referrer-when-downgrade', - 'body': null, - 'method': 'GET', - 'mode': 'cors'} - ) - .then(r => r.json()) - .then(({ - safeLow, - standard: average, - fast, - fastest, - block_time: blockTime, - blockNum, - }) => { - const basicEstimates = { - safeLow, - average, - fast, - fastest, - blockTime, - blockNum, - } - - const timeRetrieved = Date.now() - dispatch(setBasicPriceEstimatesLastRetrieved(timeRetrieved)) - saveLocalStorageData(timeRetrieved, 'BASIC_PRICE_ESTIMATES_LAST_RETRIEVED') - saveLocalStorageData(basicEstimates, 'BASIC_PRICE_ESTIMATES') - - return basicEstimates - }) - : Promise.resolve(basicPriceAndTimeEstimates.length - ? basicPriceAndTimeEstimates - : loadLocalStorageData('BASIC_PRICE_ESTIMATES') - ) + let basicEstimates + if (Date.now() - timeLastRetrieved > 75000) { + basicEstimates = await fetchExternalBasicGasEstimates(dispatch) + } else { + const cachedBasicEstimates = loadLocalStorageData('BASIC_PRICE_ESTIMATES') + basicEstimates = cachedBasicEstimates || await fetchExternalBasicGasEstimates(dispatch) + } - return promiseToFetch.then(basicEstimates => { - dispatch(setBasicGasEstimateData(basicEstimates)) - dispatch(basicGasEstimatesLoadingFinished()) - return basicEstimates - }) + dispatch(setBasicGasEstimateData(basicEstimates)) + dispatch(basicGasEstimatesLoadingFinished()) + + return basicEstimates } } +async function fetchExternalBasicGasEstimates (dispatch) { + const response = await fetch('https://dev.blockscale.net/api/gasexpress.json', { + 'headers': {}, + 'referrer': 'https://dev.blockscale.net/api/', + 'referrerPolicy': 'no-referrer-when-downgrade', + 'body': null, + 'method': 'GET', + 'mode': 'cors'} + ) + const { + safeLow, + standard: average, + fast, + fastest, + block_time: blockTime, + blockNum, + } = await response.json() + + const basicEstimates = { + safeLow, + average, + fast, + fastest, + blockTime, + blockNum, + } + + const timeRetrieved = Date.now() + saveLocalStorageData(basicEstimates, 'BASIC_PRICE_ESTIMATES') + saveLocalStorageData(timeRetrieved, 'BASIC_PRICE_ESTIMATES_LAST_RETRIEVED') + dispatch(setBasicPriceEstimatesLastRetrieved(timeRetrieved)) + + return basicEstimates +} + export function fetchBasicGasAndTimeEstimates () { - return (dispatch, getState) => { - const { - basicPriceAndTimeEstimatesLastRetrieved, - basicPriceAndTimeEstimates, - } = getState().gas + return async (dispatch, getState) => { + const { basicPriceAndTimeEstimatesLastRetrieved } = getState().gas const timeLastRetrieved = basicPriceAndTimeEstimatesLastRetrieved || loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') || 0 dispatch(basicGasEstimatesLoadingStarted()) - const promiseToFetch = Date.now() - timeLastRetrieved > 75000 - ? fetch('https://ethgasstation.info/json/ethgasAPI.json', { - 'headers': {}, - 'referrer': 'http://ethgasstation.info/json/', - 'referrerPolicy': 'no-referrer-when-downgrade', - 'body': null, - 'method': 'GET', - 'mode': 'cors'} - ) - .then(r => r.json()) - .then(({ - average: averageTimes10, - avgWait, - block_time: blockTime, - blockNum, - fast: fastTimes10, - fastest: fastestTimes10, - fastestWait, - fastWait, - safeLow: safeLowTimes10, - safeLowWait, - speed, - }) => { - const [average, fast, fastest, safeLow] = [ - averageTimes10, - fastTimes10, - fastestTimes10, - safeLowTimes10, - ].map(price => (new BigNumber(price)).div(10).toNumber()) - - const basicEstimates = { - average, - avgWait, - blockTime, - blockNum, - fast, - fastest, - fastestWait, - fastWait, - safeLow, - safeLowWait, - speed, - } + let basicEstimates + if (Date.now() - timeLastRetrieved > 75000) { + basicEstimates = await fetchExternalBasicGasAndTimeEstimates(dispatch) + } else { + const cachedBasicEstimates = loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES') + basicEstimates = cachedBasicEstimates || await fetchExternalBasicGasAndTimeEstimates(dispatch) + } - const timeRetrieved = Date.now() - dispatch(setBasicApiEstimatesLastRetrieved(timeRetrieved)) - saveLocalStorageData(timeRetrieved, 'BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') - saveLocalStorageData(basicEstimates, 'BASIC_GAS_AND_TIME_API_ESTIMATES') + dispatch(setBasicGasEstimateData(basicEstimates)) + dispatch(basicGasEstimatesLoadingFinished()) + return basicEstimates + } +} - return basicEstimates - }) - : Promise.resolve(basicPriceAndTimeEstimates.length - ? basicPriceAndTimeEstimates - : loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES') - ) - - return promiseToFetch.then(basicEstimates => { - dispatch(setBasicGasEstimateData(basicEstimates)) - dispatch(basicGasEstimatesLoadingFinished()) - return basicEstimates - }) +async function fetchExternalBasicGasAndTimeEstimates (dispatch) { + const response = await fetch('https://ethgasstation.info/json/ethgasAPI.json', { + 'headers': {}, + 'referrer': 'http://ethgasstation.info/json/', + 'referrerPolicy': 'no-referrer-when-downgrade', + 'body': null, + 'method': 'GET', + 'mode': 'cors'} + ) + const { + average: averageTimes10, + avgWait, + block_time: blockTime, + blockNum, + fast: fastTimes10, + fastest: fastestTimes10, + fastestWait, + fastWait, + safeLow: safeLowTimes10, + safeLowWait, + speed, + } = await response.json() + const [average, fast, fastest, safeLow] = [ + averageTimes10, + fastTimes10, + fastestTimes10, + safeLowTimes10, + ].map(price => (new BigNumber(price)).div(10).toNumber()) + + const basicEstimates = { + average, + avgWait, + blockTime, + blockNum, + fast, + fastest, + fastestWait, + fastWait, + safeLow, + safeLowWait, + speed, } + + const timeRetrieved = Date.now() + saveLocalStorageData(basicEstimates, 'BASIC_GAS_AND_TIME_API_ESTIMATES') + saveLocalStorageData(timeRetrieved, 'BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') + dispatch(setBasicApiEstimatesLastRetrieved(timeRetrieved)) + + return basicEstimates } function extrapolateY ({ higherY, lowerY, higherX, lowerX, xForExtrapolation }) { @@ -375,13 +372,13 @@ export function fetchGasEstimates (blockTime) { const promiseToFetch = Date.now() - timeLastRetrieved > 75000 ? fetch('https://ethgasstation.info/json/predictTable.json', { - 'headers': {}, - 'referrer': 'http://ethgasstation.info/json/', - 'referrerPolicy': 'no-referrer-when-downgrade', - 'body': null, - 'method': 'GET', - 'mode': 'cors'} - ) + 'headers': {}, + 'referrer': 'http://ethgasstation.info/json/', + 'referrerPolicy': 'no-referrer-when-downgrade', + 'body': null, + 'method': 'GET', + 'mode': 'cors'} + ) .then(r => r.json()) .then(r => { const estimatedPricesAndTimes = r.map(({ expectedTime, expectedWait, gasprice }) => ({ expectedTime, expectedWait, gasprice })) @@ -432,14 +429,14 @@ export function fetchGasEstimates (blockTime) { return timeMappedToSeconds }) : Promise.resolve(priceAndTimeEstimates.length - ? priceAndTimeEstimates - : loadLocalStorageData('GAS_API_ESTIMATES') - ) - - return promiseToFetch.then(estimates => { - dispatch(setPricesAndTimeEstimates(estimates)) - dispatch(gasEstimatesLoadingFinished()) - }) + ? priceAndTimeEstimates + : loadLocalStorageData('GAS_API_ESTIMATES') + ) + + return promiseToFetch.then(estimates => { + dispatch(setPricesAndTimeEstimates(estimates)) + dispatch(gasEstimatesLoadingFinished()) + }) } } diff --git a/ui/app/ducks/index.js b/ui/app/ducks/index.js index 2d33edcfa..18470c441 100644 --- a/ui/app/ducks/index.js +++ b/ui/app/ducks/index.js @@ -61,9 +61,6 @@ window.getCleanAppState = function () { // append additional information state.version = global.platform.getVersion() state.browser = window.navigator.userAgent - // ensure seedWords are not included - if (state.metamask) delete state.metamask.seedWords - if (state.appState.currentView) delete state.appState.currentView.seedWords return state } @@ -72,7 +69,7 @@ window.logStateString = function (cb) { global.platform.getPlatformInfo((err, platform) => { if (err) return cb(err) state.platform = platform - const stateString = JSON.stringify(state, removeSeedWords, 2) + const stateString = JSON.stringify(state, null, 2) cb(null, stateString) }) } @@ -89,7 +86,3 @@ window.logState = function (toClipboard) { } }) } - -function removeSeedWords (key, value) { - return key === 'seedWords' ? undefined : value -} diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js index 3ca487c1f..35de947b4 100644 --- a/ui/app/ducks/metamask/metamask.js +++ b/ui/app/ducks/metamask/metamask.js @@ -39,12 +39,13 @@ function reduceMetamask (state, action) { editingTransactionId: null, forceGasMin: null, toNickname: '', + ensResolution: null, + ensResolutionError: '', }, coinOptions: {}, useBlockie: false, featureFlags: {}, networkEndpointType: OLD_UI_NETWORK_TYPE, - isRevealingSeedWords: false, welcomeScreenSeen: false, currentLocale: '', preferences: { @@ -60,13 +61,6 @@ function reduceMetamask (state, action) { switch (action.type) { - case actions.SHOW_ACCOUNTS_PAGE: - newState = extend(metamaskState, { - isRevealingSeedWords: false, - }) - delete newState.seedWords - return newState - case actions.UPDATE_METAMASK_STATE: return extend(metamaskState, action.value) @@ -128,20 +122,12 @@ function reduceMetamask (state, action) { }, }) - - case actions.SHOW_NEW_VAULT_SEED: - return extend(metamaskState, { - isRevealingSeedWords: true, - seedWords: action.value, - }) - case actions.CLEAR_SEED_WORD_CACHE: newState = extend(metamaskState, { isUnlocked: true, isInitialized: true, selectedAddress: action.value, }) - delete newState.seedWords return newState case actions.SHOW_ACCOUNT_DETAIL: @@ -150,7 +136,6 @@ function reduceMetamask (state, action) { isInitialized: true, selectedAddress: action.value, }) - delete newState.seedWords return newState case actions.SET_SELECTED_TOKEN: @@ -290,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: { @@ -403,12 +406,6 @@ function reduceMetamask (state, action) { }) } - case actions.COMPLETE_UI_MIGRATION: { - return extend(metamaskState, { - completedUiMigration: true, - }) - } - case actions.SET_FIRST_TIME_FLOW_TYPE: { return extend(metamaskState, { firstTimeFlowType: action.value, diff --git a/ui/app/helpers/constants/routes.js b/ui/app/helpers/constants/routes.js index d906fc8e6..cd26b3628 100644 --- a/ui/app/helpers/constants/routes.js +++ b/ui/app/helpers/constants/routes.js @@ -3,15 +3,19 @@ const UNLOCK_ROUTE = '/unlock' const LOCK_ROUTE = '/lock' const SETTINGS_ROUTE = '/settings' const GENERAL_ROUTE = '/settings/general' -const INFO_ROUTE = '/settings/info' const ADVANCED_ROUTE = '/settings/advanced' const SECURITY_ROUTE = '/settings/security' -const COMPANY_ROUTE = '/settings/company' 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 CONFIRM_SEED_ROUTE = '/confirm-seed' const RESTORE_VAULT_ROUTE = '/restore-vault' const ADD_TOKEN_ROUTE = '/add-token' const CONFIRM_ADD_TOKEN_ROUTE = '/confirm-add-token' @@ -20,17 +24,15 @@ const NEW_ACCOUNT_ROUTE = '/new-account' const IMPORT_ACCOUNT_ROUTE = '/new-account/import' const CONNECT_HARDWARE_ROUTE = '/new-account/connect' const SEND_ROUTE = '/send' -const WELCOME_ROUTE = '/welcome' const INITIALIZE_ROUTE = '/initialize' const INITIALIZE_WELCOME_ROUTE = '/initialize/welcome' const INITIALIZE_UNLOCK_ROUTE = '/initialize/unlock' const INITIALIZE_CREATE_PASSWORD_ROUTE = '/initialize/create-password' -const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/create-password/import-account' const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/create-password/import-with-seed-phrase' -const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/create-password/unique-image' const INITIALIZE_SELECT_ACTION_ROUTE = '/initialize/select-action' const INITIALIZE_SEED_PHRASE_ROUTE = '/initialize/seed-phrase' +const INITIALIZE_BACKUP_SEED_PHRASE_ROUTE = '/initialize/backup-seed-phrase' const INITIALIZE_END_OF_FLOW_ROUTE = '/initialize/end-of-flow' const INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE = '/initialize/seed-phrase/confirm' const INITIALIZE_METAMETRICS_OPT_IN_ROUTE = '/initialize/metametrics-opt-in' @@ -49,10 +51,8 @@ module.exports = { UNLOCK_ROUTE, LOCK_ROUTE, SETTINGS_ROUTE, - INFO_ROUTE, REVEAL_SEED_ROUTE, MOBILE_SYNC_ROUTE, - CONFIRM_SEED_ROUTE, RESTORE_VAULT_ROUTE, ADD_TOKEN_ROUTE, CONFIRM_ADD_TOKEN_ROUTE, @@ -61,14 +61,11 @@ module.exports = { IMPORT_ACCOUNT_ROUTE, CONNECT_HARDWARE_ROUTE, SEND_ROUTE, - WELCOME_ROUTE, INITIALIZE_ROUTE, INITIALIZE_WELCOME_ROUTE, INITIALIZE_UNLOCK_ROUTE, INITIALIZE_CREATE_PASSWORD_ROUTE, - INITIALIZE_IMPORT_ACCOUNT_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, @@ -84,8 +81,16 @@ module.exports = { INITIALIZE_METAMETRICS_OPT_IN_ROUTE, ADVANCED_ROUTE, SECURITY_ROUTE, - COMPANY_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, + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, } + diff --git a/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js b/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js index 6124b0fcd..8fc637332 100644 --- a/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js +++ b/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js @@ -3,6 +3,7 @@ import Authenticated from './authenticated.component' const mapStateToProps = state => { const { metamask: { isUnlocked, completedOnboarding } } = state + return { isUnlocked, completedOnboarding, diff --git a/ui/app/helpers/utils/conversion-util.js b/ui/app/helpers/utils/conversion-util.js index affddade7..46bcfe47b 100644 --- a/ui/app/helpers/utils/conversion-util.js +++ b/ui/app/helpers/utils/conversion-util.js @@ -37,13 +37,6 @@ const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000') const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000') const BIG_NUMBER_ETH_MULTIPLIER = new BigNumber('1') -// Individual Setters -const convert = R.invoker(1, 'times') -const round = R.invoker(2, 'round')(R.__, BigNumber.ROUND_HALF_DOWN) -const roundDown = R.invoker(2, 'round')(R.__, BigNumber.ROUND_DOWN) -const invertConversionRate = conversionRate => () => new BigNumber(1.0).div(conversionRate) -const decToBigNumberViaString = () => R.pipe(String, toBigNumber['dec']) - // Setter Maps const toBigNumber = { hex: n => new BigNumber(stripHexPrefix(n), 16), @@ -66,6 +59,13 @@ const baseChange = { BN: n => new BN(n.toString(16)), } +// Individual Setters +const convert = R.invoker(1, 'times') +const round = R.invoker(2, 'round')(R.__, BigNumber.ROUND_HALF_DOWN) +const roundDown = R.invoker(2, 'round')(R.__, BigNumber.ROUND_DOWN) +const invertConversionRate = conversionRate => () => new BigNumber(1.0).div(conversionRate) +const decToBigNumberViaString = () => R.pipe(String, toBigNumber['dec']) + // Predicates const fromAndToCurrencyPropsNotEqual = R.compose( R.not, diff --git a/ui/app/helpers/utils/fetch.js b/ui/app/helpers/utils/fetch.js index 7bb483818..1e7ef594f 100644 --- a/ui/app/helpers/utils/fetch.js +++ b/ui/app/helpers/utils/fetch.js @@ -1,5 +1,3 @@ -/* global AbortController */ - export default function ({ timeout = 120000 } = {}) { return function _fetch (url, opts) { return new Promise(async (resolve, reject) => { diff --git a/ui/app/helpers/utils/util.js b/ui/app/helpers/utils/util.js index 94fa9ad42..b9e8e83c5 100644 --- a/ui/app/helpers/utils/util.js +++ b/ui/app/helpers/utils/util.js @@ -61,6 +61,7 @@ module.exports = { checksumAddress, addressSlicer, isEthNetwork, + isValidAddressHead, } function isEthNetwork (netId) { @@ -323,3 +324,10 @@ function addressSlicer (address = '') { return `${address.slice(0, 6)}...${address.slice(-4)}` } + +function isValidAddressHead (address) { + const addressLengthIsLessThanFull = address.length < 42 + const addressIsHex = isHex(address) + + return addressLengthIsLessThanFull && addressIsHex +} diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js index 9a118a815..04e9c8dcf 100644 --- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js +++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js @@ -84,7 +84,7 @@ export default class ConfirmAddSuggestedToken extends Component { </div> </div> ) - }) + }) } </div> </div> diff --git a/ui/app/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/pages/confirm-add-token/confirm-add-token.component.js index f0a19e8d9..d918d7e39 100644 --- a/ui/app/pages/confirm-add-token/confirm-add-token.component.js +++ b/ui/app/pages/confirm-add-token/confirm-add-token.component.js @@ -80,7 +80,7 @@ export default class ConfirmAddToken extends Component { </div> </div> ) - }) + }) } </div> </div> diff --git a/ui/app/pages/confirm-transaction/conf-tx.js b/ui/app/pages/confirm-transaction/conf-tx.js index f9af6624e..d66cb699d 100644 --- a/ui/app/pages/confirm-transaction/conf-tx.js +++ b/ui/app/pages/confirm-transaction/conf-tx.js @@ -12,7 +12,6 @@ const R = require('ramda') const SignatureRequest = require('../../components/app/signature-request') const Loading = require('../../components/ui/loading-screen') const { DEFAULT_ROUTE } = require('../../helpers/constants/routes') -const { getMetaMaskAccounts } = require('../../selectors/selectors') module.exports = compose( withRouter, @@ -29,8 +28,6 @@ function mapStateToProps (state) { return { identities: state.metamask.identities, - accounts: getMetaMaskAccounts(state), - selectedAddress: state.metamask.selectedAddress, unapprovedTxs: state.metamask.unapprovedTxs, unapprovedMsgs: state.metamask.unapprovedMsgs, unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs, @@ -39,7 +36,6 @@ function mapStateToProps (state) { warning: state.appState.warning, network: state.metamask.network, provider: state.metamask.provider, - conversionRate: state.metamask.conversionRate, currentCurrency: state.metamask.currentCurrency, blockGasLimit: state.metamask.currentBlockGasLimit, computedBalances: state.metamask.computedBalances, @@ -146,7 +142,6 @@ ConfirmTxScreen.prototype.render = function () { const props = this.props const { currentCurrency, - conversionRate, blockGasLimit, } = props @@ -159,10 +154,7 @@ ConfirmTxScreen.prototype.render = function () { // Properties txData: txData, key: txData.id, - selectedAddress: props.selectedAddress, - accounts: props.accounts, identities: props.identities, - conversionRate, currentCurrency, blockGasLimit, // Actions diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js index 247c27a5d..71684783f 100644 --- a/ui/app/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/pages/create-account/connect-hardware/account-list.js @@ -6,18 +6,18 @@ const Select = require('react-select').default import Button from '../../../components/ui/button' class AccountList extends Component { - getHdPaths () { - return [ - { - label: `Ledger Live`, - value: `m/44'/60'/0'/0/0`, - }, - { - label: `Legacy (MEW / MyCrypto)`, - value: `m/44'/60'/0'`, - }, - ] - } + getHdPaths () { + return [ + { + label: `Ledger Live`, + value: `m/44'/60'/0'/0/0`, + }, + { + label: `Legacy (MEW / MyCrypto)`, + value: `m/44'/60'/0'`, + }, + ] + } goToNextPage = () => { // If we have < 5 accounts, it's restricted by BIP-44 @@ -74,128 +74,128 @@ class AccountList extends Component { } renderAccounts () { - return h('div.hw-account-list', [ - this.props.accounts.map((a, i) => { - - return h('div.hw-account-list__item', { key: a.address }, [ - h('div.hw-account-list__item__radio', [ - h('input', { - type: 'radio', - name: 'selectedAccount', - id: `address-${i}`, - value: a.index, - onChange: (e) => this.props.onAccountChange(e.target.value), - checked: this.props.selectedAccount === a.index.toString(), - }), - h( - 'label.hw-account-list__item__label', - { - htmlFor: `address-${i}`, - }, - [ - h('span.hw-account-list__item__index', a.index + 1), - `${a.address.slice(0, 4)}...${a.address.slice(-4)}`, - h('span.hw-account-list__item__balance', `${a.balance}`), - ]), + return h('div.hw-account-list', [ + this.props.accounts.map((a, i) => { + + return h('div.hw-account-list__item', { key: a.address }, [ + h('div.hw-account-list__item__radio', [ + h('input', { + type: 'radio', + name: 'selectedAccount', + id: `address-${i}`, + value: a.index, + onChange: (e) => this.props.onAccountChange(e.target.value), + checked: this.props.selectedAccount === a.index.toString(), + }), + h( + 'label.hw-account-list__item__label', + { + htmlFor: `address-${i}`, + }, + [ + h('span.hw-account-list__item__index', a.index + 1), + `${a.address.slice(0, 4)}...${a.address.slice(-4)}`, + h('span.hw-account-list__item__balance', `${a.balance}`), ]), - h( - 'a.hw-account-list__item__link', - { - href: genAccountLink(a.address, this.props.network), - target: '_blank', - title: this.context.t('etherscanView'), - }, - h('img', { src: 'images/popout.svg' }) - ), - ]) - }), - ]) + ]), + h( + 'a.hw-account-list__item__link', + { + href: genAccountLink(a.address, this.props.network), + target: '_blank', + title: this.context.t('etherscanView'), + }, + h('img', { src: 'images/popout.svg' }) + ), + ]) + }), + ]) } - renderPagination () { - return h('div.hw-list-pagination', [ - h( - 'button.hw-list-pagination__button', - { - onClick: this.goToPreviousPage, - }, - `< ${this.context.t('prev')}` - ), - - h( - 'button.hw-list-pagination__button', - { - onClick: this.goToNextPage, - }, - `${this.context.t('next')} >` - ), - ]) - } - - renderButtons () { - const disabled = this.props.selectedAccount === null - const buttonProps = {} - if (disabled) { - buttonProps.disabled = true + renderPagination () { + return h('div.hw-list-pagination', [ + h( + 'button.hw-list-pagination__button', + { + onClick: this.goToPreviousPage, + }, + `< ${this.context.t('prev')}` + ), + + h( + 'button.hw-list-pagination__button', + { + onClick: this.goToNextPage, + }, + `${this.context.t('next')} >` + ), + ]) } - return h('div.new-account-connect-form__buttons', {}, [ - h(Button, { - type: 'default', - large: true, - className: 'new-account-connect-form__button', - onClick: this.props.onCancel.bind(this), - }, [this.context.t('cancel')]), - - h(Button, { - type: 'primary', - large: true, - className: 'new-account-connect-form__button unlock', - disabled, - onClick: this.props.onUnlockAccount.bind(this, this.props.device), - }, [this.context.t('unlock')]), - ]) - } + renderButtons () { + const disabled = this.props.selectedAccount === null + const buttonProps = {} + if (disabled) { + buttonProps.disabled = true + } - renderForgetDevice () { - return h('div.hw-forget-device-container', {}, [ - h('a', { - onClick: this.props.onForgetDevice.bind(this, this.props.device), - }, this.context.t('forgetDevice')), - ]) - } + return h('div.new-account-connect-form__buttons', {}, [ + h(Button, { + type: 'default', + large: true, + className: 'new-account-connect-form__button', + onClick: this.props.onCancel.bind(this), + }, [this.context.t('cancel')]), + + h(Button, { + type: 'primary', + large: true, + className: 'new-account-connect-form__button unlock', + disabled, + onClick: this.props.onUnlockAccount.bind(this, this.props.device), + }, [this.context.t('unlock')]), + ]) + } - render () { - return h('div.new-account-connect-form.account-list', {}, [ + renderForgetDevice () { + return h('div.hw-forget-device-container', {}, [ + h('a', { + onClick: this.props.onForgetDevice.bind(this, this.props.device), + }, this.context.t('forgetDevice')), + ]) + } + + render () { + return h('div.new-account-connect-form.account-list', {}, [ this.renderHeader(), this.renderAccounts(), this.renderPagination(), this.renderButtons(), this.renderForgetDevice(), - ]) - } + ]) + } } AccountList.propTypes = { - onPathChange: PropTypes.func.isRequired, - selectedPath: PropTypes.string.isRequired, - device: PropTypes.string.isRequired, - accounts: PropTypes.array.isRequired, - onAccountChange: PropTypes.func.isRequired, - onForgetDevice: PropTypes.func.isRequired, - getPage: PropTypes.func.isRequired, - network: PropTypes.string, - selectedAccount: PropTypes.string, - history: PropTypes.object, - onUnlockAccount: PropTypes.func, - onCancel: PropTypes.func, - onAccountRestriction: PropTypes.func, + onPathChange: PropTypes.func.isRequired, + selectedPath: PropTypes.string.isRequired, + device: PropTypes.string.isRequired, + accounts: PropTypes.array.isRequired, + onAccountChange: PropTypes.func.isRequired, + onForgetDevice: PropTypes.func.isRequired, + getPage: PropTypes.func.isRequired, + network: PropTypes.string, + selectedAccount: PropTypes.string, + history: PropTypes.object, + onUnlockAccount: PropTypes.func, + onCancel: PropTypes.func, + onAccountRestriction: PropTypes.func, } AccountList.contextTypes = { - t: PropTypes.func, + t: PropTypes.func, } module.exports = AccountList diff --git a/ui/app/pages/create-account/connect-hardware/connect-screen.js b/ui/app/pages/create-account/connect-hardware/connect-screen.js index a3b8ad246..fe7c1e027 100644 --- a/ui/app/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/pages/create-account/connect-hardware/connect-screen.js @@ -4,12 +4,12 @@ const h = require('react-hyperscript') import Button from '../../../components/ui/button' class ConnectScreen extends Component { - constructor (props) { - super(props) - this.state = { - selectedDevice: null, - } + constructor (props) { + super(props) + this.state = { + selectedDevice: null, } + } connect = () => { if (this.state.selectedDevice) { @@ -19,23 +19,23 @@ class ConnectScreen extends Component { } renderConnectToTrezorButton () { - return h( - `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`, - { onClick: _ => this.setState({selectedDevice: 'trezor'}) }, - h('img.hw-connect__btn__img', { - src: 'images/trezor-logo.svg', - }) - ) + return h( + `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`, + { onClick: _ => this.setState({selectedDevice: 'trezor'}) }, + h('img.hw-connect__btn__img', { + src: 'images/trezor-logo.svg', + }) + ) } renderConnectToLedgerButton () { - return h( - `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`, - { onClick: _ => this.setState({selectedDevice: 'ledger'}) }, - h('img.hw-connect__btn__img', { - src: 'images/ledger-logo.svg', - }) - ) + return h( + `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`, + { onClick: _ => this.setState({selectedDevice: 'ledger'}) }, + h('img.hw-connect__btn__img', { + src: 'images/ledger-logo.svg', + }) + ) } renderButtons () { @@ -57,30 +57,30 @@ class ConnectScreen extends Component { } renderUnsupportedBrowser () { - return ( - h('div.new-account-connect-form.unsupported-browser', {}, [ - h('div.hw-connect', [ - h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')), - h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')), - ]), - h(Button, { - type: 'primary', - large: true, - onClick: () => global.platform.openWindow({ - url: 'https://google.com/chrome', - }), - }, this.context.t('downloadGoogleChrome')), - ]) - ) + return ( + h('div.new-account-connect-form.unsupported-browser', {}, [ + h('div.hw-connect', [ + h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')), + h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')), + ]), + h(Button, { + type: 'primary', + large: true, + onClick: () => global.platform.openWindow({ + url: 'https://google.com/chrome', + }), + }, this.context.t('downloadGoogleChrome')), + ]) + ) } renderHeader () { - return ( - h('div.hw-connect__header', {}, [ - h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)), - h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)), - ]) - ) + return ( + h('div.hw-connect__header', {}, [ + h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)), + h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)), + ]) + ) } getAffiliateLinks () { @@ -96,10 +96,10 @@ class ConnectScreen extends Component { } renderTrezorAffiliateLink () { - return h('div.hw-connect__get-hw', {}, [ - h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)), - this.getAffiliateLinks(), - ]) + return h('div.hw-connect__get-hw', {}, [ + h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)), + this.getAffiliateLinks(), + ]) } @@ -108,89 +108,89 @@ class ConnectScreen extends Component { } renderLearnMore () { - return ( - h('p.hw-connect__learn-more', { - onClick: this.scrollToTutorial, - }, [ - this.context.t('learnMore'), - h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}), - ]) - ) + return ( + h('p.hw-connect__learn-more', { + onClick: this.scrollToTutorial, + }, [ + this.context.t('learnMore'), + h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}), + ]) + ) } renderTutorialSteps () { - const steps = [ - { - asset: 'hardware-wallet-step-1', - dimensions: {width: '225px', height: '75px'}, - }, - { - asset: 'hardware-wallet-step-2', - dimensions: {width: '300px', height: '100px'}, - }, - { - asset: 'hardware-wallet-step-3', - dimensions: {width: '120px', height: '90px'}, - }, - ] - - return h('.hw-tutorial', { - ref: node => { this.referenceNode = node }, + const steps = [ + { + asset: 'hardware-wallet-step-1', + dimensions: {width: '225px', height: '75px'}, + }, + { + asset: 'hardware-wallet-step-2', + dimensions: {width: '300px', height: '100px'}, }, - steps.map((step, i) => ( - h('div.hw-connect', {}, [ - h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)), - h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)), - h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }), - ]) - )) - ) + { + asset: 'hardware-wallet-step-3', + dimensions: {width: '120px', height: '90px'}, + }, + ] + + return h('.hw-tutorial', { + ref: node => { this.referenceNode = node }, + }, + steps.map((step, i) => ( + h('div.hw-connect', {}, [ + h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)), + h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)), + h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }), + ]) + )) + ) } renderFooter () { - return ( - h('div.hw-connect__footer', {}, [ - h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)), - this.renderButtons(), - h('p.hw-connect__footer__msg', {}, [ - this.context.t(`havingTroubleConnecting`), - h('a.hw-connect__footer__link', { - href: 'https://support.metamask.io/', - target: '_blank', - }, this.context.t('getHelp')), - ]), - ]) - ) + return ( + h('div.hw-connect__footer', {}, [ + h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)), + this.renderButtons(), + h('p.hw-connect__footer__msg', {}, [ + this.context.t(`havingTroubleConnecting`), + h('a.hw-connect__footer__link', { + href: 'https://support.metamask.io/', + target: '_blank', + }, this.context.t('getHelp')), + ]), + ]) + ) } renderConnectScreen () { - return ( - h('div.new-account-connect-form', {}, [ - this.renderHeader(), - this.renderButtons(), - this.renderTrezorAffiliateLink(), - this.renderLearnMore(), - this.renderTutorialSteps(), - this.renderFooter(), - ]) - ) + return ( + h('div.new-account-connect-form', {}, [ + this.renderHeader(), + this.renderButtons(), + this.renderTrezorAffiliateLink(), + this.renderLearnMore(), + this.renderTutorialSteps(), + this.renderFooter(), + ]) + ) } render () { - if (this.props.browserSupported) { - return this.renderConnectScreen() - } - return this.renderUnsupportedBrowser() + if (this.props.browserSupported) { + return this.renderConnectScreen() + } + return this.renderUnsupportedBrowser() } } ConnectScreen.propTypes = { - connectToHardwareWallet: PropTypes.func.isRequired, - browserSupported: PropTypes.bool.isRequired, + connectToHardwareWallet: PropTypes.func.isRequired, + browserSupported: PropTypes.bool.isRequired, } ConnectScreen.contextTypes = { - t: PropTypes.func, + t: PropTypes.func, } module.exports = ConnectScreen diff --git a/ui/app/pages/create-account/connect-hardware/index.js b/ui/app/pages/create-account/connect-hardware/index.js index 80a160205..66851c780 100644 --- a/ui/app/pages/create-account/connect-hardware/index.js +++ b/ui/app/pages/create-account/connect-hardware/index.js @@ -126,16 +126,16 @@ class ConnectHardwareForm extends Component { onForgetDevice = (device) => { this.props.forgetDevice(device) - .then(_ => { - this.setState({ - error: null, - selectedAccount: null, - accounts: [], - unlocked: false, + .then(_ => { + this.setState({ + error: null, + selectedAccount: null, + accounts: [], + unlocked: false, + }) + }).catch(e => { + this.setState({ error: e.toString() }) }) - }).catch(e => { - this.setState({ error: e.toString() }) - }) } onUnlockAccount = (device) => { @@ -145,28 +145,28 @@ class ConnectHardwareForm extends Component { } this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device) - .then(_ => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Connected Hardware Wallet', - name: 'Connected Account with: ' + device, - }, - }) - this.props.history.push(DEFAULT_ROUTE) - }).catch(e => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', - action: 'Connected Hardware Wallet', - name: 'Error connecting hardware wallet', - }, - customVariables: { - error: e.toString(), - }, + .then(_ => { + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Connected Hardware Wallet', + name: 'Connected Account with: ' + device, + }, + }) + this.props.history.push(DEFAULT_ROUTE) + }).catch(e => { + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Connected Hardware Wallet', + name: 'Error connecting hardware wallet', + }, + customVariables: { + error: e.toString(), + }, + }) + this.setState({ error: e.toString() }) }) - this.setState({ error: e.toString() }) - }) } onCancel = () => { diff --git a/ui/app/pages/first-time-flow/create-password/create-password.component.js b/ui/app/pages/first-time-flow/create-password/create-password.component.js index 5e67a2244..fbeb34d77 100644 --- a/ui/app/pages/first-time-flow/create-password/create-password.component.js +++ b/ui/app/pages/first-time-flow/create-password/create-password.component.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { Switch, Route } from 'react-router-dom' import NewAccount from './new-account' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import ImportWithSeedPhrase from './import-with-seed-phrase' import { INITIALIZE_CREATE_PASSWORD_ROUTE, @@ -30,19 +31,7 @@ export default class CreatePassword extends PureComponent { return ( <div className="first-time-flow__wrapper"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <Switch> <Route exact diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index a2fb5a3bf..48eff96cb 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -17,6 +17,7 @@ export default class ImportWithSeedPhrase extends PureComponent { static propTypes = { history: PropTypes.object, onSubmit: PropTypes.func.isRequired, + setSeedPhraseBackedUp: PropTypes.func, } state = { @@ -126,7 +127,7 @@ export default class ImportWithSeedPhrase extends PureComponent { } const { password, seedPhrase } = this.state - const { history, onSubmit } = this.props + const { history, onSubmit, setSeedPhraseBackedUp } = this.props try { await onSubmit(password, this.parseSeedPhrase(seedPhrase)) @@ -137,7 +138,10 @@ export default class ImportWithSeedPhrase extends PureComponent { name: 'Import Complete', }, }) - history.push(INITIALIZE_END_OF_FLOW_ROUTE) + + setSeedPhraseBackedUp(true).then(() => { + history.push(INITIALIZE_END_OF_FLOW_ROUTE) + }) } catch (error) { this.setState({ seedPhraseError: error.message }) } @@ -174,7 +178,7 @@ export default class ImportWithSeedPhrase extends PureComponent { }) this.setState((prevState) => ({ - termsChecked: !prevState.termsChecked, + termsChecked: !prevState.termsChecked, })) } diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js new file mode 100644 index 000000000..0cfeee1f4 --- /dev/null +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux' +import ImportWithSeedPhrase from './import-with-seed-phrase.component' +import { + setSeedPhraseBackedUp, +} from '../../../../store/actions' + +const mapDispatchToProps = dispatch => { + return { + setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)), + } +} + +export default connect(null, mapDispatchToProps)(ImportWithSeedPhrase) diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js index e5ff1fde5..9d4ad7d0f 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './import-with-seed-phrase.component' +export { default } from './import-with-seed-phrase.container' diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js index 83b0e7fc6..31658d87a 100644 --- a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../components/ui/button' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import { DEFAULT_ROUTE } from '../../../helpers/constants/routes' export default class EndOfFlowScreen extends PureComponent { @@ -21,19 +22,7 @@ export default class EndOfFlowScreen extends PureComponent { return ( <div className="end-of-flow"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <div className="end-of-flow__emoji">🎉</div> <div className="first-time-flow__header"> { t('congratulations') } @@ -66,9 +55,9 @@ export default class EndOfFlowScreen extends PureComponent { rel="noopener noreferrer" > <span className="first-time-flow__link-text"> - Learn More + {t('endOfFlowMessage9')} </span> - </a>. + </a> </div> <Button type="primary" @@ -85,7 +74,7 @@ export default class EndOfFlowScreen extends PureComponent { history.push(DEFAULT_ROUTE) }} > - { 'All Done' } + { t('endOfFlowMessage10') } </Button> </div> ) diff --git a/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js index 4fd028482..6bc89245b 100644 --- a/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js +++ b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js @@ -6,7 +6,6 @@ import { LOCK_ROUTE, INITIALIZE_WELCOME_ROUTE, INITIALIZE_UNLOCK_ROUTE, - INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../helpers/constants/routes' @@ -15,7 +14,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding: PropTypes.bool, isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, - seedPhrase: PropTypes.string, optInMetaMetrics: PropTypes.bool, } @@ -24,7 +22,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding, isInitialized, isUnlocked, - seedPhrase, optInMetaMetrics, } = this.props @@ -32,7 +29,7 @@ export default class FirstTimeFlowSwitch extends PureComponent { return <Redirect to={{ pathname: DEFAULT_ROUTE }} /> } - if (isUnlocked && !seedPhrase) { + if (isUnlocked) { return <Redirect to={{ pathname: LOCK_ROUTE }} /> } @@ -44,10 +41,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { return <Redirect to={{ pathname: INITIALIZE_UNLOCK_ROUTE }} /> } - if (seedPhrase) { - return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }} /> - } - if (optInMetaMetrics === null) { return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} /> } diff --git a/ui/app/pages/first-time-flow/first-time-flow.component.js b/ui/app/pages/first-time-flow/first-time-flow.component.js index 0d206bf42..91415d2ee 100644 --- a/ui/app/pages/first-time-flow/first-time-flow.component.js +++ b/ui/app/pages/first-time-flow/first-time-flow.component.js @@ -18,6 +18,7 @@ import { INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_METAMETRICS_OPT_IN_ROUTE, + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, } from '../../helpers/constants/routes' export default class FirstTimeFlow extends PureComponent { @@ -30,6 +31,9 @@ export default class FirstTimeFlow extends PureComponent { isUnlocked: PropTypes.bool, unlockAccount: PropTypes.func, nextRoute: PropTypes.string, + showingSeedPhraseBackupAfterOnboarding: PropTypes.bool, + seedPhraseBackedUp: PropTypes.bool, + verifySeedPhrase: PropTypes.func, } state = { @@ -38,9 +42,16 @@ export default class FirstTimeFlow extends PureComponent { } componentDidMount () { - const { completedOnboarding, history, isInitialized, isUnlocked } = this.props + const { + completedOnboarding, + history, + isInitialized, + isUnlocked, + showingSeedPhraseBackupAfterOnboarding, + seedPhraseBackedUp, + } = this.props - if (completedOnboarding) { + if (completedOnboarding && (!showingSeedPhraseBackupAfterOnboarding || seedPhraseBackedUp)) { history.push(DEFAULT_ROUTE) return } @@ -88,6 +99,7 @@ export default class FirstTimeFlow extends PureComponent { render () { const { seedPhrase, isImportedKeyring } = this.state + const { verifySeedPhrase } = this.props return ( <div className="first-time-flow"> @@ -98,6 +110,17 @@ export default class FirstTimeFlow extends PureComponent { <SeedPhrase { ...props } seedPhrase={seedPhrase} + verifySeedPhrase={verifySeedPhrase} + /> + )} + /> + <Route + path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE} + render={props => ( + <SeedPhrase + { ...props } + seedPhrase={seedPhrase} + verifySeedPhrase={verifySeedPhrase} /> )} /> diff --git a/ui/app/pages/first-time-flow/first-time-flow.container.js b/ui/app/pages/first-time-flow/first-time-flow.container.js index 16025a489..ec9920d74 100644 --- a/ui/app/pages/first-time-flow/first-time-flow.container.js +++ b/ui/app/pages/first-time-flow/first-time-flow.container.js @@ -5,16 +5,23 @@ import { createNewVaultAndGetSeedPhrase, createNewVaultAndRestore, unlockAndGetSeedPhrase, + verifySeedPhrase, } from '../../store/actions' +import { + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, +} from '../../helpers/constants/routes' -const mapStateToProps = state => { - const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state +const mapStateToProps = (state, ownProps) => { + const { metamask: { completedOnboarding, isInitialized, isUnlocked, seedPhraseBackedUp } } = state + const showingSeedPhraseBackupAfterOnboarding = Boolean(ownProps.location.pathname.match(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)) return { completedOnboarding, isInitialized, isUnlocked, nextRoute: getFirstTimeFlowTypeRoute(state), + showingSeedPhraseBackupAfterOnboarding, + seedPhraseBackedUp, } } @@ -25,6 +32,7 @@ const mapDispatchToProps = dispatch => { return dispatch(createNewVaultAndRestore(password, seedPhrase)) }, unlockAccount: password => dispatch(unlockAndGetSeedPhrase(password)), + verifySeedPhrase: () => verifySeedPhrase(), } } diff --git a/ui/app/pages/first-time-flow/index.scss b/ui/app/pages/first-time-flow/index.scss index 6c65cfdae..dec80cb60 100644 --- a/ui/app/pages/first-time-flow/index.scss +++ b/ui/app/pages/first-time-flow/index.scss @@ -26,6 +26,10 @@ .app-header__metafox-logo { margin-bottom: 40px; + + @media screen and (max-width: $break-small) { + margin-bottom: 0px; + } } } diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js index 6b9d06cf9..bb187d634 100644 --- a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js +++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import PageContainerFooter from '../../../components/ui/page-container/page-container-footer' export default class MetaMetricsOptIn extends Component { @@ -28,19 +29,7 @@ export default class MetaMetricsOptIn extends Component { return ( <div className="metametrics-opt-in"> <div className="metametrics-opt-in__main"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <div className="metametrics-opt-in__body-graphic"> <img src="images/metrics-chart.svg" /> </div> @@ -113,7 +102,7 @@ export default class MetaMetricsOptIn extends Component { .then(() => { history.push(nextRoute) }) - }) + }) }} cancelText={'No Thanks'} hideCancel={false} @@ -146,7 +135,7 @@ export default class MetaMetricsOptIn extends Component { .then(() => { history.push(nextRoute) }) - }) + }) }} submitText={'I agree'} submitButtonType={'primary'} diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index 4cfc38fdf..9256c3d8d 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -6,6 +6,7 @@ import Button from '../../../../components/ui/button' import { INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, + DEFAULT_ROUTE, } from '../../../../helpers/constants/routes' import { exportAsFile } from '../../../../helpers/utils/util' import DraggableSeed from './draggable-seed.component' @@ -88,7 +89,7 @@ export default class ConfirmSeedPhrase extends PureComponent { } handleSubmit = async () => { - const { history } = this.props + const { history, setSeedPhraseBackedUp, showingSeedPhraseBackupAfterOnboarding, hideSeedPhraseBackupAfterOnboarding } = this.props if (!this.isValid()) { return @@ -102,7 +103,15 @@ export default class ConfirmSeedPhrase extends PureComponent { name: 'Verify Complete', }, }) - history.push(INITIALIZE_END_OF_FLOW_ROUTE) + + setSeedPhraseBackedUp(true).then(() => { + if (showingSeedPhraseBackupAfterOnboarding) { + hideSeedPhraseBackupAfterOnboarding() + history.push(DEFAULT_ROUTE) + } else { + history.push(INITIALIZE_END_OF_FLOW_ROUTE) + } + }) } catch (error) { console.error(error.message) } diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js new file mode 100644 index 000000000..ac5a26979 --- /dev/null +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js @@ -0,0 +1,23 @@ +import { connect } from 'react-redux' +import ConfirmSeedPhrase from './confirm-seed-phrase.component' +import { + setSeedPhraseBackedUp, + hideSeedPhraseBackupAfterOnboarding, +} from '../../../../store/actions' + +const mapStateToProps = state => { + const { appState: { showingSeedPhraseBackupAfterOnboarding } } = state + + return { + showingSeedPhraseBackupAfterOnboarding, + } +} + +const mapDispatchToProps = dispatch => { + return { + setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)), + hideSeedPhraseBackupAfterOnboarding: () => dispatch(hideSeedPhraseBackupAfterOnboarding()), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(ConfirmSeedPhrase) diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js index c7b511503..beb53b383 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './confirm-seed-phrase.component' +export { default } from './confirm-seed-phrase.container' diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js index 4a1b191b5..a528f95a2 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './reveal-seed-phrase.component' +export { default } from './reveal-seed-phrase.container' diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss index 8a47447ed..dfe9868cf 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss @@ -1,4 +1,12 @@ .reveal-seed-phrase { + @media screen and (max-width: 576px) { + display: flex; + flex-direction: column; + width: 96%; + margin-left: 2%; + margin-right: 2%; + } + &__secret { position: relative; display: flex; @@ -54,4 +62,12 @@ button { margin-top: 0xp; } + + &__buttons { + display: flex; + + .first-time-flow__button:last-of-type { + margin-left: 20px; + } + } } diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js index 4e9948a0e..78981bae8 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import classnames from 'classnames' import LockIcon from '../../../../components/ui/lock-icon' import Button from '../../../../components/ui/button' -import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../helpers/constants/routes' +import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes' import { exportAsFile } from '../../../../helpers/utils/util' export default class RevealSeedPhrase extends PureComponent { @@ -15,6 +15,8 @@ export default class RevealSeedPhrase extends PureComponent { static propTypes = { history: PropTypes.object, seedPhrase: PropTypes.string, + setSeedPhraseBackedUp: PropTypes.func, + setCompletedOnboarding: PropTypes.func, } state = { @@ -45,6 +47,24 @@ export default class RevealSeedPhrase extends PureComponent { history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE) } + handleSkip = event => { + event.preventDefault() + const { history, setSeedPhraseBackedUp, setCompletedOnboarding } = this.props + + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Seed Phrase Setup', + name: 'Remind me later', + }, + }) + + Promise.all([setCompletedOnboarding(), setSeedPhraseBackedUp(false)]) + .then(() => { + history.push(DEFAULT_ROUTE) + }) + } + renderSecretWordsContainer () { const { t } = this.context const { seedPhrase } = this.props @@ -129,14 +149,23 @@ export default class RevealSeedPhrase extends PureComponent { </div> </div> </div> - <Button - type="primary" - className="first-time-flow__button" - onClick={this.handleNext} - disabled={!isShowingSeedPhrase} - > - { t('next') } - </Button> + <div className="reveal-seed-phrase__buttons"> + <Button + type="secondary" + className="first-time-flow__button" + onClick={this.handleSkip} + > + { t('remindMeLater') } + </Button> + <Button + type="primary" + className="first-time-flow__button" + onClick={this.handleNext} + disabled={!isShowingSeedPhrase} + > + { t('next') } + </Button> + </div> </div> ) } diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js new file mode 100644 index 000000000..7ada36afc --- /dev/null +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux' +import RevealSeedPhrase from './reveal-seed-phrase.component' +import { + setCompletedOnboarding, + setSeedPhraseBackedUp, +} from '../../../../store/actions' + +const mapDispatchToProps = dispatch => { + return { + setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)), + setCompletedOnboarding: () => dispatch(setCompletedOnboarding()), + } +} + +export default connect(null, mapDispatchToProps)(RevealSeedPhrase) diff --git a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js index 0b19af18c..ae38757d9 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js @@ -6,45 +6,48 @@ import ConfirmSeedPhrase from './confirm-seed-phrase' import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, DEFAULT_ROUTE, } from '../../../helpers/constants/routes' import HTML5Backend from 'react-dnd-html5-backend' import {DragDropContextProvider} from 'react-dnd' +import MetaFoxLogo from '../../../components/ui/metafox-logo' export default class SeedPhrase extends PureComponent { static propTypes = { address: PropTypes.string, history: PropTypes.object, seedPhrase: PropTypes.string, + verifySeedPhrase: PropTypes.func, + } + + state = { + verifiedSeedPhrase: '', } componentDidMount () { - const { seedPhrase, history } = this.props + const { seedPhrase, history, verifySeedPhrase } = this.props if (!seedPhrase) { - history.push(DEFAULT_ROUTE) + verifySeedPhrase() + .then(verifiedSeedPhrase => { + if (!verifiedSeedPhrase) { + history.push(DEFAULT_ROUTE) + } else { + this.setState({ verifiedSeedPhrase }) + } + }) } } render () { const { seedPhrase } = this.props + const { verifiedSeedPhrase } = this.state return ( <DragDropContextProvider backend={HTML5Backend}> <div className="first-time-flow__wrapper"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <Switch> <Route exact @@ -52,7 +55,7 @@ export default class SeedPhrase extends PureComponent { render={props => ( <ConfirmSeedPhrase { ...props } - seedPhrase={seedPhrase} + seedPhrase={seedPhrase || verifiedSeedPhrase} /> )} /> @@ -62,7 +65,17 @@ export default class SeedPhrase extends PureComponent { render={props => ( <RevealSeedPhrase { ...props } - seedPhrase={seedPhrase} + seedPhrase={seedPhrase || verifiedSeedPhrase} + /> + )} + /> + <Route + exact + path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE} + render={props => ( + <RevealSeedPhrase + { ...props } + seedPhrase={seedPhrase || verifiedSeedPhrase} /> )} /> diff --git a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js index 8339a6f6f..3d5f7f066 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js +++ b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js @@ -131,7 +131,7 @@ describe('ConfirmSeedPhrase Component', () => { assert.deepEqual(root.state().pendingSeedIndices, [2, 0, 1]) }) - it('should submit correctly', () => { + it('should submit correctly', async () => { const originalSeed = ['鼠', '牛', '虎', '兔', '龍', '蛇', '馬', '羊', '猴', '雞', '狗', '豬'] const metricsEventSpy = sinon.spy() const pushSpy = sinon.spy() @@ -139,6 +139,7 @@ describe('ConfirmSeedPhrase Component', () => { { seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬', history: { push: pushSpy }, + setSeedPhraseBackedUp: () => Promise.resolve(), }, { metricsEvent: metricsEventSpy, @@ -157,6 +158,9 @@ describe('ConfirmSeedPhrase Component', () => { root.update() root.find('.first-time-flow__button').simulate('click') + + await (new Promise(resolve => setTimeout(resolve, 100))) + assert.deepEqual(metricsEventSpy.args[0][0], { eventOpts: { category: 'Onboarding', diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js index 5af29a505..5379952f1 100644 --- a/ui/app/pages/first-time-flow/select-action/select-action.component.js +++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../components/ui/button' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import { INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../helpers/constants/routes' @@ -39,20 +40,8 @@ export default class SelectAction extends PureComponent { const { t } = this.context return ( - <div className="select-action"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <div className="select-action"> + <MetaFoxLogo /> <div className="select-action__wrapper"> @@ -106,7 +95,7 @@ export default class SelectAction extends PureComponent { </div> </div> - </div> + </div> ) } } diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js index 4d96c3131..66d962ff1 100644 --- a/ui/app/pages/home/home.component.js +++ b/ui/app/pages/home/home.component.js @@ -2,25 +2,49 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Media from 'react-media' import { Redirect } from 'react-router-dom' +import HomeNotification from '../../components/app/home-notification' +import MultipleNotifications from '../../components/app/multiple-notifications' import WalletView from '../../components/app/wallet-view' import TransactionView from '../../components/app/transaction-view' import ProviderApproval from '../provider-approval' import { - INITIALIZE_SEED_PHRASE_ROUTE, RESTORE_VAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE, CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, } from '../../helpers/constants/routes' export default class Home extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + + static defaultProps = { + activeTab: {}, + unsetMigratedPrivacyMode: null, + forceApproveProviderRequestByOrigin: null, + } + static propTypes = { + activeTab: PropTypes.shape({ + origin: PropTypes.string, + protocol: PropTypes.string, + title: PropTypes.string, + url: PropTypes.string, + }), history: PropTypes.object, forgottenPassword: PropTypes.bool, - seedWords: PropTypes.string, suggestedTokens: PropTypes.object, unconfirmedTransactionsCount: PropTypes.number, providerRequests: PropTypes.array, + showPrivacyModeNotification: PropTypes.bool.isRequired, + unsetMigratedPrivacyMode: PropTypes.func, + viewingUnconnectedDapp: PropTypes.bool.isRequired, + forceApproveProviderRequestByOrigin: PropTypes.func, + shouldShowSeedPhraseReminder: PropTypes.bool, + rejectProviderRequestByOrigin: PropTypes.func, + isPopup: PropTypes.bool, } componentWillMount () { @@ -42,23 +66,26 @@ export default class Home extends PureComponent { // suggested new tokens if (Object.keys(suggestedTokens).length > 0) { - history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE) + history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE) } } render () { + const { t } = this.context const { + activeTab, forgottenPassword, - seedWords, providerRequests, history, + showPrivacyModeNotification, + unsetMigratedPrivacyMode, + viewingUnconnectedDapp, + forceApproveProviderRequestByOrigin, + shouldShowSeedPhraseReminder, + rejectProviderRequestByOrigin, + isPopup, } = this.props - // seed words - if (seedWords) { - return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }}/> - } - if (forgottenPassword) { return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} /> } @@ -68,7 +95,6 @@ export default class Home extends PureComponent { <ProviderApproval providerRequest={providerRequests[0]} /> ) } - return ( <div className="main-container"> <div className="account-and-transaction-details"> @@ -76,7 +102,58 @@ export default class Home extends PureComponent { query="(min-width: 576px)" render={() => <WalletView />} /> - { !history.location.pathname.match(/^\/confirm-transaction/) ? <TransactionView /> : null } + { !history.location.pathname.match(/^\/confirm-transaction/) + ? ( + <TransactionView> + <MultipleNotifications + className + notifications={[ + { + shouldBeRendered: showPrivacyModeNotification, + component: <HomeNotification + descriptionText={t('privacyModeDefault')} + acceptText={t('learnMore')} + onAccept={() => { + window.open('https://medium.com/metamask/42549d4870fa', '_blank', 'noopener') + unsetMigratedPrivacyMode() + }} + key="home-privacyModeDefault" + />, + }, + { + shouldBeRendered: viewingUnconnectedDapp, + component: <HomeNotification + descriptionText={t('shareAddressToConnect', [activeTab.origin])} + acceptText={t('shareAddress')} + onAccept={() => { + forceApproveProviderRequestByOrigin(activeTab.origin) + }} + ignoreText={t('dismiss')} + onIgnore={() => rejectProviderRequestByOrigin(activeTab.origin)} + infoText={t('shareAddressInfo', [activeTab.origin])} + key="home-shareAddressToConnect" + />, + }, + { + shouldBeRendered: shouldShowSeedPhraseReminder, + component: <HomeNotification + descriptionText={t('backupApprovalNotice')} + acceptText={t('backupNow')} + onAccept={() => { + if (isPopup) { + global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE) + } else { + history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE) + } + }} + infoText={t('backupApprovalInfo')} + key="home-backupApprovalNotice" + />, + }, + ]}/> + </TransactionView> + ) + : null } </div> </div> ) diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js index d0a5d7b47..f03ffdc02 100644 --- a/ui/app/pages/home/home.container.js +++ b/ui/app/pages/home/home.container.js @@ -3,28 +3,65 @@ import { compose } from 'recompose' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction' -`` +import { getCurrentEthBalance } from '../../selectors/selectors' +import { + forceApproveProviderRequestByOrigin, + unsetMigratedPrivacyMode, + rejectProviderRequestByOrigin, +} from '../../store/actions' +import { getEnvironmentType } from '../../../../app/scripts/lib/util' +import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums' + +const activeTabDappProtocols = ['http:', 'https:', 'dweb:', 'ipfs:', 'ipns:', 'ssb:'] + const mapStateToProps = state => { - const { metamask, appState } = state + const { activeTab, metamask, appState } = state const { + approvedOrigins, + dismissedOrigins, lostAccounts, - seedWords, suggestedTokens, providerRequests, + migratedPrivacyMode, + featureFlags: { + privacyMode, + } = {}, + seedPhraseBackedUp, + tokens, } = metamask + const accountBalance = getCurrentEthBalance(state) const { forgottenPassword } = appState + const isUnconnected = Boolean( + activeTab && + activeTabDappProtocols.includes(activeTab.protocol) && + privacyMode && + !approvedOrigins[activeTab.origin] && + !dismissedOrigins[activeTab.origin] + ) + const isPopup = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP + return { lostAccounts, forgottenPassword, - seedWords, suggestedTokens, unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state), providerRequests, + showPrivacyModeNotification: migratedPrivacyMode, + activeTab, + viewingUnconnectedDapp: isUnconnected && isPopup, + shouldShowSeedPhraseReminder: !seedPhraseBackedUp && (parseInt(accountBalance, 16) > 0 || tokens.length > 0), + isPopup, } } +const mapDispatchToProps = (dispatch) => ({ + unsetMigratedPrivacyMode: () => dispatch(unsetMigratedPrivacyMode()), + forceApproveProviderRequestByOrigin: (origin) => dispatch(forceApproveProviderRequestByOrigin(origin)), + rejectProviderRequestByOrigin: origin => dispatch(rejectProviderRequestByOrigin(origin)), +}) + export default compose( withRouter, - connect(mapStateToProps) + connect(mapStateToProps, mapDispatchToProps) )(Home) diff --git a/ui/app/pages/index.scss b/ui/app/pages/index.scss index cb9f0d80c..e7242392b 100644 --- a/ui/app/pages/index.scss +++ b/ui/app/pages/index.scss @@ -2,6 +2,8 @@ @import 'add-token/index'; +@import 'send/send'; + @import 'confirm-add-token/index'; @import 'settings/index'; diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js index a8de4fce9..bd2385808 100644 --- a/ui/app/pages/mobile-sync/index.js +++ b/ui/app/pages/mobile-sync/index.js @@ -84,6 +84,9 @@ class MobileSyncPage extends Component { } initWebsockets () { + // Make sure there are no existing listeners + this.disconnectWebsockets() + this.pubnub = new PubNub({ subscribeKey: process.env.PUBNUB_SUB_KEY, publishKey: process.env.PUBNUB_PUB_KEY, @@ -91,7 +94,7 @@ class MobileSyncPage extends Component { ssl: true, }) - this.pubnubListener = this.pubnub.addListener({ + this.pubnubListener = { message: (data) => { const {channel, message} = data // handle message @@ -100,18 +103,20 @@ class MobileSyncPage extends Component { } if (message.event === 'start-sync') { - this.startSyncing() + this.startSyncing() } else if (message.event === 'connection-info') { - this.handle && clearTimeout(this.handle) - this.disconnectWebsockets() - this.initWithCipherKeyAndChannelName(message.cipher, message.channel) - this.initWebsockets() + this.handle && clearTimeout(this.handle) + this.disconnectWebsockets() + this.initWithCipherKeyAndChannelName(message.cipher, message.channel) + this.initWebsockets() } else if (message.event === 'end-sync') { - this.disconnectWebsockets() - this.setState({syncing: false, completed: true}) + this.disconnectWebsockets() + this.setState({syncing: false, completed: true}) } }, - }) + } + + this.pubnub.addListener(this.pubnubListener) this.pubnub.subscribe({ channels: [this.channelName], @@ -122,14 +127,14 @@ class MobileSyncPage extends Component { disconnectWebsockets () { if (this.pubnub && this.pubnubListener) { - this.pubnub.disconnect(this.pubnubListener) + this.pubnub.removeListener(this.pubnubListener) } } - // Calculating a PubNub Message Payload Size. + // Calculating a PubNub Message Payload Size. calculatePayloadSize (channel, message) { return encodeURIComponent( - channel + JSON.stringify(message) + channel + JSON.stringify(message) ).length + 100 } @@ -153,14 +158,14 @@ class MobileSyncPage extends Component { channel: this.channelName, sendByPost: false, // true to send via post storeInHistory: false, - }, - (status, response) => { - if (!status.error) { - resolve() - } else { - reject(response) - } - }) + }, + (status, response) => { + if (!status.error) { + resolve() + } else { + reject(response) + } + }) }) } @@ -199,16 +204,16 @@ class MobileSyncPage extends Component { sendMessage (data, pkg, count) { return new Promise((resolve, reject) => { this.pubnub.publish( - { - message: { - event: 'syncing-data', - data, - totalPkg: count, - currentPkg: pkg, - }, - channel: this.channelName, - sendByPost: false, // true to send via post - storeInHistory: false, + { + message: { + event: 'syncing-data', + data, + totalPkg: count, + currentPkg: pkg, + }, + channel: this.channelName, + sendByPost: false, // true to send via post + storeInHistory: false, }, (status, response) => { if (!status.error) { @@ -229,7 +234,7 @@ class MobileSyncPage extends Component { renderWarning (text) { return ( h('.page-container__warning-container', [ - h('.page-container__warning-message', [ + h('.page-container__warning-message', [ h('div', [text]), ]), ]) @@ -245,12 +250,12 @@ class MobileSyncPage extends Component { if (this.state.completed) { return h('div.reveal-seed__content', {}, - h('label.reveal-seed__label', { - style: { - width: '100%', - textAlign: 'center', - }, - }, t('syncWithMobileComplete')), + h('label.reveal-seed__label', { + style: { + width: '100%', + textAlign: 'center', + }, + }, t('syncWithMobileComplete')), ) } @@ -303,8 +308,8 @@ class MobileSyncPage extends Component { h('div', [ h('label.reveal-seed__label', { style: { - width: '100%', - textAlign: 'center', + width: '100%', + textAlign: 'center', }, }, t('syncWithMobileScanThisCode')), h('.div.qr-wrapper', { @@ -370,7 +375,7 @@ class MobileSyncPage extends Component { this.state.screen === PASSWORD_PROMPT_SCREEN ? h('.page-container__subtitle', this.context.t('syncWithMobileDescNewUsers')) : null, ]), h('.page-container__content', [ - this.renderContent(), + this.renderContent(), ]), this.renderFooter(), ]) diff --git a/ui/app/pages/routes/index.js b/ui/app/pages/routes/index.js index 9eeac2da2..2f7caf3bf 100644 --- a/ui/app/pages/routes/index.js +++ b/ui/app/pages/routes/index.js @@ -6,7 +6,8 @@ import { compose } from 'recompose' import actions from '../../store/actions' import log from 'loglevel' import IdleTimer from 'react-idle-timer' -import {getMetaMaskAccounts, getNetworkIdentifier, preferencesSelector} from '../../selectors/selectors' +import {getNetworkIdentifier, preferencesSelector} from '../../selectors/selectors' +import classnames from 'classnames' // init import FirstTimeFlow from '../first-time-flow' @@ -24,7 +25,6 @@ import Settings from '../settings' import Authenticated from '../../helpers/higher-order-components/authenticated' import Initialized from '../../helpers/higher-order-components/initialized' import Lock from '../lock' -import UiMigrationAnnouncement from '../../components/app/ui-migration-annoucement' const RestoreVaultPage = require('../keychains/restore-vault').default const RevealSeedConfirmation = require('../keychains/reveal-seed') const MobileSyncPage = require('../mobile-sync') @@ -178,12 +178,21 @@ class Routes extends Component { setMouseUserState, sidebar, submittedPendingTransactions, + isMouseUser, } = this.props const isLoadingNetwork = network === 'loading' && currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? this.getConnectingLabel(loadingMessage) : null log.debug('Main ui render function') + const { + isOpen: sidebarIsOpen, + transitionName: sidebarTransitionName, + type: sidebarType, + props, + } = sidebar + const { transaction: sidebarTransaction } = props || {} + const sidebarOnOverlayClose = sidebarType === WALLET_VIEW_SIDEBAR ? () => { this.context.metricsEvent({ @@ -196,17 +205,9 @@ class Routes extends Component { } : null - const { - isOpen: sidebarIsOpen, - transitionName: sidebarTransitionName, - type: sidebarType, - props, - } = sidebar - const { transaction: sidebarTransaction } = props || {} - return ( <div - className="app" + className={classnames('app', { 'mouse-user-styles': isMouseUser})} onClick={() => setMouseUserState(true)} onKeyDown={e => { if (e.keyCode === 9) { @@ -214,7 +215,6 @@ class Routes extends Component { } }} > - <UiMigrationAnnouncement /> <Modal /> <Alert visible={this.props.alertOpen} @@ -259,7 +259,7 @@ class Routes extends Component { passwordBox.focus() } else { // currently active: deactivate - this.props.dispatch(actions.lockMetamask(false)) + this.props.lockMetaMask() } } @@ -330,32 +330,14 @@ Routes.propTypes = { sidebar: PropTypes.object, alertOpen: PropTypes.bool, hideSidebar: PropTypes.func, - isOnboarding: PropTypes.bool, isUnlocked: PropTypes.bool, - networkDropdownOpen: PropTypes.bool, - showNetworkDropdown: PropTypes.func, - hideNetworkDropdown: PropTypes.func, setLastActiveTime: PropTypes.func, history: PropTypes.object, location: PropTypes.object, - dispatch: PropTypes.func, - toggleAccountMenu: PropTypes.func, - selectedAddress: PropTypes.string, - lostAccounts: PropTypes.array, - isInitialized: PropTypes.bool, - forgottenPassword: PropTypes.bool, - activeAddress: PropTypes.string, - unapprovedTxs: PropTypes.object, - seedWords: PropTypes.string, + lockMetaMask: PropTypes.func, submittedPendingTransactions: PropTypes.array, - unapprovedMsgCount: PropTypes.number, - unapprovedPersonalMsgCount: PropTypes.number, - unapprovedTypedMessagesCount: PropTypes.number, - welcomeScreenSeen: PropTypes.bool, - isPopup: PropTypes.bool, isMouseUser: PropTypes.bool, setMouseUserState: PropTypes.func, - t: PropTypes.func, providerId: PropTypes.string, providerRequests: PropTypes.array, autoLogoutTimeLimit: PropTypes.number, @@ -364,7 +346,6 @@ Routes.propTypes = { function mapStateToProps (state) { const { appState, metamask } = state const { - networkDropdownOpen, sidebar, alertOpen, alertMessage, @@ -372,77 +353,34 @@ function mapStateToProps (state) { loadingMessage, } = appState - const accounts = getMetaMaskAccounts(state) const { autoLogoutTimeLimit = 0 } = preferencesSelector(state) - const { - identities, - address, - keyrings, - isInitialized, - seedWords, - unapprovedTxs, - lostAccounts, - unapprovedMsgCount, - unapprovedPersonalMsgCount, - unapprovedTypedMessagesCount, - providerRequests, - } = metamask - const selected = address || Object.keys(accounts)[0] - return { // state from plugin - networkDropdownOpen, sidebar, alertOpen, alertMessage, isLoading, loadingMessage, - isInitialized, isUnlocked: state.metamask.isUnlocked, - selectedAddress: state.metamask.selectedAddress, currentView: state.appState.currentView, - activeAddress: state.appState.activeAddress, - transForward: state.appState.transForward, - isOnboarding: Boolean(seedWords || !isInitialized), - isPopup: state.metamask.isPopup, - seedWords: state.metamask.seedWords, submittedPendingTransactions: submittedPendingTransactionsSelector(state), - unapprovedTxs, - unapprovedMsgs: state.metamask.unapprovedMsgs, - unapprovedMsgCount, - unapprovedPersonalMsgCount, - unapprovedTypedMessagesCount, - menuOpen: state.appState.menuOpen, network: state.metamask.network, provider: state.metamask.provider, - forgottenPassword: state.appState.forgottenPassword, - lostAccounts, frequentRpcListDetail: state.metamask.frequentRpcListDetail || [], currentCurrency: state.metamask.currentCurrency, isMouseUser: state.appState.isMouseUser, - isRevealingSeedWords: state.metamask.isRevealingSeedWords, - Qr: state.appState.Qr, - welcomeScreenSeen: state.metamask.welcomeScreenSeen, providerId: getNetworkIdentifier(state), autoLogoutTimeLimit, - - // state needed to get account dropdown temporarily rendering from app bar - identities, - selected, - keyrings, - providerRequests, + providerRequests: metamask.providerRequests, } } function mapDispatchToProps (dispatch) { return { - dispatch, + lockMetaMask: () => dispatch(actions.lockMetamask(false)), hideSidebar: () => dispatch(actions.hideSidebar()), - showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), - hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), - toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)), setLastActiveTime: () => dispatch(actions.setLastActiveTime()), } diff --git a/ui/app/pages/send/account-list-item/account-list-item.container.js b/ui/app/pages/send/account-list-item/account-list-item.container.js index 21f800306..3fadec4f8 100644 --- a/ui/app/pages/send/account-list-item/account-list-item.container.js +++ b/ui/app/pages/send/account-list-item/account-list-item.container.js @@ -1,8 +1,8 @@ import { connect } from 'react-redux' import { - getConversionRate, - getCurrentCurrency, - getNativeCurrency, + getConversionRate, + getCurrentCurrency, + getNativeCurrency, } from '../send.selectors.js' import { getIsMainnet, diff --git a/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js new file mode 100644 index 000000000..e5edbc08d --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js @@ -0,0 +1,243 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Fuse from 'fuse.js' +import Identicon from '../../../../components/ui/identicon' +import {isValidAddress} from '../../../../helpers/utils/util' +import Dialog from '../../../../components/ui/dialog' +import ContactList from '../../../../components/app/contact-list' +import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component' +import {ellipsify} from '../../send.utils' + +export default class AddRecipient extends Component { + + static propTypes = { + className: PropTypes.string, + query: PropTypes.string, + ownedAccounts: PropTypes.array, + addressBook: PropTypes.array, + updateGas: PropTypes.func, + updateSendTo: PropTypes.func, + ensResolution: PropTypes.string, + toError: PropTypes.string, + toWarning: PropTypes.string, + ensResolutionError: PropTypes.string, + selectedToken: PropTypes.object, + hasHexData: PropTypes.bool, + tokens: PropTypes.array, + addressBookEntryName: PropTypes.string, + contacts: PropTypes.array, + nonContacts: PropTypes.array, + } + + constructor (props) { + super(props) + this.recentFuse = new Fuse(props.nonContacts, { + shouldSort: true, + threshold: 0.45, + location: 0, + distance: 100, + maxPatternLength: 32, + minMatchCharLength: 1, + keys: [ + { name: 'address', weight: 0.5 }, + ], + }) + + this.contactFuse = new Fuse(props.contacts, { + shouldSort: true, + threshold: 0.45, + location: 0, + distance: 100, + maxPatternLength: 32, + minMatchCharLength: 1, + keys: [ + { name: 'name', weight: 0.5 }, + { name: 'address', weight: 0.5 }, + ], + }) + } + + static contextTypes = { + t: PropTypes.func, + metricsEvent: PropTypes.func, + } + + state = { + isShowingTransfer: false, + isShowingAllRecent: false, + } + + selectRecipient = (to, nickname = '') => { + const { updateSendTo, updateGas } = this.props + + updateSendTo(to, nickname) + updateGas({ to }) + } + + searchForContacts = () => { + const { query, contacts } = this.props + + let _contacts = contacts + + if (query) { + this.contactFuse.setCollection(contacts) + _contacts = this.contactFuse.search(query) + } + + return _contacts + } + + searchForRecents = () => { + const { query, nonContacts } = this.props + + let _nonContacts = nonContacts + + if (query) { + this.recentFuse.setCollection(nonContacts) + _nonContacts = this.recentFuse.search(query) + } + + return _nonContacts + } + + render () { + const { ensResolution, query, addressBookEntryName } = this.props + const { isShowingTransfer } = this.state + + let content + + if (isValidAddress(query)) { + content = this.renderExplicitAddress(query) + } else if (ensResolution) { + content = this.renderExplicitAddress(ensResolution, addressBookEntryName || query) + } else if (isShowingTransfer) { + content = this.renderTransfer() + } + + return ( + <div className="send__select-recipient-wrapper"> + { this.renderDialogs() } + { content || this.renderMain() } + </div> + ) + } + + renderExplicitAddress (address, name) { + return ( + <div + key={address} + className="send__select-recipient-wrapper__group-item" + onClick={() => this.selectRecipient(address, name)} + > + <Identicon address={address} diameter={28} /> + <div className="send__select-recipient-wrapper__group-item__content"> + <div className="send__select-recipient-wrapper__group-item__title"> + {name || ellipsify(address)} + </div> + { + name && ( + <div className="send__select-recipient-wrapper__group-item__subtitle"> + {ellipsify(address)} + </div> + ) + } + </div> + </div> + ) + } + + renderTransfer () { + const { ownedAccounts } = this.props + const { t } = this.context + + return ( + <div className="send__select-recipient-wrapper__list"> + <div + className="send__select-recipient-wrapper__list__link" + onClick={() => this.setState({ isShowingTransfer: false })} + > + <div className="send__select-recipient-wrapper__list__back-caret"/> + { t('backToAll') } + </div> + <RecipientGroup + label={t('myAccounts')} + items={ownedAccounts} + onSelect={this.selectRecipient} + /> + </div> + ) + } + + renderMain () { + const { t } = this.context + const { query, ownedAccounts = [], addressBook } = this.props + + return ( + <div className="send__select-recipient-wrapper__list"> + <ContactList + addressBook={addressBook} + searchForContacts={this.searchForContacts.bind(this)} + searchForRecents={this.searchForRecents.bind(this)} + selectRecipient={this.selectRecipient.bind(this)} + > + { + (ownedAccounts && ownedAccounts.length > 1) && !query && ( + <div + className="send__select-recipient-wrapper__list__link" + onClick={() => this.setState({ isShowingTransfer: true })} + > + { t('transferBetweenAccounts') } + </div> + ) + } + </ContactList> + </div> + ) + } + + renderDialogs () { + const { toError, toWarning, ensResolutionError, ensResolution } = this.props + const { t } = this.context + const contacts = this.searchForContacts() + const recents = this.searchForRecents() + + if (contacts.length || recents.length) { + return null + } + + if (ensResolutionError) { + return ( + <Dialog + type="error" + className="send__error-dialog" + > + {ensResolutionError} + </Dialog> + ) + } + + if (toError && toError !== 'required' && !ensResolution) { + return ( + <Dialog + type="error" + className="send__error-dialog" + > + {t(toError)} + </Dialog> + ) + } + + + if (toWarning) { + return ( + <Dialog + type="warning" + className="send__error-dialog" + > + {t(toWarning)} + </Dialog> + ) + } + } + +} diff --git a/ui/app/pages/send/send-content/add-recipient/add-recipient.container.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.container.js new file mode 100644 index 000000000..eb980aa82 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.container.js @@ -0,0 +1,44 @@ +import { connect } from 'react-redux' +import { + accountsWithSendEtherInfoSelector, + getSendEnsResolution, + getSendEnsResolutionError, +} from '../../send.selectors.js' +import { + getAddressBook, + getAddressBookEntry, +} from '../../../../selectors/selectors' +import { + updateSendTo, +} from '../../../../store/actions' +import AddRecipient from './add-recipient.component' + +export default connect(mapStateToProps, mapDispatchToProps)(AddRecipient) + +function mapStateToProps (state) { + const ensResolution = getSendEnsResolution(state) + + let addressBookEntryName = '' + if (ensResolution) { + const addressBookEntry = getAddressBookEntry(state, ensResolution) || {} + addressBookEntryName = addressBookEntry.name + } + + const addressBook = getAddressBook(state) + + return { + ownedAccounts: accountsWithSendEtherInfoSelector(state), + addressBook, + ensResolution, + addressBookEntryName, + ensResolutionError: getSendEnsResolutionError(state), + contacts: addressBook.filter(({ name }) => !!name), + nonContacts: addressBook.filter(({ name }) => !name), + } +} + +function mapDispatchToProps (dispatch) { + return { + updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), + } +} diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.js index b3b0d2da3..b3b0d2da3 100644 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.js diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js index a6160d335..a39db7813 100644 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js +++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js @@ -12,7 +12,7 @@ function getToDropdownOpen (state) { } function sendToIsInError (state) { - return Boolean(state.send.errors.to) + return Boolean(state.send.errors.to) } function sendToIsInWarning (state) { diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js new file mode 100644 index 000000000..498d72605 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js @@ -0,0 +1,272 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import c from 'classnames' +import { isValidENSAddress, isValidAddress, isValidAddressHead } from '../../../../helpers/utils/util' +import {ellipsify} from '../../send.utils' + +import debounce from 'debounce' +import copyToClipboard from 'copy-to-clipboard/index' +import ENS from 'ethjs-ens' +import networkMap from 'ethjs-ens/lib/network-map.json' +import log from 'loglevel' + + +// Local Constants +const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' +const ZERO_X_ERROR_ADDRESS = '0x' + +export default class EnsInput extends Component { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + className: PropTypes.string, + network: PropTypes.string, + selectedAddress: PropTypes.string, + selectedName: PropTypes.string, + onChange: PropTypes.func, + updateSendTo: PropTypes.func, + updateEnsResolution: PropTypes.func, + scanQrCode: PropTypes.func, + updateEnsResolutionError: PropTypes.func, + addressBook: PropTypes.array, + onPaste: PropTypes.func, + onReset: PropTypes.func, + onValidAddressTyped: PropTypes.func, + } + + state = { + recipient: null, + input: '', + toError: null, + toWarning: null, + } + + componentDidMount () { + const network = this.props.network + const networkHasEnsSupport = getNetworkEnsSupport(network) + this.setState({ ensResolution: ZERO_ADDRESS }) + + if (networkHasEnsSupport) { + const provider = global.ethereumProvider + this.ens = new ENS({ provider, network }) + this.checkName = debounce(this.lookupEnsName, 200) + } + } + + // If an address is sent without a nickname, meaning not from ENS or from + // the user's own accounts, a default of a one-space string is used. + componentDidUpdate (prevProps) { + const { + input, + } = this.state + const { + network, + } = this.props + + if (prevProps.network !== network) { + const provider = global.ethereumProvider + this.ens = new ENS({ provider, network }) + this.onChange({ target: { value: input } }) + } + } + + resetInput = () => { + const { updateEnsResolution, updateEnsResolutionError, onReset } = this.props + this.onChange({ target: { value: '' } }) + onReset() + updateEnsResolution('') + updateEnsResolutionError('') + } + + lookupEnsName = (recipient) => { + recipient = recipient.trim() + + log.info(`ENS attempting to resolve name: ${recipient}`) + this.ens.lookup(recipient) + .then((address) => { + if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName')) + if (address === ZERO_X_ERROR_ADDRESS) throw new Error(this.context.t('ensRegistrationError')) + this.props.updateEnsResolution(address) + }) + .catch((reason) => { + if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') { + this.props.updateEnsResolutionError(this.context.t('ensNotFoundOnCurrentNetwork')) + } else { + log.error(reason) + this.props.updateEnsResolutionError(reason.message) + } + }) + } + + onPaste = event => { + event.clipboardData.items[0].getAsString(text => { + if (isValidAddress(text)) { + this.props.onPaste(text) + } + }) + } + + onChange = e => { + const { network, onChange, updateEnsResolution, updateEnsResolutionError, onValidAddressTyped } = this.props + const input = e.target.value + const networkHasEnsSupport = getNetworkEnsSupport(network) + + this.setState({ input }, () => onChange(input)) + + // Empty ENS state if input is empty + // maybe scan ENS + + if (!networkHasEnsSupport && !isValidAddress(input) && !isValidAddressHead(input)) { + updateEnsResolution('') + updateEnsResolutionError(!networkHasEnsSupport ? 'Network does not support ENS' : '') + return + } + + if (isValidENSAddress(input)) { + this.lookupEnsName(input) + } else if (onValidAddressTyped && isValidAddress(input)) { + onValidAddressTyped(input) + } else { + updateEnsResolution('') + updateEnsResolutionError('') + } + } + + render () { + const { t } = this.context + const { className, selectedAddress } = this.props + const { input } = this.state + + if (selectedAddress) { + return this.renderSelected() + } + + return ( + <div className={c('ens-input', className)}> + <div + className={c('ens-input__wrapper', { + 'ens-input__wrapper__status-icon--error': false, + 'ens-input__wrapper__status-icon--valid': false, + })} + > + <div className="ens-input__wrapper__status-icon" /> + <input + className="ens-input__wrapper__input" + type="text" + placeholder={t('recipientAddressPlaceholder')} + onChange={this.onChange} + onPaste={this.onPaste} + value={selectedAddress || input} + autoFocus + /> + <div + className={c('ens-input__wrapper__action-icon', { + 'ens-input__wrapper__action-icon--erase': input, + 'ens-input__wrapper__action-icon--qrcode': !input, + })} + onClick={() => { + if (input) { + this.resetInput() + } else { + this.props.scanQrCode() + } + }} + /> + </div> + </div> + ) + } + + renderSelected () { + const { t } = this.context + const { className, selectedAddress, selectedName, addressBook } = this.props + const contact = addressBook.filter(item => item.address === selectedAddress)[0] || {} + const name = contact.name || selectedName + + + return ( + <div className={c('ens-input', className)}> + <div + className="ens-input__wrapper ens-input__wrapper--valid" + > + <div className="ens-input__wrapper__status-icon ens-input__wrapper__status-icon--valid" /> + <div + className="ens-input__wrapper__input ens-input__wrapper__input--selected" + placeholder={t('recipientAddress')} + onChange={this.onChange} + > + <div className="ens-input__selected-input__title"> + {name || ellipsify(selectedAddress)} + </div> + { name && <div className="ens-input__selected-input__subtitle">{selectedAddress}</div> } + </div> + <div + className="ens-input__wrapper__action-icon ens-input__wrapper__action-icon--erase" + onClick={this.resetInput} + /> + </div> + </div> + ) + } + + ensIcon (recipient) { + const { hoverText } = this.state + + return ( + <span + className="#ensIcon" + title={hoverText} + style={{ + position: 'absolute', + top: '16px', + left: '-25px', + }} + > + { this.ensIconContents(recipient) } + </span> + ) + } + + ensIconContents () { + const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS } + + if (toError) return + + if (loadingEns) { + return ( + <img + src="images/loading.svg" + style={{ + width: '30px', + height: '30px', + transform: 'translateY(-6px)', + }} + /> + ) + } + + if (ensFailure) { + return <i className="fa fa-warning fa-lg warning'" /> + } + + if (ensResolution && (ensResolution !== ZERO_ADDRESS)) { + return ( + <i + className="fa fa-check-circle fa-lg cursor-pointer" + style={{ color: 'green' }} + onClick={event => { + event.preventDefault() + event.stopPropagation() + copyToClipboard(ensResolution) + }} + /> + ) + } + } +} + +function getNetworkEnsSupport (network) { + return Boolean(networkMap[network]) +} diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.container.js b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js new file mode 100644 index 000000000..d74f44832 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js @@ -0,0 +1,20 @@ +import EnsInput from './ens-input.component' +import { + getCurrentNetwork, + getSendTo, + getSendToNickname, +} from '../../send.selectors' +import { + getAddressBook, +} from '../../../../selectors/selectors' +const connect = require('react-redux').connect + + +export default connect( + state => ({ + network: getCurrentNetwork(state), + selectedAddress: getSendTo(state), + selectedName: getSendToNickname(state), + addressBook: getAddressBook(state), + }) +)(EnsInput) diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.js b/ui/app/pages/send/send-content/add-recipient/ens-input.js new file mode 100644 index 000000000..6833ccd03 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.js @@ -0,0 +1 @@ +export { default } from './ens-input.container' diff --git a/ui/app/pages/send/send-content/add-recipient/index.js b/ui/app/pages/send/send-content/add-recipient/index.js new file mode 100644 index 000000000..d661bd74b --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/index.js @@ -0,0 +1 @@ +export { default } from './add-recipient.container' diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js new file mode 100644 index 000000000..7570e7fcb --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js @@ -0,0 +1,202 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import AddRecipient from '../add-recipient.component' +import Dialog from '../../../../../components/ui/dialog' + +const propsMethodSpies = { + closeToDropdown: sinon.spy(), + openToDropdown: sinon.spy(), + updateGas: sinon.spy(), + updateSendTo: sinon.spy(), + updateSendToError: sinon.spy(), + updateSendToWarning: sinon.spy(), +} + +describe('AddRecipient Component', function () { + let wrapper + let instance + + beforeEach(() => { + wrapper = shallow(<AddRecipient + closeToDropdown={propsMethodSpies.closeToDropdown} + inError={false} + inWarning={false} + network={'mockNetwork'} + openToDropdown={propsMethodSpies.openToDropdown} + to={'mockTo'} + toAccounts={['mockAccount']} + toDropdownOpen={false} + updateGas={propsMethodSpies.updateGas} + updateSendTo={propsMethodSpies.updateSendTo} + updateSendToError={propsMethodSpies.updateSendToError} + updateSendToWarning={propsMethodSpies.updateSendToWarning} + addressBook={[{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 5' }]} + nonContacts={[{ address: '0x70F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 7' }]} + contacts={[{ address: '0x60F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 6' }]} + />, { context: { t: str => str + '_t' } }) + instance = wrapper.instance() + }) + + afterEach(() => { + propsMethodSpies.closeToDropdown.resetHistory() + propsMethodSpies.openToDropdown.resetHistory() + propsMethodSpies.updateSendTo.resetHistory() + propsMethodSpies.updateSendToError.resetHistory() + propsMethodSpies.updateSendToWarning.resetHistory() + propsMethodSpies.updateGas.resetHistory() + }) + + describe('selectRecipient', () => { + + it('should call updateSendTo', () => { + assert.equal(propsMethodSpies.updateSendTo.callCount, 0) + instance.selectRecipient('mockTo2', 'mockNickname') + assert.equal(propsMethodSpies.updateSendTo.callCount, 1) + assert.deepEqual( + propsMethodSpies.updateSendTo.getCall(0).args, + ['mockTo2', 'mockNickname'] + ) + }) + + it('should call updateGas if there is no to error', () => { + assert.equal(propsMethodSpies.updateGas.callCount, 0) + instance.selectRecipient(false) + assert.equal(propsMethodSpies.updateGas.callCount, 1) + }) + }) + + describe('render', () => { + it('should render a component', () => { + assert.equal(wrapper.find('.send__select-recipient-wrapper').length, 1) + }) + + it('should render no content if there are no recents, transfers, and contacts', () => { + wrapper.setProps({ + ownedAccounts: [], + addressBook: [], + }) + + assert.equal(wrapper.find('.send__select-recipient-wrapper__list__link').length, 0) + assert.equal(wrapper.find('.send__select-recipient-wrapper__group').length, 0) + }) + + it('should render transfer', () => { + wrapper.setProps({ + ownedAccounts: [{ address: '0x123', name: '123' }, { address: '0x124', name: '124' }], + addressBook: [{ address: '0x456', name: 'test-name' }], + }) + wrapper.setState({ isShowingTransfer: true }) + + const xferLink = wrapper.find('.send__select-recipient-wrapper__list__link') + assert.equal(xferLink.length, 1) + + + const groups = wrapper.find('RecipientGroup') + assert.equal(groups.shallow().find('.send__select-recipient-wrapper__group').length, 1) + }) + + it('should render ContactList', () => { + wrapper.setProps({ + ownedAccounts: [{ address: '0x123', name: '123' }, { address: '0x124', name: '124' }], + addressBook: [{ address: '0x125' }], + }) + + const contactList = wrapper.find('ContactList') + + assert.equal(contactList.length, 1) + }) + + it('should render contacts', () => { + wrapper.setProps({ + addressBook: [ + { address: '0x125', name: 'alice' }, + { address: '0x126', name: 'alex' }, + { address: '0x127', name: 'catherine' }, + ], + }) + wrapper.setState({ isShowingTransfer: false }) + + const xferLink = wrapper.find('.send__select-recipient-wrapper__list__link') + assert.equal(xferLink.length, 0) + + const groups = wrapper.find('ContactList') + assert.equal(groups.length, 1) + + assert.equal(groups.find('.send__select-recipient-wrapper__group-item').length, 0) + }) + + it('should render error when query has no results', () => { + wrapper.setProps({ + addressBook: [], + toError: 'bad', + contacts: [], + nonContacts: [], + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.props().type, 'error') + assert.equal(dialog.props().children, 'bad_t') + assert.equal(dialog.length, 1) + }) + + it('should render error when query has ens does not resolve', () => { + wrapper.setProps({ + addressBook: [], + toError: 'bad', + ensResolutionError: 'very bad', + contacts: [], + nonContacts: [], + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.props().type, 'error') + assert.equal(dialog.props().children, 'very bad') + assert.equal(dialog.length, 1) + }) + + it('should render warning', () => { + wrapper.setProps({ + addressBook: [], + query: 'yo', + toWarning: 'watchout', + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.props().type, 'warning') + assert.equal(dialog.props().children, 'watchout_t') + assert.equal(dialog.length, 1) + }) + + it('should not render error when ens resolved', () => { + wrapper.setProps({ + addressBook: [], + toError: 'bad', + ensResolution: '0x128', + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.length, 0) + }) + + it('should not render error when query has results', () => { + wrapper.setProps({ + addressBook: [ + { address: '0x125', name: 'alice' }, + { address: '0x126', name: 'alex' }, + { address: '0x127', name: 'catherine' }, + ], + toError: 'bad', + }) + + const dialog = wrapper.find(Dialog) + + assert.equal(dialog.length, 0) + }) + }) +}) diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js new file mode 100644 index 000000000..5ca0b2c23 --- /dev/null +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js @@ -0,0 +1,72 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + updateSendTo: sinon.spy(), +} + +proxyquire('../add-recipient.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../send.selectors.js': { + getSendEnsResolution: (s) => `mockSendEnsResolution:${s}`, + getSendEnsResolutionError: (s) => `mockSendEnsResolutionError:${s}`, + accountsWithSendEtherInfoSelector: (s) => `mockAccountsWithSendEtherInfoSelector:${s}`, + }, + '../../../../selectors/selectors': { + getAddressBook: (s) => [{ name: `mockAddressBook:${s}` }], + getAddressBookEntry: (s) => `mockAddressBookEntry:${s}`, + }, + '../../../../store/actions': actionSpies, +}) + +describe('add-recipient container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + addressBook: [{ name: 'mockAddressBook:mockState' }], + contacts: [{ name: 'mockAddressBook:mockState' }], + ensResolution: 'mockSendEnsResolution:mockState', + ensResolutionError: 'mockSendEnsResolutionError:mockState', + ownedAccounts: 'mockAccountsWithSendEtherInfoSelector:mockState', + addressBookEntryName: undefined, + nonContacts: [], + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('updateSendTo()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname') + assert(dispatchSpy.calledOnce) + assert(actionSpies.updateSendTo.calledOnce) + assert.deepEqual( + actionSpies.updateSendTo.getCall(0).args, + ['mockTo', 'mockNickname'] + ) + }) + }) + }) + +}) diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-selectors.test.js index 0fa342d1e..82f481187 100644 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-selectors.test.js @@ -3,9 +3,9 @@ import { getToDropdownOpen, getTokens, sendToIsInError, -} from '../send-to-row.selectors.js' +} from '../add-recipient.selectors.js' -describe('send-to-row selectors', () => { +describe('add-recipient selectors', () => { describe('getToDropdownOpen()', () => { it('should return send.getToDropdownOpen', () => { diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js index f8a6dd96f..182504c5d 100644 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js +++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js @@ -12,7 +12,7 @@ const stubs = { isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))), } -const toRowUtils = proxyquire('../send-to-row.utils.js', { +const toRowUtils = proxyquire('../add-recipient.js', { '../../../../helpers/utils/util': { isValidAddress: stubs.isValidAddress, }, @@ -22,7 +22,7 @@ const { getToWarningObject, } = toRowUtils -describe('send-to-row utils', () => { +describe('add-recipient utils', () => { describe('getToErrorObject()', () => { it('should return a required error if to is falsy', () => { diff --git a/ui/app/pages/send/send-content/index.js b/ui/app/pages/send/send-content/index.js index 891c17e6a..542da4674 100644 --- a/ui/app/pages/send/send-content/index.js +++ b/ui/app/pages/send/send-content/index.js @@ -1 +1 @@ -export { default } from './send-content.component' +export { default } from './send-content.container' diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js index 7901ccef6..05545669a 100644 --- a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js @@ -64,12 +64,12 @@ export default class AmountMaxButton extends Component { const { maxModeOn, buttonDataLoading, inError } = this.props return ( - <div className={'send-v2__amount-max'} onClick={buttonDataLoading || inError ? null : this.onMaxClick}> - <input type="checkbox" checked={maxModeOn} /> - <div className={classnames('send-v2__amount-max__button', { 'send-v2__amount-max__button__disabled': buttonDataLoading || inError })}> - {this.context.t('max')} - </div> - </div> - ) + <div className={'send-v2__amount-max'} onClick={buttonDataLoading || inError ? null : this.onMaxClick}> + <input type="checkbox" checked={maxModeOn} /> + <div className={classnames('send-v2__amount-max__button', { 'send-v2__amount-max__button__disabled': buttonDataLoading || inError })}> + {this.context.t('max')} + </div> + </div> + ) } } diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js index de2d9462f..1dcd0bd2c 100644 --- a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js +++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js @@ -59,7 +59,7 @@ export default class SendAssetRow extends Component { <SendRowWrapper label={`${t('asset')}:`}> <div className="send-v2__asset-dropdown"> { this.renderSelectedToken() } - { this.renderAssetDropdown() } + { this.props.tokens.length > 0 ? this.renderAssetDropdown() : null } </div> </SendRowWrapper> ) @@ -101,7 +101,7 @@ export default class SendAssetRow extends Component { return ( <div - className="send-v2__asset-dropdown__asset" + className={ this.props.tokens.length > 0 ? 'send-v2__asset-dropdown__asset' : 'send-v2__asset-dropdown__single-asset' } onClick={() => this.selectToken()} > <div className="send-v2__asset-dropdown__asset-icon"> diff --git a/ui/app/pages/send/send-content/send-content.component.js b/ui/app/pages/send/send-content/send-content.component.js index d799806c7..aff675e7a 100644 --- a/ui/app/pages/send/send-content/send-content.component.js +++ b/ui/app/pages/send/send-content/send-content.component.js @@ -2,18 +2,25 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import PageContainerContent from '../../../components/ui/page-container/page-container-content.component' import SendAmountRow from './send-amount-row' -import SendFromRow from './send-from-row' import SendGasRow from './send-gas-row' import SendHexDataRow from './send-hex-data-row' -import SendToRow from './send-to-row' import SendAssetRow from './send-asset-row' +import Dialog from '../../../components/ui/dialog' export default class SendContent extends Component { + static contextTypes = { + t: PropTypes.func, + } + static propTypes = { updateGas: PropTypes.func, scanQrCode: PropTypes.func, + showAddToAddressBookModal: PropTypes.func, showHexData: PropTypes.bool, + to: PropTypes.string, + ownedAccounts: PropTypes.array, + addressBook: PropTypes.array, } updateGas = (updateData) => this.props.updateGas(updateData) @@ -22,22 +29,40 @@ export default class SendContent extends Component { return ( <PageContainerContent> <div className="send-v2__form"> - <SendFromRow /> - <SendToRow - updateGas={this.updateGas} - scanQrCode={ _ => this.props.scanQrCode()} - /> + { this.maybeRenderAddContact() } <SendAssetRow /> <SendAmountRow updateGas={this.updateGas} /> <SendGasRow /> - {(this.props.showHexData && ( - <SendHexDataRow - updateGas={this.updateGas} - /> - ))} + { + this.props.showHexData && ( + <SendHexDataRow + updateGas={this.updateGas} + /> + ) + } </div> </PageContainerContent> ) } + maybeRenderAddContact () { + const { t } = this.context + const { to, addressBook = [], ownedAccounts = [], showAddToAddressBookModal } = this.props + const isOwnedAccount = !!ownedAccounts.find(({ address }) => address.toLowerCase() === to.toLowerCase()) + const contact = addressBook.find(({ address }) => address === to) || {} + + if (isOwnedAccount || contact.name) { + return + } + + return ( + <Dialog + type="message" + className="send__dialog" + onClick={showAddToAddressBookModal} + > + {t('newAccountDetectedDialogMessage')} + </Dialog> + ) + } } diff --git a/ui/app/pages/send/send-content/send-content.container.js b/ui/app/pages/send/send-content/send-content.container.js new file mode 100644 index 000000000..a0732fc20 --- /dev/null +++ b/ui/app/pages/send/send-content/send-content.container.js @@ -0,0 +1,38 @@ +import { connect } from 'react-redux' +import SendContent from './send-content.component' +import { + accountsWithSendEtherInfoSelector, + getSendTo, +} from '../send.selectors' +import { + getAddressBook, +} from '../../../selectors/selectors' +import actions from '../../../store/actions' + +function mapStateToProps (state) { + return { + to: getSendTo(state), + addressBook: getAddressBook(state), + ownedAccounts: accountsWithSendEtherInfoSelector(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + showAddToAddressBookModal: (recipient) => dispatch(actions.showModal({ + name: 'ADD_TO_ADDRESSBOOK', + recipient, + })), + } +} + +function mergeProps (stateProps, dispatchProps, ownProps) { + return { + ...ownProps, + ...stateProps, + ...dispatchProps, + showAddToAddressBookModal: () => dispatchProps.showAddToAddressBookModal(stateProps.to), + } +} + +export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendContent) diff --git a/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js index 3f5587318..37af59e29 100644 --- a/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js +++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js @@ -39,11 +39,11 @@ export default class GasFeeDisplay extends Component { ) : gasLoadingError ? <div className="currency-display.currency-display--message"> - {this.context.t('setGasPrice')} - </div> + {this.context.t('setGasPrice')} + </div> : <div className="currency-display"> - {this.context.t('loading')} - </div> + {this.context.t('loading')} + </div> } <button className="gas-fee-reset" diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js index 4c09ed564..ed064695e 100644 --- a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js @@ -90,26 +90,26 @@ export default class SendGasRow extends Component { const { metricsEvent } = this.context const gasPriceButtonGroup = <div> - <GasPriceButtonGroup - className="gas-price-button-group--small" - showCheck={false} - {...gasPriceButtonGroupProps} - handleGasPriceSelection={async (...args) => { - metricsEvent({ - eventOpts: { - category: 'Transactions', - action: 'Edit Screen', - name: 'Changed Gas Button', - }, - }) - await gasPriceButtonGroupProps.handleGasPriceSelection(...args) - if (maxModeOn) { - this.setMaxAmount() - } - }} - /> - { this.renderAdvancedOptionsButton() } - </div> + <GasPriceButtonGroup + className="gas-price-button-group--small" + showCheck={false} + {...gasPriceButtonGroupProps} + handleGasPriceSelection={async (...args) => { + metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Changed Gas Button', + }, + }) + await gasPriceButtonGroupProps.handleGasPriceSelection(...args) + if (maxModeOn) { + this.setMaxAmount() + } + }} + /> + { this.renderAdvancedOptionsButton() } + </div> const gasFeeDisplay = <GasFeeDisplay conversionRate={conversionRate} convertedCurrency={convertedCurrency} @@ -134,7 +134,7 @@ export default class SendGasRow extends Component { isSpeedUp={false} /> { this.renderAdvancedOptionsButton() } - </div> + </div> if (advancedInlineGasShown) { return advancedGasInputs diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js index f1caa8f99..6ddddbb3d 100644 --- a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js @@ -18,7 +18,7 @@ export default class SendRowWarningMessage extends Component { const warningMessage = warningType in warnings && warnings[warningType] return ( - warningMessage + warningMessage ? <div className="send-v2__warning">{this.context.t(warningMessage)}</div> : null ) diff --git a/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js index 30280e1d0..533ca2ebe 100644 --- a/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js @@ -54,25 +54,25 @@ describe('SendContent Component', function () { it('should render its second child as a child of the send-v2__form-field, if it has two children', () => { wrapper = shallow(<SendRowWrapper - errorType={'mockErrorType'} - label={'mockLabel'} - showError={false} - > - <span>Mock Custom Label Content</span> - <span>Mock Form Field</span> - </SendRowWrapper>) + errorType={'mockErrorType'} + label={'mockLabel'} + showError={false} + > + <span>Mock Custom Label Content</span> + <span>Mock Form Field</span> + </SendRowWrapper>) assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field') }) it('should render its first child as the last child of the send-v2__form-label, if it has two children', () => { wrapper = shallow(<SendRowWrapper - errorType={'mockErrorType'} - label={'mockLabel'} - showError={false} - > - <span>Mock Custom Label Content</span> - <span>Mock Form Field</span> - </SendRowWrapper>) + errorType={'mockErrorType'} + label={'mockLabel'} + showError={false} + > + <span>Mock Custom Label Content</span> + <span>Mock Form Field</span> + </SendRowWrapper>) assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content') }) }) diff --git a/ui/app/pages/send/send-content/send-to-row/index.js b/ui/app/pages/send/send-content/send-to-row/index.js deleted file mode 100644 index 121f15148..000000000 --- a/ui/app/pages/send/send-content/send-to-row/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './send-to-row.container' diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md b/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md deleted file mode 100644 index e69de29bb..000000000 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md +++ /dev/null diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js deleted file mode 100644 index 9baf327c1..000000000 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js +++ /dev/null @@ -1,91 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import SendRowWrapper from '../send-row-wrapper' -import EnsInput from '../../../../components/app/ens-input' -import { getToErrorObject, getToWarningObject } from './send-to-row.utils.js' - -export default class SendToRow extends Component { - - static propTypes = { - closeToDropdown: PropTypes.func, - hasHexData: PropTypes.bool.isRequired, - inError: PropTypes.bool, - inWarning: PropTypes.bool, - network: PropTypes.string, - openToDropdown: PropTypes.func, - selectedToken: PropTypes.object, - to: PropTypes.string, - toAccounts: PropTypes.array, - toDropdownOpen: PropTypes.bool, - tokens: PropTypes.array, - updateGas: PropTypes.func, - updateSendTo: PropTypes.func, - updateSendToError: PropTypes.func, - updateSendToWarning: PropTypes.func, - scanQrCode: PropTypes.func, - } - - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - handleToChange (to, nickname = '', toError, toWarning, network) { - const { hasHexData, updateSendTo, updateSendToError, updateGas, tokens, selectedToken, updateSendToWarning } = this.props - const toErrorObject = getToErrorObject(to, toError, hasHexData, tokens, selectedToken, network) - const toWarningObject = getToWarningObject(to, toWarning, tokens, selectedToken) - updateSendTo(to, nickname) - updateSendToError(toErrorObject) - updateSendToWarning(toWarningObject) - if (toErrorObject.to === null) { - updateGas({ to }) - } - } - - render () { - const { - closeToDropdown, - inError, - inWarning, - network, - openToDropdown, - to, - toAccounts, - toDropdownOpen, - } = this.props - - return ( - <SendRowWrapper - errorType={'to'} - label={`${this.context.t('to')}: `} - showError={inError} - showWarning={inWarning} - warningType={'to'} - > - <EnsInput - scanQrCode={_ => { - this.context.metricsEvent({ - eventOpts: { - category: 'Transactions', - action: 'Edit Screen', - name: 'Used QR scanner', - }, - }) - this.props.scanQrCode() - }} - accounts={toAccounts} - closeDropdown={() => closeToDropdown()} - dropdownOpen={toDropdownOpen} - inError={inError} - name={'address'} - network={network} - onChange={({ toAddress, nickname, toError, toWarning }) => this.handleToChange(toAddress, nickname, toError, toWarning, this.props.network)} - openDropdown={() => openToDropdown()} - placeholder={this.context.t('recipientAddress')} - to={to} - /> - </SendRowWrapper> - ) - } - -} diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js deleted file mode 100644 index 2cbe9fcd0..000000000 --- a/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js +++ /dev/null @@ -1,54 +0,0 @@ -import { connect } from 'react-redux' -import { - getCurrentNetwork, - getSelectedToken, - getSendTo, - getSendToAccounts, - getSendHexData, -} from '../../send.selectors.js' -import { - getToDropdownOpen, - getTokens, - sendToIsInError, - sendToIsInWarning, -} from './send-to-row.selectors.js' -import { - updateSendTo, -} from '../../../../store/actions' -import { - updateSendErrors, - updateSendWarnings, - openToDropdown, - closeToDropdown, -} from '../../../../ducks/send/send.duck' -import SendToRow from './send-to-row.component' - -export default connect(mapStateToProps, mapDispatchToProps)(SendToRow) - -function mapStateToProps (state) { - return { - hasHexData: Boolean(getSendHexData(state)), - inError: sendToIsInError(state), - inWarning: sendToIsInWarning(state), - network: getCurrentNetwork(state), - selectedToken: getSelectedToken(state), - to: getSendTo(state), - toAccounts: getSendToAccounts(state), - toDropdownOpen: getToDropdownOpen(state), - tokens: getTokens(state), - } -} - -function mapDispatchToProps (dispatch) { - return { - closeToDropdown: () => dispatch(closeToDropdown()), - openToDropdown: () => dispatch(openToDropdown()), - updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), - updateSendToError: (toErrorObject) => { - dispatch(updateSendErrors(toErrorObject)) - }, - updateSendToWarning: (toWarningObject) => { - dispatch(updateSendWarnings(toWarningObject)) - }, - } -} diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js deleted file mode 100644 index c180d97f1..000000000 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js +++ /dev/null @@ -1,166 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import sinon from 'sinon' -import proxyquire from 'proxyquire' - -const SendToRow = proxyquire('../send-to-row.component.js', { - './send-to-row.utils.js': { - getToErrorObject: (to, toError) => ({ - to: to === false ? null : `mockToErrorObject:${to}${toError}`, - }), - getToWarningObject: (to, toWarning) => ({ - to: to === false ? null : `mockToWarningObject:${to}${toWarning}`, - }), - }, -}).default - -import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' -import EnsInput from '../../../../../components/app/ens-input' - -const propsMethodSpies = { - closeToDropdown: sinon.spy(), - openToDropdown: sinon.spy(), - updateGas: sinon.spy(), - updateSendTo: sinon.spy(), - updateSendToError: sinon.spy(), - updateSendToWarning: sinon.spy(), -} - -sinon.spy(SendToRow.prototype, 'handleToChange') - -describe('SendToRow Component', function () { - let wrapper - let instance - - beforeEach(() => { - wrapper = shallow(<SendToRow - closeToDropdown={propsMethodSpies.closeToDropdown} - inError={false} - inWarning={false} - network={'mockNetwork'} - openToDropdown={propsMethodSpies.openToDropdown} - to={'mockTo'} - toAccounts={['mockAccount']} - toDropdownOpen={false} - updateGas={propsMethodSpies.updateGas} - updateSendTo={propsMethodSpies.updateSendTo} - updateSendToError={propsMethodSpies.updateSendToError} - updateSendToWarning={propsMethodSpies.updateSendToWarning} - />, { context: { t: str => str + '_t' } }) - instance = wrapper.instance() - }) - - afterEach(() => { - propsMethodSpies.closeToDropdown.resetHistory() - propsMethodSpies.openToDropdown.resetHistory() - propsMethodSpies.updateSendTo.resetHistory() - propsMethodSpies.updateSendToError.resetHistory() - propsMethodSpies.updateSendToWarning.resetHistory() - SendToRow.prototype.handleToChange.resetHistory() - }) - - describe('handleToChange', () => { - - it('should call updateSendTo', () => { - assert.equal(propsMethodSpies.updateSendTo.callCount, 0) - instance.handleToChange('mockTo2', 'mockNickname') - assert.equal(propsMethodSpies.updateSendTo.callCount, 1) - assert.deepEqual( - propsMethodSpies.updateSendTo.getCall(0).args, - ['mockTo2', 'mockNickname'] - ) - }) - - it('should call updateSendToError', () => { - assert.equal(propsMethodSpies.updateSendToError.callCount, 0) - instance.handleToChange('mockTo2', '', 'mockToError') - assert.equal(propsMethodSpies.updateSendToError.callCount, 1) - assert.deepEqual( - propsMethodSpies.updateSendToError.getCall(0).args, - [{ to: 'mockToErrorObject:mockTo2mockToError' }] - ) - }) - - it('should call updateSendToWarning', () => { - assert.equal(propsMethodSpies.updateSendToWarning.callCount, 0) - instance.handleToChange('mockTo2', '', '', 'mockToWarning') - assert.equal(propsMethodSpies.updateSendToWarning.callCount, 1) - assert.deepEqual( - propsMethodSpies.updateSendToWarning.getCall(0).args, - [{ to: 'mockToWarningObject:mockTo2mockToWarning' }] - ) - }) - - it('should not call updateGas if there is a to error', () => { - assert.equal(propsMethodSpies.updateGas.callCount, 0) - instance.handleToChange('mockTo2') - assert.equal(propsMethodSpies.updateGas.callCount, 0) - }) - - it('should call updateGas if there is no to error', () => { - assert.equal(propsMethodSpies.updateGas.callCount, 0) - instance.handleToChange(false) - assert.equal(propsMethodSpies.updateGas.callCount, 1) - }) - }) - - describe('render', () => { - it('should render a SendRowWrapper component', () => { - assert.equal(wrapper.find(SendRowWrapper).length, 1) - }) - - it('should pass the correct props to SendRowWrapper', () => { - const { - errorType, - label, - showError, - } = wrapper.find(SendRowWrapper).props() - - assert.equal(errorType, 'to') - - assert.equal(label, 'to_t: ') - - assert.equal(showError, false) - }) - - it('should render an EnsInput as a child of the SendRowWrapper', () => { - assert(wrapper.find(SendRowWrapper).childAt(0).is(EnsInput)) - }) - - it('should render the EnsInput with the correct props', () => { - const { - accounts, - closeDropdown, - dropdownOpen, - inError, - name, - network, - onChange, - openDropdown, - placeholder, - to, - } = wrapper.find(SendRowWrapper).childAt(0).props() - assert.deepEqual(accounts, ['mockAccount']) - assert.equal(dropdownOpen, false) - assert.equal(inError, false) - assert.equal(name, 'address') - assert.equal(network, 'mockNetwork') - assert.equal(placeholder, 'recipientAddress_t') - assert.equal(to, 'mockTo') - assert.equal(propsMethodSpies.closeToDropdown.callCount, 0) - closeDropdown() - assert.equal(propsMethodSpies.closeToDropdown.callCount, 1) - assert.equal(propsMethodSpies.openToDropdown.callCount, 0) - openDropdown() - assert.equal(propsMethodSpies.openToDropdown.callCount, 1) - assert.equal(SendToRow.prototype.handleToChange.callCount, 0) - onChange({ toAddress: 'mockNewTo', nickname: 'mockNewNickname', toError: 'mockToError', toWarning: 'mockToWarning' }) - assert.equal(SendToRow.prototype.handleToChange.callCount, 1) - assert.deepEqual( - SendToRow.prototype.handleToChange.getCall(0).args, - ['mockNewTo', 'mockNewNickname', 'mockToError', 'mockToWarning', 'mockNetwork' ] - ) - }) - }) -}) diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js deleted file mode 100644 index bb8702e9a..000000000 --- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js +++ /dev/null @@ -1,134 +0,0 @@ -import assert from 'assert' -import proxyquire from 'proxyquire' -import sinon from 'sinon' - -let mapStateToProps -let mapDispatchToProps - -const actionSpies = { - updateSendTo: sinon.spy(), -} -const duckActionSpies = { - closeToDropdown: sinon.spy(), - openToDropdown: sinon.spy(), - updateSendErrors: sinon.spy(), - updateSendWarnings: sinon.spy(), -} - -proxyquire('../send-to-row.container.js', { - 'react-redux': { - connect: (ms, md) => { - mapStateToProps = ms - mapDispatchToProps = md - return () => ({}) - }, - }, - '../../send.selectors.js': { - getCurrentNetwork: (s) => `mockNetwork:${s}`, - getSelectedToken: (s) => `mockSelectedToken:${s}`, - getSendHexData: (s) => s, - getSendTo: (s) => `mockTo:${s}`, - getSendToAccounts: (s) => `mockToAccounts:${s}`, - }, - './send-to-row.selectors.js': { - getToDropdownOpen: (s) => `mockToDropdownOpen:${s}`, - sendToIsInError: (s) => `mockInError:${s}`, - sendToIsInWarning: (s) => `mockInWarning:${s}`, - getTokens: (s) => `mockTokens:${s}`, - }, - '../../../../store/actions': actionSpies, - '../../../../ducks/send/send.duck': duckActionSpies, -}) - -describe('send-to-row container', () => { - - describe('mapStateToProps()', () => { - - it('should map the correct properties to props', () => { - assert.deepEqual(mapStateToProps('mockState'), { - hasHexData: true, - inError: 'mockInError:mockState', - inWarning: 'mockInWarning:mockState', - network: 'mockNetwork:mockState', - selectedToken: 'mockSelectedToken:mockState', - to: 'mockTo:mockState', - toAccounts: 'mockToAccounts:mockState', - toDropdownOpen: 'mockToDropdownOpen:mockState', - tokens: 'mockTokens:mockState', - }) - }) - - }) - - describe('mapDispatchToProps()', () => { - let dispatchSpy - let mapDispatchToPropsObject - - beforeEach(() => { - dispatchSpy = sinon.spy() - mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) - }) - - describe('closeToDropdown()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.closeToDropdown() - assert(dispatchSpy.calledOnce) - assert(duckActionSpies.closeToDropdown.calledOnce) - assert.equal( - duckActionSpies.closeToDropdown.getCall(0).args[0], - undefined - ) - }) - }) - - describe('openToDropdown()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.openToDropdown() - assert(dispatchSpy.calledOnce) - assert(duckActionSpies.openToDropdown.calledOnce) - assert.equal( - duckActionSpies.openToDropdown.getCall(0).args[0], - undefined - ) - }) - }) - - describe('updateSendTo()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname') - assert(dispatchSpy.calledOnce) - assert(actionSpies.updateSendTo.calledOnce) - assert.deepEqual( - actionSpies.updateSendTo.getCall(0).args, - ['mockTo', 'mockNickname'] - ) - }) - }) - - describe('updateSendToError()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.updateSendToError('mockToErrorObject') - assert(dispatchSpy.calledOnce) - assert(duckActionSpies.updateSendErrors.calledOnce) - assert.equal( - duckActionSpies.updateSendErrors.getCall(0).args[0], - 'mockToErrorObject' - ) - }) - }) - - describe('updateSendToWarning()', () => { - it('should dispatch an action', () => { - mapDispatchToPropsObject.updateSendToWarning('mockToWarningObject') - assert(dispatchSpy.calledOnce) - assert(duckActionSpies.updateSendWarnings.calledOnce) - assert.equal( - duckActionSpies.updateSendWarnings.getCall(0).args[0], - 'mockToWarningObject' - ) - }) - }) - - }) - -}) diff --git a/ui/app/pages/send/send-content/tests/send-content-component.test.js b/ui/app/pages/send/send-content/tests/send-content-component.test.js index 521c6523e..451d2ea53 100644 --- a/ui/app/pages/send/send-content/tests/send-content-component.test.js +++ b/ui/app/pages/send/send-content/tests/send-content-component.test.js @@ -5,17 +5,21 @@ import SendContent from '../send-content.component.js' import PageContainerContent from '../../../../components/ui/page-container/page-container-content.component' import SendAmountRow from '../send-amount-row/send-amount-row.container' -import SendFromRow from '../send-from-row/send-from-row.container' import SendGasRow from '../send-gas-row/send-gas-row.container' -import SendToRow from '../send-to-row/send-to-row.container' import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container' import SendAssetRow from '../send-asset-row/send-asset-row.container' +import Dialog from '../../../../components/ui/dialog' describe('SendContent Component', function () { let wrapper beforeEach(() => { - wrapper = shallow(<SendContent showHexData={true} />) + wrapper = shallow( + <SendContent + showHexData={true} + />, + { context: { t: str => str + '_t' } } + ) }) describe('render', () => { @@ -31,23 +35,55 @@ describe('SendContent Component', function () { it('should render the correct row components as grandchildren of the PageContainerContent component', () => { const PageContainerContentChild = wrapper.find(PageContainerContent).children() - assert(PageContainerContentChild.childAt(0).is(SendFromRow)) - assert(PageContainerContentChild.childAt(1).is(SendToRow)) - assert(PageContainerContentChild.childAt(2).is(SendAssetRow)) - assert(PageContainerContentChild.childAt(3).is(SendAmountRow)) - assert(PageContainerContentChild.childAt(4).is(SendGasRow)) - assert(PageContainerContentChild.childAt(5).is(SendHexDataRow)) + assert(PageContainerContentChild.childAt(0).is(Dialog), 'row[0] should be Dialog') + assert(PageContainerContentChild.childAt(1).is(SendAssetRow), 'row[1] should be SendAssetRow') + assert(PageContainerContentChild.childAt(2).is(SendAmountRow), 'row[2] should be SendAmountRow') + assert(PageContainerContentChild.childAt(3).is(SendGasRow), 'row[3] should be SendGasRow') + assert(PageContainerContentChild.childAt(4).is(SendHexDataRow), 'row[4] should be SendHexDataRow') }) it('should not render the SendHexDataRow if props.showHexData is false', () => { wrapper.setProps({ showHexData: false }) const PageContainerContentChild = wrapper.find(PageContainerContent).children() - assert(PageContainerContentChild.childAt(0).is(SendFromRow)) - assert(PageContainerContentChild.childAt(1).is(SendToRow)) - assert(PageContainerContentChild.childAt(2).is(SendAssetRow)) - assert(PageContainerContentChild.childAt(3).is(SendAmountRow)) - assert(PageContainerContentChild.childAt(4).is(SendGasRow)) - assert.equal(PageContainerContentChild.childAt(5).exists(), false) + assert(PageContainerContentChild.childAt(0).is(Dialog), 'row[0] should be Dialog') + assert(PageContainerContentChild.childAt(1).is(SendAssetRow), 'row[1] should be SendAssetRow') + assert(PageContainerContentChild.childAt(2).is(SendAmountRow), 'row[2] should be SendAmountRow') + assert(PageContainerContentChild.childAt(3).is(SendGasRow), 'row[3] should be SendGasRow') + assert.equal(PageContainerContentChild.childAt(4).exists(), false) }) + + it('should not render the Dialog if addressBook contains "to" address', () => { + wrapper.setProps({ + showHexData: false, + to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + addressBook: [{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'dinodan' }], + }) + const PageContainerContentChild = wrapper.find(PageContainerContent).children() + assert(PageContainerContentChild.childAt(0).is(SendAssetRow), 'row[1] should be SendAssetRow') + assert(PageContainerContentChild.childAt(1).is(SendAmountRow), 'row[2] should be SendAmountRow') + assert(PageContainerContentChild.childAt(2).is(SendGasRow), 'row[3] should be SendGasRow') + assert.equal(PageContainerContentChild.childAt(3).exists(), false) + }) + + it('should not render the Dialog if ownedAccounts contains "to" address', () => { + wrapper.setProps({ + showHexData: false, + to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + addressBook: [], + ownedAccounts: [{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'dinodan' }], + }) + const PageContainerContentChild = wrapper.find(PageContainerContent).children() + assert(PageContainerContentChild.childAt(0).is(SendAssetRow), 'row[1] should be SendAssetRow') + assert(PageContainerContentChild.childAt(1).is(SendAmountRow), 'row[2] should be SendAmountRow') + assert(PageContainerContentChild.childAt(2).is(SendGasRow), 'row[3] should be SendGasRow') + assert.equal(PageContainerContentChild.childAt(3).exists(), false) + }) + }) + + it('should not render the asset dropdown if token length is 0 ', () => { + wrapper.setProps({ tokens: [] }) + const PageContainerContentChild = wrapper.find(PageContainerContent).children() + assert(PageContainerContentChild.childAt(1).is(SendAssetRow)) + assert(PageContainerContentChild.childAt(1).find('send-v2__asset-dropdown__single-asset'), true) }) }) diff --git a/ui/app/pages/send/send-footer/send-footer.utils.js b/ui/app/pages/send/send-footer/send-footer.utils.js index 91ac29014..ce65535a6 100644 --- a/ui/app/pages/send/send-footer/send-footer.utils.js +++ b/ui/app/pages/send/send-footer/send-footer.utils.js @@ -76,7 +76,7 @@ function constructUpdatedTx ({ function addressIsNew (toAccounts, newAddress) { const newAddressNormalized = newAddress.toLowerCase() - const foundMatching = toAccounts.some(({ address }) => address === newAddressNormalized) + const foundMatching = toAccounts.some(({ address }) => address.toLowerCase() === newAddressNormalized) return !foundMatching } diff --git a/ui/app/pages/send/send-header/send-header.component.js b/ui/app/pages/send/send-header/send-header.component.js index 76e35494a..5bc76fcd3 100644 --- a/ui/app/pages/send/send-header/send-header.component.js +++ b/ui/app/pages/send/send-header/send-header.component.js @@ -24,8 +24,10 @@ export default class SendHeader extends Component { render () { return ( <PageContainerHeader + className="send__header" onClose={() => this.onClose()} title={this.context.t(this.props.titleKey)} + headerCloseText={this.context.t('cancel')} /> ) } diff --git a/ui/app/pages/send/send-header/send-header.selectors.js b/ui/app/pages/send/send-header/send-header.selectors.js index d7c9d3766..01b90409b 100644 --- a/ui/app/pages/send/send-header/send-header.selectors.js +++ b/ui/app/pages/send/send-header/send-header.selectors.js @@ -1,6 +1,7 @@ const { getSelectedToken, getSendEditingTransactionId, + getSendTo, } = require('../send.selectors.js') const selectors = { @@ -14,6 +15,10 @@ function getTitleKey (state) { const isEditing = Boolean(getSendEditingTransactionId(state)) const isToken = Boolean(getSelectedToken(state)) + if (!getSendTo(state)) { + return 'addRecipient' + } + if (isEditing) { return 'edit' } else if (isToken) { @@ -24,14 +29,14 @@ function getTitleKey (state) { } function getSubtitleParams (state) { - const isEditing = Boolean(getSendEditingTransactionId(state)) - const token = getSelectedToken(state) + const isEditing = Boolean(getSendEditingTransactionId(state)) + const token = getSelectedToken(state) - if (isEditing) { - return [ 'editingTransaction' ] - } else if (token) { - return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ] - } else { - return [ 'onlySendToEtherAddress' ] - } + if (isEditing) { + return [ 'editingTransaction' ] + } else if (token) { + return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ] + } else { + return [ 'onlySendToEtherAddress' ] + } } diff --git a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js index e0c6a3ab3..d22845f84 100644 --- a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js @@ -8,39 +8,44 @@ const { '../send.selectors': { getSelectedToken: (mockState) => mockState.t, getSendEditingTransactionId: (mockState) => mockState.e, + getSendTo: (mockState) => mockState.to, }, }) describe('send-header selectors', () => { describe('getTitleKey()', () => { + it('should return the correct key when "to" is empty', () => { + assert.equal(getTitleKey({ e: 1, t: true, to: '' }), 'addRecipient') + }) + it('should return the correct key when getSendEditingTransactionId is truthy', () => { - assert.equal(getTitleKey({ e: 1, t: true }), 'edit') + assert.equal(getTitleKey({ e: 1, t: true, to: '0x123' }), 'edit') }) it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => { - assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens') + assert.equal(getTitleKey({ e: null, t: 'abc', to: '0x123' }), 'sendTokens') }) it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => { - assert.equal(getTitleKey({ e: null }), 'sendETH') + assert.equal(getTitleKey({ e: null, to: '0x123' }), 'sendETH') }) }) describe('getSubtitleParams()', () => { it('should return the correct params when getSendEditingTransactionId is truthy', () => { - assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ]) + assert.deepEqual(getSubtitleParams({ e: 1, t: true, to: '0x123' }), [ 'editingTransaction' ]) }) it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => { assert.deepEqual( - getSubtitleParams({ e: null, t: { symbol: 'ABC' } }), + getSubtitleParams({ e: null, t: { symbol: 'ABC' }, to: '0x123' }), [ 'onlySendTokensToAccountAddress', [ 'ABC' ] ] ) }) it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => { - assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ]) + assert.deepEqual(getSubtitleParams({ e: null, to: '0x123' }), [ 'onlySendToEtherAddress' ]) }) }) diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js index 5f0c9c9f2..cb07dcb59 100644 --- a/ui/app/pages/send/send.component.js +++ b/ui/app/pages/send/send.component.js @@ -7,10 +7,14 @@ import { getToAddressForGasUpdate, doesAmountErrorRequireUpdate, } from './send.utils' - +import debounce from 'lodash.debounce' +import { getToWarningObject, getToErrorObject } from './send-content/add-recipient/add-recipient' import SendHeader from './send-header' +import AddRecipient from './send-content/add-recipient' import SendContent from './send-content' import SendFooter from './send-footer' +import EnsInput from './send-content/add-recipient/ens-input' + export default class SendTransactionScreen extends PersistentForm { @@ -27,12 +31,14 @@ export default class SendTransactionScreen extends PersistentForm { gasLimit: PropTypes.string, gasPrice: PropTypes.string, gasTotal: PropTypes.string, + to: PropTypes.string, history: PropTypes.object, network: PropTypes.string, primaryCurrency: PropTypes.string, recentBlocks: PropTypes.array, selectedAddress: PropTypes.string, selectedToken: PropTypes.object, + tokens: PropTypes.array, tokenBalance: PropTypes.string, tokenContract: PropTypes.object, fetchBasicGasEstimates: PropTypes.func, @@ -42,10 +48,24 @@ export default class SendTransactionScreen extends PersistentForm { scanQrCode: PropTypes.func, qrCodeDetected: PropTypes.func, qrCodeData: PropTypes.object, + ensResolution: PropTypes.string, + ensResolutionError: PropTypes.string, } static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, + } + + state = { + query: '', + toError: null, + toWarning: null, + } + + constructor (props) { + super(props) + this.dValidate = debounce(this.validate, 1000) } componentWillReceiveProps (nextProps) { @@ -63,34 +83,6 @@ export default class SendTransactionScreen extends PersistentForm { } } - updateGas ({ to: updatedToAddress, amount: value, data } = {}) { - const { - amount, - blockGasLimit, - editingTransactionId, - gasLimit, - gasPrice, - recentBlocks, - selectedAddress, - selectedToken = {}, - to: currentToAddress, - updateAndSetGasLimit, - } = this.props - - updateAndSetGasLimit({ - blockGasLimit, - editingTransactionId, - gasLimit, - gasPrice, - recentBlocks, - selectedAddress, - selectedToken, - to: getToAddressForGasUpdate(updatedToAddress, currentToAddress), - value: value || amount, - data, - }) - } - componentDidUpdate (prevProps) { const { amount, @@ -105,6 +97,10 @@ export default class SendTransactionScreen extends PersistentForm { updateSendErrors, updateSendTokenBalance, tokenContract, + to, + toNickname, + addressBook, + updateToNicknameIfNecessary, } = this.props const { @@ -159,6 +155,7 @@ export default class SendTransactionScreen extends PersistentForm { tokenContract, address, }) + updateToNicknameIfNecessary(to, toNickname, addressBook) this.updateGas() } } @@ -173,9 +170,9 @@ export default class SendTransactionScreen extends PersistentForm { componentDidMount () { this.props.fetchBasicGasEstimates() - .then(() => { - this.updateGas() - }) + .then(() => { + this.updateGas() + }) } componentWillMount () { @@ -196,6 +193,39 @@ export default class SendTransactionScreen extends PersistentForm { this.props.resetSendState() } + onRecipientInputChange = query => { + if (query) { + this.dValidate(query) + } else { + this.validate(query) + } + + this.setState({ + query, + }) + } + + validate (query) { + const { + hasHexData, + tokens, + selectedToken, + network, + } = this.props + + if (!query) { + return this.setState({ toError: '', toWarning: '' }) + } + + const toErrorObject = getToErrorObject(query, null, hasHexData, tokens, selectedToken, network) + const toWarningObject = getToWarningObject(query, null, tokens, selectedToken) + + this.setState({ + toError: toErrorObject.to, + toWarning: toWarningObject.to, + }) + } + updateSendToken () { const { from: { address }, @@ -211,20 +241,104 @@ export default class SendTransactionScreen extends PersistentForm { }) } + updateGas ({ to: updatedToAddress, amount: value, data } = {}) { + const { + amount, + blockGasLimit, + editingTransactionId, + gasLimit, + gasPrice, + recentBlocks, + selectedAddress, + selectedToken = {}, + to: currentToAddress, + updateAndSetGasLimit, + } = this.props + + updateAndSetGasLimit({ + blockGasLimit, + editingTransactionId, + gasLimit, + gasPrice, + recentBlocks, + selectedAddress, + selectedToken, + to: getToAddressForGasUpdate(updatedToAddress, currentToAddress), + value: value || amount, + data, + }) + } + render () { - const { history, showHexData } = this.props + const { history, to } = this.props + let content + + if (to) { + content = this.renderSendContent() + } else { + content = this.renderAddRecipient() + } return ( <div className="page-container"> - <SendHeader history={history}/> - <SendContent - updateGas={(updateData) => this.updateGas(updateData)} - scanQrCode={_ => this.props.scanQrCode()} - showHexData={showHexData} - /> - <SendFooter history={history}/> + <SendHeader history={history} /> + { this.renderInput() } + { content } </div> ) } + renderInput () { + return ( + <EnsInput + className="send__to-row" + scanQrCode={_ => { + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Used QR scanner', + }, + }) + this.props.scanQrCode() + }} + onChange={this.onRecipientInputChange} + onValidAddressTyped={(address) => this.props.updateSendTo(address, '')} + onPaste={text => this.props.updateSendTo(text)} + onReset={() => this.props.updateSendTo('', '')} + updateEnsResolution={this.props.updateSendEnsResolution} + updateEnsResolutionError={this.props.updateSendEnsResolutionError} + /> + ) + } + + renderAddRecipient () { + const { scanQrCode } = this.props + const { toError, toWarning } = this.state + + return ( + <AddRecipient + updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })} + scanQrCode={scanQrCode} + query={this.state.query} + toError={toError} + toWarning={toWarning} + /> + ) + } + + renderSendContent () { + const { history, showHexData, scanQrCode } = this.props + + return [ + <SendContent + key="send-content" + updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })} + scanQrCode={scanQrCode} + showHexData={showHexData} + />, + <SendFooter key="send-footer" history={history} />, + ] + } + } diff --git a/ui/app/pages/send/send.container.js b/ui/app/pages/send/send.container.js index 69adbb765..0863c60d4 100644 --- a/ui/app/pages/send/send.container.js +++ b/ui/app/pages/send/send.container.js @@ -24,16 +24,25 @@ import { getSendHexDataFeatureFlagState, getSendFromObject, getSendTo, + getSendToNickname, getTokenBalance, getQrCodeData, + getSendEnsResolution, + getSendEnsResolutionError, } from './send.selectors' import { + getAddressBook, +} from '../../selectors/selectors' +import { getTokens } from './send-content/add-recipient/add-recipient.selectors' +import { updateSendTo, updateSendTokenBalance, updateGasData, setGasTotal, showQrScanner, qrCodeDetected, + updateSendEnsResolution, + updateSendEnsResolutionError, } from '../../store/actions' import { resetSendState, @@ -45,6 +54,9 @@ import { import { calcGasTotal, } from './send.utils.js' +import { + isValidENSAddress, +} from '../../helpers/utils/util' import { SEND_ROUTE, @@ -72,11 +84,16 @@ function mapStateToProps (state) { selectedAddress: getSelectedAddress(state), selectedToken: getSelectedToken(state), showHexData: getSendHexDataFeatureFlagState(state), + ensResolution: getSendEnsResolution(state), + ensResolutionError: getSendEnsResolutionError(state), to: getSendTo(state), + toNickname: getSendToNickname(state), + tokens: getTokens(state), tokenBalance: getTokenBalance(state), tokenContract: getSelectedTokenContract(state), tokenToFiatRate: getSelectedTokenToFiatRate(state), qrCodeData: getQrCodeData(state), + addressBook: getAddressBook(state), } } @@ -111,5 +128,15 @@ function mapDispatchToProps (dispatch) { qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()), + updateSendEnsResolution: (ensResolution) => dispatch(updateSendEnsResolution(ensResolution)), + updateSendEnsResolutionError: (message) => dispatch(updateSendEnsResolutionError(message)), + updateToNicknameIfNecessary: (to, toNickname, addressBook) => { + if (isValidENSAddress(toNickname)) { + const addressBookEntry = addressBook.find(({ address}) => to === address) || {} + if (!addressBookEntry.name !== toNickname) { + dispatch(updateSendTo(to, addressBookEntry.name || '')) + } + } + }, } } diff --git a/ui/app/pages/send/send.scss b/ui/app/pages/send/send.scss index e69de29bb..9b95f1b39 100644 --- a/ui/app/pages/send/send.scss +++ b/ui/app/pages/send/send.scss @@ -0,0 +1,233 @@ +.send { + &__header { + position: relative; + background-color: $Grey-000; + border-bottom: none; + padding: 14px 0 3px 0; + + .page-container__title { + @extend %h4; + text-align: center; + } + + .page-container__header-close-text { + @extend %link; + font-size: 1rem; + line-height: 1.1875rem; + position: absolute; + right: 1rem; + } + } + + &__dialog { + margin: 1rem; + cursor: pointer; + } + + &__error-dialog { + margin: 1rem; + } + + &__to-row { + margin: 0; + padding: .5rem; + flex: 0 0 auto; + background-color: $Grey-000; + border-bottom: 1px solid $alto; + } + + &__select-recipient-wrapper { + @extend %col-nowrap; + flex: 1 1 auto; + height: 0; + + &__list { + overflow-y: auto; + + &__link { + @extend %link; + @extend %row-nowrap; + padding: 1rem; + font-size: 1rem; + border-bottom: 1px solid $alto; + align-items: center; + } + + &__back-caret { + @extend %bg-contain; + display: block; + background-image: url('/images/caret-left.svg'); + width: 18px; + height: 18px; + margin-right: .5rem; + } + } + + &__recent-group-wrapper { + @extend %col-nowrap; + + &__load-more { + @extend %link; + font-size: .75rem; + line-height: 1.0625rem; + padding: .5rem; + text-align: center; + border-bottom: 1px solid $alto; + } + } + + &__group { + @extend %col-nowrap; + } + + &__group-label { + @extend %h8; + background-color: $Grey-000; + color: $Grey-600; + line-height: .875rem; + padding: .5rem 1rem; + border-bottom: 1px solid $alto; + + &:first-of-type { + border-top: 1px solid $alto; + } + } + + &__group-item, &__group-item--selected { + @extend %row-nowrap; + padding: .75rem 1rem; + align-items: center; + border-bottom: 1px solid $alto; + cursor: pointer; + + &:hover { + background-color: rgba($alto, 0.2); + } + + .identicon { + margin-right: 1rem; + flex: 0 0 auto; + } + + &__content { + @extend %col-nowrap; + flex: 1 1 auto; + width: 0; + } + + &__title { + font-size: .875rem; + line-height: 1.25rem; + color: $black; + } + + &__subtitle { + @extend %h8; + color: $Grey-500; + } + } + + &__group-item--selected { + border: 2px solid #2b7cd6; + border-radius: 8px; + } + } +} + +.ens-input { + @extend %row-nowrap; + + &__wrapper { + @extend %row-nowrap; + flex: 1 1 auto; + width: 0; + align-items: center; + background: $white; + border-radius: .5rem; + padding: .75rem .5rem; + border: 1px solid $Grey-100; + transition: border-color 150ms ease-in-out; + + &:focus-within { + border-color: $Grey-500; + } + + &__status-icon { + @extend %bg-contain; + background-image: url("/images/search-black.svg"); + width: 1.125rem; + height: 1.125rem; + margin: .25rem .5rem .25rem .25rem; + + &--error { + + } + + &--valid { + background-image: url("/images/check-green-solid.svg"); + } + } + + &__input { + @extend %h6; + flex: 1 1 auto; + width: 0; + border: 0; + outline: none; + + &::placeholder { + color: $Grey-200; + } + } + + &__action-icon { + @extend %bg-contain; + cursor: pointer; + + &--erase { + background-image: url("/images/close-gray.svg"); + width: .75rem; + height: .75rem; + margin: 0 .25rem; + } + + &--qrcode { + background-image: url("/images/qr-blue.svg"); + width: 1.5rem; + height: 1.5rem; + margin: 0 .25rem; + } + } + + &--valid { + border-color: $Blue-500; + + .ens-input__wrapper { + &__status-icon { + background-image: url("/images/check-green-solid.svg"); + } + + &__input { + @extend %col-nowrap; + font-size: .75rem; + line-height: .75rem; + font-weight: 400; + color: $Blue-500; + } + } + } + } + + &__selected-input { + &__title { + @extend %ellipsify; + font-size: .875rem; + } + + &__subtitle { + font-size: 0.75rem; + color: $Grey-500; + margin-top: .25rem; + } + } +} diff --git a/ui/app/pages/send/send.selectors.js b/ui/app/pages/send/send.selectors.js index d4035df28..ed2917020 100644 --- a/ui/app/pages/send/send.selectors.js +++ b/ui/app/pages/send/send.selectors.js @@ -6,6 +6,7 @@ const { const { getMetaMaskAccounts, getSelectedAddress, + getAddressBook, } = require('../../selectors/selectors') const { estimateGasPriceFromRecentBlocks, @@ -17,7 +18,6 @@ import { const selectors = { accountsWithSendEtherInfoSelector, - getAddressBook, getAmountConversionRate, getBlockGasLimit, getConversionRate, @@ -43,6 +43,8 @@ const selectors = { getSendHexData, getSendHexDataFeatureFlagState, getSendEditingTransactionId, + getSendEnsResolution, + getSendEnsResolutionError, getSendErrors, getSendFrom, getSendFromBalance, @@ -50,6 +52,7 @@ const selectors = { getSendMaxModeState, getSendTo, getSendToAccounts, + getSendToNickname, getSendWarnings, getTokenBalance, getTokenExchangeRate, @@ -63,7 +66,6 @@ module.exports = selectors function accountsWithSendEtherInfoSelector (state) { const accounts = getMetaMaskAccounts(state) const { identities } = state.metamask - const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => { return Object.assign({}, account, identities[key]) }) @@ -71,10 +73,6 @@ function accountsWithSendEtherInfoSelector (state) { return accountsWithSendEtherInfo } -function getAddressBook (state) { - return state.metamask.addressBook -} - function getAmountConversionRate (state) { return getSelectedToken(state) ? getSelectedTokenToFiatRate(state) @@ -237,6 +235,10 @@ function getSendTo (state) { return state.metamask.send.to } +function getSendToNickname (state) { + return state.metamask.send.toNickname +} + function getSendToAccounts (state) { const fromAccounts = accountsWithSendEtherInfoSelector(state) const addressBookAccounts = getAddressBook(state) @@ -251,6 +253,14 @@ function getTokenBalance (state) { return state.metamask.send.tokenBalance } +function getSendEnsResolution (state) { + return state.metamask.send.ensResolution +} + +function getSendEnsResolutionError (state) { + return state.metamask.send.ensResolutionError +} + function getTokenExchangeRate (state, tokenSymbol) { const pair = `${tokenSymbol.toLowerCase()}_eth` const tokenExchangeRates = state.metamask.tokenExchangeRates diff --git a/ui/app/pages/send/send.utils.js b/ui/app/pages/send/send.utils.js index 4acc174f9..1f9bc202a 100644 --- a/ui/app/pages/send/send.utils.js +++ b/ui/app/pages/send/send.utils.js @@ -35,6 +35,7 @@ module.exports = { isBalanceSufficient, isTokenBalanceSufficient, removeLeadingZeroes, + ellipsify, } function calcGasTotal (gasLimit = '0', gasPrice = '0') { @@ -318,7 +319,7 @@ function estimateGasPriceFromRecentBlocks (recentBlocks) { return parseInt(next, 16) < parseInt(currentLowest, 16) ? next : currentLowest }) }) - .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1) + .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1) return lowestPrices[Math.floor(lowestPrices.length / 2)] } @@ -330,3 +331,7 @@ function getToAddressForGasUpdate (...addresses) { function removeLeadingZeroes (str) { return str.replace(/^0*(?=\d)/, '') } + +function ellipsify (text, first = 6, last = 4) { + return `${text.slice(0, first)}...${text.slice(-last)}` +} diff --git a/ui/app/pages/send/tests/send-component.test.js b/ui/app/pages/send/tests/send-component.test.js index 81955cc1d..5b7cafed5 100644 --- a/ui/app/pages/send/tests/send-component.test.js +++ b/ui/app/pages/send/tests/send-component.test.js @@ -5,8 +5,9 @@ import { shallow } from 'enzyme' import sinon from 'sinon' import timeout from '../../../../lib/test-timeout' +import AddRecipient from '../send-content/add-recipient/add-recipient.container' import SendHeader from '../send-header/send-header.container' -import SendContent from '../send-content/send-content.component' +import SendContent from '../send-content/send-content.container' import SendFooter from '../send-footer/send-footer.container' const mockBasicGasEstimates = { @@ -20,6 +21,7 @@ const propsMethodSpies = { resetSendState: sinon.spy(), fetchBasicGasEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)), fetchGasEstimates: sinon.spy(), + updateToNicknameIfNecessary: sinon.spy(), } const utilsMethodStubs = { getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }), @@ -63,6 +65,7 @@ describe('Send Component', function () { updateSendErrors={propsMethodSpies.updateSendErrors} updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance} resetSendState={propsMethodSpies.resetSendState} + updateToNicknameIfNecessary={propsMethodSpies.updateToNicknameIfNecessary} />) }) @@ -332,13 +335,18 @@ describe('Send Component', function () { assert.equal(wrapper.find('.page-container').length, 1) }) - it('should render SendHeader, SendContent and SendFooter', () => { + it('should render SendHeader and AddRecipient', () => { assert.equal(wrapper.find(SendHeader).length, 1) - assert.equal(wrapper.find(SendContent).length, 1) - assert.equal(wrapper.find(SendFooter).length, 1) + assert.equal(wrapper.find(AddRecipient).length, 1) }) it('should pass the history prop to SendHeader and SendFooter', () => { + wrapper.setProps({ + to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + }) + assert.equal(wrapper.find(SendHeader).length, 1) + assert.equal(wrapper.find(SendContent).length, 1) + assert.equal(wrapper.find(SendFooter).length, 1) assert.deepEqual( wrapper.find(SendFooter).props(), { @@ -348,7 +356,93 @@ describe('Send Component', function () { }) it('should pass showHexData to SendContent', () => { + wrapper.setProps({ + to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + }) assert.equal(wrapper.find(SendContent).props().showHexData, true) }) }) + + describe('validate when input change', () => { + let clock + + beforeEach(() => { + clock = sinon.useFakeTimers() + }) + + afterEach(() => { + clock.restore() + }) + + it('should validate when input changes', () => { + const instance = wrapper.instance() + instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7A3BedD70cd4510') + + assert.deepEqual(instance.state, { + query: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', + toError: null, + toWarning: null, + }) + }) + + it('should validate when input changes and has error', () => { + const instance = wrapper.instance() + instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510') + + clock.tick(1001) + assert.deepEqual(instance.state, { + query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510', + toError: 'invalidAddressRecipient', + toWarning: null, + }) + }) + + it('should validate when input changes and has error', () => { + wrapper.setProps({ network: 'bad' }) + const instance = wrapper.instance() + instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510') + + clock.tick(1001) + assert.deepEqual(instance.state, { + query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510', + toError: 'invalidAddressRecipientNotEthNetwork', + toWarning: null, + }) + }) + + it('should synchronously validate when input changes to ""', () => { + wrapper.setProps({ network: 'bad' }) + const instance = wrapper.instance() + instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510') + + clock.tick(1001) + assert.deepEqual(instance.state, { + query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510', + toError: 'invalidAddressRecipientNotEthNetwork', + toWarning: null, + }) + + instance.onRecipientInputChange('') + assert.deepEqual(instance.state, { + query: '', + toError: '', + toWarning: '', + }) + }) + + it('should warn when send to a known token contract address', () => { + wrapper.setProps({ + selectedToken: '0x888', + }) + const instance = wrapper.instance() + instance.onRecipientInputChange('0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64') + + clock.tick(1001) + assert.deepEqual(instance.state, { + query: '0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64', + toError: null, + toWarning: 'knownAddressRecipient', + }) + }) + }) }) diff --git a/ui/app/pages/send/tests/send-container.test.js b/ui/app/pages/send/tests/send-container.test.js index 131c42f59..f4142bc2d 100644 --- a/ui/app/pages/send/tests/send-container.test.js +++ b/ui/app/pages/send/tests/send-container.test.js @@ -41,12 +41,19 @@ proxyquire('../send.container.js', { getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`, getSendAmount: (s) => `mockAmount:${s}`, getSendTo: (s) => `mockTo:${s}`, + getSendToNickname: (s) => `mockToNickname:${s}`, getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`, getSendFromObject: (s) => `mockFrom:${s}`, getTokenBalance: (s) => `mockTokenBalance:${s}`, getQrCodeData: (s) => `mockQrCodeData:${s}`, + getSendEnsResolution: (s) => `mockSendEnsResolution:${s}`, + getSendEnsResolutionError: (s) => `mockSendEnsResolutionError:${s}`, + }, + './send-content/add-recipient/add-recipient.selectors': { + getTokens: s => `mockTokens:${s}`, }, '../../selectors/selectors': { + getAddressBook: (s) => `mockAddressBook:${s}`, getSelectedAddress: (s) => `mockSelectedAddress:${s}`, }, '../../store/actions': actionSpies, @@ -83,6 +90,11 @@ describe('send container', () => { tokenContract: 'mockTokenContract:mockState', tokenToFiatRate: 'mockTokenToFiatRate:mockState', qrCodeData: 'mockQrCodeData:mockState', + tokens: 'mockTokens:mockState', + ensResolution: 'mockSendEnsResolution:mockState', + ensResolutionError: 'mockSendEnsResolutionError:mockState', + toNickname: 'mockToNickname:mockState', + addressBook: 'mockAddressBook:mockState', }) }) diff --git a/ui/app/pages/send/tests/send-selectors-test-data.js b/ui/app/pages/send/tests/send-selectors-test-data.js index cff26a191..54a494b63 100644 --- a/ui/app/pages/send/tests/send-selectors-test-data.js +++ b/ui/app/pages/send/tests/send-selectors-test-data.js @@ -60,6 +60,7 @@ module.exports = { { 'address': '0x06195827297c7a80a443b6894d3bdb8824b43896', 'name': 'Address Book Account 1', + 'chainId': '3', }, ], 'tokens': [ diff --git a/ui/app/pages/send/tests/send-selectors.test.js b/ui/app/pages/send/tests/send-selectors.test.js index ccc126795..e199aa97e 100644 --- a/ui/app/pages/send/tests/send-selectors.test.js +++ b/ui/app/pages/send/tests/send-selectors.test.js @@ -4,7 +4,6 @@ import selectors from '../send.selectors.js' const { accountsWithSendEtherInfoSelector, // autoAddToBetaUI, - getAddressBook, getBlockGasLimit, getAmountConversionRate, getConversionRate, @@ -103,20 +102,6 @@ describe('send selectors', () => { // }) // }) - describe('getAddressBook()', () => { - it('should return the address book', () => { - assert.deepEqual( - getAddressBook(mockState), - [ - { - address: '0x06195827297c7a80a443b6894d3bdb8824b43896', - name: 'Address Book Account 1', - }, - ], - ) - }) - }) - describe('getAmountConversionRate()', () => { it('should return the token conversion rate if a token is selected', () => { assert.equal( @@ -511,6 +496,7 @@ describe('send selectors', () => { { address: '0x06195827297c7a80a443b6894d3bdb8824b43896', name: 'Address Book Account 1', + chainId: '3', }, ] ) diff --git a/ui/app/pages/send/tests/send-utils.test.js b/ui/app/pages/send/tests/send-utils.test.js index bf9cba14a..4930b7ee1 100644 --- a/ui/app/pages/send/tests/send-utils.test.js +++ b/ui/app/pages/send/tests/send-utils.test.js @@ -72,9 +72,9 @@ describe('send utils', () => { call_, [12, 15, { toNumericBase: 'hex', - multiplicandBase: 16, - multiplierBase: 16, - } ] + multiplicandBase: 16, + multiplierBase: 16, + } ] ) }) }) diff --git a/ui/app/pages/send/to-autocomplete.component.js b/ui/app/pages/send/to-autocomplete.component.js index 183967c58..c65f93c07 100644 --- a/ui/app/pages/send/to-autocomplete.component.js +++ b/ui/app/pages/send/to-autocomplete.component.js @@ -27,10 +27,10 @@ export default class ToAutoComplete extends Component { getListItemIcon (listItemAddress, toAddress) { return toAddress && listItemAddress === toAddress ? <i className={'fa fa-check fa-lg'} - style={{ - color: '#02c9b1', - }} - /> + style={{ + color: '#02c9b1', + }} + /> : null } @@ -121,8 +121,8 @@ export default class ToAutoComplete extends Component { /> { to - ? null - : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'} + ? null + : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'} onClick={() => this.handleInputEvent()} style={{ style: {color: '#dedede'}, @@ -131,8 +131,8 @@ export default class ToAutoComplete extends Component { } { dropdownOpen - ? this.renderDropdown() - : null + ? this.renderDropdown() + : null } </div> ) diff --git a/ui/app/pages/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js index 328a5b62b..8ad579958 100644 --- a/ui/app/pages/send/to-autocomplete/to-autocomplete.js +++ b/ui/app/pages/send/to-autocomplete/to-autocomplete.js @@ -37,11 +37,7 @@ ToAutoComplete.prototype.renderDropdown = function () { } = this.props const { accountsToRender } = this.state - return accountsToRender.length && h('div', {}, [ - - h('div.send-v2__from-dropdown__close-area', { - onClick: closeDropdown, - }), + return !!accountsToRender.length && h('div', {}, [ h('div.send-v2__from-dropdown__list', {}, [ @@ -93,7 +89,6 @@ ToAutoComplete.prototype.componentDidUpdate = function (nextProps) { ToAutoComplete.prototype.render = function () { const { to, - dropdownOpen, onChange, inError, qrScanner, @@ -118,12 +113,8 @@ ToAutoComplete.prototype.render = function () { style: { color: '#33333' }, onClick: () => this.props.scanQrCode(), })), - !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, { - style: { color: '#dedede' }, - onClick: () => this.handleInputEvent(), - }), - dropdownOpen && this.renderDropdown(), + this.renderDropdown(), ]) } diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js index 3d27fe349..d92b14501 100644 --- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js @@ -1,8 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import validUrl from 'valid-url' import { exportAsFile } from '../../../helpers/utils/util' -import ToggleButton from 'react-toggle-button' +import ToggleButton from '../../../components/ui/toggle-button' import TextField from '../../../components/ui/text-field' import Button from '../../../components/ui/button' import { MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes' @@ -29,160 +28,12 @@ export default class AdvancedTab extends PureComponent { setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired, } - state = { - newRpc: '', - chainId: '', - showOptions: false, - ticker: '', - nickname: '', - } - - renderNewRpcUrl () { - const { t } = this.context - const { newRpc, chainId, ticker, nickname } = this.state - - return ( - <div className="settings-page__content-row"> - <div className="settings-page__content-item"> - <span>{ t('newNetwork') }</span> - </div> - <div className="settings-page__content-item"> - <div className="settings-page__content-item-col"> - <TextField - type="text" - id="new-rpc" - placeholder={t('rpcUrl')} - value={newRpc} - onChange={e => this.setState({ newRpc: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - fullWidth - margin="dense" - /> - <TextField - type="text" - id="chainid" - placeholder={t('optionalChainId')} - value={chainId} - onChange={e => this.setState({ chainId: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - style={{ - display: this.state.showOptions ? null : 'none', - }} - fullWidth - margin="dense" - /> - <TextField - type="text" - id="ticker" - placeholder={t('optionalSymbol')} - value={ticker} - onChange={e => this.setState({ ticker: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - style={{ - display: this.state.showOptions ? null : 'none', - }} - fullWidth - margin="dense" - /> - <TextField - type="text" - id="nickname" - placeholder={t('optionalNickname')} - value={nickname} - onChange={e => this.setState({ nickname: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - style={{ - display: this.state.showOptions ? null : 'none', - }} - fullWidth - margin="dense" - /> - <div className="flex-row flex-align-center space-between"> - <span className="settings-tab__advanced-link" - onClick={e => { - e.preventDefault() - this.setState({ showOptions: !this.state.showOptions }) - }} - > - { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') } - </span> - <button - className="button btn-primary settings-tab__rpc-save-button" - onClick={e => { - e.preventDefault() - this.validateRpc(newRpc, chainId, ticker, nickname) - }} - > - { t('save') } - </button> - </div> - </div> - </div> - </div> - ) - } - - validateRpc (newRpc, chainId, ticker = 'ETH', nickname) { - const { setRpcTarget, displayWarning } = this.props - if (validUrl.isWebUri(newRpc)) { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', - action: 'Custom RPC', - name: 'Success', - }, - customVariables: { - networkId: newRpc, - chainId, - }, - }) - if (!!chainId && Number.isNaN(parseInt(chainId))) { - return displayWarning(`${this.context.t('invalidInput')} chainId`) - } - - setRpcTarget(newRpc, chainId, ticker, nickname) - } else { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', - action: 'Custom RPC', - name: 'Error', - }, - customVariables: { - networkId: newRpc, - chainId, - }, - }) - const appendedRpc = `http://${newRpc}` - - if (validUrl.isWebUri(appendedRpc)) { - displayWarning(this.context.t('uriErrorMsg')) - } else { - displayWarning(this.context.t('invalidRPC')) - } - } - } + state = { autoLogoutTimeLimit: this.props.autoLogoutTimeLimit } renderMobileSync () { const { t } = this.context const { history } = this.props -// + // return ( <div className="settings-page__content-row"> <div className="settings-page__content-item"> @@ -293,8 +144,8 @@ export default class AdvancedTab extends PureComponent { <ToggleButton value={sendHexData} onToggle={value => setHexDataFeatureFlag(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -319,8 +170,8 @@ export default class AdvancedTab extends PureComponent { <ToggleButton value={advancedInlineGas} onToggle={value => setAdvancedInlineGasFeatureFlag(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -348,8 +199,8 @@ export default class AdvancedTab extends PureComponent { <ToggleButton value={showFiatInTestnets} onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -407,7 +258,6 @@ export default class AdvancedTab extends PureComponent { { warning && <div className="settings-tab__error">{ warning }</div> } { this.renderStateLogs() } { this.renderMobileSync() } - { this.renderNewRpcUrl() } { this.renderResetAccount() } { this.renderAdvancedGasInputInline() } { this.renderHexDataOptIn() } diff --git a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js index f81329533..31cdd747c 100644 --- a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js +++ b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js @@ -16,7 +16,7 @@ describe('AdvancedTab Component', () => { } ) - assert.equal(root.find('.settings-page__content-row').length, 8) + assert.equal(root.find('.settings-page__content-row').length, 7) }) it('should update autoLogoutTimeLimit', () => { diff --git a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js index 62122073d..3f54350c5 100644 --- a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js +++ b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js @@ -35,12 +35,12 @@ describe('AdvancedTab Container', () => { it('should map dispatch to props correctly', () => { const props = mapDispatchToProps(() => 'mockDispatch') - assert.ok(typeof props.setHexDataFeatureFlag === 'function') - assert.ok(typeof props.setRpcTarget === 'function') - assert.ok(typeof props.displayWarning === 'function') - assert.ok(typeof props.showResetAccountConfirmationModal === 'function') - assert.ok(typeof props.setAdvancedInlineGasFeatureFlag === 'function') - assert.ok(typeof props.setShowFiatConversionOnTestnetsPreference === 'function') - assert.ok(typeof props.setAutoLogoutTimeLimit === 'function') + assert.ok(typeof props.setHexDataFeatureFlag === 'function') + assert.ok(typeof props.setRpcTarget === 'function') + assert.ok(typeof props.displayWarning === 'function') + assert.ok(typeof props.showResetAccountConfirmationModal === 'function') + assert.ok(typeof props.setAdvancedInlineGasFeatureFlag === 'function') + assert.ok(typeof props.setShowFiatConversionOnTestnetsPreference === 'function') + assert.ok(typeof props.setAutoLogoutTimeLimit === 'function') }) }) diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js new file mode 100644 index 000000000..f8c079fc3 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js @@ -0,0 +1,131 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Identicon from '../../../../components/ui/identicon' +import TextField from '../../../../components/ui/text-field' +import { CONTACT_LIST_ROUTE } from '../../../../helpers/constants/routes' +import { isValidAddress, isValidENSAddress } from '../../../../helpers/utils/util' +import EnsInput from '../../../../pages/send/send-content/add-recipient/ens-input' +import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' +import debounce from 'lodash.debounce' + +export default class AddContact extends PureComponent { + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + addToAddressBook: PropTypes.func, + history: PropTypes.object, + scanQrCode: PropTypes.func, + qrCodeData: PropTypes.object, + qrCodeDetected: PropTypes.func, + } + + state = { + nickname: '', + ethAddress: '', + ensAddress: '', + error: '', + ensError: '', + } + + constructor (props) { + super(props) + this.dValidate = debounce(this.validate, 1000) + } + + componentWillReceiveProps (nextProps) { + if (nextProps.qrCodeData) { + if (nextProps.qrCodeData.type === 'address') { + const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase() + const currentAddress = this.state.ensAddress || this.state.ethAddress + if (currentAddress.toLowerCase() !== scannedAddress) { + this.setState({ ethAddress: scannedAddress, ensAddress: '' }) + // Clean up QR code data after handling + this.props.qrCodeDetected(null) + } + } + } + } + + validate = address => { + const valid = isValidAddress(address) + const validEnsAddress = isValidENSAddress(address) + if (valid || validEnsAddress || address === '') { + this.setState({ error: '', ethAddress: address }) + } else { + this.setState({ error: 'Invalid Address' }) + } + } + + renderInput () { + return ( + <EnsInput + className="send__to-row" + scanQrCode={_ => { this.props.scanQrCode() }} + onChange={this.dValidate} + onPaste={text => this.setState({ ethAddress: text })} + onReset={() => this.setState({ ethAddress: '', ensAddress: '' })} + updateEnsResolution={address => { + this.setState({ ensAddress: address, error: '', ensError: '' }) + }} + updateEnsResolutionError={message => this.setState({ ensError: message })} + /> + ) + } + + render () { + const { t } = this.context + const { history, addToAddressBook } = this.props + + const errorToRender = this.state.ensError || this.state.error + + return ( + <div className="settings-page__content-row address-book__add-contact"> + {this.state.ensAddress && <div className="address-book__view-contact__group"> + <Identicon address={this.state.ensAddress} diameter={60} /> + <div className="address-book__view-contact__group__value"> + { this.state.ensAddress } + </div> + </div>} + <div className="address-book__add-contact__content"> + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('userName') } + </div> + <TextField + type="text" + id="nickname" + value={this.state.newName} + onChange={e => this.setState({ newName: e.target.value })} + fullWidth + margin="dense" + /> + </div> + + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('ethereumPublicAddress') } + </div> + { this.renderInput() } + { errorToRender && <div className="address-book__add-contact__error">{errorToRender}</div>} + </div> + </div> + <PageContainerFooter + cancelText={this.context.t('cancel')} + disabled={Boolean(this.state.error)} + onSubmit={() => { + addToAddressBook(this.state.ensAddress || this.state.ethAddress, this.state.newName) + history.push(CONTACT_LIST_ROUTE) + }} + onCancel={() => { + history.push(CONTACT_LIST_ROUTE) + }} + submitText={this.context.t('save')} + submitButtonType={'confirm'} + /> + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js new file mode 100644 index 000000000..0a0fc450c --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js @@ -0,0 +1,30 @@ +import AddContact from './add-contact.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { addToAddressBook, showQrScanner, qrCodeDetected } from '../../../../store/actions' +import { + CONTACT_ADD_ROUTE, +} from '../../../../helpers/constants/routes' +import { + getQrCodeData, +} from '../../../../pages/send/send.selectors' + +const mapStateToProps = state => { + return { + qrCodeData: getQrCodeData(state), + } +} + +const mapDispatchToProps = dispatch => { + return { + addToAddressBook: (recipient, nickname) => dispatch(addToAddressBook(recipient, nickname)), + scanQrCode: () => dispatch(showQrScanner(CONTACT_ADD_ROUTE)), + qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(AddContact) diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/index.js b/ui/app/pages/settings/contact-list-tab/add-contact/index.js new file mode 100644 index 000000000..ce73025a3 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/add-contact/index.js @@ -0,0 +1 @@ +export { default } from './add-contact.container' diff --git a/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js new file mode 100644 index 000000000..f7a01d672 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js @@ -0,0 +1,132 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import ContactList from '../../../components/app/contact-list' +import EditContact from './edit-contact' +import AddContact from './add-contact' +import ViewContact from './view-contact' +import MyAccounts from './my-accounts' +import { + CONTACT_ADD_ROUTE, + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, +} from '../../../helpers/constants/routes' + +export default class ContactListTab extends Component { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + addressBook: PropTypes.array, + history: PropTypes.object, + selectedAddress: PropTypes.string, + viewingContact: PropTypes.bool, + editingContact: PropTypes.bool, + addingContact: PropTypes.bool, + showContactContent: PropTypes.bool, + hideAddressBook: PropTypes.bool, + showingMyAccounts: PropTypes.bool, + } + + renderAddresses () { + const { addressBook, history, selectedAddress } = this.props + const contacts = addressBook.filter(({ name }) => !!name) + const nonContacts = addressBook.filter(({ name }) => !name) + + return ( + <div> + <ContactList + searchForContacts={() => contacts} + searchForRecents={() => nonContacts} + selectRecipient={(address) => { + history.push(`${CONTACT_VIEW_ROUTE}/${address}`) + }} + selectedAddress={selectedAddress} + /> + </div> + ) + } + + renderAddButton () { + const { history } = this.props + return <div + className="address-book-add-button__button" + onClick={() => { + history.push(CONTACT_ADD_ROUTE) + }}> + <img + className="account-menu__item-icon" + src="images/plus-btn-white.svg" + /> + </div> + } + + renderMyAccountsButton () { + const { history } = this.props + const { t } = this.context + return ( + <div + className="address-book__my-accounts-button" + onClick={() => { + history.push(CONTACT_MY_ACCOUNTS_ROUTE) + }} + > + <div className="address-book__my-accounts-button__header">{t('myWalletAccounts')}</div> + <div className="address-book__my-accounts-button__content"> + <div className="address-book__my-accounts-button__text"> + { t('myWalletAccountsDescription') } + </div> + <div className="address-book__my-accounts-button__caret" /> + </div> + </div> + ) + } + + renderContactContent () { + const { viewingContact, editingContact, addingContact, showContactContent } = this.props + + if (!showContactContent) { + return null + } + + let ContactContentComponent = null + if (viewingContact) { + ContactContentComponent = ViewContact + } else if (editingContact) { + ContactContentComponent = EditContact + } else if (addingContact) { + ContactContentComponent = AddContact + } + + return (ContactContentComponent && <div className="address-book-contact-content"> + <ContactContentComponent /> + </div>) + } + + renderAddressBookContent () { + const { hideAddressBook, showingMyAccounts } = this.props + + if (!hideAddressBook && !showingMyAccounts) { + return (<div className="address-book"> + { this.renderMyAccountsButton() } + { this.renderAddresses() } + </div>) + } else if (!hideAddressBook && showingMyAccounts) { + return (<MyAccounts />) + } + } + + render () { + const { addingContact } = this.props + + return ( + <div className="address-book-wrapper"> + { this.renderAddressBookContent() } + { this.renderContactContent() } + {!addingContact && <div className="address-book-add-button"> + { this.renderAddButton() } + </div>} + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js b/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js new file mode 100644 index 000000000..2c7139b5d --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js @@ -0,0 +1,54 @@ +import ContactListTab from './contact-list-tab.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { getAddressBook } from '../../../selectors/selectors' +import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums' +import { getEnvironmentType } from '../../../../../app/scripts/lib/util' + +import { + CONTACT_ADD_ROUTE, + CONTACT_EDIT_ROUTE, + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, +} from '../../../helpers/constants/routes' + + +const mapStateToProps = (state, ownProps) => { + const { location } = ownProps + const { pathname } = location + + const pathNameTail = pathname.match(/[^/]+$/)[0] + const pathNameTailIsAddress = pathNameTail.includes('0x') + + const viewingContact = Boolean(pathname.match(CONTACT_VIEW_ROUTE) || pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE)) + const editingContact = Boolean(pathname.match(CONTACT_EDIT_ROUTE) || pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE)) + const addingContact = Boolean(pathname.match(CONTACT_ADD_ROUTE)) + const showingMyAccounts = Boolean( + pathname.match(CONTACT_MY_ACCOUNTS_ROUTE) || + pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE) || + pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE) + ) + const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP + + const hideAddressBook = envIsPopup && (viewingContact || editingContact || addingContact) + + return { + viewingContact, + editingContact, + addingContact, + showingMyAccounts, + addressBook: getAddressBook(state), + selectedAddress: pathNameTailIsAddress ? pathNameTail : '', + hideAddressBook, + envIsPopup, + showContactContent: !envIsPopup || hideAddressBook, + } +} + +export default compose( + withRouter, + connect(mapStateToProps) +)(ContactListTab) diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js new file mode 100644 index 000000000..4852bbc6a --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js @@ -0,0 +1,135 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Identicon from '../../../../components/ui/identicon' +import Button from '../../../../components/ui/button/button.component' +import TextField from '../../../../components/ui/text-field' +import { isValidAddress } from '../../../../helpers/utils/util' +import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' + +export default class EditContact extends PureComponent { + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + addToAddressBook: PropTypes.func, + removeFromAddressBook: PropTypes.func, + history: PropTypes.object, + name: PropTypes.string, + address: PropTypes.string, + memo: PropTypes.string, + viewRoute: PropTypes.string, + listRoute: PropTypes.string, + setAccountLabel: PropTypes.func, + } + + state = { + newName: '', + newAddress: '', + newMemo: '', + error: '', + } + + render () { + const { t } = this.context + const { history, name, addToAddressBook, removeFromAddressBook, address, memo, viewRoute, listRoute, setAccountLabel } = this.props + + return ( + <div className="settings-page__content-row address-book__edit-contact"> + <div className="settings-page__header address-book__header--edit"> + <Identicon address={address} diameter={60}/> + <Button + type="link" + className="settings-page__address-book-button" + onClick={() => { + removeFromAddressBook(address) + history.push(listRoute) + }} + > + {t('deleteAccount')} + </Button> + </div> + <div className="address-book__edit-contact__content"> + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('userName') } + </div> + <TextField + type="text" + id="nickname" + placeholder={this.context.t('addAlias')} + value={this.state.newName || name} + onChange={e => this.setState({ newName: e.target.value })} + fullWidth + margin="dense" + /> + </div> + + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('ethereumPublicAddress') } + </div> + <TextField + type="text" + id="address" + placeholder={address} + value={this.state.newAddress || address} + error={this.state.error} + onChange={e => this.setState({ newAddress: e.target.value })} + fullWidth + margin="dense" + /> + </div> + + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label--capitalized"> + { t('memo') } + </div> + <TextField + type="text" + id="memo" + placeholder={memo} + value={this.state.newMemo || memo} + onChange={e => this.setState({ newMemo: e.target.value })} + fullWidth + margin="dense" + multiline={true} + rows={3} + classes={{ + inputMultiline: 'address-book__view-contact__text-area', + inputRoot: 'address-book__view-contact__text-area-wrapper', + }} + /> + </div> + </div> + <PageContainerFooter + cancelText={this.context.t('cancel')} + onSubmit={() => { + if (this.state.newAddress !== '' && this.state.newAddress !== address) { + // if the user makes a valid change to the address field, remove the original address + if (isValidAddress(this.state.newAddress)) { + removeFromAddressBook(address) + addToAddressBook(this.state.newAddress, this.state.newName || name, this.state.newMemo || memo) + setAccountLabel(this.state.newAddress, this.state.newName || name) + history.push(listRoute) + } else { + this.setState({ error: 'invalid address' }) + } + } else { + // update name + addToAddressBook(address, this.state.newName || name, this.state.newMemo || memo) + setAccountLabel(address, this.state.newName || name) + history.push(listRoute) + } + }} + onCancel={() => { + history.push(`${viewRoute}/${address}`) + }} + submitText={this.context.t('save')} + submitButtonType={'confirm'} + /> + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js new file mode 100644 index 000000000..8841ff791 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js @@ -0,0 +1,47 @@ +import EditContact from './edit-contact.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { getAddressBookEntry } from '../../../../selectors/selectors' +import { + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, + CONTACT_LIST_ROUTE, +} from '../../../../helpers/constants/routes' +import { addToAddressBook, removeFromAddressBook, setAccountLabel } from '../../../../store/actions' + +const mapStateToProps = (state, ownProps) => { + const { location } = ownProps + const { pathname } = location + const pathNameTail = pathname.match(/[^/]+$/)[0] + const pathNameTailIsAddress = pathNameTail.includes('0x') + const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id + + const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address] + + const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE)) + + return { + address, + name, + memo, + viewRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_VIEW_ROUTE : CONTACT_VIEW_ROUTE, + listRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_ROUTE : CONTACT_LIST_ROUTE, + showingMyAccounts, + } +} + +const mapDispatchToProps = dispatch => { + return { + addToAddressBook: (recipient, nickname, memo) => dispatch(addToAddressBook(recipient, nickname, memo)), + removeFromAddressBook: (addressToRemove) => dispatch(removeFromAddressBook(addressToRemove)), + setAccountLabel: (address, label) => dispatch(setAccountLabel(address, label)), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(EditContact) diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/index.js b/ui/app/pages/settings/contact-list-tab/edit-contact/index.js new file mode 100644 index 000000000..fe5ee206a --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/edit-contact/index.js @@ -0,0 +1 @@ +export { default } from './edit-contact.container' diff --git a/ui/app/pages/settings/contact-list-tab/index.js b/ui/app/pages/settings/contact-list-tab/index.js new file mode 100644 index 000000000..c09e9787b --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/index.js @@ -0,0 +1 @@ +export { default } from './contact-list-tab.container' diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss new file mode 100644 index 000000000..c7e99095f --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/index.scss @@ -0,0 +1,234 @@ +.address-book-wrapper { + display: flex; + justify-content: space-between; + height: 100%; +} + +.address-book { + flex: 0.4 1 40%; + max-width: 40%; + + @media screen and (max-width: 576px) { + flex: 1; + max-width: 100%; + } + + &__entry { + display: flex; + flex-flow: row nowrap; + padding: 16px 14px; + flex: 0 0 auto; + border-bottom: 1px solid #dedede; + + &:hover { + border: 1px solid #037DD6; + cursor: pointer; + } + } + + &__name { + padding: 3px; + } + + &__header, &__header--edit { + &__name { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 34px; + margin-left: 24px; + } + } + + &__header--edit { + display: flex; + justify-content: space-between; + + .button { + justify-content: flex-end; + color: #D73A49; + font-size: 14px; + } + } + + &__input { + @extend %input-2; + margin-top: .25rem; + + &--address { + font-size: 0.875rem; + } + } + + &__view-contact { + &__text-area-wrapper { + height: 96px !important; + } + + &__text-area { + line-height: initial !important; + } + + &__group { + display: flex; + flex-flow: column nowrap; + padding: 1.5rem 1.5rem 0 1.5rem; + + &__label, &__label--capitalized { + font-size: .75rem; + color: $Grey-500; + margin-bottom: .25rem; + } + + &__label--capitalized { + text-transform: capitalize; + } + + &__value, &__static-address { + display: flex; + flex-flow: row nowrap; + font-size: 1.125rem; + color: $Grey-800; + word-break: break-word; + + &--address { + font-size: 0.875rem; + } + + &--copy-icon { + padding-left: 4px; + } + } + + &__static-address { + font-size: 0.875rem; + &--copy-icon { + cursor: pointer; + + &:hover { + color: black; + } + } + } + + .unit-input__input { + max-width: 100%; + width: 100%; + } + } + } + + &__edit-contact { + display: flex; + flex-flow: column nowrap; + padding-bottom: 0 !important; + height: 100%; + + &__content { + flex: 1 1 auto; + + > div { + padding-top: 0; + } + + } + + .page-container__footer { + border-top: none; + } + } + + &__add-contact { + display: flex; + flex-flow: column nowrap; + padding-bottom: 0 !important; + height: 100%; + + &__content { + flex: 1 1 auto; + height: 100%; + } + + &__error { + font-size: 12px; + line-height: 12px; + left: 8px; + color: $red; + } + } + + &__my-accounts-button { + display: flex; + flex-flow: column; + cursor: pointer; + padding: 15px; + + &:hover { + background-color: rgba(222, 222, 222, 0.2); + } + + &__header { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 25px; + color: #000000; + } + + &__content { + display: flex; + justify-content: space-between; + } + + &__text { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 20px; + color: #6A737D; + } + + &__caret { + display: block; + background-image: url(/images/caret-right.svg); + width: 30px; + opacity: .5; + background-repeat: no-repeat; + } + } +} + +.address-book-add-button { + &__button { + position: absolute; + top: 10px; + right: 16px; + height: 56px; + width: 56px; + border-radius: 18px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + border-width: 2px; + background: #037DD6; + margin-right: 5px; + cursor: pointer; + box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.25); + } +} + +.address-book--hidden { + display: none; +} + +.address-book-contact-content { + flex: 0.4 1 40%; + + @media screen and (max-width: 576px) { + flex: 1 + } +} diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/index.js b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js new file mode 100644 index 000000000..13a7a9cbf --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js @@ -0,0 +1 @@ +export { default } from './my-accounts.container' diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js new file mode 100644 index 000000000..f43b59e07 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js @@ -0,0 +1,39 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import ContactList from '../../../../components/app/contact-list' +import { CONTACT_MY_ACCOUNTS_VIEW_ROUTE } from '../../../../helpers/constants/routes' + +export default class ViewContact extends PureComponent { + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + myAccounts: PropTypes.array, + history: PropTypes.object, + } + + renderMyAccounts () { + const { myAccounts, history } = this.props + + return ( + <div> + <ContactList + searchForMyAccounts={() => myAccounts} + selectRecipient={(address) => { + history.push(`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${address}`) + }} + /> + </div> + ) + } + + render () { + return ( + <div className="address-book"> + { this.renderMyAccounts() } + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js new file mode 100644 index 000000000..6380c9d4c --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js @@ -0,0 +1,18 @@ +import ViewContact from './my-accounts.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { accountsWithSendEtherInfoSelector } from '../../../../selectors/selectors' + +const mapStateToProps = (state,) => { + const myAccounts = accountsWithSendEtherInfoSelector(state) + + return { + myAccounts, + } +} + +export default compose( + withRouter, + connect(mapStateToProps) +)(ViewContact) diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/index.js b/ui/app/pages/settings/contact-list-tab/view-contact/index.js new file mode 100644 index 000000000..78bf19d18 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/view-contact/index.js @@ -0,0 +1 @@ +export { default } from './view-contact.container' diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js new file mode 100644 index 000000000..d4fe045eb --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js @@ -0,0 +1,78 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Identicon from '../../../../components/ui/identicon' + +import Button from '../../../../components/ui/button/button.component' +import copyToClipboard from 'copy-to-clipboard' + +function quadSplit (address) { + return '0x ' + address.slice(2).match(/.{1,4}/g).join(' ') +} + +export default class ViewContact extends PureComponent { + + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + removeFromAddressBook: PropTypes.func, + name: PropTypes.string, + address: PropTypes.string, + history: PropTypes.object, + checkSummedAddress: PropTypes.string, + memo: PropTypes.string, + editRoute: PropTypes.string, + } + + render () { + const { t } = this.context + const { history, name, address, checkSummedAddress, memo, editRoute } = this.props + + return ( + <div className="settings-page__content-row"> + <div className="settings-page__content-item"> + <div className="settings-page__header address-book__header"> + <Identicon address={address} diameter={60} /> + <div className="address-book__header__name">{ name }</div> + </div> + <div className="address-book__view-contact__group"> + <Button + type="secondary" + onClick={() => { + history.push(`${editRoute}/${address}`) + }} + > + {t('edit')} + </Button> + </div> + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label"> + { t('ethereumPublicAddress') } + </div> + <div className="address-book__view-contact__group__value"> + <div + className="address-book__view-contact__group__static-address" + > + { quadSplit(checkSummedAddress) } + </div> + <img + className="address-book__view-contact__group__static-address--copy-icon" + onClick={() => copyToClipboard(checkSummedAddress)} + src="/images/copy-to-clipboard.svg" + /> + </div> + </div> + <div className="address-book__view-contact__group"> + <div className="address-book__view-contact__group__label--capitalized"> + { t('memo') } + </div> + <div className="address-book__view-contact__group__static-address"> + { memo } + </div> + </div> + </div> + </div> + ) + } +} diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js new file mode 100644 index 000000000..b1196d936 --- /dev/null +++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js @@ -0,0 +1,43 @@ +import ViewContact from './view-contact.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { getAddressBookEntry } from '../../../../selectors/selectors' +import { removeFromAddressBook } from '../../../../store/actions' +import { checksumAddress } from '../../../../helpers/utils/util' +import { + CONTACT_EDIT_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, +} from '../../../../helpers/constants/routes' + +const mapStateToProps = (state, ownProps) => { + const { location } = ownProps + const { pathname } = location + const pathNameTail = pathname.match(/[^/]+$/)[0] + const pathNameTailIsAddress = pathNameTail.includes('0x') + const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id + + const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address] + + const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE)) + + return { + name, + address, + checkSummedAddress: checksumAddress(address), + memo, + editRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_EDIT_ROUTE : CONTACT_EDIT_ROUTE, + } +} + +const mapDispatchToProps = dispatch => { + return { + removeFromAddressBook: (addressToRemove) => dispatch(removeFromAddressBook(addressToRemove)), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(ViewContact) diff --git a/ui/app/pages/settings/index.js b/ui/app/pages/settings/index.js index 44a9ffa63..d2dd7f795 100644 --- a/ui/app/pages/settings/index.js +++ b/ui/app/pages/settings/index.js @@ -1 +1 @@ -export { default } from './settings.component' +export { default } from './settings.container' diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index c516a84bb..73f36806d 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -4,6 +4,8 @@ @import 'settings-tab/index'; +@import 'contact-list-tab/index'; + .settings-page { position: relative; background: $white; @@ -23,7 +25,7 @@ } } - &__subheader { + &__subheader, &__subheader--link { padding: 16px 4px; font-size: 20px; border-bottom: 1px solid $alto; @@ -38,6 +40,16 @@ } } + &__subheader--link { + cursor: pointer; + margin-right: 4px; + } + + &__subheader--link:hover { + cursor: pointer; + color: #037DD6; + } + &__sub-header { height: 72px; border-bottom: 1px solid #D8D8D8; @@ -116,6 +128,8 @@ &__modules { overflow-y: auto; flex: 1 1 auto; + display: flex; + flex-flow: column; @media screen and (max-width: 575px) { display: none; @@ -142,7 +156,7 @@ min-width: 0; display: flex; flex-direction: column; - min-height: 71px; + margin-bottom: 20px; @media screen and (max-width: 575px) { height: initial; @@ -175,6 +189,37 @@ } } + &__copyable-address { + display: flex; + } + + &__copy-icon { + padding-left: 4px; + } + + &__button-group { + display:flex; + margin-left: auto; + } + + &__address-book-button { + //align-self: flex-end; + //padding: 5px; + //text-transform: uppercase; + //cursor: pointer; + //width: 25%; + //min-width: 80px; + //height: 33px; + font-size: 1rem; + line-height: 1.1875rem; + padding: 0; + + } + + &__address-book-button + &__address-book-button { + margin-left: 1.875rem; + } + &--selected { .settings-page { &__content { diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js index 388e2665f..0349aa14f 100644 --- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js +++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js @@ -12,7 +12,7 @@ export default class NetworkForm extends PureComponent { static propTypes = { editRpc: PropTypes.func.isRequired, - delRpcTarget: PropTypes.func.isRequired, + showConfirmDeleteNetworkModal: PropTypes.func.isRequired, rpcUrl: PropTypes.string, chainId: PropTypes.string, ticker: PropTypes.string, @@ -131,10 +131,14 @@ export default class NetworkForm extends PureComponent { } onDelete = () => { - const { delRpcTarget, rpcUrl, onClear } = this.props - delRpcTarget(rpcUrl) - this.resetForm() - onClear() + const { showConfirmDeleteNetworkModal, rpcUrl, onClear } = this.props + showConfirmDeleteNetworkModal({ + target: rpcUrl, + onConfirm: () => { + this.resetForm() + onClear() + }, + }) } stateIsUnchanged () { diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js index f6c8443cf..40e1a902f 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.component.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js @@ -25,7 +25,7 @@ export default class NetworksTab extends PureComponent { setNetworksTabAddMode: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired, setSelectedSettingsRpcUrl: PropTypes.func.isRequired, - delRpcTarget: PropTypes.func.isRequired, + showConfirmDeleteNetworkModal: PropTypes.func.isRequired, providerUrl: PropTypes.string, providerType: PropTypes.string, networkDefaultedToProvider: PropTypes.bool, @@ -50,16 +50,16 @@ export default class NetworksTab extends PureComponent { return ( <div className="settings-page__sub-header"> - <div - className="networks-tab__back-button" - onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode - ? () => { - setNetworksTabAddMode(false) - setSelectedSettingsRpcUrl(null) - } - : () => this.props.history.push(SETTINGS_ROUTE) + <div + className="networks-tab__back-button" + onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode + ? () => { + setNetworksTabAddMode(false) + setSelectedSettingsRpcUrl(null) } - /> + : () => this.props.history.push(SETTINGS_ROUTE) + } + /> <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span> <div className="networks-tab__add-network-header-button-wrapper"> <Button @@ -109,7 +109,7 @@ export default class NetworksTab extends PureComponent { setNetworksTabAddMode(false) setSelectedSettingsRpcUrl(rpcUrl) }} - > + > <NetworkDropdownIcon backgroundColor={iconColor || 'white'} innerBorder={border} @@ -126,7 +126,7 @@ export default class NetworksTab extends PureComponent { renderNetworksList () { const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props - console.log(networksToRender) + return ( <div className={classnames('networks-tab__networks-list', { @@ -160,7 +160,7 @@ export default class NetworksTab extends PureComponent { const { t } = this.context const { setRpcTarget, - delRpcTarget, + showConfirmDeleteNetworkModal, setSelectedSettingsRpcUrl, setNetworksTabAddMode, selectedNetwork: { @@ -199,7 +199,7 @@ export default class NetworksTab extends PureComponent { setNetworksTabAddMode(false) setSelectedSettingsRpcUrl(null) }} - delRpcTarget={delRpcTarget} + showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal} viewOnly={viewOnly} isCurrentRpcTarget={providerUrl === rpcUrl} networksTabIsInAddMode={networksTabIsInAddMode} @@ -223,16 +223,16 @@ export default class NetworksTab extends PureComponent { {this.renderNetworksTabContent()} {!networkIsSelected && !networksTabIsInAddMode ? <div className="networks-tab__add-network-button-wrapper"> - <Button - type="primary" - onClick={event => { - event.preventDefault() - setSelectedSettingsRpcUrl(null) - setNetworksTabAddMode(true) - }} - > - { this.context.t('addNetwork') } - </Button> + <Button + type="primary" + onClick={event => { + event.preventDefault() + setSelectedSettingsRpcUrl(null) + setNetworksTabAddMode(true) + }} + > + { this.context.t('addNetwork') } + </Button> </div> : null } diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js index 9e1098922..8cc18a4bd 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.container.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js @@ -8,7 +8,7 @@ import { displayWarning, setNetworksTabAddMode, editRpc, - delRpcTarget, + showModal, } from '../../../store/actions' import { defaultNetworksData } from './networks-tab.constants' const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true })) @@ -64,8 +64,8 @@ const mapDispatchToProps = dispatch => { setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => { dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs)) }, - delRpcTarget: (target) => { - dispatch(delRpcTarget(target)) + showConfirmDeleteNetworkModal: ({ target, onConfirm }) => { + return dispatch(showModal({ name: 'CONFIRM_DELETE_NETWORK', target, onConfirm })) }, displayWarning: warning => dispatch(displayWarning(warning)), setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)), diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js index 01a28bac7..0d367abfb 100644 --- a/ui/app/pages/settings/security-tab/security-tab.component.js +++ b/ui/app/pages/settings/security-tab/security-tab.component.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { exportAsFile } from '../../../helpers/utils/util' -import ToggleButton from 'react-toggle-button' +import ToggleButton from '../../../components/ui/toggle-button' import { REVEAL_SEED_ROUTE } from '../../../helpers/constants/routes' import Button from '../../../components/ui/button' @@ -140,8 +140,8 @@ export default class SecurityTab extends PureComponent { <ToggleButton value={privacyMode} onToggle={value => setPrivacyMode(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -166,8 +166,8 @@ export default class SecurityTab extends PureComponent { <ToggleButton value={participateInMetaMetrics} onToggle={value => setParticipateInMetaMetrics(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> diff --git a/ui/app/pages/settings/settings-tab/settings-tab.component.js b/ui/app/pages/settings/settings-tab/settings-tab.component.js index 57e80be0d..f8daa98f9 100644 --- a/ui/app/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/app/pages/settings/settings-tab/settings-tab.component.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import infuraCurrencies from '../../../helpers/constants/infura-conversion.json' import SimpleDropdown from '../../../components/app/dropdowns/simple-dropdown' -import ToggleButton from 'react-toggle-button' +import ToggleButton from '../../../components/ui/toggle-button' import locales from '../../../../../app/_locales/index.json' const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -105,6 +105,7 @@ export default class SettingsTab extends PureComponent { renderBlockieOptIn () { + const { t } = this.context const { useBlockie, setUseBlockie } = this.props return ( @@ -117,8 +118,8 @@ export default class SettingsTab extends PureComponent { <ToggleButton value={useBlockie} onToggle={value => setUseBlockie(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js index 7f2045244..79f383dc4 100644 --- a/ui/app/pages/settings/settings.component.js +++ b/ui/app/pages/settings/settings.component.js @@ -1,8 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { Switch, Route, matchPath, withRouter } from 'react-router-dom' -import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums' -import { getEnvironmentType } from '../../../../app/scripts/lib/util' import TabBar from '../../components/app/tab-bar' import c from 'classnames' import SettingsTab from './settings-tab' @@ -10,6 +8,7 @@ import NetworksTab from './networks-tab' import AdvancedTab from './advanced-tab' import InfoTab from './info-tab' import SecurityTab from './security-tab' +import ContactListTab from './contact-list-tab' import { DEFAULT_ROUTE, ADVANCED_ROUTE, @@ -18,19 +17,28 @@ import { ABOUT_US_ROUTE, SETTINGS_ROUTE, NETWORKS_ROUTE, + CONTACT_LIST_ROUTE, + CONTACT_ADD_ROUTE, + CONTACT_EDIT_ROUTE, + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, } from '../../helpers/constants/routes' -const ROUTES_TO_I18N_KEYS = { - [GENERAL_ROUTE]: 'general', - [ADVANCED_ROUTE]: 'advanced', - [SECURITY_ROUTE]: 'securityAndPrivacy', - [ABOUT_US_ROUTE]: 'about', -} - class SettingsPage extends PureComponent { static propTypes = { - location: PropTypes.object, + addressName: PropTypes.string, + backRoute: PropTypes.string, + currentPath: PropTypes.string, history: PropTypes.object, + isAddressEntryPage: PropTypes.bool, + isPopupView: PropTypes.bool, + location: PropTypes.object, + pathnameI18nKey: PropTypes.string, + initialBreadCrumbRoute: PropTypes.string, + breadCrumbTextKey: PropTypes.string, + initialBreadCrumbKey: PropTypes.string, t: PropTypes.func, } @@ -38,35 +46,25 @@ class SettingsPage extends PureComponent { t: PropTypes.func, } - isCurrentPath (pathname) { - return this.props.location.pathname === pathname - } - render () { - const { t } = this.context - const { history, location } = this.props - - const pathnameI18nKey = ROUTES_TO_I18N_KEYS[location.pathname] - const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP + const { history, backRoute, currentPath } = this.props return ( <div className={c('main-container settings-page', { - 'settings-page--selected': !this.isCurrentPath(SETTINGS_ROUTE), + 'settings-page--selected': currentPath !== SETTINGS_ROUTE, })} > <div className="settings-page__header"> { - !this.isCurrentPath(SETTINGS_ROUTE) && !this.isCurrentPath(NETWORKS_ROUTE) && ( + currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && ( <div className="settings-page__back-button" - onClick={() => history.push(SETTINGS_ROUTE)} + onClick={() => history.push(backRoute)} /> ) } - <div className="settings-page__header__title"> - {t(pathnameI18nKey && isPopupView ? pathnameI18nKey : 'settings')} - </div> + { this.renderTitle() } <div className="settings-page__close-button" onClick={() => history.push(DEFAULT_ROUTE)} @@ -85,19 +83,65 @@ class SettingsPage extends PureComponent { ) } + renderTitle () { + const { t } = this.context + const { isPopupView, pathnameI18nKey, addressName } = this.props + + let titleText + + if (isPopupView && addressName) { + titleText = addressName + } else if (pathnameI18nKey && isPopupView) { + titleText = t(pathnameI18nKey) + } else { + titleText = t('settings') + } + + return ( + <div className="settings-page__header__title"> + {titleText} + </div> + ) + } + renderSubHeader () { const { t } = this.context - const { location: { pathname } } = this.props + const { + currentPath, + isPopupView, + isAddressEntryPage, + pathnameI18nKey, + addressName, + initialBreadCrumbRoute, + breadCrumbTextKey, + history, + initialBreadCrumbKey, + } = this.props + + let subheaderText - return pathname !== NETWORKS_ROUTE && ( + if (isPopupView && isAddressEntryPage) { + subheaderText = t('settings') + } else if (initialBreadCrumbKey) { + subheaderText = t(initialBreadCrumbKey) + } else { + subheaderText = t(pathnameI18nKey || 'general') + } + + return currentPath !== NETWORKS_ROUTE && ( <div className="settings-page__subheader"> - {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')} + <div + className={c({ 'settings-page__subheader--link': initialBreadCrumbRoute })} + onClick={() => initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)} + >{subheaderText}</div> + {breadCrumbTextKey && <div><span>{'> '}</span>{t(breadCrumbTextKey)}</div>} + {isAddressEntryPage && <div><span>{' > '}</span>{addressName}</div>} </div> ) } renderTabs () { - const { history, location } = this.props + const { history, currentPath } = this.props const { t } = this.context return ( @@ -105,15 +149,16 @@ class SettingsPage extends PureComponent { tabs={[ { content: t('general'), description: t('generalSettingsDescription'), key: GENERAL_ROUTE }, { content: t('advanced'), description: t('advancedSettingsDescription'), key: ADVANCED_ROUTE }, + { content: t('contactList'), description: t('contactListDescription'), key: CONTACT_LIST_ROUTE }, { content: t('securityAndPrivacy'), description: t('securitySettingsDescription'), key: SECURITY_ROUTE }, { content: t('networks'), description: t('networkSettingsDescription'), key: NETWORKS_ROUTE }, { content: t('about'), description: t('aboutSettingsDescription'), key: ABOUT_US_ROUTE }, ]} isActive={key => { - if (key === GENERAL_ROUTE && this.isCurrentPath(SETTINGS_ROUTE)) { + if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) { return true } - return matchPath(location.pathname, { path: key, exact: true }) + return matchPath(currentPath, { path: key, exact: true }) }} onSelect={key => history.push(key)} /> @@ -149,6 +194,41 @@ class SettingsPage extends PureComponent { component={SecurityTab} /> <Route + exact + path={CONTACT_LIST_ROUTE} + component={ContactListTab} + /> + <Route + exact + path={CONTACT_ADD_ROUTE} + component={ContactListTab} + /> + <Route + exact + path={CONTACT_MY_ACCOUNTS_ROUTE} + component={ContactListTab} + /> + <Route + exact + path={`${CONTACT_EDIT_ROUTE}/:id`} + component={ContactListTab} + /> + <Route + exact + path={`${CONTACT_VIEW_ROUTE}/:id`} + component={ContactListTab} + /> + <Route + exact + path={`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/:id`} + component={ContactListTab} + /> + <Route + exact + path={`${CONTACT_MY_ACCOUNTS_EDIT_ROUTE}/:id`} + component={ContactListTab} + /> + <Route component={SettingsTab} /> </Switch> diff --git a/ui/app/pages/settings/settings.container.js b/ui/app/pages/settings/settings.container.js new file mode 100644 index 000000000..79b191483 --- /dev/null +++ b/ui/app/pages/settings/settings.container.js @@ -0,0 +1,92 @@ +import Settings from './settings.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { getAddressBookEntryName } from '../../selectors/selectors' +import { isValidAddress } from '../../helpers/utils/util' +import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums' +import { getEnvironmentType } from '../../../../app/scripts/lib/util' + +import { + ADVANCED_ROUTE, + SECURITY_ROUTE, + GENERAL_ROUTE, + ABOUT_US_ROUTE, + SETTINGS_ROUTE, + CONTACT_LIST_ROUTE, + CONTACT_ADD_ROUTE, + CONTACT_EDIT_ROUTE, + CONTACT_VIEW_ROUTE, + CONTACT_MY_ACCOUNTS_ROUTE, + CONTACT_MY_ACCOUNTS_EDIT_ROUTE, + CONTACT_MY_ACCOUNTS_VIEW_ROUTE, +} from '../../helpers/constants/routes' + +const ROUTES_TO_I18N_KEYS = { + [GENERAL_ROUTE]: 'general', + [ADVANCED_ROUTE]: 'advanced', + [SECURITY_ROUTE]: 'securityAndPrivacy', + [ABOUT_US_ROUTE]: 'about', + [CONTACT_LIST_ROUTE]: 'contactList', + [CONTACT_ADD_ROUTE]: 'newContact', + [CONTACT_EDIT_ROUTE]: 'editContact', + [CONTACT_VIEW_ROUTE]: 'viewContact', + [CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts', +} + +const mapStateToProps = (state, ownProps) => { + const { location } = ownProps + const { pathname } = location + const pathNameTail = pathname.match(/[^/]+$/)[0] + + const isAddressEntryPage = pathNameTail.includes('0x') + const isMyAccountsPage = pathname.match('my-accounts') + const isAddContactPage = Boolean(pathname.match(CONTACT_ADD_ROUTE)) + const isEditContactPage = Boolean(pathname.match(CONTACT_EDIT_ROUTE)) + const isEditMyAccountsContactPage = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE)) + + const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP + const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname] + + let backRoute + if (isMyAccountsPage && isAddressEntryPage) { + backRoute = CONTACT_MY_ACCOUNTS_ROUTE + } else if (isEditContactPage) { + backRoute = `${CONTACT_VIEW_ROUTE}/${pathNameTail}` + } else if (isEditMyAccountsContactPage) { + backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}` + } else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) { + backRoute = CONTACT_LIST_ROUTE + } else { + backRoute = SETTINGS_ROUTE + } + + let initialBreadCrumbRoute + let breadCrumbTextKey + let initialBreadCrumbKey + if (isMyAccountsPage) { + initialBreadCrumbRoute = CONTACT_LIST_ROUTE + breadCrumbTextKey = 'myWalletAccounts' + initialBreadCrumbKey = ROUTES_TO_I18N_KEYS[initialBreadCrumbRoute] + } + + const addressName = getAddressBookEntryName(state, isValidAddress(pathNameTail) ? pathNameTail : '') + + return { + isAddressEntryPage, + isMyAccountsPage, + backRoute, + currentPath: pathname, + isPopupView, + pathnameI18nKey, + addressName, + initialBreadCrumbRoute, + breadCrumbTextKey, + initialBreadCrumbKey, + } +} + +export default compose( + withRouter, + connect(mapStateToProps) +)(Settings) 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 3ed82044d..adb5fe450 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, @@ -26,6 +26,9 @@ var actions = { MODAL_CLOSE: 'UI_MODAL_CLOSE', showModal: showModal, hideModal: hideModal, + // notification state + CLOSE_NOTIFICATION_WINDOW: 'CLOSE_NOTIFICATION_WINDOW', + closeNotifacationWindow: closeNotifacationWindow, // sidebar state SIDEBAR_OPEN: 'UI_SIDEBAR_OPEN', SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE', @@ -64,7 +67,6 @@ var actions = { markPasswordForgotten, unMarkPasswordForgotten, SHOW_INIT_MENU: 'SHOW_INIT_MENU', - SHOW_NEW_VAULT_SEED: 'SHOW_NEW_VAULT_SEED', SHOW_INFO_PAGE: 'SHOW_INFO_PAGE', SHOW_IMPORT_PAGE: 'SHOW_IMPORT_PAGE', SHOW_NEW_ACCOUNT_PAGE: 'SHOW_NEW_ACCOUNT_PAGE', @@ -78,7 +80,6 @@ var actions = { showImportPage, showNewAccountPage, setNewAccountForm, - createNewVaultAndKeychain: createNewVaultAndKeychain, createNewVaultAndRestore: createNewVaultAndRestore, createNewVaultInProgress: createNewVaultInProgress, createNewVaultAndGetSeedPhrase, @@ -94,14 +95,12 @@ var actions = { navigateToNewAccountScreen, resetAccount, removeAccount, - showNewVaultSeed: showNewVaultSeed, showInfoPage: showInfoPage, CLOSE_WELCOME_SCREEN: 'CLOSE_WELCOME_SCREEN', closeWelcomeScreen, // seed recovery actions REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION', revealSeedConfirmation: revealSeedConfirmation, - requestRevealSeed: requestRevealSeed, requestRevealSeedWords, // unlock screen UNLOCK_IN_PROGRESS: 'UNLOCK_IN_PROGRESS', @@ -136,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', @@ -195,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, @@ -214,7 +219,6 @@ var actions = { gasLoadingStarted, gasLoadingFinished, // app messages - confirmSeedWords: confirmSeedWords, showAccountDetail: showAccountDetail, BACK_TO_ACCOUNT_DETAIL: 'BACK_TO_ACCOUNT_DETAIL', backToAccountDetail: backToAccountDetail, @@ -270,12 +274,12 @@ var actions = { showSubLoadingIndication: showSubLoadingIndication, HIDE_SUB_LOADING_INDICATION: 'HIDE_SUB_LOADING_INDICATION', hideSubLoadingIndication: hideSubLoadingIndication, -// QR STUFF: + // QR STUFF: SHOW_QR: 'SHOW_QR', showQrView: showQrView, reshowQrCode: reshowQrCode, SHOW_QR_VIEW: 'SHOW_QR_VIEW', -// FORGOT PASSWORD: + // FORGOT PASSWORD: BACK_TO_INIT_MENU: 'BACK_TO_INIT_MENU', goBackToInitView: goBackToInitView, RECOVERY_IN_PROGRESS: 'RECOVERY_IN_PROGRESS', @@ -320,11 +324,7 @@ var actions = { setUseNativeCurrencyAsPrimaryCurrencyPreference, setShowFiatConversionOnTestnetsPreference, setAutoLogoutTimeLimit, - - // Migration of users to new UI - setCompletedUiMigration, - completeUiMigration, - COMPLETE_UI_MIGRATION: 'COMPLETE_UI_MIGRATION', + unsetMigratedPrivacyMode, // Onboarding setCompletedOnboarding, @@ -349,6 +349,7 @@ var actions = { approveProviderRequestByOrigin, rejectProviderRequestByOrigin, + forceApproveProviderRequestByOrigin, clearApprovedOrigins, setFirstTimeFlowType, @@ -374,6 +375,10 @@ var actions = { LOADING_TOKEN_PARAMS_STARTED: 'LOADING_TOKEN_PARAMS_STARTED', loadingTokenParamsFinished, LOADING_TOKEN_PARAMS_FINISHED: 'LOADING_TOKEN_PARAMS_FINISHED', + + setSeedPhraseBackedUp, + verifySeedPhrase, + SET_SEED_PHRASE_BACKED_UP_TO_TRUE: 'SET_SEED_PHRASE_BACKED_UP_TO_TRUE', } module.exports = actions @@ -446,44 +451,18 @@ function transitionBackward () { } } -function confirmSeedWords () { - return dispatch => { - dispatch(actions.showLoadingIndication()) - log.debug(`background.clearSeedWordCache`) - return new Promise((resolve, reject) => { - background.clearSeedWordCache((err, account) => { - dispatch(actions.hideLoadingIndication()) - if (err) { - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - - log.info('Seed word cache cleared. ' + account) - dispatch(actions.showAccountsPage()) - resolve(account) - }) - }) - } -} - function createNewVaultAndRestore (password, seed) { return (dispatch) => { dispatch(actions.showLoadingIndication()) log.debug(`background.createNewVaultAndRestore`) return new Promise((resolve, reject) => { - background.clearSeedWordCache((err) => { + background.createNewVaultAndRestore(password, seed, (err) => { if (err) { return reject(err) } - background.createNewVaultAndRestore(password, seed, (err) => { - if (err) { - return reject(err) - } - - resolve() - }) + resolve() }) }) .then(() => dispatch(actions.unMarkPasswordForgotten())) @@ -499,36 +478,6 @@ function createNewVaultAndRestore (password, seed) { } } -function createNewVaultAndKeychain (password) { - return dispatch => { - dispatch(actions.showLoadingIndication()) - log.debug(`background.createNewVaultAndKeychain`) - - return new Promise((resolve, reject) => { - background.createNewVaultAndKeychain(password, err => { - if (err) { - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - - log.debug(`background.placeSeedWords`) - - background.placeSeedWords((err) => { - if (err) { - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - - resolve() - }) - }) - }) - .then(() => forceUpdateMetamaskState(dispatch)) - .then(() => dispatch(actions.hideLoadingIndication())) - .catch(() => dispatch(actions.hideLoadingIndication())) - } -} - function createNewVaultAndGetSeedPhrase (password) { return async dispatch => { dispatch(actions.showLoadingIndication()) @@ -618,33 +567,6 @@ function verifySeedPhrase () { }) } -function requestRevealSeed (password) { - return dispatch => { - dispatch(actions.showLoadingIndication()) - log.debug(`background.submitPassword`) - return new Promise((resolve, reject) => { - background.submitPassword(password, err => { - if (err) { - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - - log.debug(`background.placeSeedWords`) - background.placeSeedWords((err, result) => { - if (err) { - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - - dispatch(actions.showNewVaultSeed(result)) - dispatch(actions.hideLoadingIndication()) - resolve() - }) - }) - }) - } -} - function requestRevealSeedWords (password) { return async dispatch => { dispatch(actions.showLoadingIndication()) @@ -875,22 +797,22 @@ function showInfoPage () { function showQrScanner (ROUTE) { return (dispatch) => { return WebcamUtils.checkStatus() - .then(status => { - if (!status.environmentReady) { - // We need to switch to fullscreen mode to ask for permission - global.platform.openExtensionInBrowser(`${ROUTE}`, `scan=true`) - } else { + .then(status => { + if (!status.environmentReady) { + // We need to switch to fullscreen mode to ask for permission + global.platform.openExtensionInBrowser(`${ROUTE}`, `scan=true`) + } else { + dispatch(actions.showModal({ + name: 'QR_SCANNER', + })) + } + }).catch(e => { dispatch(actions.showModal({ name: 'QR_SCANNER', + error: true, + errorType: e.type, })) - } - }).catch(e => { - dispatch(actions.showModal({ - name: 'QR_SCANNER', - error: true, - errorType: e.type, - })) - }) + }) } } @@ -918,7 +840,7 @@ function setCurrentCurrency (currencyCode) { function signMsg (msgData) { log.debug('action - signMsg') - return (dispatch, getState) => { + return (dispatch) => { dispatch(actions.showLoadingIndication()) window.onbeforeunload = null @@ -936,11 +858,7 @@ function signMsg (msgData) { } dispatch(actions.completedTx(msgData.metamaskId)) - - if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION && - !hasUnconfirmedTransactions(getState())) { - return global.platform.closeCurrentWindow() - } + dispatch(closeCurrentNotificationWindow()) return resolve(msgData) }) @@ -950,7 +868,7 @@ function signMsg (msgData) { function signPersonalMsg (msgData) { log.debug('action - signPersonalMsg') - return (dispatch, getState) => { + return (dispatch) => { dispatch(actions.showLoadingIndication()) window.onbeforeunload = null return new Promise((resolve, reject) => { @@ -967,11 +885,7 @@ function signPersonalMsg (msgData) { } dispatch(actions.completedTx(msgData.metamaskId)) - - if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION && - !hasUnconfirmedTransactions(getState())) { - return global.platform.closeCurrentWindow() - } + dispatch(closeCurrentNotificationWindow()) return resolve(msgData) }) @@ -981,7 +895,7 @@ function signPersonalMsg (msgData) { function signTypedMsg (msgData) { log.debug('action - signTypedMsg') - return (dispatch, getState) => { + return (dispatch) => { dispatch(actions.showLoadingIndication()) window.onbeforeunload = null return new Promise((resolve, reject) => { @@ -998,11 +912,7 @@ function signTypedMsg (msgData) { } dispatch(actions.completedTx(msgData.metamaskId)) - - if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION && - !hasUnconfirmedTransactions(getState())) { - return global.platform.closeCurrentWindow() - } + dispatch(closeCurrentNotificationWindow()) return resolve(msgData) }) @@ -1063,17 +973,17 @@ function updateGasData ({ estimateGasPrice: gasPrice, data, }) - .then(gas => { - dispatch(actions.setGasLimit(gas)) - dispatch(gasDuck.setCustomGasLimit(gas)) - dispatch(updateSendErrors({ gasLoadingError: null })) - dispatch(actions.gasLoadingFinished()) - }) - .catch(err => { - log.error(err) - dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' })) - dispatch(actions.gasLoadingFinished()) - }) + .then(gas => { + dispatch(actions.setGasLimit(gas)) + dispatch(gasDuck.setCustomGasLimit(gas)) + dispatch(updateSendErrors({ gasLoadingError: null })) + dispatch(actions.gasLoadingFinished()) + }) + .catch(err => { + log.error(err) + dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' })) + dispatch(actions.gasLoadingFinished()) + }) } } @@ -1181,6 +1091,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)}`) @@ -1215,6 +1139,20 @@ function signTokenTx (tokenAddress, toAddress, amount, txData) { } } +const updateMetamaskStateFromBackground = () => { + log.debug(`background.getState`) + + return new Promise((resolve, reject) => { + background.getState((error, newState) => { + if (error) { + return reject(error) + } + + resolve(newState) + }) + }) +} + function updateTransaction (txData) { log.info('actions: updateTx: ' + JSON.stringify(txData)) return dispatch => { @@ -1234,9 +1172,9 @@ function updateTransaction (txData) { resolve(txData) }) }) - .then(() => updateMetamaskStateFromBackground()) - .then(newState => dispatch(actions.updateMetamaskState(newState))) - .then(() => { + .then(() => updateMetamaskStateFromBackground()) + .then(newState => dispatch(actions.updateMetamaskState(newState))) + .then(() => { dispatch(actions.showConfTxPage({ id: txData.id })) dispatch(actions.hideLoadingIndication()) return txData @@ -1246,7 +1184,7 @@ function updateTransaction (txData) { function updateAndApproveTx (txData) { log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData)) - return (dispatch, getState) => { + return (dispatch) => { log.debug(`actions calling background.updateAndApproveTx`) dispatch(actions.showLoadingIndication()) window.onbeforeunload = null @@ -1271,11 +1209,7 @@ function updateAndApproveTx (txData) { dispatch(actions.clearSend()) dispatch(actions.completedTx(txData.id)) dispatch(actions.hideLoadingIndication()) - - if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION && - !hasUnconfirmedTransactions(getState())) { - return global.platform.closeCurrentWindow() - } + dispatch(closeCurrentNotificationWindow()) return txData }) @@ -1309,7 +1243,7 @@ function txError (err) { } function cancelMsg (msgData) { - return (dispatch, getState) => { + return (dispatch) => { dispatch(actions.showLoadingIndication()) window.onbeforeunload = null return new Promise((resolve, reject) => { @@ -1323,11 +1257,7 @@ function cancelMsg (msgData) { } dispatch(actions.completedTx(msgData.id)) - - if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION && - !hasUnconfirmedTransactions(getState())) { - return global.platform.closeCurrentWindow() - } + dispatch(closeCurrentNotificationWindow()) return resolve(msgData) }) @@ -1336,7 +1266,7 @@ function cancelMsg (msgData) { } function cancelPersonalMsg (msgData) { - return (dispatch, getState) => { + return (dispatch) => { dispatch(actions.showLoadingIndication()) window.onbeforeunload = null return new Promise((resolve, reject) => { @@ -1350,11 +1280,7 @@ function cancelPersonalMsg (msgData) { } dispatch(actions.completedTx(id)) - - if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION && - !hasUnconfirmedTransactions(getState())) { - return global.platform.closeCurrentWindow() - } + dispatch(closeCurrentNotificationWindow()) return resolve(msgData) }) @@ -1363,7 +1289,7 @@ function cancelPersonalMsg (msgData) { } function cancelTypedMsg (msgData) { - return (dispatch, getState) => { + return (dispatch) => { dispatch(actions.showLoadingIndication()) window.onbeforeunload = null return new Promise((resolve, reject) => { @@ -1377,11 +1303,7 @@ function cancelTypedMsg (msgData) { } dispatch(actions.completedTx(id)) - - if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION && - !hasUnconfirmedTransactions(getState())) { - return global.platform.closeCurrentWindow() - } + dispatch(closeCurrentNotificationWindow()) return resolve(msgData) }) @@ -1390,7 +1312,7 @@ function cancelTypedMsg (msgData) { } function cancelTx (txData) { - return (dispatch, getState) => { + return (dispatch) => { log.debug(`background.cancelTransaction`) dispatch(actions.showLoadingIndication()) window.onbeforeunload = null @@ -1409,11 +1331,7 @@ function cancelTx (txData) { dispatch(actions.clearSend()) dispatch(actions.completedTx(txData.id)) dispatch(actions.hideLoadingIndication()) - - if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION && - !hasUnconfirmedTransactions(getState())) { - return global.platform.closeCurrentWindow() - } + dispatch(closeCurrentNotificationWindow()) return txData }) @@ -1467,7 +1385,9 @@ function cancelAllTx (txsData) { txsData.forEach((txData, i) => { background.cancelTransaction(txData.id, () => { dispatch(actions.completedTx(txData.id)) - i === txsData.length - 1 ? dispatch(actions.goHome()) : null + if (i === txsData.length - 1) { + dispatch(actions.goHome()) + } }) }) } @@ -1549,13 +1469,6 @@ function createNewVaultInProgress () { } } -function showNewVaultSeed (seed) { - return { - type: actions.SHOW_NEW_VAULT_SEED, - value: seed, - } -} - function closeWelcomeScreen () { return { type: actions.CLOSE_WELCOME_SCREEN, @@ -1623,20 +1536,6 @@ const backgroundSetLocked = () => { }) } -const updateMetamaskStateFromBackground = () => { - log.debug(`background.getState`) - - return new Promise((resolve, reject) => { - background.getState((error, newState) => { - if (error) { - return reject(error) - } - - resolve(newState) - }) - }) -} - function lockMetamask () { log.debug(`background.setLocked`) @@ -1818,10 +1717,10 @@ function addTokens (tokens) { dispatch(actions.setSelectedToken(getTokenAddressFromTokenObject(tokens))) return Promise.all( Object - .entries(tokens) - .map(([_, { address, symbol, decimals }]) => ( - dispatch(addToken(address, symbol, decimals)) - )) + .entries(tokens) + .map(([_, { address, symbol, decimals }]) => ( + dispatch(addToken(address, symbol, decimals)) + )) ) } } @@ -1844,8 +1743,8 @@ function removeSuggestedTokens () { resolve(suggestedTokens) }) }) - .then(() => updateMetamaskStateFromBackground()) - .then(suggestedTokens => dispatch(actions.updateMetamaskState({...suggestedTokens}))) + .then(() => updateMetamaskStateFromBackground()) + .then(suggestedTokens => dispatch(actions.updateMetamaskState({...suggestedTokens}))) } } @@ -1920,8 +1819,8 @@ function createCancelTransaction (txId, customGasPrice) { resolve(newState) }) }) - .then(newState => dispatch(actions.updateMetamaskState(newState))) - .then(() => newTxId) + .then(newState => dispatch(actions.updateMetamaskState(newState))) + .then(() => newTxId) } } @@ -1942,8 +1841,8 @@ function createSpeedUpTransaction (txId, customGasPrice) { resolve(newState) }) }) - .then(newState => dispatch(actions.updateMetamaskState(newState))) - .then(() => newTx) + .then(newState => dispatch(actions.updateMetamaskState(newState))) + .then(() => newTx) } } @@ -2037,27 +1936,42 @@ function setRpcTarget (newRpc, chainId, ticker = 'ETH', nickname) { function delRpcTarget (oldRpc) { return (dispatch) => { log.debug(`background.delRpcTarget: ${oldRpc}`) - background.delCustomRpc(oldRpc, (err) => { - if (err) { - log.error(err) - return dispatch(self.displayWarning('Had a problem removing network!')) - } - dispatch(actions.setSelectedToken()) + return new Promise((resolve, reject) => { + background.delCustomRpc(oldRpc, (err) => { + if (err) { + log.error(err) + dispatch(self.displayWarning('Had a problem removing network!')) + return reject(err) + } + dispatch(actions.setSelectedToken()) + resolve() + }) }) } } - // 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)) } } @@ -2096,6 +2010,23 @@ function hideModal (payload) { } } +function closeCurrentNotificationWindow () { + return (dispatch, getState) => { + if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION && + !hasUnconfirmedTransactions(getState())) { + global.platform.closeCurrentWindow() + + dispatch(closeNotifacationWindow()) + } + } +} + +function closeNotifacationWindow () { + return { + type: actions.CLOSE_NOTIFICATION_WINDOW, + } +} + function showSidebar ({ transitionName, type, props }) { return { type: actions.SIDEBAR_OPEN, @@ -2146,10 +2077,10 @@ function showLoadingIndication (message) { } function setHardwareWalletDefaultHdPath ({ device, path }) { - return { - type: actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH, - value: {device, path}, - } + return { + type: actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH, + value: {device, path}, + } } function hideLoadingIndication () { @@ -2395,18 +2326,21 @@ function reshowQrCode (data, coin) { } } -function shapeShiftRequest (query, options, cb) { +function shapeShiftRequest (query, options = {}, cb) { var queryResponse, method - !options ? options = {} : null options.method ? method = options.method : method = 'GET' var requestListner = function () { try { queryResponse = JSON.parse(this.responseText) - cb ? cb(queryResponse) : null + if (cb) { + cb(queryResponse) + } return queryResponse } catch (e) { - cb ? cb({error: e}) : null + if (cb) { + cb({error: e}) + } return e } } @@ -2509,31 +2443,6 @@ function completeOnboarding () { } } -function setCompletedUiMigration () { - return dispatch => { - dispatch(actions.showLoadingIndication()) - return new Promise((resolve, reject) => { - background.completeUiMigration(err => { - dispatch(actions.hideLoadingIndication()) - - if (err) { - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - - dispatch(actions.completeUiMigration()) - resolve() - }) - }) - } -} - -function completeUiMigration () { - return { - type: actions.COMPLETE_UI_MIGRATION, - } -} - function setNetworkNonce (networkNonce) { return { type: actions.SET_NETWORK_NONCE, @@ -2734,6 +2643,12 @@ function approveProviderRequestByOrigin (origin) { } } +function forceApproveProviderRequestByOrigin (origin) { + return () => { + background.forceApproveProviderRequestByOrigin(origin) + } +} + function rejectProviderRequestByOrigin (origin) { return () => { background.rejectProviderRequestByOrigin(origin) @@ -2855,3 +2770,24 @@ function getTokenParams (tokenAddress) { }) } } + +function unsetMigratedPrivacyMode () { + return () => { + background.unsetMigratedPrivacyMode() + } +} + +function setSeedPhraseBackedUp (seedPhraseBackupState) { + return (dispatch) => { + log.debug(`background.setSeedPhraseBackedUp`) + return new Promise((resolve, reject) => { + background.setSeedPhraseBackedUp(seedPhraseBackupState, (err) => { + if (err) { + dispatch(actions.displayWarning(err.message)) + return reject(err) + } + return forceUpdateMetamaskState(dispatch).then(() => resolve()) + }) + }) + } +} diff --git a/ui/app/store/store.js b/ui/app/store/store.js index 9f12f469e..2edb6a7d3 100644 --- a/ui/app/store/store.js +++ b/ui/app/store/store.js @@ -1,21 +1,18 @@ -const createStore = require('redux').createStore -const applyMiddleware = require('redux').applyMiddleware -const thunkMiddleware = require('redux-thunk').default +const { createStore, applyMiddleware } = require('redux') +const { default: thunkMiddleware } = require('redux-thunk') +const { composeWithDevTools } = require('remote-redux-devtools') const rootReducer = require('../ducks') -const createLogger = require('redux-logger').createLogger -global.METAMASK_DEBUG = process.env.METAMASK_DEBUG - -module.exports = configureStore - -const loggerMiddleware = createLogger({ - predicate: () => global.METAMASK_DEBUG, -}) - -const middlewares = [thunkMiddleware, loggerMiddleware] - -const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore) - -function configureStore (initialState) { - return createStoreWithMiddleware(rootReducer, initialState) +module.exports = function configureStore (initialState) { + const composeEnhancers = composeWithDevTools({ + name: 'MetaMask', + hostname: 'localhost', + port: 8000, + realtime: Boolean(process.env.METAMASK_DEBUG), + }) + return createStore(rootReducer, initialState, composeEnhancers( + applyMiddleware( + thunkMiddleware, + ), + )) } diff --git a/ui/css.js b/ui/css.js deleted file mode 100644 index d8f954434..000000000 --- a/ui/css.js +++ /dev/null @@ -1,25 +0,0 @@ -const fs = require('fs') -const path = require('path') - -module.exports = bundleCss - -var cssFiles = { - 'index.css': fs.readFileSync(path.join(__dirname, '/app/css/output/index.css'), 'utf8'), - 'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'), - 'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'), -} - -function bundleCss () { - var cssBundle = Object.keys(cssFiles).reduce(function (bundle, fileName) { - var fileContent = cssFiles[fileName] - var output = String() - - output += '/*========== ' + fileName + ' ==========*/\n\n' - output += fileContent - output += '\n\n' - - return bundle + output - }, String()) - - return cssBundle -} diff --git a/ui/design/00-metamask-SignIn.jpg b/ui/design/00-metamask-SignIn.jpg Binary files differindex 2becdb032..d6f0d346e 100644 --- a/ui/design/00-metamask-SignIn.jpg +++ b/ui/design/00-metamask-SignIn.jpg diff --git a/ui/design/01-metamask-SelectAcc.jpg b/ui/design/01-metamask-SelectAcc.jpg Binary files differindex 239091a98..250e62f5e 100644 --- a/ui/design/01-metamask-SelectAcc.jpg +++ b/ui/design/01-metamask-SelectAcc.jpg diff --git a/ui/design/02-metamask-AccDetails.jpg b/ui/design/02-metamask-AccDetails.jpg Binary files differindex d7d408ffc..618498936 100644 --- a/ui/design/02-metamask-AccDetails.jpg +++ b/ui/design/02-metamask-AccDetails.jpg diff --git a/ui/design/02a-metamask-AccDetails-OverToken.jpg b/ui/design/02a-metamask-AccDetails-OverToken.jpg Binary files differindex f26ff31e8..69ac74406 100644 --- a/ui/design/02a-metamask-AccDetails-OverToken.jpg +++ b/ui/design/02a-metamask-AccDetails-OverToken.jpg diff --git a/ui/design/02a-metamask-AccDetails-OverTransaction.jpg b/ui/design/02a-metamask-AccDetails-OverTransaction.jpg Binary files differindex 8a06be6b9..a2d32e57f 100644 --- a/ui/design/02a-metamask-AccDetails-OverTransaction.jpg +++ b/ui/design/02a-metamask-AccDetails-OverTransaction.jpg diff --git a/ui/design/02a-metamask-AccDetails.jpg b/ui/design/02a-metamask-AccDetails.jpg Binary files differindex c37e0f539..5e915f757 100644 --- a/ui/design/02a-metamask-AccDetails.jpg +++ b/ui/design/02a-metamask-AccDetails.jpg diff --git a/ui/design/02b-metamask-AccDetails-Send.jpg b/ui/design/02b-metamask-AccDetails-Send.jpg Binary files differindex 10f2d27fd..47a49f161 100644 --- a/ui/design/02b-metamask-AccDetails-Send.jpg +++ b/ui/design/02b-metamask-AccDetails-Send.jpg diff --git a/ui/design/03-metamask-Qr.jpg b/ui/design/03-metamask-Qr.jpg Binary files differindex 9c09de42f..0f13673b0 100644 --- a/ui/design/03-metamask-Qr.jpg +++ b/ui/design/03-metamask-Qr.jpg diff --git a/ui/design/05-metamask-Menu.jpg b/ui/design/05-metamask-Menu.jpg Binary files differindex 0a43d7b2a..df66f3032 100644 --- a/ui/design/05-metamask-Menu.jpg +++ b/ui/design/05-metamask-Menu.jpg diff --git a/ui/design/chromeStorePics/final_screen_dao_accounts.png b/ui/design/chromeStorePics/final_screen_dao_accounts.png Binary files differindex 805cc96b6..9d79c3934 100644 --- a/ui/design/chromeStorePics/final_screen_dao_accounts.png +++ b/ui/design/chromeStorePics/final_screen_dao_accounts.png diff --git a/ui/design/chromeStorePics/final_screen_dao_locked.png b/ui/design/chromeStorePics/final_screen_dao_locked.png Binary files differindex 9d9e33930..011b0ef6e 100644 --- a/ui/design/chromeStorePics/final_screen_dao_locked.png +++ b/ui/design/chromeStorePics/final_screen_dao_locked.png diff --git a/ui/design/chromeStorePics/final_screen_dao_notification.png b/ui/design/chromeStorePics/final_screen_dao_notification.png Binary files differindex d56a5ce62..cc73b3690 100644 --- a/ui/design/chromeStorePics/final_screen_dao_notification.png +++ b/ui/design/chromeStorePics/final_screen_dao_notification.png diff --git a/ui/design/chromeStorePics/final_screen_wei_account.png b/ui/design/chromeStorePics/final_screen_wei_account.png Binary files differindex d503ff301..2f0cf000e 100644 --- a/ui/design/chromeStorePics/final_screen_wei_account.png +++ b/ui/design/chromeStorePics/final_screen_wei_account.png diff --git a/ui/design/chromeStorePics/final_screen_wei_notification.png b/ui/design/chromeStorePics/final_screen_wei_notification.png Binary files differindex 3560c51ff..c95ffed10 100644 --- a/ui/design/chromeStorePics/final_screen_wei_notification.png +++ b/ui/design/chromeStorePics/final_screen_wei_notification.png diff --git a/ui/design/chromeStorePics/icon-128.png b/ui/design/chromeStorePics/icon-128.png Binary files differindex ae687147d..754b4cc79 100644 --- a/ui/design/chromeStorePics/icon-128.png +++ b/ui/design/chromeStorePics/icon-128.png diff --git a/ui/design/chromeStorePics/icon-64.png b/ui/design/chromeStorePics/icon-64.png Binary files differindex 7062cf4f1..f964b01d6 100644 --- a/ui/design/chromeStorePics/icon-64.png +++ b/ui/design/chromeStorePics/icon-64.png diff --git a/ui/design/chromeStorePics/promo1400560.png b/ui/design/chromeStorePics/promo1400560.png Binary files differindex d3637ecc8..9ada2622e 100644 --- a/ui/design/chromeStorePics/promo1400560.png +++ b/ui/design/chromeStorePics/promo1400560.png diff --git a/ui/design/chromeStorePics/promo440280.png b/ui/design/chromeStorePics/promo440280.png Binary files differindex c1f92b1c0..599b53a01 100644 --- a/ui/design/chromeStorePics/promo440280.png +++ b/ui/design/chromeStorePics/promo440280.png diff --git a/ui/design/chromeStorePics/promo920680.png b/ui/design/chromeStorePics/promo920680.png Binary files differindex 726bd810a..58c343ff0 100644 --- a/ui/design/chromeStorePics/promo920680.png +++ b/ui/design/chromeStorePics/promo920680.png diff --git a/ui/design/chromeStorePics/screen_dao_accounts.png b/ui/design/chromeStorePics/screen_dao_accounts.png Binary files differindex 1a2e8052c..2b3c75e3e 100644 --- a/ui/design/chromeStorePics/screen_dao_accounts.png +++ b/ui/design/chromeStorePics/screen_dao_accounts.png diff --git a/ui/design/chromeStorePics/screen_dao_locked.png b/ui/design/chromeStorePics/screen_dao_locked.png Binary files differindex 6592c17e4..d865abdd6 100644 --- a/ui/design/chromeStorePics/screen_dao_locked.png +++ b/ui/design/chromeStorePics/screen_dao_locked.png diff --git a/ui/design/chromeStorePics/screen_dao_notification.png b/ui/design/chromeStorePics/screen_dao_notification.png Binary files differindex baeb2ec39..4ae489540 100644 --- a/ui/design/chromeStorePics/screen_dao_notification.png +++ b/ui/design/chromeStorePics/screen_dao_notification.png diff --git a/ui/design/chromeStorePics/screen_wei_account.png b/ui/design/chromeStorePics/screen_wei_account.png Binary files differindex 23301e4bf..80fea67c8 100644 --- a/ui/design/chromeStorePics/screen_wei_account.png +++ b/ui/design/chromeStorePics/screen_wei_account.png diff --git a/ui/design/metamask-logo-eyes.png b/ui/design/metamask-logo-eyes.png Binary files differindex c29331b28..b439a0122 100644 --- a/ui/design/metamask-logo-eyes.png +++ b/ui/design/metamask-logo-eyes.png diff --git a/ui/design/wireframes/metamask_wfs_jan_13.png b/ui/design/wireframes/metamask_wfs_jan_13.png Binary files differindex d71d7bdb4..e13be18b7 100644 --- a/ui/design/wireframes/metamask_wfs_jan_13.png +++ b/ui/design/wireframes/metamask_wfs_jan_13.png diff --git a/ui/example.js b/ui/example.js deleted file mode 100644 index d940d3bc8..000000000 --- a/ui/example.js +++ /dev/null @@ -1,123 +0,0 @@ -const injectCss = require('inject-css') -const MetaMaskUi = require('./index.js') -const MetaMaskUiCss = require('./css.js') -const EventEmitter = require('events').EventEmitter - -// account management - -var identities = { - '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111': { - name: 'Walrus', - img: 'QmW6hcwYzXrNkuHrpvo58YeZvbZxUddv69ATSHY3BHpPdd', - address: '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111', - balance: 220, - txCount: 4, - }, - '0x222462427bcc9133bb46e88bcbe39cd7ef0e7222': { - name: 'Tardus', - img: 'QmQYaRdrf2EhRhJWaHnts8Meu1mZiXrNib5W1P6cYmXWRL', - address: '0x222462427bcc9133bb46e88bcbe39cd7ef0e7222', - balance: 10.005, - txCount: 16, - }, - '0x333462427bcc9133bb46e88bcbe39cd7ef0e7333': { - name: 'Gambler', - img: 'QmW6hcwYzXrNkuHrpvo58YeZvbZxUddv69ATSHY3BHpPdd', - address: '0x333462427bcc9133bb46e88bcbe39cd7ef0e7333', - balance: 0.000001, - txCount: 1, - }, -} - -var unapprovedTxs = {} -addUnconfTx({ - from: '0x222462427bcc9133bb46e88bcbe39cd7ef0e7222', - to: '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111', - value: '0x123', -}) -addUnconfTx({ - from: '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111', - to: '0x333462427bcc9133bb46e88bcbe39cd7ef0e7333', - value: '0x0000', - data: '0x000462427bcc9133bb46e88bcbe39cd7ef0e7000', -}) - -function addUnconfTx (txParams) { - var time = (new Date()).getTime() - var id = createRandomId() - unapprovedTxs[id] = { - id: id, - txParams: txParams, - time: time, - } -} - -var isUnlocked = false -var selectedAccount = null - -function getState () { - return { - isUnlocked: isUnlocked, - identities: isUnlocked ? identities : {}, - unapprovedTxs: isUnlocked ? unapprovedTxs : {}, - selectedAccount: selectedAccount, - } -} - -var accountManager = new EventEmitter() - -accountManager.getState = function (cb) { - cb(null, getState()) -} - -accountManager.setLocked = function () { - isUnlocked = false - this._didUpdate() -} - -accountManager.submitPassword = function (password, cb) { - if (password === 'test') { - isUnlocked = true - cb(null, getState()) - this._didUpdate() - } else { - cb(new Error('Bad password -- try "test"')) - } -} - -accountManager.setSelectedAccount = function (address, cb) { - selectedAccount = address - cb(null, getState()) - this._didUpdate() -} - -accountManager.signTransaction = function () { - alert('signing tx....') -} - -accountManager._didUpdate = function () { - this.emit('update', getState()) -} - -// start app - -var container = document.getElementById('app-content') - -var css = MetaMaskUiCss() -injectCss(css) - -MetaMaskUi({ - container: container, - accountManager: accountManager, -}) - -// util - -function createRandomId () { - // 13 time digits - var datePart = new Date().getTime() * Math.pow(10, 3) - // 3 random digits - var extraPart = Math.floor(Math.random() * Math.pow(10, 3)) - // 16 digits - return datePart + extraPart -} diff --git a/ui/index.js b/ui/index.js index ac860e0db..db9292761 100644 --- a/ui/index.js +++ b/ui/index.js @@ -12,19 +12,19 @@ module.exports = launchMetamaskUi log.setLevel(global.METAMASK_DEBUG ? 'debug' : 'warn') function launchMetamaskUi (opts, cb) { - var accountManager = opts.accountManager - actions._setBackgroundConnection(accountManager) + var {backgroundConnection} = opts + actions._setBackgroundConnection(backgroundConnection) // check if we are unlocked first - accountManager.getState(function (err, metamaskState) { + backgroundConnection.getState(function (err, metamaskState) { if (err) return cb(err) - startApp(metamaskState, accountManager, opts) + startApp(metamaskState, backgroundConnection, opts) .then((store) => { cb(null, store) }) }) } -async function startApp (metamaskState, accountManager, opts) { +async function startApp (metamaskState, backgroundConnection, opts) { // parse opts if (!metamaskState.featureFlags) metamaskState.featureFlags = {} @@ -34,6 +34,7 @@ async function startApp (metamaskState, accountManager, opts) { const enLocaleMessages = await fetchLocale('en') const store = configureStore({ + activeTab: opts.activeTab, // metamaskState represents the cross-tab state metamask: metamaskState, @@ -59,7 +60,7 @@ async function startApp (metamaskState, accountManager, opts) { })) } - accountManager.on('update', function (metamaskState) { + backgroundConnection.on('update', function (metamaskState) { store.dispatch(actions.updateMetamaskState(metamaskState)) }) @@ -79,7 +80,7 @@ async function startApp (metamaskState, accountManager, opts) { // inject initial state store: store, } - ), opts.container) + ), opts.container) return store } diff --git a/ui/lib/webcam-utils.js b/ui/lib/webcam-utils.js index eb717b23a..bd7a5a0e0 100644 --- a/ui/lib/webcam-utils.js +++ b/ui/lib/webcam-utils.js @@ -14,16 +14,16 @@ class WebcamUtils { try { DetectRTC.load(_ => { if (DetectRTC.hasWebcam) { - let environmentReady = true - if ((isFirefoxOrBrave && isPopup) || (isPopup && !DetectRTC.isWebsiteHasWebcamPermissions)) { - environmentReady = false - } - resolve({ - permissions: DetectRTC.isWebsiteHasWebcamPermissions, - environmentReady, - }) + let environmentReady = true + if ((isFirefoxOrBrave && isPopup) || (isPopup && !DetectRTC.isWebsiteHasWebcamPermissions)) { + environmentReady = false + } + resolve({ + permissions: DetectRTC.isWebsiteHasWebcamPermissions, + environmentReady, + }) } else { - reject({type: 'NO_WEBCAM_FOUND'}) + reject({type: 'NO_WEBCAM_FOUND'}) } }) } catch (e) { |
