From 1dc3c51b5445996e9111cabe863fb0eef65dcfc5 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 2 Apr 2018 16:26:19 -0230 Subject: UpdateSendErrors only called when balance defined, recalled if balance updates. --- ui/app/components/pending-tx/confirm-send-ether.js | 37 ++++++++++++++++----- ui/app/components/pending-tx/confirm-send-token.js | 38 +++++++++++++++++----- 2 files changed, 59 insertions(+), 16 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 2474516d4..eae70b279 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -109,16 +109,37 @@ function ConfirmSendEther () { this.onSubmit = this.onSubmit.bind(this) } -ConfirmSendEther.prototype.componentWillMount = function () { - const { updateSendErrors } = this.props +ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) { + const { + balance: oldBalance, + conversionRate: oldConversionRate, + } = prevProps + const { + updateSendErrors, + balance, + conversionRate, + } = this.props const txMeta = this.gatherTxMeta() - const balanceIsSufficient = this.isBalanceSufficient(txMeta) - updateSendErrors({ - insufficientFunds: balanceIsSufficient - ? false - : this.context.t('insufficientFunds'), - }) + const shouldUpdateBalanceSendErrors = balance && [ + balance !== oldBalance, + conversionRate !== oldConversionRate, + ].some(x => Boolean(x)) + + if (shouldUpdateBalanceSendErrors) { + const balanceIsSufficient = this.isBalanceSufficient(txMeta) + updateSendErrors({ + insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'), + }) + } +} + +ConfirmSendEther.prototype.componentWillMount = function () { + this.updateComponentSendErrors({}) +} + +ConfirmSendEther.prototype.componentDidUpdate = function (prevProps) { + this.updateComponentSendErrors(prevProps) } ConfirmSendEther.prototype.getAmount = function () { diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index dd9fdc23f..814386c5c 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -147,21 +147,43 @@ function ConfirmSendToken () { this.onSubmit = this.onSubmit.bind(this) } -ConfirmSendToken.prototype.componentWillMount = function () { - const { tokenContract, selectedAddress, updateSendErrors} = this.props +ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) { + const { + balance: oldBalance, + conversionRate: oldConversionRate, + } = prevProps + const { + updateSendErrors, + balance, + conversionRate, + } = this.props const txMeta = this.gatherTxMeta() - const balanceIsSufficient = this.isBalanceSufficient(txMeta) + + const shouldUpdateBalanceSendErrors = balance && [ + balance !== oldBalance, + conversionRate !== oldConversionRate, + ].some(x => Boolean(x)) + + if (shouldUpdateBalanceSendErrors) { + const balanceIsSufficient = this.isBalanceSufficient(txMeta) + updateSendErrors({ + insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'), + }) + } +} + +ConfirmSendToken.prototype.componentWillMount = function () { + const { tokenContract, selectedAddress } = this.props tokenContract && tokenContract .balanceOf(selectedAddress) .then(usersToken => { }) this.props.updateTokenExchangeRate() + this.updateComponentSendErrors({}) +} - updateSendErrors({ - insufficientFunds: balanceIsSufficient - ? false - : this.context.t('insufficientFunds'), - }) +ConfirmSendToken.prototype.componentDidUpdate = function (prevProps) { + this.updateComponentSendErrors(prevProps) } ConfirmSendToken.prototype.getAmount = function () { -- cgit From 7ccf6163fd4dda52d4c75f57cb36d1f4b05b50ea Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 2 Apr 2018 16:29:35 -0230 Subject: Adds simulation failure error messages to confirm screen. --- ui/app/components/pending-tx/confirm-send-ether.js | 15 +++++++++++++++ ui/app/components/pending-tx/confirm-send-token.js | 15 +++++++++++++++ ui/app/css/itcss/components/confirm.scss | 11 +++++++++++ 3 files changed, 41 insertions(+) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index eae70b279..d007e6661 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -118,6 +118,11 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) { updateSendErrors, balance, conversionRate, + send: { + errors: { + simulationFails, + }, + }, } = this.props const txMeta = this.gatherTxMeta() @@ -132,6 +137,14 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) { insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'), }) } + + const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails) + + if (shouldUpdateSimulationSendError) { + updateSendErrors({ + simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'), + }) + } } ConfirmSendEther.prototype.componentWillMount = function () { @@ -478,8 +491,10 @@ ConfirmSendEther.prototype.render = function () { ]), h('form#pending-tx-form', { + className: 'confirm-screen-form', onSubmit: this.onSubmit, }, [ + this.renderErrorMessage('simulationFails'), h('.page-container__footer', [ // Cancel Button h('button.btn-cancel.page-container__footer-button.allcaps', { diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 814386c5c..19e591fd6 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -156,6 +156,11 @@ ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) { updateSendErrors, balance, conversionRate, + send: { + errors: { + simulationFails, + }, + }, } = this.props const txMeta = this.gatherTxMeta() @@ -170,6 +175,14 @@ ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) { insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'), }) } + + const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails) + + if (shouldUpdateSimulationSendError) { + updateSendErrors({ + simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'), + }) + } } ConfirmSendToken.prototype.componentWillMount = function () { @@ -489,8 +502,10 @@ ConfirmSendToken.prototype.render = function () { ]), h('form#pending-tx-form', { + className: 'confirm-screen-form', onSubmit: this.onSubmit, }, [ + this.renderErrorMessage('simulationFails'), h('.page-container__footer', [ // Cancel Button h('button.btn-cancel.page-container__footer-button.allcaps', { diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 85ff14e6e..47762e8de 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -312,6 +312,17 @@ section .confirm-screen-account-number, } } +.confirm-screen-form { + position: relative; + + .confirm-screen-error { + right: 0; + width: 100%; + margin-top: 7px; + text-align: center; + } +} + .confirm-screen-confirm-button { height: 50px; border-radius: 4px; -- cgit