Replace eth-optimism/contracts package with local snippet of gas price ABI and address (#16891)

package.json

@@ -191,9 +191,10 @@
     "@babel/runtime": "^7.5.5",
     "@download/blockies": "^1.0.3",
     "@ensdomains/content-hash": "^2.5.6",
-    "@eth-optimism/contracts": "0.0.0-2021919175625",
     "@ethereumjs/common": "^2.3.1",
     "@ethereumjs/tx": "^3.2.1",
+    "@ethersproject/contracts": "^5.7.0",
+    "@ethersproject/providers": "^5.7.2",
     "@formatjs/intl-relativetimeformat": "^5.2.6",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@keystonehq/bc-ur-registry-eth": "^0.12.1",

ui/components/app/multilayer-fee-message/multi-layer-fee-message.js

@@ -47,7 +47,7 @@ export default function MultilayerFeeMessage({
   useEffect(() => {
     const getEstimatedL1Fee = async () => {
       try {
-        const result = await fetchEstimatedL1Fee(global.eth, transaction);
+        const result = await fetchEstimatedL1Fee(transaction);
         setLayer1Total(result);
       } catch (e) {
         captureException(e);

ui/ducks/send/send.js

@@ -516,7 +516,7 @@ export const computeEstimatedGasLimit = createAsyncThunk(
 
     let gasTotalForLayer1;
     if (isMultiLayerFeeNetwork) {
-      gasTotalForLayer1 = await fetchEstimatedL1Fee(global.eth, {
+      gasTotalForLayer1 = await fetchEstimatedL1Fee({
         txParams: {
           gasPrice: draftTransaction.gas.gasPrice,
           gas: draftTransaction.gas.gasLimit,

ui/helpers/utils/optimism/fetchEstimatedL1Fee.js

@@ -1,24 +1,40 @@
-import * as ethers from 'ethers';
-import { getContractFactory } from '@eth-optimism/contracts/dist/contract-defs';
-import { predeploys } from '@eth-optimism/contracts/dist/predeploys';
+import { Contract } from '@ethersproject/contracts';
+import { Web3Provider } from '@ethersproject/providers';
 import buildUnserializedTransaction from './buildUnserializedTransaction';
 
-// The code in this file is largely drawn from https://community.optimism.io/docs/developers/l2/new-fees.html#for-frontend-and-wallet-developers
+// Snippet of the ABI that we need
+// Should we need more of it at some point, the full ABI can be found here:
+// https://github.com/ethereum-optimism/optimism/blob/develop/gas-oracle/abis/OVM_GasPriceOracle.json
+const OPTIMISM_GAS_PRICE_ORACLE_ABI = [
+  {
+    inputs: [{ internalType: 'bytes', name: '_data', type: 'bytes' }],
+    name: 'getL1Fee',
+    outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+];
 
-function buildOVMGasPriceOracleContract(eth) {
-  const OVMGasPriceOracle = getContractFactory('OVM_GasPriceOracle').attach(
-    predeploys.OVM_GasPriceOracle,
-  );
-  const abi = JSON.parse(
-    OVMGasPriceOracle.interface.format(ethers.utils.FormatTypes.json),
-  );
-  return eth.contract(abi).at(OVMGasPriceOracle.address);
-}
+// BlockExplorer link: https://optimistic.etherscan.io/address/0x420000000000000000000000000000000000000f#code
+const OPTIMISM_GAS_PRICE_ORACLE_ADDRESS =
+  '0x420000000000000000000000000000000000000F';
 
-export default async function fetchEstimatedL1Fee(eth, txMeta) {
-  const contract = buildOVMGasPriceOracleContract(eth);
+export default async function fetchEstimatedL1Fee(txMeta) {
+  const provider = new Web3Provider(global.ethereumProvider, 10);
+  if (process.env.IN_TEST) {
+    provider.detectNetwork = async () => ({
+      name: 'optimism',
+      chainId: 10,
+    });
+  }
+  const contract = new Contract(
+    OPTIMISM_GAS_PRICE_ORACLE_ADDRESS,
+    OPTIMISM_GAS_PRICE_ORACLE_ABI,
+    provider,
+  );
   const serializedTransaction =
     buildUnserializedTransaction(txMeta).serialize();
+
   const result = await contract.getL1Fee(serializedTransaction);
-  return result?.[0]?.toString(16);
+  return result?.toHexString();
 }

ui/helpers/utils/optimism/fetchEstimatedL1Fee.test.js

@@ -0,0 +1,50 @@
+import { HttpProvider } from 'ethjs';
+import nock from 'nock';
+import fetchEstimatedL1Fee from './fetchEstimatedL1Fee';
+
+describe('fetchEstimatedL1Fee', () => {
+  beforeAll(() => {
+    global.ethereumProvider = new HttpProvider(
+      'https://optimism-mainnet.public.blastapi.io',
+    );
+    nock.disableNetConnect();
+  });
+
+  it('returns an expected gasFee', async () => {
+    const expectedGasFeeResult = '377b09ef6660';
+    nock('https://optimism-mainnet.public.blastapi.io:443', {
+      encodedQueryParams: true,
+    })
+      .post('/', {
+        method: 'eth_call',
+        params: [
+          {
+            to: '0x420000000000000000000000000000000000000f',
+            data: '0x49948e0e00000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000023e280830f424082cf0894e7d522230eff653bb0a9b4385f0be0815420dd9880808080800000000000000000000000000000000000000000000000000000000000',
+          },
+          'latest',
+        ],
+        id: 1,
+        jsonrpc: '2.0',
+      })
+      .reply(200, {
+        jsonrpc: '2.0',
+        id: 1,
+        result: `0x0000000000000000000000000000000000000000000000000000${expectedGasFeeResult}`,
+      });
+
+    const gasFee = await fetchEstimatedL1Fee({
+      txParams: {
+        gasPrice: '0xf4240',
+        gas: '0xcf08',
+        to: '0xe7d522230eff653bb0a9b4385f0be0815420dd98',
+        value: '0x0',
+        from: '0x806627172af48bd5b0765d3449a7def80d6576ff',
+        data: null,
+        type: '0x0',
+      },
+      chainId: '10',
+    });
+    expect(gasFee).toStrictEqual(`0x${expectedGasFeeResult}`);
+  });
+});

ui/pages/swaps/view-quote/view-quote.js

@@ -896,13 +896,13 @@ export default function ViewQuote() {
     }
     const getEstimatedL1Fee = async () => {
       try {
-        const l1TradeFeeTotal = await fetchEstimatedL1Fee(global.eth, {
+        const l1TradeFeeTotal = await fetchEstimatedL1Fee({
           txParams: unsignedTransaction,
           chainId,
         });
         let l1ApprovalFeeTotal = '0x0';
         if (approveTxParams) {
-          l1ApprovalFeeTotal = await fetchEstimatedL1Fee(global.eth, {
+          l1ApprovalFeeTotal = await fetchEstimatedL1Fee({
             txParams: {
               ...approveTxParams,
               gasPrice: addHexPrefix(approveTxParams.gasPrice),