Merge pull request #6606 from industral/issue-5524

Improve ENS Address Input

3 files changed, 63 insertions, 10 deletions

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',