aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDan <danjm.com@gmail.com>2018-03-28 09:08:04 +0800
committerDan <danjm.com@gmail.com>2018-03-28 09:08:04 +0800
commit8e6ab7df052a5ca43b15edc9c308c626bb23e64c (patch)
treedf9ef6f3952eec8a68fa25d2620d7f248d57693a
parentb6b18339e2de92afd2fb5364ec5bc4c29b4d10a3 (diff)
downloadtangerine-wallet-browser-8e6ab7df052a5ca43b15edc9c308c626bb23e64c.tar
tangerine-wallet-browser-8e6ab7df052a5ca43b15edc9c308c626bb23e64c.tar.gz
tangerine-wallet-browser-8e6ab7df052a5ca43b15edc9c308c626bb23e64c.tar.bz2
tangerine-wallet-browser-8e6ab7df052a5ca43b15edc9c308c626bb23e64c.tar.lz
tangerine-wallet-browser-8e6ab7df052a5ca43b15edc9c308c626bb23e64c.tar.xz
tangerine-wallet-browser-8e6ab7df052a5ca43b15edc9c308c626bb23e64c.tar.zst
tangerine-wallet-browser-8e6ab7df052a5ca43b15edc9c308c626bb23e64c.zip
Checking for sufficient balance in confirm ether screen; includes error messages for user.
-rw-r--r--ui/app/components/pending-tx/confirm-send-ether.js62
-rw-r--r--ui/app/components/send/send-utils.js12
-rw-r--r--ui/app/css/itcss/components/confirm.scss25
-rw-r--r--ui/app/send-v2.js13
4 files changed, 97 insertions, 15 deletions
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index d1ce25cbf..14077b5e8 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -7,11 +7,16 @@ const clone = require('clone')
const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN
const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+const classnames = require('classnames')
const {
conversionUtil,
addCurrencies,
multiplyCurrencies,
} = require('../../conversion-util')
+const {
+ getGasTotal,
+ isBalanceSufficient,
+} = require('../send/send-utils')
const GasFeeDisplay = require('../send/gas-fee-display-v2')
const t = require('../../../i18n')
const SenderToRecipient = require('../sender-to-recipient')
@@ -30,12 +35,14 @@ function mapStateToProps (state) {
} = state.metamask
const accounts = state.metamask.accounts
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+ const { balance } = accounts[selectedAddress]
return {
conversionRate,
identities,
selectedAddress,
currentCurrency,
send,
+ balance,
}
}
@@ -86,6 +93,7 @@ function mapDispatchToProps (dispatch) {
}))
dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
},
+ updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
}
}
@@ -218,7 +226,12 @@ ConfirmSendEther.prototype.render = function () {
conversionRate,
currentCurrency: convertedCurrency,
showCustomizeGasModal,
- send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice },
+ send: {
+ gasTotal,
+ gasLimit: sendGasLimit,
+ gasPrice: sendGasPrice,
+ errors,
+ },
} = this.props
const txMeta = this.gatherTxMeta()
const txParams = txMeta.txParams || {}
@@ -326,7 +339,12 @@ ConfirmSendEther.prototype.render = 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') ]),
]),
@@ -335,6 +353,8 @@ ConfirmSendEther.prototype.render = function () {
h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
]),
+
+ this.renderErrorMessage('insufficientFunds'),
]),
]),
@@ -439,16 +459,28 @@ ConfirmSendEther.prototype.render = function () {
)
}
+ConfirmSendEther.prototype.renderErrorMessage = function (message) {
+ const { send: { errors } } = this.props
+
+ return errors[message]
+ ? h('div.confirm-screen-error', [ errors[message] ])
+ : null
+}
+
ConfirmSendEther.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 })
}
}
@@ -460,6 +492,28 @@ ConfirmSendEther.prototype.cancel = function (event, txMeta) {
cancelTransaction(txMeta)
}
+ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) {
+ const {
+ balance,
+ conversionRate,
+ } = this.props
+ const {
+ txParams: {
+ gas,
+ gasPrice,
+ value: amount,
+ },
+ } = txMeta
+ const gasTotal = getGasTotal(gas, gasPrice)
+
+ return isBalanceSufficient({
+ amount,
+ gasTotal,
+ balance,
+ conversionRate,
+ })
+}
+
ConfirmSendEther.prototype.checkValidity = function () {
const form = this.getFormEl()
const valid = form.checkValidity()
diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
index d8211930d..71bfb2668 100644
--- a/ui/app/components/send/send-utils.js
+++ b/ui/app/components/send/send-utils.js
@@ -2,6 +2,7 @@ const {
addCurrencies,
conversionUtil,
conversionGTE,
+ multiplyCurrencies,
} = require('../../conversion-util')
const {
calcTokenAmount,
@@ -31,7 +32,7 @@ function isBalanceSufficient ({
{
value: totalAmount,
fromNumericBase: 'hex',
- conversionRate: amountConversionRate,
+ conversionRate: amountConversionRate || conversionRate,
fromCurrency: primaryCurrency,
},
)
@@ -62,7 +63,16 @@ function isTokenBalanceSufficient ({
return tokenBalanceIsSufficient
}
+function getGasTotal (gasLimit, gasPrice) {
+ return multiplyCurrencies(gasLimit, gasPrice, {
+ toNumericBase: 'hex',
+ multiplicandBase: 16,
+ multiplierBase: 16,
+ })
+}
+
module.exports = {
+ getGasTotal,
isBalanceSufficient,
isTokenBalanceSufficient,
}
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index abe138f54..85ff14e6e 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -266,6 +266,7 @@ section .confirm-screen-account-number,
.confirm-screen-total-box {
background-color: $wild-sand;
+ position: relative;
.confirm-screen-label {
line-height: 21px;
@@ -287,6 +288,30 @@ section .confirm-screen-account-number,
}
}
+.confirm-screen-error {
+ font-size: 12px;
+ line-height: 12px;
+ color: #f00;
+ position: absolute;
+ right: 12px;
+ width: 80px;
+ text-align: right;
+}
+
+.confirm-screen-row.confirm-screen-total-box {
+ .confirm-screen-section-column--with-error {
+ flex: 0.6;
+ }
+}
+
+@media screen and (max-width: 379px) {
+ .confirm-screen-row.confirm-screen-total-box {
+ .confirm-screen-section-column--with-error {
+ flex: 0.4;
+ }
+ }
+}
+
.confirm-screen-confirm-button {
height: 50px;
border-radius: 4px;
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 620da73f8..497d0b147 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -27,6 +27,7 @@ const {
const {
isBalanceSufficient,
isTokenBalanceSufficient,
+ getGasTotal,
} = require('./components/send/send-utils')
const { isValidAddress } = require('./util')
@@ -128,7 +129,7 @@ SendTransactionScreen.prototype.updateGas = function () {
estimateGas(estimateGasParams),
])
.then(([gasPrice, gas]) => {
- const newGasTotal = this.getGasTotal(gas, gasPrice)
+ const newGasTotal = getGasTotal(gas, gasPrice)
updateGasTotal(newGasTotal)
this.setState({ gasLoadingError: false })
})
@@ -136,19 +137,11 @@ SendTransactionScreen.prototype.updateGas = function () {
this.setState({ gasLoadingError: true })
})
} else {
- const newGasTotal = this.getGasTotal(gasLimit, gasPrice)
+ const newGasTotal = getGasTotal(gasLimit, gasPrice)
updateGasTotal(newGasTotal)
}
}
-SendTransactionScreen.prototype.getGasTotal = function (gasLimit, gasPrice) {
- return multiplyCurrencies(gasLimit, gasPrice, {
- toNumericBase: 'hex',
- multiplicandBase: 16,
- multiplierBase: 16,
- })
-}
-
SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
const {
from: { balance },