feat: save custom gas settings

Author: pedronfigueiredo

app/components/Views/confirmations/components/modals/advanced-eip1559-modal/advanced-eip1559-modal.test.tsx

@@ -7,7 +7,12 @@ import { simpleSendTransaction } from '../../../__mocks__/controllers/transactio
 import { GasModalType } from '../../../constants/gas';
 import { AdvancedEIP1559Modal } from './advanced-eip1559-modal';
 
+const mockPersistGasFeePreference = jest.fn();
+
 jest.mock('../../../../../../util/transaction-controller');
+jest.mock('../../../hooks/gas/usePersistGasFeePreference', () => ({
+  usePersistGasFeePreference: jest.fn(() => mockPersistGasFeePreference),
+}));
 jest.mock('../../../hooks/transactions/useTransactionMetadataRequest', () => {
   const { simpleSendTransaction: actualSimpleSendTransaction } =
     jest.requireActual(
@@ -73,6 +78,14 @@ describe('AdvancedEIP1559Modal', () => {
         userFeeLevel: 'custom',
       }),
     );
+    expect(mockPersistGasFeePreference).toHaveBeenCalledWith(
+      simpleSendTransaction,
+      {
+        userFeeLevel: 'custom',
+        maxBaseFee: simpleSendTransaction.txParams.maxFeePerGas,
+        priorityFee: simpleSendTransaction.txParams.maxPriorityFeePerGas,
+      },
+    );
     expect(mockHandleCloseModals).toHaveBeenCalledTimes(1);
   });
 
@@ -108,6 +121,14 @@ describe('AdvancedEIP1559Modal', () => {
         userFeeLevel: 'custom',
       }),
     );
