EIP-1559 - Implement speedup and cancel buttons (#11701)

ui/components/app/transaction-list-item/transaction-list-item.component.js

@@ -34,14 +34,18 @@ export default function TransactionListItem({
     initialTransaction: { id },
     primaryTransaction: { err, status },
   } = transactionGroup;
-  const [
-    cancelEnabled,
-    { cancelTransaction, showCancelEditGasPopover, closeCancelEditGasPopover },
-  ] = useCancelTransaction(transactionGroup);
+  const {
+    hasEnoughCancelGas,
+    cancelTransaction,
+    showCancelEditGasPopover,
+    closeCancelEditGasPopover,
+    customCancelGasSettings,
+  } = useCancelTransaction(transactionGroup);
   const {
     retryTransaction,
     showRetryEditGasPopover,
     closeRetryEditGasPopover,
+    customRetryGasSettings,
   } = useRetryTransaction(transactionGroup);
   const shouldShowSpeedUp = useShouldShowSpeedUp(
     transactionGroup,
@@ -92,7 +96,7 @@ export default function TransactionListItem({
         onClick={cancelTransaction}
         rounded
         className="transaction-list-item__header-button"
-        disabled={!cancelEnabled}
+        disabled={!hasEnoughCancelGas}
       >
         {t('cancel')}
       </Button>
@@ -101,7 +105,7 @@ export default function TransactionListItem({
       return null;
     }
 
-    return cancelEnabled ? (
+    return hasEnoughCancelGas ? (
       btn
     ) : (
       <Tooltip title={t('notEnoughGas')} position="bottom">
@@ -112,7 +116,7 @@ export default function TransactionListItem({
     isPending,
     t,
     isUnapproved,
-    cancelEnabled,
+    hasEnoughCancelGas,
     cancelTransaction,
     hasCancelled,
   ]);
@@ -207,21 +211,33 @@ export default function TransactionListItem({
           isEarliestNonce={isEarliestNonce}
           onCancel={cancelTransaction}
           showCancel={isPending && !hasCancelled}
-          cancelDisabled={!cancelEnabled}
+          cancelDisabled={!hasEnoughCancelGas}
         />
       )}
       {showRetryEditGasPopover && (
         <EditGasPopover
           onClose={closeRetryEditGasPopover}
           mode={EDIT_GAS_MODES.SPEED_UP}
-          transaction={transactionGroup.primaryTransaction}
+          transaction={{
+            ...transactionGroup.primaryTransaction,
+            txParams: {
+              ...transactionGroup.primaryTransaction?.txParams,
+              ...customRetryGasSettings,
+            },
+          }}
         />
       )}
       {showCancelEditGasPopover && (
         <EditGasPopover
           onClose={closeCancelEditGasPopover}
           mode={EDIT_GAS_MODES.CANCEL}
-          transaction={transactionGroup.primaryTransaction}
+          transaction={{
+            ...transactionGroup.primaryTransaction,
+            txParams: {
+              ...transactionGroup.primaryTransaction?.txParams,
+              ...customCancelGasSettings,
+            },
+          }}
         />
       )}
     </>

ui/hooks/useCancelTransaction.js

@@ -20,7 +20,7 @@ import { useIncrementedGasFees } from './useIncrementedGasFees';
 export function useCancelTransaction(transactionGroup) {
   const { primaryTransaction } = transactionGroup;
 
-  const customGasSettings = useIncrementedGasFees(transactionGroup);
+  const customCancelGasSettings = useIncrementedGasFees(transactionGroup);
 
   const selectedAccount = useSelector(getSelectedAccount);
   const conversionRate = useSelector(getConversionRate);
@@ -40,13 +40,16 @@ export function useCancelTransaction(transactionGroup) {
     primaryTransaction.txParams &&
     isBalanceSufficient({
       amount: '0x0',
-      gasTotal: getMaximumGasTotalInHexWei(customGasSettings),
+      gasTotal: getMaximumGasTotalInHexWei(customCancelGasSettings),
       balance: selectedAccount.balance,
       conversionRate,
     });
 
-  return [
+  return {
     hasEnoughCancelGas,
-    { cancelTransaction, showCancelEditGasPopover, closeCancelEditGasPopover },
-  ];
+    customCancelGasSettings,
+    cancelTransaction,
+    showCancelEditGasPopover,
+    closeCancelEditGasPopover,
+  };
 }

ui/hooks/useCancelTransaction.test.js

@@ -49,13 +49,13 @@ describe('useCancelTransaction', function () {
         const { result } = renderHook(() =>
           useCancelTransaction(transactionGroup),
         );
-        expect(result.current[0]).toStrictEqual(false);
+        expect(result.current.hasEnoughCancelGas).toStrictEqual(false);
       });
       it(`should return a function that opens the gas sidebar onsubmit kicks off cancellation for id ${transactionId}`, function () {
         const { result } = renderHook(() =>
           useCancelTransaction(transactionGroup),
         );
-        expect(typeof result.current[1].cancelTransaction).toStrictEqual(
+        expect(typeof result.current.cancelTransaction).toStrictEqual(
           'function',
         );
       });
@@ -91,13 +91,13 @@ describe('useCancelTransaction', function () {
         const { result } = renderHook(() =>
           useCancelTransaction(transactionGroup),
         );
-        expect(result.current[0]).toStrictEqual(true);
+        expect(result.current.hasEnoughCancelGas).toStrictEqual(true);
       });
       it(`should return a function that opens the gas popover onsubmit kicks off cancellation for id ${transactionId}`, function () {
         const { result } = renderHook(() =>
           useCancelTransaction(transactionGroup),
         );
-        expect(typeof result.current[1].cancelTransaction).toStrictEqual(
+        expect(typeof result.current.cancelTransaction).toStrictEqual(
           'function',
         );
       });

ui/hooks/useGasFeeInputs.js

@@ -28,11 +28,7 @@ import {
   addHexes,
 } from '../helpers/utils/conversions.util';
 import { GAS_FORM_ERRORS } from '../helpers/constants/gas';
-import {
-  getShouldShowFiat,
-  getSelectedAccount,
-  txDataSelector,
-} from '../selectors';
+import { getShouldShowFiat, getSelectedAccount } from '../selectors';
 import { useCurrencyDisplay } from './useCurrencyDisplay';
 import { useGasFeeEstimates } from './useGasFeeEstimates';
 import { useUserPreferencedCurrency } from './useUserPreferencedCurrency';
@@ -175,7 +171,6 @@ export function useGasFeeInputs(
   editGasMode,
 ) {
   const { balance: ethBalance } = useSelector(getSelectedAccount);
-  const txData = useSelector(txDataSelector);
   const networkSupportsEIP1559 = useSelector(isEIP1559Network);
   // We need to know whether to show fiat conversions or not, so that we can
   // default our fiat values to empty strings if showing fiat is not wanted or
@@ -430,7 +425,7 @@ export function useGasFeeInputs(
 
   const minimumTxCostInHexWei = addHexes(
     minimumCostInHexWei,
-    txData?.txParams?.value,
+    transaction?.txParams?.value || '0x0',
   );
 
   const balanceError = conversionGreaterThan(

ui/hooks/useIncrementedGasFees.js

@@ -44,6 +44,7 @@ export function useIncrementedGasFees(transactionGroup) {
     // txParams object in this hook.
     const temporaryGasSettings = {
       gasLimit: primaryTransaction.txParams?.gas,
+      gas: primaryTransaction.txParams?.gas,
     };
     if (isEIP1559Transaction(primaryTransaction)) {
       const transactionMaxFeePerGas = primaryTransaction.txParams?.maxFeePerGas;

ui/hooks/useRetryTransaction.js

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useMetricEvent } from './useMetricEvent';
+import { useIncrementedGasFees } from './useIncrementedGasFees';
 
 /**
  * @typedef {Object} RetryTransactionReturnValue
@@ -15,7 +16,9 @@ import { useMetricEvent } from './useMetricEvent';
  * @param {Object} transactionGroup - the transaction group
  * @return {RetryTransactionReturnValue}
  */
-export function useRetryTransaction() {
+
+export function useRetryTransaction(transactionGroup) {
+  const customRetryGasSettings = useIncrementedGasFees(transactionGroup);
   const trackMetricsEvent = useMetricEvent({
     eventOpts: {
       category: 'Navigation',
@@ -40,5 +43,6 @@ export function useRetryTransaction() {
     retryTransaction,
     showRetryEditGasPopover,
     closeRetryEditGasPopover,
+    customRetryGasSettings,
   };
 }