From f92e463a0f2b99c2501642e0504808738eb10955 Mon Sep 17 00:00:00 2001
From: Danica Shen <zhaodanica@gmail.com>
Date: Thu, 6 Apr 2023 12:50:52 +0100
Subject: [PATCH] fix: Pass correct optimism chain id to gas estimation
 (#18478)

---
 .../multi-layer-fee-message.js                      |  9 ++++++---
 ui/ducks/send/send.js                               |  2 +-
 ui/helpers/utils/optimism/fetchEstimatedL1Fee.js    | 13 +++++++++----
 .../utils/optimism/fetchEstimatedL1Fee.test.js      |  3 +--
 ui/pages/swaps/view-quote/view-quote.js             |  3 +--
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/ui/components/app/multilayer-fee-message/multi-layer-fee-message.js b/ui/components/app/multilayer-fee-message/multi-layer-fee-message.js
index 9ad2b7fb9..60eb8c3c3 100644
--- a/ui/components/app/multilayer-fee-message/multi-layer-fee-message.js
+++ b/ui/components/app/multilayer-fee-message/multi-layer-fee-message.js
@@ -44,7 +44,10 @@ export default function MultilayerFeeMessage({
   useEffect(() => {
     const getEstimatedL1Fee = async () => {
       try {
-        const result = await fetchEstimatedL1Fee(transaction);
+        const result = await fetchEstimatedL1Fee(
+          transaction.chainId,
+          transaction.txParams,
+        );
         setLayer1Total(result);
       } catch (e) {
         captureException(e);
@@ -75,7 +78,7 @@ export default function MultilayerFeeMessage({
   return (
     <div className="multi-layer-fee-message">
       <TransactionDetailItem
-        key="total-item"
+        key="total-item-gas-fee"
         detailTitle={t('gasFee')}
         detailTotal={layer1Total}
         detailText={feeTotalInFiat}
@@ -83,7 +86,7 @@ export default function MultilayerFeeMessage({
         flexWidthValues={plainStyle}
       />
       <TransactionDetailItem
-        key="total-item"
+        key="total-item-total"
         detailTitle={t('total')}
         detailTotal={totalInEth}
         detailText={totalInFiat}
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index a549f61f1..516769295 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -505,7 +505,7 @@ export const computeEstimatedGasLimit = createAsyncThunk(
 
     let gasTotalForLayer1;
     if (isMultiLayerFeeNetwork) {
-      gasTotalForLayer1 = await fetchEstimatedL1Fee({
+      gasTotalForLayer1 = await fetchEstimatedL1Fee(chainId, {
         txParams: {
           gasPrice: draftTransaction.gas.gasPrice,
           gas: draftTransaction.gas.gasLimit,
diff --git a/ui/helpers/utils/optimism/fetchEstimatedL1Fee.js b/ui/helpers/utils/optimism/fetchEstimatedL1Fee.js
index 0265200c2..eed9c0326 100644
--- a/ui/helpers/utils/optimism/fetchEstimatedL1Fee.js
+++ b/ui/helpers/utils/optimism/fetchEstimatedL1Fee.js
@@ -19,14 +19,20 @@ const OPTIMISM_GAS_PRICE_ORACLE_ABI = [
 const OPTIMISM_GAS_PRICE_ORACLE_ADDRESS =
   '0x420000000000000000000000000000000000000F';
 
-export default async function fetchEstimatedL1Fee(txMeta, ethersProvider) {
+export default async function fetchEstimatedL1Fee(
+  chainId,
+  txMeta,
+  ethersProvider,
+) {
+  const networkId = Number(chainId);
   const provider = global.ethereumProvider
-    ? new Web3Provider(global.ethereumProvider, 10)
+    ? new Web3Provider(global.ethereumProvider, networkId)
     : ethersProvider;
+
   if (process.env.IN_TEST) {
     provider.detectNetwork = async () => ({
       name: 'optimism',
-      chainId: 10,
+      chainId: networkId,
     });
   }
   const contract = new Contract(
@@ -36,7 +42,6 @@ export default async function fetchEstimatedL1Fee(txMeta, ethersProvider) {
   );
   const serializedTransaction =
     buildUnserializedTransaction(txMeta).serialize();
-
   const result = await contract.getL1Fee(serializedTransaction);
   return result?.toHexString();
 }
diff --git a/ui/helpers/utils/optimism/fetchEstimatedL1Fee.test.js b/ui/helpers/utils/optimism/fetchEstimatedL1Fee.test.js
index d8eb26724..c743a4bc7 100644
--- a/ui/helpers/utils/optimism/fetchEstimatedL1Fee.test.js
+++ b/ui/helpers/utils/optimism/fetchEstimatedL1Fee.test.js
@@ -33,7 +33,7 @@ describe('fetchEstimatedL1Fee', () => {
         result: `0x0000000000000000000000000000000000000000000000000000${expectedGasFeeResult}`,
       });
 
-    const gasFee = await fetchEstimatedL1Fee({
+    const gasFee = await fetchEstimatedL1Fee('10', {
       txParams: {
         gasPrice: '0xf4240',
         gas: '0xcf08',
@@ -43,7 +43,6 @@ describe('fetchEstimatedL1Fee', () => {
         data: null,
         type: '0x0',
       },
-      chainId: '10',
     });
     expect(gasFee).toStrictEqual(`0x${expectedGasFeeResult}`);
   });
diff --git a/ui/pages/swaps/view-quote/view-quote.js b/ui/pages/swaps/view-quote/view-quote.js
index 2b33e12ea..04cab7518 100644
--- a/ui/pages/swaps/view-quote/view-quote.js
+++ b/ui/pages/swaps/view-quote/view-quote.js
@@ -896,13 +896,12 @@ export default function ViewQuote() {
       try {
         let l1ApprovalFeeTotal = '0x0';
         if (approveTxParams) {
-          l1ApprovalFeeTotal = await fetchEstimatedL1Fee({
+          l1ApprovalFeeTotal = await fetchEstimatedL1Fee(chainId, {
             txParams: {
               ...approveTxParams,
               gasPrice: addHexPrefix(approveTxParams.gasPrice),
               value: '0x0', // For approval txs we need to use "0x0" here.
             },
-            chainId,
           });
           setMultiLayerL1ApprovalFeeTotal(l1ApprovalFeeTotal);
         }