Cleanup

package.json

@@ -27,8 +27,8 @@
     "start": "rm -r .next && next build && next start",
     "lint": "eslint 'src/**/*.{js,ts,tsx}'",
     "prettier:format": "yarn prettier './**/*.{js,json,md,ts,tsx,yml}' --write && yarn run lint --fix",
-    "e2e:open": "env-cmd -f .e2e.env yarn synpress open --configFile synpress.config.ts",
-    "e2e:run": "env-cmd -f .e2e.env yarn synpress run --configFile synpress.config.ts --browser chrome"
+    "e2e:open": "NODE_ENV=test env-cmd -f .e2e.env yarn synpress open --configFile synpress.config.ts",
+    "e2e:run": "NODE_ENV=test env-cmd -f .e2e.env yarn synpress run --configFile synpress.config.ts --browser chrome"
   },
   "browserslist": [
     ">0.2%",

src/app/global.css

@@ -270,3 +270,7 @@ ul {
   padding-left: 0;
   margin-top: 0;
 }
+
+.redeem-button-container {
+  text-align: center;
+}

src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { useState } from 'react';
 import { ChainId, supportedL2Networks } from '@/utils/network';
 import { L2ToL1MessageData } from '@/types';
 import {
@@ -47,6 +48,7 @@ type Props = {
 function L2ToL1MsgsDisplay({ l2ToL1Messages }: Props) {
   const { chain } = useNetwork();
   const { data: signer = null } = useSigner({ chainId: chain?.id });
+  const [redeeming, setIsRedeeming] = useState(false);
 
   const renderMessage = (l2ToL1Message: L2ToL1MessageDataLike) => {
     switch (l2ToL1Message.status) {
@@ -78,31 +80,40 @@ function L2ToL1MsgsDisplay({ l2ToL1Messages }: Props) {
                 {`To redeem, connect to chain ${l2ToL1Message.l1Network.chainID} (${l2ToL1Message.l1Network.name})`}
               </div>
             ) : (
-              <div>
+              <div className="redeem-button-container">
                 <button
+                  disabled={redeeming}
                   onClick={async () => {
                     if (!signer) return;
-                    // This would create a lot of duplicated getLogs call, would be nicer if we can pass the event in but it's not serializable
-                    // This also assume the order returned by getL2ToL1Events is always in order
-                    const l2ToL1TxEvents = await L2ToL1Message.getL2ToL1Events(
-                      l2Provider,
-                      {
-                        fromBlock: l2ToL1Message.createdAtL2BlockNumber,
-                        toBlock: l2ToL1Message.createdAtL2BlockNumber + 1,
-                      },
-                    );
-                    const l2ToL1MessageWriter = new L2ToL1MessageWriter(
-                      signer,
-                      l2ToL1TxEvents[l2ToL1Message.l2ToL1EventIndex],
-                    );
-                    const res = await l2ToL1MessageWriter.execute(l2Provider);
-                    const rec = await res.wait();
-                    if (rec.status === 1) {
-                      alert(
-                        `L2toL1 message successfully redeemed! ${rec.transactionHash}`,
+                    try {
+                      setIsRedeeming(true);
+                      // This would create a lot of duplicated getLogs call, would be nicer if we can pass the event in but it's not serializable
+                      // This also assume the order returned by getL2ToL1Events is always in order
+                      const l2ToL1TxEvents =
+                        await L2ToL1Message.getL2ToL1Events(l2Provider, {
+                          fromBlock: l2ToL1Message.createdAtL2BlockNumber,
+                          toBlock: l2ToL1Message.createdAtL2BlockNumber + 1,
+                        });
+                      const l2ToL1MessageWriter = new L2ToL1MessageWriter(
+                        signer,
+                        l2ToL1TxEvents[l2ToL1Message.l2ToL1EventIndex],
                       );
-                    } else {
-                      throw new Error('Failed to redeem');
+                      const res = await l2ToL1MessageWriter.execute(l2Provider);
+                      const rec = await res.wait();
+                      if (rec.status === 1) {
+                        alert(
+                          `L2toL1 message successfully redeemed! ${rec.transactionHash}`,
+                        );
+                      } else {
+                        throw new Error('Failed to redeem');
+                      }
+                    } catch (e: any) {
+                      // Ignore user rejected action
+                      if (e?.code !== 4001 && e?.code !== 'ACTION_REJECTED') {
+                        throw e;
+                      }
+                    } finally {
+                      setIsRedeeming(false);
                     }
                   }}
                 >

src/utils/getL2ToL1Messages.ts

@@ -51,7 +51,7 @@ export const getL2ToL1Messages = async (
         }
 
         const l2Receipt = new L2TransactionReceipt(receipt);
-        const l2ToL1Events = await l2Receipt.getL2ToL1Events();
+        const l2ToL1Events = l2Receipt.getL2ToL1Events();
         const l2MessagesData: Promise<L2ToL1MessageData>[] = l2ToL1Events.map(
           async (l2ToL1Event, l2ToL1EventIndex) => {
             const l2ToL1Message = new L2ToL1MessageReader(

src/utils/network.ts

@@ -26,6 +26,8 @@ export enum ChainId {
   ArbitrumLocal = 412346,
 }
 
+const isE2e = process.env.NODE_ENV === 'test';
+
 type RpcMap = Record<ChainId, string>;
 export const rpcURLs: RpcMap = {
   // L1
@@ -38,10 +40,6 @@ export const rpcURLs: RpcMap = {
     env: process.env.NEXT_PUBLIC_GOERLI_RPC_URL,
     fallback: GOERLI_INFURA_RPC_URL,
   }),
-  [ChainId.Local]: loadEnvironmentVariableWithFallback({
-    env: process.env.NEXT_PUBLIC_LOCAL_ETHEREUM_RPC_URL,
-    fallback: LOCAL_GETH_RPC_URL,
-  }),
   // L2
   [ChainId.ArbitrumOne]: loadEnvironmentVariableWithFallback({
     env: process.env.NEXT_PUBLIC_ARBITRUM_RPC_URL,
@@ -52,27 +50,32 @@ export const rpcURLs: RpcMap = {
     env: process.env.NEXT_PUBLIC_ARBITRUM_GOERLI_RPC_URL,
     fallback: ARBITRUM_GOERLI_INFURA_RPC_URL,
   }),
-  [ChainId.ArbitrumLocal]: loadEnvironmentVariableWithFallback({
-    env: process.env.NEXT_PUBLIC_LOCAL_ARBITRUM_RPC_URL,
-    fallback: ARBITRUM_INFURA_RPC_URL,
-  }),
   [ChainId.ArbitrumNova]: loadEnvironmentVariableWithFallback({
     env: process.env.NEXT_PUBLIC_ARBITRUM_NOVA_RPC_URL,
     fallback: 'https://nova.arbitrum.io/rpc',
   }),
+  // E2E RPCs
+  [ChainId.Local]: loadEnvironmentVariableWithFallback({
+    env: process.env.NEXT_PUBLIC_LOCAL_ETHEREUM_RPC_URL,
+    fallback: LOCAL_GETH_RPC_URL,
+  }),
+  [ChainId.ArbitrumLocal]: loadEnvironmentVariableWithFallback({
+    env: process.env.NEXT_PUBLIC_LOCAL_ARBITRUM_RPC_URL,
+    fallback: ARBITRUM_INFURA_RPC_URL,
+  }),
 };
 
 export const supportedL1Networks: Partial<RpcMap> = {
   [ChainId.Mainnet]: rpcURLs[ChainId.Mainnet],
   [ChainId.Goerli]: rpcURLs[ChainId.Goerli],
-  [ChainId.Local]: rpcURLs[ChainId.Local],
+  ...(isE2e ? { [ChainId.Local]: rpcURLs[ChainId.Local] } : {}),
 };
 
 export const supportedL2Networks: Partial<RpcMap> = {
   [ChainId.ArbitrumOne]: rpcURLs[ChainId.ArbitrumOne],
   [ChainId.ArbitrumNova]: rpcURLs[ChainId.ArbitrumNova],
   [ChainId.ArbitrumGoerli]: rpcURLs[ChainId.ArbitrumGoerli],
-  [ChainId.ArbitrumLocal]: rpcURLs[ChainId.ArbitrumLocal],
+  ...(isE2e ? { [ChainId.ArbitrumLocal]: rpcURLs[ChainId.ArbitrumLocal] } : {}),
 };
 
 // Because of React Server Component, we might need to call this function more than once

yarn.lock

@@ -7,9 +7,9 @@
   resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.9.0.tgz#223572538f6bea336750039bb43a4016dcc8182d"
   integrity sha512-iowxq3U30sghZotgl4s/oJRci6WPBfNO5YYgk2cIOMCHr3LeGPcsZjCEr+33Q4N+oV3OABDAtA+pyvWjbvBifQ==
 
-"@adraffy/ens-normalize@git+https://github.com/ricmoo/ens-normalize.js.git":
+"@adraffy/ens-normalize@https://github.com/ricmoo/ens-normalize.js":
   version "1.9.0"
-  resolved "git+https://github.com/ricmoo/ens-normalize.js.git#2d040533e57e4f25f9a7cc4715e219658ad454b5"
+  resolved "https://github.com/ricmoo/ens-normalize.js#2d040533e57e4f25f9a7cc4715e219658ad454b5"
 
 "@ampproject/remapping@^2.2.0":
   version "2.2.1"