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