aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/pending-tx/confirm-send-token.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/pending-tx/confirm-send-token.js')
-rw-r--r--ui/app/components/pending-tx/confirm-send-token.js69
1 files changed, 63 insertions, 6 deletions
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 7fe260a61..dd9fdc23f 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')
@@ -46,9 +51,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,
@@ -58,6 +64,7 @@ function mapStateToProps (state, ownProps) {
currentCurrency: currentCurrency.toUpperCase(),
send: state.metamask.send,
tokenContract: getSelectedTokenContract(state),
+ balance,
}
}
@@ -129,6 +136,7 @@ function mapDispatchToProps (dispatch, ownProps) {
}))
dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
},
+ updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
}
}
@@ -140,12 +148,20 @@ function ConfirmSendToken () {
}
ConfirmSendToken.prototype.componentWillMount = function () {
- const { tokenContract, selectedAddress } = this.props
+ const { tokenContract, selectedAddress, updateSendErrors} = this.props
+ const txMeta = this.gatherTxMeta()
+ const balanceIsSufficient = this.isBalanceSufficient(txMeta)
tokenContract && tokenContract
.balanceOf(selectedAddress)
.then(usersToken => {
})
this.props.updateTokenExchangeRate()
+
+ updateSendErrors({
+ insufficientFunds: balanceIsSufficient
+ ? false
+ : this.context.t('insufficientFunds'),
+ })
}
ConfirmSendToken.prototype.getAmount = function () {
@@ -306,7 +322,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()
@@ -326,7 +342,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', [ this.context.t('total') + ' ' ]),
h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
]),
@@ -335,10 +356,20 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.context.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()
@@ -455,18 +486,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: this.context.t('insufficientFunds') })
} else {
- this.props.dispatch(actions.displayWarning(this.context.t('invalidGasParams')))
+ updateSendErrors({ invalidGasParams: this.context.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