Merge pull request #3722 from danjm/i2582-sendtoensname

Use ens-input component in send-v2 to allow sending to ens names.

test/integration/lib/send-new-ui.js

@@ -21,6 +21,8 @@ global.ethQuery = {
   sendTransaction: () => {},
 }
 
+global.ethereumProvider = {}
+
 async function runSendFlowTest(assert, done) {
   console.log('*** start runSendFlowTest')
   const selectState = await queryAsync($, 'select')

ui/app/actions.js

@@ -694,10 +694,10 @@ function updateSendFrom (from) {
   }
 }
 
-function updateSendTo (to) {
+function updateSendTo (to, nickname = '') {
   return {
     type: actions.UPDATE_SEND_TO,
-    value: to,
+    value: { to, nickname },
   }
 }
 

ui/app/components/ens-input.js

@@ -9,6 +9,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 const t = require('../../i18n')
+const ToAutoComplete = require('./send/to-autocomplete')
 
 
 module.exports = EnsInput
@@ -22,12 +23,14 @@ EnsInput.prototype.render = function () {
   const props = this.props
   const opts = extend(props, {
     list: 'addresses',
-    onChange: () => {
+    onChange: (recipient) => {
       const network = this.props.network
       const networkHasEnsSupport = getNetworkEnsSupport(network)
+
       if (!networkHasEnsSupport) return
 
-      const recipient = document.querySelector('input[name="address"]').value
+      props.onChange(recipient)
+
       if (recipient.match(ensRE) === null) {
         return this.setState({
           loadingEns: false,
@@ -39,34 +42,13 @@ EnsInput.prototype.render = function () {
       this.setState({
         loadingEns: true,
       })
-      this.checkName()
+      this.checkName(recipient)
     },
   })
   return h('div', {
-    style: { width: '100%' },
+    style: { width: '100%', position: 'relative' },
   }, [
-    h('input.large-input.send-screen-input', opts),
+    h(ToAutoComplete, { ...opts }),
-    // The address book functionality.
-    h('datalist#addresses',
-      [
-        // Corresponds to the addresses owned.
-        Object.keys(props.identities).map((key) => {
-          const identity = props.identities[key]
-          return h('option', {
-            value: identity.address,
-            label: identity.name,
-            key: identity.address,
-          })
-        }),
-        // Corresponds to previously sent-to addresses.
-        props.addressBook.map((identity) => {
-          return h('option', {
-            value: identity.address,
-            label: identity.name,
-            key: identity.address,
-          })
-        }),
-      ]),
     this.ensIcon(),
   ])
 }
@@ -83,8 +65,7 @@ EnsInput.prototype.componentDidMount = function () {
   }
 }
 
-EnsInput.prototype.lookupEnsName = function () {
+EnsInput.prototype.lookupEnsName = function (recipient) {
-  const recipient = document.querySelector('input[name="address"]').value
   const { ensResolution } = this.state
 
   log.info(`ENS attempting to resolve name: ${recipient}`)
@@ -130,8 +111,8 @@ EnsInput.prototype.ensIcon = function (recipient) {
     title: hoverText,
     style: {
       position: 'absolute',
-      padding: '9px',
+      top: '16px',
-      transform: 'translatex(-40px)',
+      left: '-25px',
     },
   }, this.ensIconContents(recipient))
 }

ui/app/components/send/send-v2-container.js

@@ -69,13 +69,13 @@ function mapDispatchToProps (dispatch) {
     updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
     updateTx: txData => dispatch(actions.updateTransaction(txData)),
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
-    addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
+    addToAddressBook: (address, nickname) => dispatch(actions.addToAddressBook(address, nickname)),
     updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
     updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
     updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
     updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)),
     updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
-    updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
+    updateSendTo: (newTo, nickname) => dispatch(actions.updateSendTo(newTo, nickname)),
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),

ui/app/reducers/metamask.js

@@ -39,6 +39,7 @@ function reduceMetamask (state, action) {
       maxModeOn: false,
       editingTransactionId: null,
       forceGasMin: null,
+      toNickname: '',
     },
     coinOptions: {},
     useBlockie: false,
@@ -238,7 +239,8 @@ function reduceMetamask (state, action) {
       return extend(metamaskState, {
         send: {
           ...metamaskState.send,
-          to: action.value,
+          to: action.value.to,
+          toNickname: action.value.nickname,
         },
       })
 

ui/app/send-v2.js

@@ -7,7 +7,7 @@ const ethAbi = require('ethereumjs-abi')
 const ethUtil = require('ethereumjs-util')
 
 const FromDropdown = require('./components/send/from-dropdown')
-const ToAutoComplete = require('./components/send/to-autocomplete')
+const EnsInput = require('./components/ens-input')
 const CurrencyDisplay = require('./components/send/currency-display')
 const MemoTextArea = require('./components/send/memo-textarea')
 const GasFeeDisplay = require('./components/send/gas-fee-display-v2')
@@ -253,7 +253,7 @@ SendTransactionScreen.prototype.renderFromRow = function () {
   ])
 }
 
-SendTransactionScreen.prototype.handleToChange = function (to) {
+SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') {
   const {
     updateSendTo,
     updateSendErrors,
@@ -269,12 +269,12 @@ SendTransactionScreen.prototype.handleToChange = function (to) {
     toError = t('fromToSame')
   }
 
-  updateSendTo(to)
+  updateSendTo(to, nickname)
   updateSendErrors({ to: toError })
 }
 
 SendTransactionScreen.prototype.renderToRow = function () {
-  const { toAccounts, errors, to } = this.props
+  const { toAccounts, errors, to, network } = this.props
 
   const { toDropdownOpen } = this.state
 
@@ -289,7 +289,10 @@ SendTransactionScreen.prototype.renderToRow = function () {
     ]),
 
     h('div.send-v2__form-field', [
-      h(ToAutoComplete, {
+      h(EnsInput, {
+        name: 'address',
+        placeholder: 'Recipient Address',
+        network,
         to,
         accounts: Object.entries(toAccounts).map(([key, account]) => account),
         dropdownOpen: toDropdownOpen,
@@ -538,11 +541,11 @@ SendTransactionScreen.prototype.render = function () {
   )
 }
 
-SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress) {
+SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress, nickname = '') {
   const { toAccounts, addToAddressBook } = this.props
   if (!toAccounts.find(({ address }) => newAddress === address)) {
     // TODO: nickname, i.e. addToAddressBook(recipient, nickname)
-    addToAddressBook(newAddress)
+    addToAddressBook(newAddress, nickname)
   }
 }
 
@@ -603,6 +606,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
     updateTx,
     selectedToken,
     editingTransactionId,
+    toNickname,
     errors: { amount: amountError, to: toError },
   } = this.props
 
@@ -612,7 +616,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
     return
   }
 
-  this.addToAddressBookIfNew(to)
+  this.addToAddressBookIfNew(to, toNickname)
 
   if (editingTransactionId) {
     const editedTx = this.getEditedTx()