diff options
Diffstat (limited to 'ui')
3 files changed, 69 insertions, 16 deletions
diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js index b08e0bbe3..4a3b04998 100644 --- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js +++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js @@ -20,11 +20,13 @@ export default class TransactionListItemDetails extends PureComponent { onRetry: PropTypes.func, showCancel: PropTypes.bool, showRetry: PropTypes.bool, + cancelDisabled: PropTypes.bool, transactionGroup: PropTypes.object, } state = { justCopied: false, + cancelDisabled: false, } handleEtherscanClick = () => { @@ -78,10 +80,52 @@ export default class TransactionListItemDetails extends PureComponent { }) } + renderCancel () { + const { t } = this.context + const { + showCancel, + cancelDisabled, + } = this.props + + if (!showCancel) { + return null + } + + return cancelDisabled + ? ( + <Tooltip title={t('notEnoughGas')}> + <div> + <Button + type="raised" + onClick={this.handleCancel} + className="transaction-list-item-details__header-button" + disabled + > + { t('cancel') } + </Button> + </div> + </Tooltip> + ) + : ( + <Button + type="raised" + onClick={this.handleCancel} + className="transaction-list-item-details__header-button" + > + { t('cancel') } + </Button> + ) + } + render () { const { t } = this.context const { justCopied } = this.state - const { transactionGroup, showCancel, showRetry, onCancel, onRetry } = this.props + const { + transactionGroup, + showRetry, + onCancel, + onRetry, + } = this.props const { primaryTransaction: transaction } = transactionGroup const { txParams: { to, from } = {} } = transaction @@ -101,17 +145,7 @@ export default class TransactionListItemDetails extends PureComponent { </Button> ) } - { - showCancel && ( - <Button - type="raised" - onClick={this.handleCancel} - className="transaction-list-item-details__header-button" - > - { t('cancel') } - </Button> - ) - } + { this.renderCancel() } <Tooltip title={justCopied ? t('copiedTransactionId') : t('copyTransactionId')}> <Button type="raised" diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js index c0a911cda..c7d9dd7c7 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js @@ -23,6 +23,7 @@ export default class TransactionListItem extends PureComponent { setSelectedToken: PropTypes.func, showCancelModal: PropTypes.func, showCancel: PropTypes.bool, + hasEnoughCancelGas: PropTypes.bool, showRetry: PropTypes.bool, showFiat: PropTypes.bool, token: PropTypes.object, @@ -156,6 +157,7 @@ export default class TransactionListItem extends PureComponent { nonceAndDate, primaryTransaction, showCancel, + hasEnoughCancelGas, showRetry, tokenData, transactionGroup, @@ -213,6 +215,7 @@ export default class TransactionListItem extends PureComponent { showRetry={showRetry && methodData.done} onCancel={this.handleCancel} showCancel={showCancel} + cancelDisabled={!hasEnoughCancelGas} /> </div> ) diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js index 499558a9b..73ec91e73 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js +++ b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js @@ -6,7 +6,7 @@ import TransactionListItem from './transaction-list-item.component' import { setSelectedToken, showModal, showSidebar, addKnownMethodData } from '../../../store/actions' import { hexToDecimal } from '../../../helpers/utils/conversions.util' import { getTokenData } from '../../../helpers/utils/transactions.util' -import { increaseLastGasPrice } from '../../../helpers/utils/confirm-tx.util' +import { getHexGasTotal, increaseLastGasPrice } from '../../../helpers/utils/confirm-tx.util' import { formatDate } from '../../../helpers/utils/util' import { fetchBasicGasAndTimeEstimates, @@ -14,16 +14,32 @@ import { setCustomGasPriceForRetry, setCustomGasLimit, } from '../../../ducks/gas/gas.duck' -import {getIsMainnet, preferencesSelector} from '../../../selectors/selectors' +import { getIsMainnet, preferencesSelector, getSelectedAddress, conversionRateSelector } from '../../../selectors/selectors' +import { isBalanceSufficient } from '../send/send.utils' -const mapStateToProps = state => { - const { metamask: { knownMethodData } } = state +const mapStateToProps = (state, ownProps) => { + const { metamask: { knownMethodData, accounts } } = state const { showFiatInTestnets } = preferencesSelector(state) const isMainnet = getIsMainnet(state) + const { transactionGroup: { primaryTransaction } = {} } = ownProps + const { txParams: { gas: gasLimit, gasPrice, value } = {} } = primaryTransaction + const selectedAccountBalance = accounts[getSelectedAddress(state)].balance + + const hasEnoughCancelGas = primaryTransaction.txParams && isBalanceSufficient({ + amount: value, + gasTotal: getHexGasTotal({ + gasPrice: increaseLastGasPrice(gasPrice), + gasLimit, + }), + balance: selectedAccountBalance, + conversionRate: conversionRateSelector(state), + }) return { knownMethodData, showFiat: (isMainnet || !!showFiatInTestnets), + selectedAccountBalance, + hasEnoughCancelGas, } } |