Cancel error rebased (#6341)

* Check balance before showing cancel

* Fix linter

* Use existing helper methods for calculating increased cancel price

* Add tooltip for disabled button

* Lint fix for cancelError branch.

* Disabling of cancel button should account for value of tx.

4 files changed, 72 insertions, 16 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index ca6761183..eab243b8a 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 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,
   }
 }