diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index ca6761183a89..eab243b8a5ed 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -989,6 +989,9 @@
"noTransactions": {
"message": "You have no transactions"
},
+ "notEnoughGas": {
+ "message": "Not Enough Gas"
+ },
"notFound": {
"message": "Not Found"
},
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 b08e0bbe3b03..4a3b04998e90 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
+ ? (
+
+
+
+
+
+ )
+ : (
+
+ )
+ }
+
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 {
)
}
- {
- showCancel && (
-
- )
- }
+ { this.renderCancel() }
)
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 499558a9b854..73ec91e733ea 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,
}
}