Merge pull request #3722 from danjm/i2582-sendtoensname

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

1 files changed, 12 insertions, 8 deletions

diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index de71ce94c..81c4340dc 100644
--- a/ui/app/send-v2.js
+++ b/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()