Implement layer 1 gas fee flows

Author: OGPoyraz

packages/transaction-controller/src/TransactionController.ts

@@ -58,6 +58,7 @@ import { projectLogger as log } from './logger';
 import type {
   Events,
   DappSuggestedGasFees,
+  Layer1GasFeeFlow,
   SavedGasFees,
   SecurityProviderRequest,
   SendFlowHistoryEntry,
@@ -80,6 +81,7 @@ import {
   addInitialHistorySnapshot,
   updateTransactionHistory,
 } from './utils/history';
+import { getLayer1GasFeeFlow } from './utils/layer1-gas-fee-flow';
 import {
   getAndFormatTransactionsForNonceTracker,
   getNextNonce,
@@ -360,6 +362,8 @@ export class TransactionController extends BaseControllerV1<
     chainId?: string,
   ) => NonceTrackerTransaction[];
 
+  private readonly layer1GasFeeFlows: Layer1GasFeeFlow[];
+
   private readonly messagingSystem: TransactionControllerMessenger;
 
   readonly #incomingTransactionOptions: IncomingTransactionOptions;
@@ -578,6 +582,7 @@ export class TransactionController extends BaseControllerV1<
     });
 
     this.gasFeeFlows = this.#getGasFeeFlows();
+    this.layer1GasFeeFlows = this.#getLayer1GasFeeFlows();
 
     const gasFeePoller = new GasFeePoller({
       // Default gas fee polling is not yet supported by the clients
@@ -589,6 +594,7 @@ export class TransactionController extends BaseControllerV1<
         }),
       getGasFeeControllerEstimates: this.getGasFeeEstimates,
       getTransactions: () => this.state.transactions,
+      layer1GasFeeFlows: this.layer1GasFeeFlows,
       onStateChange: (listener) => {
         this.subscribe(listener);
       },
@@ -758,6 +764,7 @@ export class TransactionController extends BaseControllerV1<
       networkClientId,
     };
 
+    await this.#updateTransactionLayer1GasFee(ethQuery, transactionMeta);
     await this.updateGasProperties(transactionMeta);
 
     // Checks if a transaction already exists with a given actionId
@@ -1622,15 +1629,18 @@ export class TransactionController extends BaseControllerV1<
     ) as TransactionParams;
 
     const updatedTransaction = merge(transactionMeta, editableParams);
+    const ethQuery = this.#multichainTrackingHelper.getEthQuery({
+      networkClientId: transactionMeta.networkClientId,
+      chainId: transactionMeta.chainId,
+    });
     const { type } = await determineTransactionType(
       updatedTransaction.txParams,
-      this.#multichainTrackingHelper.getEthQuery({
-        networkClientId: transactionMeta.networkClientId,
-        chainId: transactionMeta.chainId,
-      }),
+      ethQuery,
     );
     updatedTransaction.type = type;
 
+    await this.#updateTransactionLayer1GasFee(ethQuery, updatedTransaction);
+
     this.updateTransaction(
       updatedTransaction,
       `Update Editable Params for ${txId}`,
@@ -2009,22 +2019,21 @@ export class TransactionController extends BaseControllerV1<
         ).configuration.type === NetworkClientType.Custom
       : this.getNetworkState().providerConfig.type === NetworkType.rpc;
 
+    const ethQuery = this.#multichainTrackingHelper.getEthQuery({
+      networkClientId,
+      chainId,
+    });
+
     await updateGas({
-      ethQuery: this.#multichainTrackingHelper.getEthQuery({
-        networkClientId,
-        chainId,
-      }),
+      ethQuery,
       chainId,
       isCustomNetwork,
       txMeta: transactionMeta,
     });
 
     await updateGasFees({
       eip1559: isEIP1559Compatible,
-      ethQuery: this.#multichainTrackingHelper.getEthQuery({
-        networkClientId,
-        chainId,
-      }),
+      ethQuery,
       gasFeeFlows: this.gasFeeFlows,
       getGasFeeEstimates: this.getGasFeeEstimates,
       getSavedGasFees: this.getSavedGasFees.bind(this),
