[NewUI] Send screen gas loading fixes (#3027)

* Allow entering amount, but disable validation of amount, opening of gas customizer or clicking of next, when gas loading in send.

* Fix variable name.

3 files changed, 25 insertions, 27 deletions

diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 806c33f0a..0c4c3f7a9 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -32,8 +32,9 @@ GasFeeDisplay.prototype.render = function () {
       })
       : h('div.currency-display', 'Loading...'),
 
-    h('div.send-v2__sliders-icon-container', {
+    h('button.send-v2__sliders-icon-container', {
       onClick,
+      disabled: !gasTotal,
     }, [
       h('i.fa.fa-sliders.send-v2__sliders-icon'),
     ]),
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index beb3e519c..7a6e2823b 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -652,11 +652,11 @@
     border: 1px solid $curious-blue;
     border-radius: 4px;
     background-color: $white;
-    padding: 5px;
     position: absolute;
     right: 15px;
     top: 14px;
     cursor: pointer;
+    font-size: 1em;
   }
 
   &__sliders-icon {
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index d9187fd80..897caf16e 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -13,7 +13,6 @@ const MemoTextArea = require('./components/send/memo-textarea')
 const GasFeeDisplay = require('./components/send/gas-fee-display-v2')
 
 const {
-  MIN_GAS_TOTAL,
   TOKEN_TRANSFER_FUNCTION_SIGNATURE,
 } = require('./components/send/send-constants')
 
@@ -116,6 +115,8 @@ SendTransactionScreen.prototype.updateGas = function () {
   const tokenBalancePromise = tokenContract
     ? tokenContract.balanceOf(from.address)
     : Promise.resolve()
+  tokenBalancePromise
+      .then(usersToken => this.updateSendTokenBalance(usersToken))
 
   if (!editingTransactionId) {
     const estimateGasParams = getParamsForGasEstimate(selectedAddress, symbol, data)
@@ -124,18 +125,14 @@ SendTransactionScreen.prototype.updateGas = function () {
       .all([
         getGasPrice(),
         estimateGas(estimateGasParams),
-        tokenBalancePromise,
       ])
-      .then(([gasPrice, gas, usersToken]) => {
+      .then(([gasPrice, gas]) => {
         const newGasTotal = this.getGasTotal(gas, gasPrice)
         updateGasTotal(newGasTotal)
-        this.updateSendTokenBalance(usersToken)
       })
   } else {
     const newGasTotal = this.getGasTotal(gasLimit, gasPrice)
     updateGasTotal(newGasTotal)
-    tokenBalancePromise
-      .then(usersToken => this.updateSendTokenBalance(usersToken))
   }
 }
 
@@ -164,14 +161,14 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
     network: prevNetwork,
   } = prevProps
 
-  const notFirstRender = [prevBalance, prevGasTotal].every(n => n !== null)
+  const uninitialized = [prevBalance, prevGasTotal].every(n => n === null)
 
   const balanceHasChanged = balance !== prevBalance
   const gasTotalHasChange = gasTotal !== prevGasTotal
   const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance
   const amountValidationChange = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged
 
-  if (notFirstRender) {
+  if (!uninitialized) {
     if (amountValidationChange) {
       this.validateAmount(amount)
     }
@@ -381,14 +378,19 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
   const amount = value
 
   let amountError = null
-  const sufficientBalance = isBalanceSufficient({
-    amount: selectedToken ? '0x0' : amount,
-    gasTotal,
-    balance,
-    primaryCurrency,
-    amountConversionRate,
-    conversionRate,
-  })
+
+  let sufficientBalance = true
+
+  if (gasTotal) {
+    sufficientBalance = isBalanceSufficient({
+      amount: selectedToken ? '0x0' : amount,
+      gasTotal,
+      balance,
+      primaryCurrency,
+      amountConversionRate,
+      conversionRate,
+    })
+  }
 
   let sufficientTokens
   if (selectedToken) {
@@ -404,7 +406,7 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
     { value: amount, fromNumericBase: 'hex' },
   )
 
-  if (!sufficientBalance) {
+  if (conversionRate && !sufficientBalance) {
     amountError = 'Insufficient funds.'
   } else if (selectedToken && !sufficientTokens) {
     amountError = 'Insufficient tokens.'
@@ -461,7 +463,7 @@ SendTransactionScreen.prototype.renderGasRow = function () {
     conversionRate,
     convertedCurrency,
     showCustomizeGasModal,
-    gasTotal = MIN_GAS_TOTAL,
+    gasTotal,
   } = this.props
 
   return h('div.send-v2__form-row', [
@@ -477,12 +479,6 @@ SendTransactionScreen.prototype.renderGasRow = function () {
         onClick: showCustomizeGasModal,
       }),
 
-      h('div.send-v2__sliders-icon-container', {
-        onClick: showCustomizeGasModal,
-      }, [
-        h('i.fa.fa-sliders.send-v2__sliders-icon'),
-      ]),
-
     ]),
 
   ])
@@ -533,6 +529,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
   const {
     goHome,
     clearSend,
+    gasTotal,
     errors: { amount: amountError, to: toError },
   } = this.props
 
@@ -546,7 +543,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
       },
     }, 'Cancel'),
     h('button.btn-clear.send-v2__next-btn', {
-      disabled: !noErrors,
+      disabled: !noErrors || !gasTotal,
       onClick: event => this.onSubmit(event),
     }, 'Next'),
   ])