aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDan <danjm.com@gmail.com>2018-03-28 09:53:57 +0800
committerDan <danjm.com@gmail.com>2018-03-28 10:11:20 +0800
commit74ac3bb2a7130675a10e1701d569b2c35a948f8f (patch)
treecd31e0a09a44c451ba81357e6436dc69ab005e85
parent8e6ab7df052a5ca43b15edc9c308c626bb23e64c (diff)
downloadtangerine-wallet-browser-74ac3bb2a7130675a10e1701d569b2c35a948f8f.tar
tangerine-wallet-browser-74ac3bb2a7130675a10e1701d569b2c35a948f8f.tar.gz
tangerine-wallet-browser-74ac3bb2a7130675a10e1701d569b2c35a948f8f.tar.bz2
tangerine-wallet-browser-74ac3bb2a7130675a10e1701d569b2c35a948f8f.tar.lz
tangerine-wallet-browser-74ac3bb2a7130675a10e1701d569b2c35a948f8f.tar.xz
tangerine-wallet-browser-74ac3bb2a7130675a10e1701d569b2c35a948f8f.tar.zst
tangerine-wallet-browser-74ac3bb2a7130675a10e1701d569b2c35a948f8f.zip
Confirm send token detects if balance is sufficient for gas.
-rw-r--r--ui/app/components/pending-tx/confirm-send-ether.js4
-rw-r--r--ui/app/components/pending-tx/confirm-send-token.js59
2 files changed, 56 insertions, 7 deletions
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 14077b5e8..b775e0ad0 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -16,7 +16,7 @@ const {
const {
getGasTotal,
isBalanceSufficient,
-} = require('../send/send-utils')
+} = require('../send/send-utils')
const GasFeeDisplay = require('../send/gas-fee-display-v2')
const t = require('../../../i18n')
const SenderToRecipient = require('../sender-to-recipient')
@@ -343,7 +343,7 @@ ConfirmSendEther.prototype.render = function () {
className: classnames({
'confirm-screen-section-column--with-error': errors['insufficientFunds'],
'confirm-screen-section-column': !errors['insufficientFunds'],
- })
+ }),
}, [
h('span.confirm-screen-label', [ t('total') + ' ' ]),
h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index f9276e8a5..5cc2585f7 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -18,8 +18,13 @@ const {
addCurrencies,
} = require('../../conversion-util')
const {
+ getGasTotal,
+ isBalanceSufficient,
+} = require('../send/send-utils')
+const {
calcTokenAmount,
} = require('../../token-util')
+const classnames = require('classnames')
const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
@@ -41,9 +46,10 @@ function mapStateToProps (state, ownProps) {
identities,
currentCurrency,
} = state.metamask
+ const accounts = state.metamask.accounts
const selectedAddress = getSelectedAddress(state)
const tokenExchangeRate = getTokenExchangeRate(state, symbol)
-
+ const { balance } = accounts[selectedAddress]
return {
conversionRate,
identities,
@@ -53,6 +59,7 @@ function mapStateToProps (state, ownProps) {
currentCurrency: currentCurrency.toUpperCase(),
send: state.metamask.send,
tokenContract: getSelectedTokenContract(state),
+ balance,
}
}
@@ -124,6 +131,7 @@ function mapDispatchToProps (dispatch, ownProps) {
}))
dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
},
+ updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
}
}
@@ -301,7 +309,7 @@ ConfirmSendToken.prototype.renderGasFee = function () {
}
ConfirmSendToken.prototype.renderTotalPlusGas = function () {
- const { token: { symbol }, currentCurrency } = this.props
+ const { token: { symbol }, currentCurrency, send: { errors } } = this.props
const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
const { fiat: fiatGas, token: tokenGas } = this.getGasFee()
@@ -321,7 +329,12 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
)
: (
h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
- h('div.confirm-screen-section-column', [
+ h('div', {
+ className: classnames({
+ 'confirm-screen-section-column--with-error': errors['insufficientFunds'],
+ 'confirm-screen-section-column': !errors['insufficientFunds'],
+ }),
+ }, [
h('span.confirm-screen-label', [ t('total') + ' ' ]),
h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
]),
@@ -330,10 +343,20 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${t('gas')}`),
]),
+
+ this.renderErrorMessage('insufficientFunds'),
])
)
}
+ConfirmSendToken.prototype.renderErrorMessage = function (message) {
+ const { send: { errors } } = this.props
+
+ return errors[message]
+ ? h('div.confirm-screen-error', [ errors[message] ])
+ : null
+}
+
ConfirmSendToken.prototype.render = function () {
const { editTransaction } = this.props
const txMeta = this.gatherTxMeta()
@@ -448,18 +471,44 @@ ConfirmSendToken.prototype.render = function () {
ConfirmSendToken.prototype.onSubmit = function (event) {
event.preventDefault()
+ const { updateSendErrors } = this.props
const txMeta = this.gatherTxMeta()
const valid = this.checkValidity()
+ const balanceIsSufficient = this.isBalanceSufficient(txMeta)
this.setState({ valid, submitting: true })
- if (valid && this.verifyGasParams()) {
+ if (valid && this.verifyGasParams() && balanceIsSufficient) {
this.props.sendTransaction(txMeta, event)
+ } else if (!balanceIsSufficient) {
+ updateSendErrors({ insufficientFunds: t('insufficientFunds') })
} else {
- this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
+ updateSendErrors({ invalidGasParams: t('invalidGasParams') })
this.setState({ submitting: false })
}
}
+ConfirmSendToken.prototype.isBalanceSufficient = function (txMeta) {
+ const {
+ balance,
+ conversionRate,
+ } = this.props
+ const {
+ txParams: {
+ gas,
+ gasPrice,
+ },
+ } = txMeta
+ const gasTotal = getGasTotal(gas, gasPrice)
+
+ return isBalanceSufficient({
+ amount: '0',
+ gasTotal,
+ balance,
+ conversionRate,
+ })
+}
+
+
ConfirmSendToken.prototype.cancel = function (event, txMeta) {
event.preventDefault()
const { cancelTransaction } = this.props