@@ -3072,10 +3081,41 @@ export class TransactionController extends BaseControllerV1<
     );
   }
 
+  async #updateTransactionLayer1GasFee(
+    ethQuery: EthQuery,
+    transactionMeta: TransactionMeta,
+  ) {
+    const layer1GasFeeFlow = getLayer1GasFeeFlow(
+      transactionMeta,
+      this.layer1GasFeeFlows,
+    );
+    if (!layer1GasFeeFlow) {
+      log(
+        'Skipping update as no layer 1 gas fee flow found',
+        transactionMeta.id,
+      );
+      return;
+    }
+
+    try {
+      const { layer1Fee } = await layer1GasFeeFlow.getLayer1Fee({
+        ethQuery,
+        transactionMeta,
+      });
+      transactionMeta.layer1GasFee = layer1Fee;
+    } catch (error) {
+      log('Failed to get layer 1 gas fee', transactionMeta.id, error);
+    }
+  }
+
   #getGasFeeFlows(): GasFeeFlow[] {
     return [new LineaGasFeeFlow(), new DefaultGasFeeFlow()];
   }
 
+  #getLayer1GasFeeFlows(): Layer1GasFeeFlow[] {
+    return [];
+  }
+
   #updateTransactionInternal(
     transactionMeta: TransactionMeta,
     { note, skipHistory }: { note?: string; skipHistory?: boolean },

packages/transaction-controller/src/constants.ts

