diff --git a/ui/app/components/app/ens-input.js b/ui/app/components/app/ens-input.js index 5eea0dd90..f17f6c3d6 100644 --- a/ui/app/components/app/ens-input.js +++ b/ui/app/components/app/ens-input.js @@ -41,12 +41,15 @@ EnsInput.prototype.onChange = function (recipient) { ensResolution: null, ensFailure: null, toError: null, + recipient, }) } this.setState({ loadingEns: true, + recipient, }) + this.checkName(recipient) } @@ -56,6 +59,7 @@ EnsInput.prototype.render = function () { list: 'addresses', onChange: this.onChange.bind(this), qrScanner: true, + recipient: (this.state || {}).recipient, }) return h('div', { style: { width: '100%', position: 'relative' }, @@ -79,19 +83,21 @@ EnsInput.prototype.componentDidMount = function () { EnsInput.prototype.lookupEnsName = function (recipient) { const { ensResolution } = this.state + recipient = recipient.trim() log.info(`ENS attempting to resolve name: ${recipient}`) - this.ens.lookup(recipient.trim()) + this.ens.lookup(recipient) .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(), + nickname: recipient, hoverText: address + '\n' + this.context.t('clickCopy'), ensFailure: false, toError: null, + recipient, }) } }) @@ -101,11 +107,11 @@ EnsInput.prototype.lookupEnsName = function (recipient) { ensResolution: recipient, ensFailure: true, toError: null, + recipient: 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 @@ -128,7 +134,7 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) { } if (prevState && ensResolution && this.props.onChange && ensResolution !== prevState.ensResolution) { - this.props.onChange({ toAddress: ensResolution, nickname, toError: state.toError, toWarning: state.toWarning }) + this.props.onChange({ toAddress: ensResolution, recipient: state.recipient, nickname, toError: state.toError, toWarning: state.toWarning }) } } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 927640f0b..2e76cc842 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -763,7 +763,43 @@ } } - &__to-autocomplete, &__memo-text-area, &__hex-data { + &__to-autocomplete { + display: flex; + flex-direction: column; + z-index: 1025; + position: relative; + height: 54px; + width: 100%; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + color: $tundora; + padding: 0 10px; + font-family: Roboto; + line-height: 21px; + + &__input { + font-size: 16px; + height: 100%; + border: none; + } + + &__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; + } + } + } + + &__memo-text-area, &__hex-data { &__input { z-index: 1025; position: relative; diff --git a/ui/app/pages/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js index 328a5b62b..11f86acf3 100644 --- a/ui/app/pages/send/to-autocomplete/to-autocomplete.js +++ b/ui/app/pages/send/to-autocomplete/to-autocomplete.js @@ -1,6 +1,7 @@ const Component = require('react').Component const PropTypes = require('prop-types') const h = require('react-hyperscript') +const copyToClipboard = require('copy-to-clipboard') const inherits = require('util').inherits const AccountListItem = require('../account-list-item/account-list-item.component').default const connect = require('react-redux').connect @@ -93,24 +94,34 @@ ToAutoComplete.prototype.componentDidUpdate = function (nextProps) { ToAutoComplete.prototype.render = function () { const { to, + recipient, dropdownOpen, onChange, inError, qrScanner, } = this.props - return h('div.send-v2__to-autocomplete', {}, [ + const isRecipientToDiff = recipient && recipient !== to + + return h('div.send-v2__to-autocomplete', {style: { + borderColor: inError ? 'red' : null, + }}, [ h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, { placeholder: this.context.t('recipientAddress'), className: inError ? `send-v2__error-border` : '', - value: to, + value: recipient, onChange: event => onChange(event.target.value), onFocus: event => this.handleInputEvent(event), - style: { - borderColor: inError ? 'red' : null, - }, }), + isRecipientToDiff && h(Tooltip, {title: this.context.t('copyToClipboard')}, + h('div.send-v2__to-autocomplete__resolved', { + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + copyToClipboard(to) + }, + }, to)), qrScanner && h(Tooltip, { title: this.context.t('scanQrCode'), position: 'bottom',