+    expect(mockPersistGasFeePreference).toHaveBeenCalledWith(
+      simpleSendTransaction,
+      {
+        userFeeLevel: 'custom',
+        maxBaseFee: '0x174876e800',
+        priorityFee: '0x12a05f200',
+      },
+    );
   });
 
   it('calls navigateToEstimatesModal when the back button is pressed', () => {

app/components/Views/confirmations/components/modals/advanced-eip1559-modal/advanced-eip1559-modal.tsx

@@ -23,6 +23,7 @@ import { GasInput } from '../../../components/gas/gas-input';
 import { MaxBaseFeeInput } from '../../../components/gas/max-base-fee-input';
 import { PriorityFeeInput } from '../../../components/gas/priority-fee-input';
 import styleSheet from './advanced-eip1559-modal.styles';
+import { usePersistGasFeePreference } from '../../../hooks/gas/usePersistGasFeePreference';
 
 export const AdvancedEIP1559Modal = ({
   setActiveModal,
@@ -33,6 +34,7 @@ export const AdvancedEIP1559Modal = ({
 }) => {
   const { styles } = useStyles(styleSheet, {});
   const transactionMeta = useTransactionMetadataRequest() as TransactionMeta;
+  const persistGasFeePreference = usePersistGasFeePreference();
 
   const { gas, maxFeePerGas, maxPriorityFeePerGas } =
     transactionMeta?.txParams || {};
@@ -61,8 +63,18 @@ export const AdvancedEIP1559Modal = ({
       userFeeLevel: UserFeeLevel.CUSTOM,
       ...pickBy(gasParams, Boolean),
     });
+    persistGasFeePreference(transactionMeta, {
+      userFeeLevel: UserFeeLevel.CUSTOM,
+      ...pickBy(
+        {
+          maxBaseFee: gasParams.maxFeePerGas,
+          priorityFee: gasParams.maxPriorityFeePerGas,
+        },
+        Boolean,
+      ),
+    });
     handleCloseModals();
-  }, [transactionMeta.id, gasParams, handleCloseModals]);
+  }, [transactionMeta, gasParams, persistGasFeePreference, handleCloseModals]);
 
   const navigateToEstimatesModal = useCallback(() => {
     setActiveModal(GasModalType.ESTIMATES);

app/components/Views/confirmations/components/modals/advanced-gas-price-modal/advanced-gas-price-modal.test.tsx

@@ -6,7 +6,12 @@ import { simpleSendTransaction } from '../../../__mocks__/controllers/transactio
 import { GasModalType } from '../../../constants/gas';
 import { AdvancedGasPriceModal } from './advanced-gas-price-modal';
 
+const mockPersistGasFeePreference = jest.fn();
+
 jest.mock('../../../../../../util/transaction-controller');
+jest.mock('../../../hooks/gas/usePersistGasFeePreference', () => ({
+  usePersistGasFeePreference: jest.fn(() => mockPersistGasFeePreference),
+}));
 jest.mock('../../../hooks/transactions/useTransactionMetadataRequest', () => {
   const { simpleSendTransaction: actualSimpleSendTransaction } =
     jest.requireActual(
@@ -60,6 +65,12 @@ describe('AdvancedGasPriceModal', () => {
         userFeeLevel: 'custom',
       }),
     );
+    expect(mockPersistGasFeePreference).toHaveBeenCalledWith(
+      simpleSendTransaction,
+      {
+        userFeeLevel: 'custom',
+      },
+    );
     expect(mockHandleCloseModals).toHaveBeenCalledTimes(1);
   });
 
@@ -91,6 +102,13 @@ describe('AdvancedGasPriceModal', () => {
         userFeeLevel: 'custom',
       }),
     );
+    expect(mockPersistGasFeePreference).toHaveBeenCalledWith(
+      simpleSendTransaction,
+      {
+        userFeeLevel: 'custom',
+        gasPrice: '0x37e11d600',
+      },
+    );
   });
 
   it('calls navigateToEstimatesModal when the back button is pressed', () => {

app/components/Views/confirmations/components/modals/advanced-gas-price-modal/advanced-gas-price-modal.tsx

@@ -2,7 +2,10 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { View } from 'react-native';
 import { Hex } from '@metamask/utils';
 import { pickBy } from 'lodash';
-import { TransactionMeta } from '@metamask/transaction-controller';
+import {
+  TransactionMeta,
+  UserFeeLevel,
+} from '@metamask/transaction-controller';
 
 import { useStyles } from '../../../../../../component-library/hooks';
 import {
@@ -19,6 +22,7 @@ import { GasPriceInput } from '../../../components/gas/gas-price-input';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import BottomModal from '../../UI/bottom-modal';
 import styleSheet from './advanced-gas-price-modal.styles';
+import { usePersistGasFeePreference } from '../../../hooks/gas/usePersistGasFeePreference';
 
 export const AdvancedGasPriceModal = ({
   setActiveModal,
@@ -29,6 +33,7 @@ export const AdvancedGasPriceModal = ({
 }) => {
   const { styles } = useStyles(styleSheet, {});
   const transactionMeta = useTransactionMetadataRequest() as TransactionMeta;
+  const persistGasFeePreference = usePersistGasFeePreference();
 
   const { gas, gasPrice } = transactionMeta?.txParams || {};
 
@@ -48,11 +53,15 @@ export const AdvancedGasPriceModal = ({
 
   const handleSaveClick = useCallback(() => {
     updateTransactionGasFees(transactionMeta.id, {
-      userFeeLevel: 'custom',
+      userFeeLevel: UserFeeLevel.CUSTOM,
       ...pickBy(gasParams, Boolean),
     });
+    persistGasFeePreference(transactionMeta, {
+      userFeeLevel: UserFeeLevel.CUSTOM,
+      ...pickBy({ gasPrice: gasParams.gasPrice }, Boolean),
+    });
     handleCloseModals();
-  }, [transactionMeta.id, gasParams, handleCloseModals]);
+  }, [transactionMeta, gasParams, persistGasFeePreference, handleCloseModals]);
 
   const navigateToEstimatesModal = useCallback(() => {
     setActiveModal(GasModalType.ESTIMATES);

app/components/Views/confirmations/hooks/gas/useGasFeeEstimateLevelOptions.test.ts

@@ -14,13 +14,18 @@ import { updateTransactionGasFees } from '../../../../../util/transaction-contro
 import { useGasFeeEstimateLevelOptions } from './useGasFeeEstimateLevelOptions';
 import '../../utils/time';
 
+const mockPersistGasFeePreference = jest.fn();
+
 jest.mock('../../../../../util/transaction-controller');
 jest.mock('../../utils/time', () => ({
   toHumanEstimatedTimeRange: jest.fn().mockReturnValue('~1 min'),
 }));
 jest.mock('../transactions/useTransactionMetadataRequest');
 jest.mock('./useFeeCalculations');
 jest.mock('./useGasFeeEstimates');
+jest.mock('./usePersistGasFeePreference', () => ({
+  usePersistGasFeePreference: jest.fn(() => mockPersistGasFeePreference),
+}));
 
 describe('useGasFeeEstimateLevelOptions', () => {
   const mockUseTransactionMetadataRequest = jest.mocked(
@@ -425,6 +430,12 @@ describe('useGasFeeEstimateLevelOptions', () => {
     expect(mockUpdateTransactionGasFees).toHaveBeenCalledWith('test-id', {
       userFeeLevel: 'low',
     });
+    expect(mockPersistGasFeePreference).toHaveBeenCalledWith(
+      transactionWithLegacyEstimates,
+      {
+        userFeeLevel: 'low',
+      },
+    );
     expect(mockHandleCloseModals).toHaveBeenCalled();
   });
 
@@ -499,6 +510,12 @@ describe('useGasFeeEstimateLevelOptions', () => {
     expect(mockUpdateTransactionGasFees).toHaveBeenCalledWith('test-id', {
       userFeeLevel: 'high',
     });
+    expect(mockPersistGasFeePreference).toHaveBeenCalledWith(
+      transactionWithFeeMarketEstimates,
+      {
+        userFeeLevel: 'high',
+      },
+    );
     expect(mockHandleCloseModals).toHaveBeenCalled();
   });
 

app/components/Views/confirmations/hooks/gas/useGasFeeEstimateLevelOptions.ts

@@ -15,6 +15,7 @@ import { useFeeCalculations } from './useFeeCalculations';
 import { updateTransactionGasFees } from '../../../../../util/transaction-controller';
 import { type GasOption } from '../../types/gas';
 import { EMPTY_VALUE_STRING } from '../../constants/gas';
+import { usePersistGasFeePreference } from './usePersistGasFeePreference';
 
 const HEX_ZERO = '0x0';
 
@@ -31,6 +32,7 @@ export const useGasFeeEstimateLevelOptions = ({
     gasFeeEstimates: GasFeeEstimates;
   };
   const { gasFeeEstimates, id, userFeeLevel } = transactionMeta;
+  const persistGasFeePreference = usePersistGasFeePreference();
 
   const transactionGasFeeEstimates =
     gasFeeEstimates as TransactionGasFeeEstimates;
@@ -48,9 +50,10 @@ export const useGasFeeEstimateLevelOptions = ({
       updateTransactionGasFees(id, {
         userFeeLevel: level,
       });
+      persistGasFeePreference(transactionMeta, { userFeeLevel: level });
       handleCloseModals();
     },
-    [id, handleCloseModals],
+    [id, transactionMeta, persistGasFeePreference, handleCloseModals],
   );
 
   const options: GasOption[] = [];

app/components/Views/confirmations/hooks/gas/useGasPriceEstimateOption.test.ts

@@ -14,10 +14,15 @@ import { useGasFeeEstimates } from './useGasFeeEstimates';
 import { updateTransactionGasFees } from '../../../../../util/transaction-controller';
 import { useGasPriceEstimateOption } from './useGasPriceEstimateOption';
 
+const mockPersistGasFeePreference = jest.fn();
+
 jest.mock('../../../../../util/transaction-controller');
 jest.mock('../transactions/useTransactionMetadataRequest');
 jest.mock('./useFeeCalculations');
 jest.mock('./useGasFeeEstimates');
+jest.mock('./usePersistGasFeePreference', () => ({
+  usePersistGasFeePreference: jest.fn(() => mockPersistGasFeePreference),
+}));
 
 describe('useGasPriceEstimateOption', () => {
   const mockUseTransactionMetadataRequest = jest.mocked(
@@ -296,6 +301,12 @@ describe('useGasPriceEstimateOption', () => {
       userFeeLevel: 'medium',
       gasPrice: '0x1',
     });
+    expect(mockPersistGasFeePreference).toHaveBeenCalledWith(
+      transactionWithGasPriceEstimates,
+      {
+        userFeeLevel: 'medium',
+      },
+    );
     expect(mockHandleCloseModals).toHaveBeenCalled();
   });
 
@@ -349,6 +360,12 @@ describe('useGasPriceEstimateOption', () => {
       maxFeePerGas: '0x1',
       maxPriorityFeePerGas: '0x1',
     });
+    expect(mockPersistGasFeePreference).toHaveBeenCalledWith(
+      transactionWithGasPriceEstimates,
+      {
+        userFeeLevel: 'medium',
+      },
+    );
     expect(mockHandleCloseModals).toHaveBeenCalled();
   });
 });

app/components/Views/confirmations/hooks/gas/useGasPriceEstimateOption.ts

@@ -13,6 +13,7 @@ import { useGasFeeEstimates } from './useGasFeeEstimates';
 import { useFeeCalculations } from './useFeeCalculations';
 import { type GasOption } from '../../types/gas';
 import { EMPTY_VALUE_STRING } from '../../constants/gas';
+import { usePersistGasFeePreference } from './usePersistGasFeePreference';
 
 const HEX_ZERO = '0x0';
 
@@ -23,6 +24,7 @@ export const useGasPriceEstimateOption = ({
 }): GasOption[] => {
   const transactionMeta = useTransactionMetadataRequest() as TransactionMeta;
   const { calculateGasEstimate } = useFeeCalculations(transactionMeta);
+  const persistGasFeePreference = usePersistGasFeePreference();
 
   const {
     gasFeeEstimates,
@@ -71,11 +73,14 @@ export const useGasPriceEstimateOption = ({
       userFeeLevel: 'medium',
       ...gasPropertiesToUpdate,
     });
+    persistGasFeePreference(transactionMeta, { userFeeLevel: 'medium' });
     handleCloseModals();
   }, [
     id,
+    transactionMeta,
     transactionGasFeeEstimates,
     transactionEnvelopeType,
+    persistGasFeePreference,
     handleCloseModals,
   ]);
 

app/components/Views/confirmations/hooks/gas/usePersistGasFeePreference.test.ts

@@ -0,0 +1,57 @@
+import { renderHook } from '@testing-library/react-hooks';
+import type { TransactionMeta } from '@metamask/transaction-controller';
+
+import { usePersistGasFeePreference } from './usePersistGasFeePreference';
+import Engine from '../../../../../core/Engine';
+
+const mockSetAdvancedGasFee = jest.mocked(
+  Engine.context.PreferencesController.setAdvancedGasFee,
+);
+
+describe('usePersistGasFeePreference', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('persists gas fee preferences for the transaction account and chain', () => {
+    const transactionMeta = {
+      chainId: '0x1',
+      txParams: {
+        from: '0x123',
+      },
+    } as unknown as TransactionMeta;
+
+    const { result } = renderHook(() => usePersistGasFeePreference());
+
+    result.current(transactionMeta, {
+      userFeeLevel: 'custom',
+      maxBaseFee: '0x1',
+      priorityFee: '0x2',
+    });
+
+    expect(mockSetAdvancedGasFee).toHaveBeenCalledWith({
+      account: '0x123',
+      chainId: '0x1',
+      gasFeePreferences: {
+        userFeeLevel: 'custom',
+        maxBaseFee: '0x1',
+        priorityFee: '0x2',
+      },
+    });
+  });
+
+  it('does not persist without an account', () => {
+    const transactionMeta = {
+      chainId: '0x1',
+      txParams: {},
+    } as unknown as TransactionMeta;
+
+    const { result } = renderHook(() => usePersistGasFeePreference());
+
+    result.current(transactionMeta, {
+      userFeeLevel: 'medium',
+    });
+
+    expect(mockSetAdvancedGasFee).not.toHaveBeenCalled();
+  });
+});

app/components/Views/confirmations/hooks/gas/usePersistGasFeePreference.ts

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import type { TransactionMeta } from '@metamask/transaction-controller';
+import type { Hex } from '@metamask/utils';
+
+import Engine from '../../../../../core/Engine';
+import type { AdvancedGasFeePreferences } from '../../../../../core/Engine/controllers/preferences-controller-types';
+
+export function usePersistGasFeePreference() {
+  return useCallback(
+    (
+      transactionMeta: TransactionMeta | undefined,
+      gasFeePreferences: AdvancedGasFeePreferences,
+    ) => {
+      const account = transactionMeta?.txParams?.from as Hex | undefined;
+      const chainId = transactionMeta?.chainId;
+
+      if (!account || !chainId) {
+        return;
+      }
+
+      Engine.context.PreferencesController.setAdvancedGasFee({
+        account,
+        chainId,
+        gasFeePreferences,
+      });
+    },
+    [],
+  );
+}