Fix merge conflicts

1 files changed, 64 insertions, 42 deletions

diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 4230e8a22..df819dbd8 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -1,12 +1,13 @@
 const { inherits } = require('util')
 const PersistentForm = require('../lib/persistent-form')
 const h = require('react-hyperscript')
+const t = require('../i18n')
 
 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')
@@ -43,6 +44,7 @@ function SendTransactionScreen () {
       to: null,
       amount: null,
     },
+    gasLoadingError: false,
   }
 
   this.handleToChange = this.handleToChange.bind(this)
@@ -129,6 +131,10 @@ SendTransactionScreen.prototype.updateGas = function () {
       .then(([gasPrice, gas]) => {
         const newGasTotal = this.getGasTotal(gas, gasPrice)
         updateGasTotal(newGasTotal)
+        this.setState({ gasLoadingError: false })
+      })
+      .catch(err => {
+        this.setState({ gasLoadingError: true })
       })
   } else {
     const newGasTotal = this.getGasTotal(gasLimit, gasPrice)
@@ -180,19 +186,21 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
 }
 
 SendTransactionScreen.prototype.renderHeader = function () {
-  const { selectedToken } = this.props
-  const tokenText = selectedToken ? 'tokens' : 'ETH'
+  const { selectedToken, clearSend, goHome } = this.props
 
   return h('div.page-container__header', [
 
-    h('div.page-container__title', selectedToken ? 'Send Tokens' : 'Send ETH'),
+    h('div.page-container__title', selectedToken ? t('sendTokens') : t('sendETH')),
 
-    h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`),
+    h('div.page-container__subtitle', t('onlySendToEtherAddress')),
+
+    h('div.page-container__header-close', {
+      onClick: () => {
+        clearSend()
+        goHome()
+      },
+    }),
 
-    h(
-      'div.page-container__subtitle',
-      'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'
-    ),
   ])
 }
 
@@ -246,7 +254,7 @@ SendTransactionScreen.prototype.renderFromRow = function () {
   ])
 }
 
-SendTransactionScreen.prototype.handleToChange = function (to) {
+SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') {
   const {
     updateSendTo,
     updateSendErrors,
@@ -255,19 +263,19 @@ SendTransactionScreen.prototype.handleToChange = function (to) {
   let toError = null
 
   if (!to) {
-    toError = 'Required'
+    toError = t('required')
   } else if (!isValidAddress(to)) {
-    toError = 'Recipient address is invalid'
+    toError = t('invalidAddressRecipient')
   } else if (to === from) {
-    toError = 'From and To address cannot be the same'
+    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
 
@@ -275,14 +283,17 @@ SendTransactionScreen.prototype.renderToRow = function () {
 
     h('div.send-v2__form-label', [
 
-      'To:',
+      t('to'),
 
-      this.renderErrorMessage('to'),
+      this.renderErrorMessage(t('to')),
 
     ]),
 
     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,
@@ -359,8 +370,9 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
     })
   }
 
+  const verifyTokenBalance = selectedToken && tokenBalance !== null
   let sufficientTokens
-  if (selectedToken) {
+  if (verifyTokenBalance) {
     sufficientTokens = isTokenBalanceSufficient({
       tokenBalance,
       amount,
@@ -374,11 +386,11 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
   )
 
   if (conversionRate && !sufficientBalance) {
-    amountError = 'Insufficient funds.'
-  } else if (selectedToken && !sufficientTokens) {
-    amountError = 'Insufficient tokens.'
+    amountError = t('insufficientFunds')
+  } else if (verifyTokenBalance && !sufficientTokens) {
+    amountError = t('insufficientTokens')
   } else if (amountLessThanZero) {
-    amountError = 'Can not send negative amounts of ETH.'
+    amountError = t('negativeETH')
   }
 
   updateSendErrors({ amount: amountError })
@@ -394,20 +406,21 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
     amount,
     setMaxModeTo,
     maxModeOn,
+    gasTotal,
   } = this.props
 
   return h('div.send-v2__form-row', [
 
-     h('div.send-v2__form-label', [
+    h('div.send-v2__form-label', [
       'Amount:',
       this.renderErrorMessage('amount'),
-      !errors.amount && h('div.send-v2__amount-max', {
+      !errors.amount && gasTotal && h('div.send-v2__amount-max', {
         onClick: (event) => {
           event.preventDefault()
           setMaxModeTo(true)
           this.setAmountToMax()
         },
-      }, [ !maxModeOn ? 'Max' : '' ]),
+      }, [ !maxModeOn ? t('max') : '' ]),
     ]),
 
     h('div.send-v2__form-field', [
@@ -432,10 +445,11 @@ SendTransactionScreen.prototype.renderGasRow = function () {
     showCustomizeGasModal,
     gasTotal,
   } = this.props
+  const { gasLoadingError } = this.state
 
   return h('div.send-v2__form-row', [
 
-    h('div.send-v2__form-label', 'Gas fee:'),
+    h('div.send-v2__form-label', h('gasFee')),
 
     h('div.send-v2__form-field', [
 
@@ -444,6 +458,7 @@ SendTransactionScreen.prototype.renderGasRow = function () {
         conversionRate,
         convertedCurrency,
         onClick: showCustomizeGasModal,
+        gasLoadingError,
       }),
 
     ]),
@@ -469,18 +484,19 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
 }
 
 SendTransactionScreen.prototype.renderForm = function () {
-  return h('div.send-v2__form', {}, [
-
-    this.renderFromRow(),
+  return h('.page-container__content', {}, [
+    h('.send-v2__form', [
+      this.renderFromRow(),
 
-    this.renderToRow(),
+      this.renderToRow(),
 
-    this.renderAmountRow(),
+      this.renderAmountRow(),
 
-    this.renderGasRow(),
+      this.renderGasRow(),
 
-    // this.renderMemoRow(),
+      // this.renderMemoRow(),
 
+    ]),
   ])
 }
 
@@ -488,23 +504,26 @@ SendTransactionScreen.prototype.renderFooter = function () {
   const {
     clearSend,
     gasTotal,
+    tokenBalance,
+    selectedToken,
     errors: { amount: amountError, to: toError },
     history,
   } = this.props
 
+  const missingTokenBalance = selectedToken && !tokenBalance
   const noErrors = !amountError && toError === null
 
   return h('div.page-container__footer', [
-    h('button.btn-cancel.page-container__footer-button', {
+    h('button.btn-secondary--lg.page-container__footer-button', {
       onClick: () => {
         clearSend()
         history.goBack()
       },
-    }, 'Cancel'),
-    h('button.btn-clear.page-container__footer-button', {
-      disabled: !noErrors || !gasTotal,
+    }, t('cancel')),
+    h('button.btn-primary--lg.page-container__footer-button', {
+      disabled: !noErrors || !gasTotal || missingTokenBalance,
       onClick: event => this.onSubmit(event),
-    }, 'Next'),
+    }, t('next')),
   ])
 }
 
@@ -523,11 +542,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)
   }
 }
 
@@ -564,9 +583,11 @@ SendTransactionScreen.prototype.getEditedTx = function () {
       data,
     })
   } else {
+    const data = unapprovedTxs[editingTransactionId].txParams.data
     Object.assign(editingTx.txParams, {
       value: ethUtil.addHexPrefix(amount),
       to: ethUtil.addHexPrefix(to),
+      data,
     })
   }
 
@@ -586,6 +607,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
     updateTx,
     selectedToken,
     editingTransactionId,
+    toNickname,
     errors: { amount: amountError, to: toError },
   } = this.props
 
@@ -595,7 +617,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
     return
   }
 
-  this.addToAddressBookIfNew(to)
+  this.addToAddressBookIfNew(to, toNickname)
 
   if (editingTransactionId) {
     const editedTx = this.getEditedTx()