{ this.renderHeaderRow() }
diff --git a/ui/app/components/ui/text-field/text-field.component.js b/ui/app/components/ui/text-field/text-field.component.js
index 1153a595b..ac7712c65 100644
--- a/ui/app/components/ui/text-field/text-field.component.js
+++ b/ui/app/components/ui/text-field/text-field.component.js
@@ -61,6 +61,9 @@ const styles = {
...inputLabelBase,
fontSize: '.75rem',
},
+ inputMultiline: {
+ lineHeight: 'initial !important',
+ },
}
const TextField = props => {
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index dde66fbb3..0e2034670 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,4 +1,5 @@
@import '../../../components/ui/button/buttons';
+@import '../../../components/ui/dialog/dialog';
@import './footer.scss';
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index ee07c1a7e..81678408a 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -536,8 +536,6 @@
}
&__form {
- padding: 10px 0 25px;
-
@media screen and (max-width: $break-small) {
margin: 0;
flex: 1 1 auto;
@@ -553,7 +551,7 @@
}
&__form-row {
- margin: 8px 18px 0px;
+ margin: 1rem 1rem 0px;
position: relative;
display: flex;
flex-flow: row;
@@ -570,7 +568,6 @@
&__form-field {
flex: 1 1 auto;
min-width: 0;
- max-width: 277px;
.currency-display {
color: $tundora;
@@ -758,16 +755,8 @@
&__to-autocomplete {
position: relative;
- &__down-caret {
- z-index: 1026;
- position: absolute;
- top: 18px;
- right: 12px;
- }
-
&__qr-code {
z-index: 1026;
- position: absolute;
top: 13px;
right: 33px;
cursor: pointer;
@@ -778,13 +767,52 @@
&__qr-code:hover {
background: #f1f1f1;
}
+ }
- &__input.with-qr {
- padding-right: 65px;
+ &__to-autocomplete {
+ display: flex;
+ flex-direction: row;
+ z-index: 1025;
+ position: relative;
+ height: 54px;
+ width: 100%;
+ border: 1px solid $Grey-100;
+ border-radius: 8px;
+ background-color: $white;
+ color: $tundora;
+ padding: 0 10px;
+ font-family: Roboto;
+ line-height: 21px;
+ align-items: center;
+
+ &__input {
+ font-size: 16px;
+ height: 100%;
+ border: none;
+ flex: 1 1 auto;
+ width: 0;
+
+ &::placeholder {
+ color: #A1A5B3;
+ }
+ }
+
+ &__resolved {
+ font-size: 12px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ height: 30px;
+ cursor: pointer;
+
+ + .send-v2__to-autocomplete__qr-code {
+ top: 2px;
+ right: 0;
+ }
}
}
- &__to-autocomplete, &__memo-text-area, &__hex-data {
+ &__memo-text-area, &__hex-data {
&__input {
z-index: 1025;
position: relative;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index c02be0d98..9257456ec 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -74,6 +74,36 @@ $send-card-z-index: 20;
$sidebar-z-index: 26;
$sidebar-overlay-z-index: 25;
+// Flex
+%row-nowrap {
+ display: flex;
+ flex-flow: row nowrap;
+}
+
+%col-nowrap {
+ display: flex;
+ flex-flow: column nowrap;
+}
+
+// Background Image Sizing
+%bg-contain {
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+%ellipsify {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+%modal {
+ background-color: $white;
+ border-radius: 10px;
+ box-shadow: 0px 5px 16px rgba($black, 0.25);;
+}
+
/*
Z Indicies - Current
app - 11
@@ -94,24 +124,73 @@ $break-large: 576px;
$primary-font-type: Roboto;
$Blue-000: #eaf6ff;
+$Blue-100: #a7d9fe;
+$Blue-200: #75c4fd;
+$Blue-300: #43aefc;
$Blue-400: #1098fc;
$Blue-500: #037DD6;
$Blue-600: #0260a4;
+$Blue-700: #024272;
+$Blue-800: #01253f;
+$Blue-900: #00080d;
$Grey-000: #f2f3f4;
$Grey-100: #D6D9DC;
$Grey-200: #bbc0c5;
+$Grey-300: #9fa6ae;
$Grey-400: #848c96;
+$Grey-200: #bbc0c5;
$Grey-500: #6A737D;
+$Grey-600: #535a61;
$Grey-800: #24272a;
$Red-000: #fcf2f3;
+$Red-100: #f7d5d8;
+$Red-200: #f1b9be;
+$Red-300: #e88f97;
+$Red-400: #e06470;
$Red-500: #D73A49;
$Red-600: #b92534;
+$Red-700: #8e1d28;
+$Red-800: #64141c;
+$Red-900: #3a0c10;
$Orange-000: #fef5ef;
+$Orange-300: #faa66c;
+$Orange-600: #c65507;
$Orange-500: #F66A0A;
+// Font Sizes
+%h3 {
+ font-size: 1.5rem;
+ line-height: 2.125rem;
+ font-weight: 400;
+}
+
+%h4 {
+ font-size: 1.125rem;
+ line-height: 1.3125rem;
+ font-weight: 400;
+}
+
+%h5 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ font-weight: 400;
+}
+
+%h6 {
+ font-size: .875rem;
+ line-height: 1.25rem;
+ font-weight: 400;
+}
+
+%h8 {
+ font-size: .75rem;
+ line-height: 1.0625rem;
+ font-weight: 400;
+}
+
/*
Spacing Variables
@@ -127,3 +206,24 @@ $xlarge-spacing: 48px;
$xxlarge-spacing: 64px;
+%input {
+ background: $white;
+ border: 1px solid $Grey-100;
+ box-sizing: border-box;
+ border-radius: 8px;
+ padding: .625rem .75rem;
+ font-size: 1.25rem;
+}
+// Input mixin
+
+%input-2 {
+ border: 2px solid $Grey-200;
+ border-radius: 6px;
+ color: $Grey-800;
+ padding: 0.875rem 1rem;
+ font-size: 1.125rem;
+
+ &:focus-within {
+ border-color: $Blue-500;
+ }
+}
diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js
index 92f190cf1..64f983606 100644
--- a/ui/app/ducks/metamask/metamask.js
+++ b/ui/app/ducks/metamask/metamask.js
@@ -39,6 +39,8 @@ function reduceMetamask (state, action) {
editingTransactionId: null,
forceGasMin: null,
toNickname: '',
+ ensResolution: null,
+ ensResolutionError: '',
},
coinOptions: {},
useBlockie: false,
@@ -273,6 +275,24 @@ function reduceMetamask (state, action) {
},
})
+ case actions.UPDATE_SEND_ENS_RESOLUTION:
+ return extend(metamaskState, {
+ send: {
+ ...metamaskState.send,
+ ensResolution: action.payload,
+ ensResolutionError: '',
+ },
+ })
+
+ case actions.UPDATE_SEND_ENS_RESOLUTION_ERROR:
+ return extend(metamaskState, {
+ send: {
+ ...metamaskState.send,
+ ensResolution: null,
+ ensResolutionError: action.payload,
+ },
+ })
+
case actions.CLEAR_SEND:
return extend(metamaskState, {
send: {
diff --git a/ui/app/helpers/constants/routes.js b/ui/app/helpers/constants/routes.js
index 06b37274f..adcd3f14d 100644
--- a/ui/app/helpers/constants/routes.js
+++ b/ui/app/helpers/constants/routes.js
@@ -7,6 +7,13 @@ const ADVANCED_ROUTE = '/settings/advanced'
const SECURITY_ROUTE = '/settings/security'
const ABOUT_US_ROUTE = '/settings/about-us'
const NETWORKS_ROUTE = '/settings/networks'
+const CONTACT_LIST_ROUTE = '/settings/contact-list'
+const CONTACT_EDIT_ROUTE = '/settings/contact-list/edit-contact'
+const CONTACT_ADD_ROUTE = '/settings/contact-list/add-contact'
+const CONTACT_VIEW_ROUTE = '/settings/contact-list/view-contact'
+const CONTACT_MY_ACCOUNTS_ROUTE = '/settings/contact-list/my-accounts'
+const CONTACT_MY_ACCOUNTS_VIEW_ROUTE = '/settings/contact-list/my-accounts/view'
+const CONTACT_MY_ACCOUNTS_EDIT_ROUTE = '/settings/contact-list/my-accounts/edit'
const REVEAL_SEED_ROUTE = '/seed'
const MOBILE_SYNC_ROUTE = '/mobile-sync'
const RESTORE_VAULT_ROUTE = '/restore-vault'
@@ -75,5 +82,12 @@ module.exports = {
SECURITY_ROUTE,
GENERAL_ROUTE,
ABOUT_US_ROUTE,
+ CONTACT_LIST_ROUTE,
+ CONTACT_EDIT_ROUTE,
+ CONTACT_ADD_ROUTE,
+ CONTACT_VIEW_ROUTE,
+ CONTACT_MY_ACCOUNTS_ROUTE,
+ CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+ CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
NETWORKS_ROUTE,
}
diff --git a/ui/app/pages/index.scss b/ui/app/pages/index.scss
index cb9f0d80c..e7242392b 100644
--- a/ui/app/pages/index.scss
+++ b/ui/app/pages/index.scss
@@ -2,6 +2,8 @@
@import 'add-token/index';
+@import 'send/send';
+
@import 'confirm-add-token/index';
@import 'settings/index';
diff --git a/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
new file mode 100644
index 000000000..e5edbc08d
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
@@ -0,0 +1,243 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Fuse from 'fuse.js'
+import Identicon from '../../../../components/ui/identicon'
+import {isValidAddress} from '../../../../helpers/utils/util'
+import Dialog from '../../../../components/ui/dialog'
+import ContactList from '../../../../components/app/contact-list'
+import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component'
+import {ellipsify} from '../../send.utils'
+
+export default class AddRecipient extends Component {
+
+ static propTypes = {
+ className: PropTypes.string,
+ query: PropTypes.string,
+ ownedAccounts: PropTypes.array,
+ addressBook: PropTypes.array,
+ updateGas: PropTypes.func,
+ updateSendTo: PropTypes.func,
+ ensResolution: PropTypes.string,
+ toError: PropTypes.string,
+ toWarning: PropTypes.string,
+ ensResolutionError: PropTypes.string,
+ selectedToken: PropTypes.object,
+ hasHexData: PropTypes.bool,
+ tokens: PropTypes.array,
+ addressBookEntryName: PropTypes.string,
+ contacts: PropTypes.array,
+ nonContacts: PropTypes.array,
+ }
+
+ constructor (props) {
+ super(props)
+ this.recentFuse = new Fuse(props.nonContacts, {
+ shouldSort: true,
+ threshold: 0.45,
+ location: 0,
+ distance: 100,
+ maxPatternLength: 32,
+ minMatchCharLength: 1,
+ keys: [
+ { name: 'address', weight: 0.5 },
+ ],
+ })
+
+ this.contactFuse = new Fuse(props.contacts, {
+ shouldSort: true,
+ threshold: 0.45,
+ location: 0,
+ distance: 100,
+ maxPatternLength: 32,
+ minMatchCharLength: 1,
+ keys: [
+ { name: 'name', weight: 0.5 },
+ { name: 'address', weight: 0.5 },
+ ],
+ })
+ }
+
+ static contextTypes = {
+ t: PropTypes.func,
+ metricsEvent: PropTypes.func,
+ }
+
+ state = {
+ isShowingTransfer: false,
+ isShowingAllRecent: false,
+ }
+
+ selectRecipient = (to, nickname = '') => {
+ const { updateSendTo, updateGas } = this.props
+
+ updateSendTo(to, nickname)
+ updateGas({ to })
+ }
+
+ searchForContacts = () => {
+ const { query, contacts } = this.props
+
+ let _contacts = contacts
+
+ if (query) {
+ this.contactFuse.setCollection(contacts)
+ _contacts = this.contactFuse.search(query)
+ }
+
+ return _contacts
+ }
+
+ searchForRecents = () => {
+ const { query, nonContacts } = this.props
+
+ let _nonContacts = nonContacts
+
+ if (query) {
+ this.recentFuse.setCollection(nonContacts)
+ _nonContacts = this.recentFuse.search(query)
+ }
+
+ return _nonContacts
+ }
+
+ render () {
+ const { ensResolution, query, addressBookEntryName } = this.props
+ const { isShowingTransfer } = this.state
+
+ let content
+
+ if (isValidAddress(query)) {
+ content = this.renderExplicitAddress(query)
+ } else if (ensResolution) {
+ content = this.renderExplicitAddress(ensResolution, addressBookEntryName || query)
+ } else if (isShowingTransfer) {
+ content = this.renderTransfer()
+ }
+
+ return (
+
+ { this.renderDialogs() }
+ { content || this.renderMain() }
+
+ )
+ }
+
+ renderExplicitAddress (address, name) {
+ return (
+ this.selectRecipient(address, name)}
+ >
+
+ )
+ }
+
+ renderTransfer () {
+ const { ownedAccounts } = this.props
+ const { t } = this.context
+
+ return (
+
+
+
+ {name || ellipsify(address)}
+
+ {
+ name && (
+
+ {ellipsify(address)}
+
+ )
+ }
+
+
+ )
+ }
+
+ renderMain () {
+ const { t } = this.context
+ const { query, ownedAccounts = [], addressBook } = this.props
+
+ return (
+ this.setState({ isShowingTransfer: false })}
+ >
+
+ { t('backToAll') }
+
+
+
+ {
+ (ownedAccounts && ownedAccounts.length > 1) && !query && (
+
+
+ )
+ }
+
+ 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 (
+
+ )
+ }
+
+ if (toError && toError !== 'required' && !ensResolution) {
+ return (
+
+ )
+ }
+
+
+ if (toWarning) {
+ return (
+
+ )
+ }
+ }
+
+}
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
similarity index 100%
rename from ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js
rename to 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
similarity index 100%
rename from ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js
rename to ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js
diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js
new file mode 100644
index 000000000..c8d022079
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js
@@ -0,0 +1,268 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import c from 'classnames'
+import { isValidENSAddress, isValidAddress } from '../../../../helpers/utils/util'
+import {ellipsify} from '../../send.utils'
+
+import debounce from 'debounce'
+import copyToClipboard from 'copy-to-clipboard/index'
+import ENS from 'ethjs-ens'
+import networkMap from 'ethjs-ens/lib/network-map.json'
+import log from 'loglevel'
+
+
+// Local Constants
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
+const ZERO_X_ERROR_ADDRESS = '0x'
+
+export default class EnsInput extends Component {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ className: PropTypes.string,
+ network: PropTypes.string,
+ selectedAddress: PropTypes.string,
+ selectedName: PropTypes.string,
+ onChange: PropTypes.func,
+ updateSendTo: PropTypes.func,
+ updateEnsResolution: PropTypes.func,
+ scanQrCode: PropTypes.func,
+ updateEnsResolutionError: PropTypes.func,
+ addressBook: PropTypes.array,
+ onPaste: PropTypes.func,
+ onReset: PropTypes.func,
+ }
+
+ state = {
+ recipient: null,
+ input: '',
+ toError: null,
+ toWarning: null,
+ }
+
+ componentDidMount () {
+ const network = this.props.network
+ const networkHasEnsSupport = getNetworkEnsSupport(network)
+ this.setState({ ensResolution: ZERO_ADDRESS })
+
+ if (networkHasEnsSupport) {
+ const provider = global.ethereumProvider
+ this.ens = new ENS({ provider, network })
+ this.checkName = debounce(this.lookupEnsName, 200)
+ }
+ }
+
+ // If an address is sent without a nickname, meaning not from ENS or from
+ // the user's own accounts, a default of a one-space string is used.
+ componentDidUpdate (prevProps) {
+ const {
+ input,
+ } = this.state
+ const {
+ network,
+ } = this.props
+
+ if (prevProps.network !== network) {
+ const provider = global.ethereumProvider
+ this.ens = new ENS({ provider, network })
+ this.onChange({ target: { value: input } })
+ }
+ }
+
+ resetInput = () => {
+ const { updateEnsResolution, updateEnsResolutionError, onReset } = this.props
+ this.onChange({ target: { value: '' } })
+ onReset()
+ updateEnsResolution('')
+ updateEnsResolutionError('')
+ }
+
+ lookupEnsName = (recipient) => {
+ recipient = recipient.trim()
+
+ log.info(`ENS attempting to resolve name: ${recipient}`)
+ this.ens.lookup(recipient)
+ .then((address) => {
+ if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName'))
+ if (address === ZERO_X_ERROR_ADDRESS) throw new Error(this.context.t('ensRegistrationError'))
+ this.props.updateEnsResolution(address)
+ })
+ .catch((reason) => {
+ if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') {
+ this.props.updateEnsResolutionError(this.context.t('ensNotFoundOnCurrentNetwork'))
+ } else {
+ log.error(reason)
+ this.props.updateEnsResolutionError(reason.message)
+ }
+ })
+ }
+
+ onPaste = event => {
+ event.clipboardData.items[0].getAsString(text => {
+ if (isValidAddress(text)) {
+ this.props.onPaste(text)
+ }
+ })
+ }
+
+ onChange = e => {
+ const { network, onChange, updateEnsResolution, updateEnsResolutionError } = this.props
+ const input = e.target.value
+ const networkHasEnsSupport = getNetworkEnsSupport(network)
+
+ this.setState({ input }, () => onChange(input))
+
+ // Empty ENS state if input is empty
+ // maybe scan ENS
+ if (!input || isValidAddress(input) || !networkHasEnsSupport) {
+ updateEnsResolution('')
+ updateEnsResolutionError(!networkHasEnsSupport ? 'Network does not support ENS' : '')
+ return
+ }
+
+ if (isValidENSAddress(input)) {
+ this.lookupEnsName(input)
+ } else {
+ updateEnsResolution('')
+ updateEnsResolutionError('')
+ }
+ }
+
+ render () {
+ const { t } = this.context
+ const { className, selectedAddress } = this.props
+ const { input } = this.state
+
+ if (selectedAddress) {
+ return this.renderSelected()
+ }
+
+ return (
+ this.setState({ isShowingTransfer: true })}
+ >
+ { t('transferBetweenAccounts') }
+
+ )
+ }
+
+ 
+ )
+ }
+
+ if (ensFailure) {
+ return
+ }
+
+ if (ensResolution && (ensResolution !== ZERO_ADDRESS)) {
+ return (
+ {
+ event.preventDefault()
+ event.stopPropagation()
+ copyToClipboard(ensResolution)
+ }}
+ />
+ )
+ }
+ }
+}
+
+function getNetworkEnsSupport (network) {
+ return Boolean(networkMap[network])
+}
diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.container.js b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js
new file mode 100644
index 000000000..d74f44832
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js
@@ -0,0 +1,20 @@
+import EnsInput from './ens-input.component'
+import {
+ getCurrentNetwork,
+ getSendTo,
+ getSendToNickname,
+} from '../../send.selectors'
+import {
+ getAddressBook,
+} from '../../../../selectors/selectors'
+const connect = require('react-redux').connect
+
+
+export default connect(
+ state => ({
+ network: getCurrentNetwork(state),
+ selectedAddress: getSendTo(state),
+ selectedName: getSendToNickname(state),
+ addressBook: getAddressBook(state),
+ })
+)(EnsInput)
diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.js b/ui/app/pages/send/send-content/add-recipient/ens-input.js
new file mode 100644
index 000000000..6833ccd03
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/ens-input.js
@@ -0,0 +1 @@
+export { default } from './ens-input.container'
diff --git a/ui/app/pages/send/send-content/add-recipient/index.js b/ui/app/pages/send/send-content/add-recipient/index.js
new file mode 100644
index 000000000..d661bd74b
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/index.js
@@ -0,0 +1 @@
+export { default } from './add-recipient.container'
diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
new file mode 100644
index 000000000..7570e7fcb
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
@@ -0,0 +1,202 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import AddRecipient from '../add-recipient.component'
+import Dialog from '../../../../../components/ui/dialog'
+
+const propsMethodSpies = {
+ closeToDropdown: sinon.spy(),
+ openToDropdown: sinon.spy(),
+ updateGas: sinon.spy(),
+ updateSendTo: sinon.spy(),
+ updateSendToError: sinon.spy(),
+ updateSendToWarning: sinon.spy(),
+}
+
+describe('AddRecipient Component', function () {
+ let wrapper
+ let instance
+
+ beforeEach(() => {
+ wrapper = shallow(
)
}
+ maybeRenderAddContact () {
+ const { t } = this.context
+ const { to, addressBook = [], ownedAccounts = [], showAddToAddressBookModal } = this.props
+ const isOwnedAccount = !!ownedAccounts.find(({ address }) => address === to)
+ const contact = addressBook.find(({ address }) => address === to) || {}
+
+ if (isOwnedAccount || contact.name) {
+ return
+ }
+
+ return (
+
+ )
+ }
}
diff --git a/ui/app/pages/send/send-content/send-content.container.js b/ui/app/pages/send/send-content/send-content.container.js
new file mode 100644
index 000000000..a0732fc20
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-content.container.js
@@ -0,0 +1,38 @@
+import { connect } from 'react-redux'
+import SendContent from './send-content.component'
+import {
+ accountsWithSendEtherInfoSelector,
+ getSendTo,
+} from '../send.selectors'
+import {
+ getAddressBook,
+} from '../../../selectors/selectors'
+import actions from '../../../store/actions'
+
+function mapStateToProps (state) {
+ return {
+ to: getSendTo(state),
+ addressBook: getAddressBook(state),
+ ownedAccounts: accountsWithSendEtherInfoSelector(state),
+ }
+}
+
+function mapDispatchToProps (dispatch) {
+ return {
+ showAddToAddressBookModal: (recipient) => dispatch(actions.showModal({
+ name: 'ADD_TO_ADDRESSBOOK',
+ recipient,
+ })),
+ }
+}
+
+function mergeProps (stateProps, dispatchProps, ownProps) {
+ return {
+ ...ownProps,
+ ...stateProps,
+ ...dispatchProps,
+ showAddToAddressBookModal: () => dispatchProps.showAddToAddressBookModal(stateProps.to),
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendContent)
diff --git a/ui/app/pages/send/send-content/send-to-row/index.js b/ui/app/pages/send/send-content/send-to-row/index.js
deleted file mode 100644
index 121f15148..000000000
--- a/ui/app/pages/send/send-content/send-to-row/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-to-row.container'
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md b/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js
deleted file mode 100644
index 9baf327c1..000000000
--- a/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper'
-import EnsInput from '../../../../components/app/ens-input'
-import { getToErrorObject, getToWarningObject } from './send-to-row.utils.js'
-
-export default class SendToRow extends Component {
-
- static propTypes = {
- closeToDropdown: PropTypes.func,
- hasHexData: PropTypes.bool.isRequired,
- inError: PropTypes.bool,
- inWarning: PropTypes.bool,
- network: PropTypes.string,
- openToDropdown: PropTypes.func,
- selectedToken: PropTypes.object,
- to: PropTypes.string,
- toAccounts: PropTypes.array,
- toDropdownOpen: PropTypes.bool,
- tokens: PropTypes.array,
- updateGas: PropTypes.func,
- updateSendTo: PropTypes.func,
- updateSendToError: PropTypes.func,
- updateSendToWarning: PropTypes.func,
- scanQrCode: PropTypes.func,
- }
-
- static contextTypes = {
- t: PropTypes.func,
- metricsEvent: PropTypes.func,
- }
-
- handleToChange (to, nickname = '', toError, toWarning, network) {
- const { hasHexData, updateSendTo, updateSendToError, updateGas, tokens, selectedToken, updateSendToWarning } = this.props
- const toErrorObject = getToErrorObject(to, toError, hasHexData, tokens, selectedToken, network)
- const toWarningObject = getToWarningObject(to, toWarning, tokens, selectedToken)
- updateSendTo(to, nickname)
- updateSendToError(toErrorObject)
- updateSendToWarning(toWarningObject)
- if (toErrorObject.to === null) {
- updateGas({ to })
- }
- }
-
- render () {
- const {
- closeToDropdown,
- inError,
- inWarning,
- network,
- openToDropdown,
- to,
- toAccounts,
- toDropdownOpen,
- } = this.props
-
- return (
-
- {
- this.context.metricsEvent({
- eventOpts: {
- category: 'Transactions',
- action: 'Edit Screen',
- name: 'Used QR scanner',
- },
- })
- this.props.scanQrCode()
- }}
- accounts={toAccounts}
- closeDropdown={() => closeToDropdown()}
- dropdownOpen={toDropdownOpen}
- inError={inError}
- name={'address'}
- network={network}
- onChange={({ toAddress, nickname, toError, toWarning }) => this.handleToChange(toAddress, nickname, toError, toWarning, this.props.network)}
- openDropdown={() => openToDropdown()}
- placeholder={this.context.t('recipientAddress')}
- to={to}
- />
-
- )
- }
-
-}
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js
deleted file mode 100644
index 2cbe9fcd0..000000000
--- a/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { connect } from 'react-redux'
-import {
- getCurrentNetwork,
- getSelectedToken,
- getSendTo,
- getSendToAccounts,
- getSendHexData,
-} from '../../send.selectors.js'
-import {
- getToDropdownOpen,
- getTokens,
- sendToIsInError,
- sendToIsInWarning,
-} from './send-to-row.selectors.js'
-import {
- updateSendTo,
-} from '../../../../store/actions'
-import {
- updateSendErrors,
- updateSendWarnings,
- openToDropdown,
- closeToDropdown,
-} from '../../../../ducks/send/send.duck'
-import SendToRow from './send-to-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
-
-function mapStateToProps (state) {
- return {
- hasHexData: Boolean(getSendHexData(state)),
- inError: sendToIsInError(state),
- inWarning: sendToIsInWarning(state),
- network: getCurrentNetwork(state),
- selectedToken: getSelectedToken(state),
- to: getSendTo(state),
- toAccounts: getSendToAccounts(state),
- toDropdownOpen: getToDropdownOpen(state),
- tokens: getTokens(state),
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- closeToDropdown: () => dispatch(closeToDropdown()),
- openToDropdown: () => dispatch(openToDropdown()),
- updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
- updateSendToError: (toErrorObject) => {
- dispatch(updateSendErrors(toErrorObject))
- },
- updateSendToWarning: (toWarningObject) => {
- dispatch(updateSendWarnings(toWarningObject))
- },
- }
-}
diff --git a/ui/app/pages/send/send-content/send-to-row/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( this.onClose()}
title={this.context.t(this.props.titleKey)}
+ headerCloseText={this.context.t('cancel')}
/>
)
}
diff --git a/ui/app/pages/send/send-header/send-header.selectors.js b/ui/app/pages/send/send-header/send-header.selectors.js
index d7c9d3766..2c0a907d8 100644
--- a/ui/app/pages/send/send-header/send-header.selectors.js
+++ b/ui/app/pages/send/send-header/send-header.selectors.js
@@ -1,6 +1,7 @@
const {
getSelectedToken,
getSendEditingTransactionId,
+ getSendTo,
} = require('../send.selectors.js')
const selectors = {
@@ -14,6 +15,10 @@ function getTitleKey (state) {
const isEditing = Boolean(getSendEditingTransactionId(state))
const isToken = Boolean(getSelectedToken(state))
+ if (!getSendTo(state)) {
+ return 'addRecipient'
+ }
+
if (isEditing) {
return 'edit'
} else if (isToken) {
diff --git a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
index e0c6a3ab3..d22845f84 100644
--- a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
+++ b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
@@ -8,39 +8,44 @@ const {
'../send.selectors': {
getSelectedToken: (mockState) => mockState.t,
getSendEditingTransactionId: (mockState) => mockState.e,
+ getSendTo: (mockState) => mockState.to,
},
})
describe('send-header selectors', () => {
describe('getTitleKey()', () => {
+ it('should return the correct key when "to" is empty', () => {
+ assert.equal(getTitleKey({ e: 1, t: true, to: '' }), 'addRecipient')
+ })
+
it('should return the correct key when getSendEditingTransactionId is truthy', () => {
- assert.equal(getTitleKey({ e: 1, t: true }), 'edit')
+ assert.equal(getTitleKey({ e: 1, t: true, to: '0x123' }), 'edit')
})
it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
- assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens')
+ assert.equal(getTitleKey({ e: null, t: 'abc', to: '0x123' }), 'sendTokens')
})
it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
- assert.equal(getTitleKey({ e: null }), 'sendETH')
+ assert.equal(getTitleKey({ e: null, to: '0x123' }), 'sendETH')
})
})
describe('getSubtitleParams()', () => {
it('should return the correct params when getSendEditingTransactionId is truthy', () => {
- assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ])
+ assert.deepEqual(getSubtitleParams({ e: 1, t: true, to: '0x123' }), [ 'editingTransaction' ])
})
it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
assert.deepEqual(
- getSubtitleParams({ e: null, t: { symbol: 'ABC' } }),
+ getSubtitleParams({ e: null, t: { symbol: 'ABC' }, to: '0x123' }),
[ 'onlySendTokensToAccountAddress', [ 'ABC' ] ]
)
})
it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
- assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ])
+ assert.deepEqual(getSubtitleParams({ e: null, to: '0x123' }), [ 'onlySendToEtherAddress' ])
})
})
diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js
index 5f0c9c9f2..9cdf75536 100644
--- a/ui/app/pages/send/send.component.js
+++ b/ui/app/pages/send/send.component.js
@@ -7,10 +7,14 @@ import {
getToAddressForGasUpdate,
doesAmountErrorRequireUpdate,
} from './send.utils'
-
+import debounce from 'lodash.debounce'
+import { getToWarningObject, getToErrorObject } from './send-content/add-recipient/add-recipient'
import SendHeader from './send-header'
+import AddRecipient from './send-content/add-recipient'
import SendContent from './send-content'
import SendFooter from './send-footer'
+import EnsInput from './send-content/add-recipient/ens-input'
+
export default class SendTransactionScreen extends PersistentForm {
@@ -27,12 +31,14 @@ export default class SendTransactionScreen extends PersistentForm {
gasLimit: PropTypes.string,
gasPrice: PropTypes.string,
gasTotal: PropTypes.string,
+ to: PropTypes.string,
history: PropTypes.object,
network: PropTypes.string,
primaryCurrency: PropTypes.string,
recentBlocks: PropTypes.array,
selectedAddress: PropTypes.string,
selectedToken: PropTypes.object,
+ tokens: PropTypes.array,
tokenBalance: PropTypes.string,
tokenContract: PropTypes.object,
fetchBasicGasEstimates: PropTypes.func,
@@ -42,10 +48,24 @@ export default class SendTransactionScreen extends PersistentForm {
scanQrCode: PropTypes.func,
qrCodeDetected: PropTypes.func,
qrCodeData: PropTypes.object,
+ ensResolution: PropTypes.string,
+ ensResolutionError: PropTypes.string,
}
static contextTypes = {
t: PropTypes.func,
+ metricsEvent: PropTypes.func,
+ }
+
+ state = {
+ query: '',
+ toError: null,
+ toWarning: null,
+ }
+
+ constructor (props) {
+ super(props)
+ this.dValidate = debounce(this.validate, 1000)
}
componentWillReceiveProps (nextProps) {
@@ -63,34 +83,6 @@ export default class SendTransactionScreen extends PersistentForm {
}
}
- updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
- const {
- amount,
- blockGasLimit,
- editingTransactionId,
- gasLimit,
- gasPrice,
- recentBlocks,
- selectedAddress,
- selectedToken = {},
- to: currentToAddress,
- updateAndSetGasLimit,
- } = this.props
-
- updateAndSetGasLimit({
- blockGasLimit,
- editingTransactionId,
- gasLimit,
- gasPrice,
- recentBlocks,
- selectedAddress,
- selectedToken,
- to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
- value: value || amount,
- data,
- })
- }
-
componentDidUpdate (prevProps) {
const {
amount,
@@ -105,6 +97,10 @@ export default class SendTransactionScreen extends PersistentForm {
updateSendErrors,
updateSendTokenBalance,
tokenContract,
+ to,
+ toNickname,
+ addressBook,
+ updateToNicknameIfNecessary,
} = this.props
const {
@@ -159,6 +155,7 @@ export default class SendTransactionScreen extends PersistentForm {
tokenContract,
address,
})
+ updateToNicknameIfNecessary(to, toNickname, addressBook)
this.updateGas()
}
}
@@ -173,9 +170,9 @@ export default class SendTransactionScreen extends PersistentForm {
componentDidMount () {
this.props.fetchBasicGasEstimates()
- .then(() => {
- this.updateGas()
- })
+ .then(() => {
+ this.updateGas()
+ })
}
componentWillMount () {
@@ -196,6 +193,39 @@ export default class SendTransactionScreen extends PersistentForm {
this.props.resetSendState()
}
+ onRecipientInputChange = query => {
+ if (query) {
+ this.dValidate(query)
+ } else {
+ this.validate(query)
+ }
+
+ this.setState({
+ query,
+ })
+ }
+
+ validate (query) {
+ const {
+ hasHexData,
+ tokens,
+ selectedToken,
+ network,
+ } = this.props
+
+ if (!query) {
+ return this.setState({ toError: '', toWarning: '' })
+ }
+
+ const toErrorObject = getToErrorObject(query, null, hasHexData, tokens, selectedToken, network)
+ const toWarningObject = getToWarningObject(query, null, tokens, selectedToken)
+
+ this.setState({
+ toError: toErrorObject.to,
+ toWarning: toWarningObject.to,
+ })
+ }
+
updateSendToken () {
const {
from: { address },
@@ -211,20 +241,103 @@ export default class SendTransactionScreen extends PersistentForm {
})
}
+ updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
+ const {
+ amount,
+ blockGasLimit,
+ editingTransactionId,
+ gasLimit,
+ gasPrice,
+ recentBlocks,
+ selectedAddress,
+ selectedToken = {},
+ to: currentToAddress,
+ updateAndSetGasLimit,
+ } = this.props
+
+ updateAndSetGasLimit({
+ blockGasLimit,
+ editingTransactionId,
+ gasLimit,
+ gasPrice,
+ recentBlocks,
+ selectedAddress,
+ selectedToken,
+ to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
+ value: value || amount,
+ data,
+ })
+ }
+
render () {
- const { history, showHexData } = this.props
+ const { history, to } = this.props
+ let content
+
+ if (to) {
+ content = this.renderSendContent()
+ } else {
+ content = this.renderAddRecipient()
+ }
return (
{
+ this.context.metricsEvent({
+ eventOpts: {
+ category: 'Transactions',
+ action: 'Edit Screen',
+ name: 'Used QR scanner',
+ },
+ })
+ this.props.scanQrCode()
+ }}
+ onChange={this.onRecipientInputChange}
+ onPaste={text => this.props.updateSendTo(text)}
+ onReset={() => this.props.updateSendTo('', '')}
+ updateEnsResolution={this.props.updateSendEnsResolution}
+ updateEnsResolutionError={this.props.updateSendEnsResolutionError}
+ />
+ )
+ }
+
+ renderAddRecipient () {
+ const { scanQrCode } = this.props
+ const { toError, toWarning } = this.state
+
+ return (
+ this.updateGas({ to, amount, data })}
+ scanQrCode={scanQrCode}
+ query={this.state.query}
+ toError={toError}
+ toWarning={toWarning}
+ />
+ )
+ }
+
+ renderSendContent () {
+ const { history, showHexData, scanQrCode } = this.props
+
+ return [
+ this.updateGas({ to, amount, data })}
+ scanQrCode={scanQrCode}
+ showHexData={showHexData}
+ />,
+ { 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 (
+
+
+
+
+ )
+ }
+
+ 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 (
+ {
+ if (input) {
+ this.resetInput()
+ } else {
+ this.props.scanQrCode()
+ }
+ }}
+ />
+
+
+
+ )
+ }
+
+ ensIcon (recipient) {
+ const { hoverText } = this.state
+
+ return (
+
+ { this.ensIconContents(recipient) }
+
+ )
+ }
+
+ ensIconContents () {
+ const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS }
+
+ if (toError) return
+
+ if (loadingEns) {
+ return (
+
+
+
+
+
+
+
+ {name || ellipsify(selectedAddress)}
+
+ { name && {selectedAddress}
}
+
+ )
+ }
+
+ if (ensFailure) {
+ return
+ }
+
+ if (ensResolution && (ensResolution !== ZERO_ADDRESS)) {
+ return (
+ {
+ event.preventDefault()
+ event.stopPropagation()
+ copyToClipboard(ensResolution)
+ }}
+ />
+ )
+ }
+ }
+}
+
+function getNetworkEnsSupport (network) {
+ return Boolean(networkMap[network])
+}
diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.container.js b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js
new file mode 100644
index 000000000..d74f44832
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js
@@ -0,0 +1,20 @@
+import EnsInput from './ens-input.component'
+import {
+ getCurrentNetwork,
+ getSendTo,
+ getSendToNickname,
+} from '../../send.selectors'
+import {
+ getAddressBook,
+} from '../../../../selectors/selectors'
+const connect = require('react-redux').connect
+
+
+export default connect(
+ state => ({
+ network: getCurrentNetwork(state),
+ selectedAddress: getSendTo(state),
+ selectedName: getSendToNickname(state),
+ addressBook: getAddressBook(state),
+ })
+)(EnsInput)
diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.js b/ui/app/pages/send/send-content/add-recipient/ens-input.js
new file mode 100644
index 000000000..6833ccd03
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/ens-input.js
@@ -0,0 +1 @@
+export { default } from './ens-input.container'
diff --git a/ui/app/pages/send/send-content/add-recipient/index.js b/ui/app/pages/send/send-content/add-recipient/index.js
new file mode 100644
index 000000000..d661bd74b
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/index.js
@@ -0,0 +1 @@
+export { default } from './add-recipient.container'
diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
new file mode 100644
index 000000000..7570e7fcb
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
@@ -0,0 +1,202 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import AddRecipient from '../add-recipient.component'
+import Dialog from '../../../../../components/ui/dialog'
+
+const propsMethodSpies = {
+ closeToDropdown: sinon.spy(),
+ openToDropdown: sinon.spy(),
+ updateGas: sinon.spy(),
+ updateSendTo: sinon.spy(),
+ updateSendToError: sinon.spy(),
+ updateSendToWarning: sinon.spy(),
+}
+
+describe('AddRecipient Component', function () {
+ let wrapper
+ let instance
+
+ beforeEach(() => {
+ wrapper = shallow(
- this.props.scanQrCode()}
- />
+ { this.maybeRenderAddContact() }
-
- this.updateGas(updateData)}
- scanQrCode={_ => this.props.scanQrCode()}
- showHexData={showHexData}
- />
-
+
)
}
+ renderInput () {
+ return (
+
+ {this.state.ensAddress && {
+ addToAddressBook(this.state.ensAddress || this.state.ethAddress, this.state.newName)
+ history.push(CONTACT_LIST_ROUTE)
+ }}
+ onCancel={() => {
+ history.push(CONTACT_LIST_ROUTE)
+ }}
+ submitText={this.context.t('save')}
+ submitButtonType={'confirm'}
+ />
+
+ )
+ }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js
new file mode 100644
index 000000000..0a0fc450c
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js
@@ -0,0 +1,30 @@
+import AddContact from './add-contact.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { addToAddressBook, showQrScanner, qrCodeDetected } from '../../../../store/actions'
+import {
+ CONTACT_ADD_ROUTE,
+} from '../../../../helpers/constants/routes'
+import {
+ getQrCodeData,
+} from '../../../../pages/send/send.selectors'
+
+const mapStateToProps = state => {
+ return {
+ qrCodeData: getQrCodeData(state),
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ addToAddressBook: (recipient, nickname) => dispatch(addToAddressBook(recipient, nickname)),
+ scanQrCode: () => dispatch(showQrScanner(CONTACT_ADD_ROUTE)),
+ qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps)
+)(AddContact)
diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/index.js b/ui/app/pages/settings/contact-list-tab/add-contact/index.js
new file mode 100644
index 000000000..ce73025a3
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/add-contact/index.js
@@ -0,0 +1 @@
+export { default } from './add-contact.container'
diff --git a/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js
new file mode 100644
index 000000000..f7a01d672
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js
@@ -0,0 +1,132 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ContactList from '../../../components/app/contact-list'
+import EditContact from './edit-contact'
+import AddContact from './add-contact'
+import ViewContact from './view-contact'
+import MyAccounts from './my-accounts'
+import {
+ CONTACT_ADD_ROUTE,
+ CONTACT_VIEW_ROUTE,
+ CONTACT_MY_ACCOUNTS_ROUTE,
+} from '../../../helpers/constants/routes'
+
+export default class ContactListTab extends Component {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ addressBook: PropTypes.array,
+ history: PropTypes.object,
+ selectedAddress: PropTypes.string,
+ viewingContact: PropTypes.bool,
+ editingContact: PropTypes.bool,
+ addingContact: PropTypes.bool,
+ showContactContent: PropTypes.bool,
+ hideAddressBook: PropTypes.bool,
+ showingMyAccounts: PropTypes.bool,
+ }
+
+ renderAddresses () {
+ const { addressBook, history, selectedAddress } = this.props
+ const contacts = addressBook.filter(({ name }) => !!name)
+ const nonContacts = addressBook.filter(({ name }) => !name)
+
+ return (
+
+
}
+
+ { this.state.ensAddress }
+
+
+
+
+ this.setState({ newName: e.target.value })}
+ fullWidth
+ margin="dense"
+ />
+
+
+
+ { t('userName') }
+
+
+
+
+ { t('ethereumPublicAddress') }
+
+ { this.renderInput() }
+ { errorToRender && {errorToRender}
}
+
+ contacts}
+ searchForRecents={() => nonContacts}
+ selectRecipient={(address) => {
+ history.push(`${CONTACT_VIEW_ROUTE}/${address}`)
+ }}
+ selectedAddress={selectedAddress}
+ />
+
+ )
+ }
+
+ renderAddButton () {
+ const { history } = this.props
+ return {
+ history.push(CONTACT_ADD_ROUTE)
+ }}>
+ 
+
+ }
+
+ renderMyAccountsButton () {
+ const { history } = this.props
+ const { t } = this.context
+ return (
+
+ {
+ history.push(CONTACT_MY_ACCOUNTS_ROUTE)
+ }}
+ >
+
+ )
+ }
+
+ 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 && {t('myWalletAccounts')}
+
+
+
+ { t('myWalletAccountsDescription') }
+
+
+
+
)
+ }
+
+ renderAddressBookContent () {
+ const { hideAddressBook, showingMyAccounts } = this.props
+
+ if (!hideAddressBook && !showingMyAccounts) {
+ return (
+ { this.renderMyAccountsButton() }
+ { this.renderAddresses() }
+
)
+ } else if (!hideAddressBook && showingMyAccounts) {
+ return (
+ { this.renderAddressBookContent() }
+ { this.renderContactContent() }
+ {!addingContact &&
+ )
+ }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js b/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js
new file mode 100644
index 000000000..2c7139b5d
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js
@@ -0,0 +1,54 @@
+import ContactListTab from './contact-list-tab.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { getAddressBook } from '../../../selectors/selectors'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
+
+import {
+ CONTACT_ADD_ROUTE,
+ CONTACT_EDIT_ROUTE,
+ CONTACT_VIEW_ROUTE,
+ CONTACT_MY_ACCOUNTS_ROUTE,
+ CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+ CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
+} from '../../../helpers/constants/routes'
+
+
+const mapStateToProps = (state, ownProps) => {
+ const { location } = ownProps
+ const { pathname } = location
+
+ const pathNameTail = pathname.match(/[^/]+$/)[0]
+ const pathNameTailIsAddress = pathNameTail.includes('0x')
+
+ const viewingContact = Boolean(pathname.match(CONTACT_VIEW_ROUTE) || pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE))
+ const editingContact = Boolean(pathname.match(CONTACT_EDIT_ROUTE) || pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
+ const addingContact = Boolean(pathname.match(CONTACT_ADD_ROUTE))
+ const showingMyAccounts = Boolean(
+ pathname.match(CONTACT_MY_ACCOUNTS_ROUTE) ||
+ pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE) ||
+ pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE)
+ )
+ const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+
+ const hideAddressBook = envIsPopup && (viewingContact || editingContact || addingContact)
+
+ return {
+ viewingContact,
+ editingContact,
+ addingContact,
+ showingMyAccounts,
+ addressBook: getAddressBook(state),
+ selectedAddress: pathNameTailIsAddress ? pathNameTail : '',
+ hideAddressBook,
+ envIsPopup,
+ showContactContent: !envIsPopup || hideAddressBook,
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps)
+)(ContactListTab)
diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
new file mode 100644
index 000000000..e9c2fed6f
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
@@ -0,0 +1,135 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../../../../components/ui/identicon'
+import Button from '../../../../components/ui/button/button.component'
+import TextField from '../../../../components/ui/text-field'
+import { isValidAddress } from '../../../../helpers/utils/util'
+import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'
+
+export default class EditContact extends PureComponent {
+
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ addToAddressBook: PropTypes.func,
+ removeFromAddressBook: PropTypes.func,
+ history: PropTypes.object,
+ name: PropTypes.string,
+ address: PropTypes.string,
+ memo: PropTypes.string,
+ viewRoute: PropTypes.string,
+ listRoute: PropTypes.string,
+ setAccountLabel: PropTypes.func,
+ }
+
+ state = {
+ newName: '',
+ newAddress: '',
+ newMemo: '',
+ error: '',
+ }
+
+ render () {
+ const { t } = this.context
+ const { history, name, addToAddressBook, removeFromAddressBook, address, memo, viewRoute, listRoute, setAccountLabel } = this.props
+
+ return (
+
+ { this.renderAddButton() }
+
}
+
+ {
+ if (this.state.newAddress !== '' && this.state.newAddress !== address) {
+ // if the user makes a valid change to the address field, remove the original address
+ if (isValidAddress(this.state.newAddress)) {
+ removeFromAddressBook(address)
+ addToAddressBook(this.state.newAddress, this.state.newName || name, this.state.newMemo || memo)
+ setAccountLabel(this.state.newAddress, this.state.newName || name)
+ history.push(listRoute)
+ } else {
+ this.setState({ error: 'invalid address' })
+ }
+ } else {
+ // update name
+ addToAddressBook(address, this.state.newName || name, this.state.newMemo || memo)
+ setAccountLabel(address, this.state.newName || name)
+ history.push(listRoute)
+ }
+ }}
+ onCancel={() => {
+ history.push(`${viewRoute}/${address}`)
+ }}
+ submitText={this.context.t('save')}
+ submitButtonType={'confirm'}
+ />
+
+ )
+ }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js
new file mode 100644
index 000000000..8841ff791
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js
@@ -0,0 +1,47 @@
+import EditContact from './edit-contact.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { getAddressBookEntry } from '../../../../selectors/selectors'
+import {
+ CONTACT_VIEW_ROUTE,
+ CONTACT_MY_ACCOUNTS_ROUTE,
+ CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+ CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
+ CONTACT_LIST_ROUTE,
+} from '../../../../helpers/constants/routes'
+import { addToAddressBook, removeFromAddressBook, setAccountLabel } from '../../../../store/actions'
+
+const mapStateToProps = (state, ownProps) => {
+ const { location } = ownProps
+ const { pathname } = location
+ const pathNameTail = pathname.match(/[^/]+$/)[0]
+ const pathNameTailIsAddress = pathNameTail.includes('0x')
+ const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id
+
+ const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address]
+
+ const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
+
+ return {
+ address,
+ name,
+ memo,
+ viewRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_VIEW_ROUTE : CONTACT_VIEW_ROUTE,
+ listRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_ROUTE : CONTACT_LIST_ROUTE,
+ showingMyAccounts,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ addToAddressBook: (recipient, nickname, memo) => dispatch(addToAddressBook(recipient, nickname, memo)),
+ removeFromAddressBook: (addressToRemove) => dispatch(removeFromAddressBook(addressToRemove)),
+ setAccountLabel: (address, label) => dispatch(setAccountLabel(address, label)),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps)
+)(EditContact)
diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/index.js b/ui/app/pages/settings/contact-list-tab/edit-contact/index.js
new file mode 100644
index 000000000..fe5ee206a
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/edit-contact/index.js
@@ -0,0 +1 @@
+export { default } from './edit-contact.container'
diff --git a/ui/app/pages/settings/contact-list-tab/index.js b/ui/app/pages/settings/contact-list-tab/index.js
new file mode 100644
index 000000000..c09e9787b
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/index.js
@@ -0,0 +1 @@
+export { default } from './contact-list-tab.container'
diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss
new file mode 100644
index 000000000..c7e99095f
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/index.scss
@@ -0,0 +1,234 @@
+.address-book-wrapper {
+ display: flex;
+ justify-content: space-between;
+ height: 100%;
+}
+
+.address-book {
+ flex: 0.4 1 40%;
+ max-width: 40%;
+
+ @media screen and (max-width: 576px) {
+ flex: 1;
+ max-width: 100%;
+ }
+
+ &__entry {
+ display: flex;
+ flex-flow: row nowrap;
+ padding: 16px 14px;
+ flex: 0 0 auto;
+ border-bottom: 1px solid #dedede;
+
+ &:hover {
+ border: 1px solid #037DD6;
+ cursor: pointer;
+ }
+ }
+
+ &__name {
+ padding: 3px;
+ }
+
+ &__header, &__header--edit {
+ &__name {
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 24px;
+ line-height: 34px;
+ margin-left: 24px;
+ }
+ }
+
+ &__header--edit {
+ display: flex;
+ justify-content: space-between;
+
+ .button {
+ justify-content: flex-end;
+ color: #D73A49;
+ font-size: 14px;
+ }
+ }
+
+ &__input {
+ @extend %input-2;
+ margin-top: .25rem;
+
+ &--address {
+ font-size: 0.875rem;
+ }
+ }
+
+ &__view-contact {
+ &__text-area-wrapper {
+ height: 96px !important;
+ }
+
+ &__text-area {
+ line-height: initial !important;
+ }
+
+ &__group {
+ display: flex;
+ flex-flow: column nowrap;
+ padding: 1.5rem 1.5rem 0 1.5rem;
+
+ &__label, &__label--capitalized {
+ font-size: .75rem;
+ color: $Grey-500;
+ margin-bottom: .25rem;
+ }
+
+ &__label--capitalized {
+ text-transform: capitalize;
+ }
+
+ &__value, &__static-address {
+ display: flex;
+ flex-flow: row nowrap;
+ font-size: 1.125rem;
+ color: $Grey-800;
+ word-break: break-word;
+
+ &--address {
+ font-size: 0.875rem;
+ }
+
+ &--copy-icon {
+ padding-left: 4px;
+ }
+ }
+
+ &__static-address {
+ font-size: 0.875rem;
+ &--copy-icon {
+ cursor: pointer;
+
+ &:hover {
+ color: black;
+ }
+ }
+ }
+
+ .unit-input__input {
+ max-width: 100%;
+ width: 100%;
+ }
+ }
+ }
+
+ &__edit-contact {
+ display: flex;
+ flex-flow: column nowrap;
+ padding-bottom: 0 !important;
+ height: 100%;
+
+ &__content {
+ flex: 1 1 auto;
+
+ > div {
+ padding-top: 0;
+ }
+
+ }
+
+ .page-container__footer {
+ border-top: none;
+ }
+ }
+
+ &__add-contact {
+ display: flex;
+ flex-flow: column nowrap;
+ padding-bottom: 0 !important;
+ height: 100%;
+
+ &__content {
+ flex: 1 1 auto;
+ height: 100%;
+ }
+
+ &__error {
+ font-size: 12px;
+ line-height: 12px;
+ left: 8px;
+ color: $red;
+ }
+ }
+
+ &__my-accounts-button {
+ display: flex;
+ flex-flow: column;
+ cursor: pointer;
+ padding: 15px;
+
+ &:hover {
+ background-color: rgba(222, 222, 222, 0.2);
+ }
+
+ &__header {
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 18px;
+ line-height: 25px;
+ color: #000000;
+ }
+
+ &__content {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__text {
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 14px;
+ line-height: 20px;
+ color: #6A737D;
+ }
+
+ &__caret {
+ display: block;
+ background-image: url(/images/caret-right.svg);
+ width: 30px;
+ opacity: .5;
+ background-repeat: no-repeat;
+ }
+ }
+}
+
+.address-book-add-button {
+ &__button {
+ position: absolute;
+ top: 10px;
+ right: 16px;
+ height: 56px;
+ width: 56px;
+ border-radius: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ border-width: 2px;
+ background: #037DD6;
+ margin-right: 5px;
+ cursor: pointer;
+ box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.25);
+ }
+}
+
+.address-book--hidden {
+ display: none;
+}
+
+.address-book-contact-content {
+ flex: 0.4 1 40%;
+
+ @media screen and (max-width: 576px) {
+ flex: 1
+ }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/index.js b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js
new file mode 100644
index 000000000..13a7a9cbf
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js
@@ -0,0 +1 @@
+export { default } from './my-accounts.container'
diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js
new file mode 100644
index 000000000..f43b59e07
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import ContactList from '../../../../components/app/contact-list'
+import { CONTACT_MY_ACCOUNTS_VIEW_ROUTE } from '../../../../helpers/constants/routes'
+
+export default class ViewContact extends PureComponent {
+
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ myAccounts: PropTypes.array,
+ history: PropTypes.object,
+ }
+
+ renderMyAccounts () {
+ const { myAccounts, history } = this.props
+
+ return (
+
+
+
+
+
+
+
+ this.setState({ newName: e.target.value })}
+ fullWidth
+ margin="dense"
+ />
+
+
+
+ { t('userName') }
+
+
+ this.setState({ newAddress: e.target.value })}
+ fullWidth
+ margin="dense"
+ />
+
+
+
+ { t('ethereumPublicAddress') }
+
+
+ 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',
+ }}
+ />
+
+
+ { t('memo') }
+
+
+ myAccounts}
+ selectRecipient={(address) => {
+ history.push(`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${address}`)
+ }}
+ />
+
+ )
+ }
+
+ render () {
+ return (
+
+ { this.renderMyAccounts() }
+
+ )
+ }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js
new file mode 100644
index 000000000..6380c9d4c
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js
@@ -0,0 +1,18 @@
+import ViewContact from './my-accounts.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { accountsWithSendEtherInfoSelector } from '../../../../selectors/selectors'
+
+const mapStateToProps = (state,) => {
+ const myAccounts = accountsWithSendEtherInfoSelector(state)
+
+ return {
+ myAccounts,
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps)
+)(ViewContact)
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/index.js b/ui/app/pages/settings/contact-list-tab/view-contact/index.js
new file mode 100644
index 000000000..78bf19d18
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/index.js
@@ -0,0 +1 @@
+export { default } from './view-contact.container'
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
new file mode 100644
index 000000000..4f37b853b
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../../../../components/ui/identicon'
+
+import Button from '../../../../components/ui/button/button.component'
+import copyToClipboard from 'copy-to-clipboard'
+
+function quadSplit (address) {
+ return '0x ' + address.slice(2).match(/.{1,4}/g).join(' ')
+}
+
+export default class ViewContact extends PureComponent {
+
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ removeFromAddressBook: PropTypes.func,
+ name: PropTypes.string,
+ address: PropTypes.string,
+ history: PropTypes.object,
+ checkSummedAddress: PropTypes.string,
+ memo: PropTypes.string,
+ editRoute: PropTypes.string,
+ }
+
+ render () {
+ const { t } = this.context
+ const { history, name, address, checkSummedAddress, memo, editRoute } = this.props
+
+ return (
+
+
+ )
+ }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js
new file mode 100644
index 000000000..b1196d936
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js
@@ -0,0 +1,43 @@
+import ViewContact from './view-contact.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { getAddressBookEntry } from '../../../../selectors/selectors'
+import { removeFromAddressBook } from '../../../../store/actions'
+import { checksumAddress } from '../../../../helpers/utils/util'
+import {
+ CONTACT_EDIT_ROUTE,
+ CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
+ CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+} from '../../../../helpers/constants/routes'
+
+const mapStateToProps = (state, ownProps) => {
+ const { location } = ownProps
+ const { pathname } = location
+ const pathNameTail = pathname.match(/[^/]+$/)[0]
+ const pathNameTailIsAddress = pathNameTail.includes('0x')
+ const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id
+
+ const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address]
+
+ const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE))
+
+ return {
+ name,
+ address,
+ checkSummedAddress: checksumAddress(address),
+ memo,
+ editRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_EDIT_ROUTE : CONTACT_EDIT_ROUTE,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ removeFromAddressBook: (addressToRemove) => dispatch(removeFromAddressBook(addressToRemove)),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps)
+)(ViewContact)
diff --git a/ui/app/pages/settings/index.js b/ui/app/pages/settings/index.js
index 44a9ffa63..d2dd7f795 100644
--- a/ui/app/pages/settings/index.js
+++ b/ui/app/pages/settings/index.js
@@ -1 +1 @@
-export { default } from './settings.component'
+export { default } from './settings.container'
diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss
index d98a48c2f..73f36806d 100644
--- a/ui/app/pages/settings/index.scss
+++ b/ui/app/pages/settings/index.scss
@@ -4,6 +4,8 @@
@import 'settings-tab/index';
+@import 'contact-list-tab/index';
+
.settings-page {
position: relative;
background: $white;
@@ -23,7 +25,7 @@
}
}
- &__subheader {
+ &__subheader, &__subheader--link {
padding: 16px 4px;
font-size: 20px;
border-bottom: 1px solid $alto;
@@ -38,6 +40,16 @@
}
}
+ &__subheader--link {
+ cursor: pointer;
+ margin-right: 4px;
+ }
+
+ &__subheader--link:hover {
+ cursor: pointer;
+ color: #037DD6;
+ }
+
&__sub-header {
height: 72px;
border-bottom: 1px solid #D8D8D8;
@@ -116,6 +128,8 @@
&__modules {
overflow-y: auto;
flex: 1 1 auto;
+ display: flex;
+ flex-flow: column;
@media screen and (max-width: 575px) {
display: none;
@@ -175,6 +189,37 @@
}
}
+ &__copyable-address {
+ display: flex;
+ }
+
+ &__copy-icon {
+ padding-left: 4px;
+ }
+
+ &__button-group {
+ display:flex;
+ margin-left: auto;
+ }
+
+ &__address-book-button {
+ //align-self: flex-end;
+ //padding: 5px;
+ //text-transform: uppercase;
+ //cursor: pointer;
+ //width: 25%;
+ //min-width: 80px;
+ //height: 33px;
+ font-size: 1rem;
+ line-height: 1.1875rem;
+ padding: 0;
+
+ }
+
+ &__address-book-button + &__address-book-button {
+ margin-left: 1.875rem;
+ }
+
&--selected {
.settings-page {
&__content {
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index 7f2045244..79f383dc4 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -1,8 +1,6 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Switch, Route, matchPath, withRouter } from 'react-router-dom'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
-import { getEnvironmentType } from '../../../../app/scripts/lib/util'
import TabBar from '../../components/app/tab-bar'
import c from 'classnames'
import SettingsTab from './settings-tab'
@@ -10,6 +8,7 @@ import NetworksTab from './networks-tab'
import AdvancedTab from './advanced-tab'
import InfoTab from './info-tab'
import SecurityTab from './security-tab'
+import ContactListTab from './contact-list-tab'
import {
DEFAULT_ROUTE,
ADVANCED_ROUTE,
@@ -18,19 +17,28 @@ import {
ABOUT_US_ROUTE,
SETTINGS_ROUTE,
NETWORKS_ROUTE,
+ CONTACT_LIST_ROUTE,
+ CONTACT_ADD_ROUTE,
+ CONTACT_EDIT_ROUTE,
+ CONTACT_VIEW_ROUTE,
+ CONTACT_MY_ACCOUNTS_ROUTE,
+ CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+ CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
} from '../../helpers/constants/routes'
-const ROUTES_TO_I18N_KEYS = {
- [GENERAL_ROUTE]: 'general',
- [ADVANCED_ROUTE]: 'advanced',
- [SECURITY_ROUTE]: 'securityAndPrivacy',
- [ABOUT_US_ROUTE]: 'about',
-}
-
class SettingsPage extends PureComponent {
static propTypes = {
- location: PropTypes.object,
+ addressName: PropTypes.string,
+ backRoute: PropTypes.string,
+ currentPath: PropTypes.string,
history: PropTypes.object,
+ isAddressEntryPage: PropTypes.bool,
+ isPopupView: PropTypes.bool,
+ location: PropTypes.object,
+ pathnameI18nKey: PropTypes.string,
+ initialBreadCrumbRoute: PropTypes.string,
+ breadCrumbTextKey: PropTypes.string,
+ initialBreadCrumbKey: PropTypes.string,
t: PropTypes.func,
}
@@ -38,35 +46,25 @@ class SettingsPage extends PureComponent {
t: PropTypes.func,
}
- isCurrentPath (pathname) {
- return this.props.location.pathname === pathname
- }
-
render () {
- const { t } = this.context
- const { history, location } = this.props
-
- const pathnameI18nKey = ROUTES_TO_I18N_KEYS[location.pathname]
- const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP
+ const { history, backRoute, currentPath } = this.props
return (
+
+
+
+ { name }
+
+
+
+
+
+
+ { t('ethereumPublicAddress') }
+
+
+ ![]()
copyToClipboard(checkSummedAddress)}
+ src="/images/copy-to-clipboard.svg"
+ />
+
+
+ { quadSplit(checkSummedAddress) }
+
+
+
+
+ { t('memo') }
+
+
+ { memo }
+
+
{
- !this.isCurrentPath(SETTINGS_ROUTE) && !this.isCurrentPath(NETWORKS_ROUTE) && (
+ currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && (
history.push(SETTINGS_ROUTE)}
+ onClick={() => history.push(backRoute)}
/>
)
}
-
- {t(pathnameI18nKey && isPopupView ? pathnameI18nKey : 'settings')}
-
+ { this.renderTitle() }
history.push(DEFAULT_ROUTE)}
@@ -85,19 +83,65 @@ class SettingsPage extends PureComponent {
)
}
+ renderTitle () {
+ const { t } = this.context
+ const { isPopupView, pathnameI18nKey, addressName } = this.props
+
+ let titleText
+
+ if (isPopupView && addressName) {
+ titleText = addressName
+ } else if (pathnameI18nKey && isPopupView) {
+ titleText = t(pathnameI18nKey)
+ } else {
+ titleText = t('settings')
+ }
+
+ return (
+
+ {titleText}
+
+ )
+ }
+
renderSubHeader () {
const { t } = this.context
- const { location: { pathname } } = this.props
+ const {
+ currentPath,
+ isPopupView,
+ isAddressEntryPage,
+ pathnameI18nKey,
+ addressName,
+ initialBreadCrumbRoute,
+ breadCrumbTextKey,
+ history,
+ initialBreadCrumbKey,
+ } = this.props
- return pathname !== NETWORKS_ROUTE && (
+ let subheaderText
+
+ if (isPopupView && isAddressEntryPage) {
+ subheaderText = t('settings')
+ } else if (initialBreadCrumbKey) {
+ subheaderText = t(initialBreadCrumbKey)
+ } else {
+ subheaderText = t(pathnameI18nKey || 'general')
+ }
+
+ return currentPath !== NETWORKS_ROUTE && (
- {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')}
+
)
}
renderTabs () {
- const { history, location } = this.props
+ const { history, currentPath } = this.props
const { t } = this.context
return (
@@ -105,15 +149,16 @@ class SettingsPage extends PureComponent {
tabs={[
{ content: t('general'), description: t('generalSettingsDescription'), key: GENERAL_ROUTE },
{ content: t('advanced'), description: t('advancedSettingsDescription'), key: ADVANCED_ROUTE },
+ { content: t('contactList'), description: t('contactListDescription'), key: CONTACT_LIST_ROUTE },
{ content: t('securityAndPrivacy'), description: t('securitySettingsDescription'), key: SECURITY_ROUTE },
{ content: t('networks'), description: t('networkSettingsDescription'), key: NETWORKS_ROUTE },
{ content: t('about'), description: t('aboutSettingsDescription'), key: ABOUT_US_ROUTE },
]}
isActive={key => {
- if (key === GENERAL_ROUTE && this.isCurrentPath(SETTINGS_ROUTE)) {
+ if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) {
return true
}
- return matchPath(location.pathname, { path: key, exact: true })
+ return matchPath(currentPath, { path: key, exact: true })
}}
onSelect={key => history.push(key)}
/>
@@ -148,6 +193,41 @@ class SettingsPage extends PureComponent {
path={SECURITY_ROUTE}
component={SecurityTab}
/>
+ initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)}
+ >{subheaderText}
+ {breadCrumbTextKey && {'> '}{t(breadCrumbTextKey)}
}
+ {isAddressEntryPage && {' > '}{addressName}
}