@@ -1,10 +1,14 @@
 export const CHAIN_IDS = {
   MAINNET: '0x1',
   GOERLI: '0x5',
+  BASE: '0x2105',
+  BASE_TESTNET: '0x14a33',
   BSC: '0x38',
   BSC_TESTNET: '0x61',
   OPTIMISM: '0xa',
   OPTIMISM_TESTNET: '0x1a4',
+  OPBNB: '0xcc',
+  OPBNB_TESTNET: '0x15eb',
   POLYGON: '0x89',
   POLYGON_TESTNET: '0x13881',
   AVALANCHE: '0xa86a',

packages/transaction-controller/src/helpers/GasFeePoller.test.ts

@@ -2,7 +2,11 @@ import type EthQuery from '@metamask/eth-query';
 import type { Hex } from '@metamask/utils';
 
 import { flushPromises } from '../../../../tests/helpers';
-import type { GasFeeFlowResponse } from '../types';
+import type {
+  GasFeeFlowResponse,
+  Layer1GasFeeFlow,
+  Layer1GasFeeFlowResponse,
+} from '../types';
 import {
   TransactionStatus,
   type GasFeeFlow,
@@ -38,6 +42,10 @@ const GAS_FEE_FLOW_RESPONSE_MOCK: GasFeeFlowResponse = {
   },
 };
 
+const LAYER_1_GAS_FEE_FLOW_RESPONSE_MOCK: Layer1GasFeeFlowResponse = {
+  layer1Fee: '0x123',
+};
+
 /**
  * Creates a mock GasFeeFlow.
  * @returns The mock GasFeeFlow.
@@ -49,9 +57,21 @@ function createGasFeeFlowMock(): jest.Mocked<GasFeeFlow> {
   };
 }
 
+/**
+ * Creates a mock Layer1GasFeeFlow.
+ * @returns The mock GasFeeFlow.
+ */
+function createLayer1GasFeeFlowMock(): jest.Mocked<Layer1GasFeeFlow> {
+  return {
+    matchesTransaction: jest.fn(),
+    getLayer1Fee: jest.fn(),
+  };
+}
+
 describe('GasFeePoller', () => {
   let constructorOptions: ConstructorParameters<typeof GasFeePoller>[0];
   let gasFeeFlowMock: jest.Mocked<GasFeeFlow>;
+  let layer1GasFeeFlowMock: jest.Mocked<Layer1GasFeeFlow>;
   let triggerOnStateChange: () => void;
   let getTransactionsMock: jest.MockedFunction<() => TransactionMeta[]>;
 
@@ -63,6 +83,12 @@ describe('GasFeePoller', () => {
     gasFeeFlowMock.matchesTransaction.mockReturnValue(true);
     gasFeeFlowMock.getGasFees.mockResolvedValue(GAS_FEE_FLOW_RESPONSE_MOCK);
 
+    layer1GasFeeFlowMock = createLayer1GasFeeFlowMock();
+    layer1GasFeeFlowMock.matchesTransaction.mockReturnValue(true);
+    layer1GasFeeFlowMock.getLayer1Fee.mockResolvedValue(
+      LAYER_1_GAS_FEE_FLOW_RESPONSE_MOCK,
+    );
+
     getTransactionsMock = jest.fn();
     getTransactionsMock.mockReturnValue([TRANSACTION_META_MOCK]);
 
@@ -71,6 +97,7 @@ describe('GasFeePoller', () => {
       getEthQuery: () => ({} as EthQuery),
       getGasFeeControllerEstimates: jest.fn(),
       getTransactions: getTransactionsMock,
+      layer1GasFeeFlows: [layer1GasFeeFlowMock],
       onStateChange: (listener: () => void) => {
         triggerOnStateChange = listener;
       },
@@ -88,11 +115,21 @@ describe('GasFeePoller', () => {
         triggerOnStateChange();
         await flushPromises();
 
-        expect(listener).toHaveBeenCalledTimes(1);
-        expect(listener).toHaveBeenCalledWith({
-          ...TRANSACTION_META_MOCK,
-          gasFeeEstimates: GAS_FEE_FLOW_RESPONSE_MOCK.estimates,
-        });
+        expect(listener).toHaveBeenCalledTimes(2);
+        expect(listener.mock.calls).toMatchObject([
+          [
+            {
+              ...TRANSACTION_META_MOCK,
+              gasFeeEstimates: GAS_FEE_FLOW_RESPONSE_MOCK.estimates,
+            },
+          ],
+          [
+            {
+              ...TRANSACTION_META_MOCK,
+              layer1GasFee: LAYER_1_GAS_FEE_FLOW_RESPONSE_MOCK.layer1Fee,
+            },
+          ],
+        ]);
       });
 
       it('calls gas fee flow', async () => {
@@ -113,6 +150,22 @@ describe('GasFeePoller', () => {
         });
       });
 
+      it('calls layer 1 gas fee flow', async () => {
+        const listener = jest.fn();
+
+        const gasFeePoller = new GasFeePoller(constructorOptions);
+        gasFeePoller.hub.on('transaction-updated', listener);
+
+        triggerOnStateChange();
+        await flushPromises();
+
+        expect(layer1GasFeeFlowMock.getLayer1Fee).toHaveBeenCalledTimes(1);
+        expect(layer1GasFeeFlowMock.getLayer1Fee).toHaveBeenCalledWith({
+          ethQuery: expect.any(Object),
+          transactionMeta: TRANSACTION_META_MOCK,
+        });
+      });
+
       it('creates polling timeout', async () => {
         new GasFeePoller(constructorOptions);
 
@@ -174,10 +227,11 @@ describe('GasFeePoller', () => {
         expect(listener).toHaveBeenCalledTimes(0);
       });
 
-      it('no gas fee flow matches transaction', async () => {
+      it('no fee flow matches transaction', async () => {
         const listener = jest.fn();
 
         gasFeeFlowMock.matchesTransaction.mockReturnValue(false);
+        layer1GasFeeFlowMock.matchesTransaction.mockReturnValue(false);
 
         const gasFeePoller = new GasFeePoller(constructorOptions);
         gasFeePoller.hub.on('transaction-updated', listener);
@@ -188,10 +242,13 @@ describe('GasFeePoller', () => {
         expect(listener).toHaveBeenCalledTimes(0);
       });
 
-      it('gas fee flow throws', async () => {
+      it('fee flows throws', async () => {
         const listener = jest.fn();
 
         gasFeeFlowMock.getGasFees.mockRejectedValue(new Error('TestError'));
+        layer1GasFeeFlowMock.getLayer1Fee.mockRejectedValue(
+          new Error('TestError'),
+        );
 
         const gasFeePoller = new GasFeePoller(constructorOptions);
         gasFeePoller.hub.on('transaction-updated', listener);