From faae9421a949ad9a8bdf9b50827786231e8b434d Mon Sep 17 00:00:00 2001
From: gzeon <im@gzeon.dev>
Date: Fri, 13 Oct 2023 17:42:45 +0800
Subject: [PATCH 1/4] fix: local rpc issue

---
 src/utils/getL1TxnReceipt.ts   | 24 ++++++++++++++----------
 src/utils/getL2ToL1Messages.ts |  6 ++++++
 src/utils/network.ts           |  3 ++-
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/utils/getL1TxnReceipt.ts b/src/utils/getL1TxnReceipt.ts
index dc70228..915e05d 100644
--- a/src/utils/getL1TxnReceipt.ts
+++ b/src/utils/getL1TxnReceipt.ts
@@ -12,16 +12,20 @@ export const getL1TxnReceipt = async (
   safeAddDefaultLocalNetwork();
   const promises = Object.entries(supportedL1Networks).map(
     async ([chainID, rpcURL]) => {
-      const l1Network = await getL1Network(+chainID);
-      const l1Provider = new StaticJsonRpcProvider(rpcURL);
-
-      const rec = await l1Provider.getTransactionReceipt(txnHash);
-      if (rec) {
-        return {
-          l1TxnReceipt: new L1TransactionReceipt(rec),
-          l1Network,
-          l1Provider,
-        };
+      try {
+        const l1Network = await getL1Network(+chainID);
+        const l1Provider = new StaticJsonRpcProvider(rpcURL);
+  
+        const rec = await l1Provider.getTransactionReceipt(txnHash);
+        if (rec) {
+          return {
+            l1TxnReceipt: new L1TransactionReceipt(rec),
+            l1Network,
+            l1Provider,
+          };
+        }
+      } catch (e) {
+        console.warn(rpcURL, "not working")
       }
     },
   );
diff --git a/src/utils/getL2ToL1Messages.ts b/src/utils/getL2ToL1Messages.ts
index 8a84287..4c770a2 100644
--- a/src/utils/getL2ToL1Messages.ts
+++ b/src/utils/getL2ToL1Messages.ts
@@ -25,6 +25,12 @@ export const getL2ToL1Messages = async (
         // TODO
         const l1ChainID = l2Network.partnerChainID as 1 | 5;
         const l1Provider = new JsonRpcProvider(supportedL1Networks[l1ChainID]);
+        try {
+          await l1Provider.getBlockNumber();
+        } catch (e) {
+          console.warn(supportedL1Networks[l1ChainID], "not working")
+          return null
+        }
         const [l1Network, l1BlogNumber, receipt] = await Promise.all([
           getL1Network(l1ChainID),
           l1Provider.getBlockNumber(),
diff --git a/src/utils/network.ts b/src/utils/network.ts
index edf9c35..c6a5185 100644
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -10,6 +10,7 @@ const MAINNET_INFURA_RPC_URL = `https://mainnet.infura.io/v3/${INFURA_KEY}`;
 const GOERLI_INFURA_RPC_URL = `https://goerli.infura.io/v3/${INFURA_KEY}`;
 const ARBITRUM_INFURA_RPC_URL = `https://arbitrum-mainnet.infura.io/v3/${INFURA_KEY}`;
 const ARBITRUM_GOERLI_INFURA_RPC_URL = `https://arbitrum-goerli.infura.io/v3/${INFURA_KEY}`;
+const LOCAL_GETH_RPC_URL = `http://localhost:8545`;
 
 export enum ChainId {
   // L1
@@ -39,7 +40,7 @@ export const rpcURLs: RpcMap = {
   }),
   [ChainId.Local]: loadEnvironmentVariableWithFallback({
     env: process.env.NEXT_PUBLIC_LOCAL_ETHEREUM_RPC_URL,
-    fallback: MAINNET_INFURA_RPC_URL,
+    fallback: LOCAL_GETH_RPC_URL,
   }),
   // L2
   [ChainId.ArbitrumOne]: loadEnvironmentVariableWithFallback({

From f72b1c15b5ad095a9437871a2f1c1a79ecff9b7f Mon Sep 17 00:00:00 2001
From: gzeon <im@gzeon.dev>
Date: Fri, 13 Oct 2023 19:32:38 +0800
Subject: [PATCH 2/4] fix: multiple withdrawal in 1 tx

---
 src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx |  7 +++++--
 src/app/tx/[tx]/page.tsx              |  4 +++-
 src/types.ts                          |  1 +
 src/utils/getL2ToL1Messages.ts        | 13 ++++++++++---
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx b/src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx
index 23e4371..1cbf4ad 100644
--- a/src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx
+++ b/src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx
@@ -38,6 +38,7 @@ export type L2ToL1MessageDataLike = Pick<
     deadlineBlock: string;
     etaSeconds: number;
   } | null;
+  l2ToL1EventIndex: number;
 };
 type Props = {
   l2ToL1Messages: L2ToL1MessageDataLike[];
@@ -81,7 +82,9 @@ function L2ToL1MsgsDisplay({ l2ToL1Messages }: Props) {
                 <button
                   onClick={async () => {
                     if (!signer) return;
-                    const [l2ToL1TxEvent] = await L2ToL1Message.getL2ToL1Events(
+                    // 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,
@@ -90,7 +93,7 @@ function L2ToL1MsgsDisplay({ l2ToL1Messages }: Props) {
                     );
                     const l2ToL1MessageWriter = new L2ToL1MessageWriter(
                       signer,
-                      l2ToL1TxEvent,
+                      l2ToL1TxEvents[l2ToL1Message.l2ToL1EventIndex],
                     );
                     const res = await l2ToL1MessageWriter.execute(l2Provider);
                     const rec = await res.wait();
diff --git a/src/app/tx/[tx]/page.tsx b/src/app/tx/[tx]/page.tsx
index 3c5d7d5..cdddd6f 100644
--- a/src/app/tx/[tx]/page.tsx
+++ b/src/app/tx/[tx]/page.tsx
@@ -134,6 +134,7 @@ const Transaction = async ({ params }: Props) => {
         l1Network,
         l2Network,
         createdAtL2BlockNumber,
+        l2ToL1EventIndex
       }) => ({
         status,
         confirmationInfo: confirmationInfo
@@ -151,6 +152,7 @@ const Transaction = async ({ params }: Props) => {
           name: l2Network.name,
         },
         createdAtL2BlockNumber,
+        l2ToL1EventIndex
       }),
     );
 
@@ -181,7 +183,7 @@ const Transaction = async ({ params }: Props) => {
           <MessageDisplays
             messages={allMessages}
             hasL2ToL1MessagesConfirmed={l2ToL1MessagesToShow.some(
-              (msg) => msg.status === L2ToL1MessageStatus.CONFIRMED,
+              (msg) => msg.status !== L2ToL1MessageStatus.UNCONFIRMED, // Also show executed
             )}
           />
         </Suspense>
diff --git a/src/types.ts b/src/types.ts
index fff45fc..38de24a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -121,6 +121,7 @@ export interface L2ToL1MessageData {
   l2Network: L2Network;
   l2Provider: JsonRpcProvider;
   createdAtL2BlockNumber: number;
+  l2ToL1EventIndex: number;
 }
 
 export interface L2ToL1MessageSearchResult {
diff --git a/src/utils/getL2ToL1Messages.ts b/src/utils/getL2ToL1Messages.ts
index 4c770a2..b765158 100644
--- a/src/utils/getL2ToL1Messages.ts
+++ b/src/utils/getL2ToL1Messages.ts
@@ -7,6 +7,7 @@ import {
 import {
   getL1Network,
   getL2Network,
+  L2ToL1MessageReader,
   L2ToL1MessageStatus,
   L2TransactionReceipt,
 } from '@arbitrum/sdk';
@@ -50,9 +51,13 @@ export const getL2ToL1Messages = async (
         }
 
         const l2Receipt = new L2TransactionReceipt(receipt);
-        const l2ToL1Messages = await l2Receipt.getL2ToL1Messages(l1Provider);
-        const l2MessagesData: Promise<L2ToL1MessageData>[] = l2ToL1Messages.map(
-          async (l2ToL1Message) => {
+        const l2ToL1Events = await l2Receipt.getL2ToL1Events();
+        const l2MessagesData: Promise<L2ToL1MessageData>[] = l2ToL1Events.map(
+          async (l2ToL1Event, l2ToL1EventIndex) => {
+            const l2ToL1Message = new L2ToL1MessageReader(
+              l1Provider,
+              l2ToL1Event,
+            )
             try {
               const status = await l2ToL1Message.status(l2Provider);
               const deadlineBlock =
@@ -76,6 +81,7 @@ export const getL2ToL1Messages = async (
                 l2Network,
                 l2Provider,
                 createdAtL2BlockNumber: l2Receipt.blockNumber,
+                l2ToL1EventIndex,
               };
             } catch (e) {
               const expectedError = "batch doesn't exist";
@@ -93,6 +99,7 @@ export const getL2ToL1Messages = async (
                   l2Network,
                   l2Provider,
                   createdAtL2BlockNumber: l2Receipt.blockNumber,
+                  l2ToL1EventIndex,
                 };
               } else {
                 throw e;

From 0c6ddfbeb9245c64fda3867698629edb3de962f5 Mon Sep 17 00:00:00 2001
From: gzeon <im@gzeon.dev>
Date: Fri, 13 Oct 2023 19:40:14 +0800
Subject: [PATCH 3/4] format: fix

---
 src/app/tx/[tx]/page.tsx       | 4 ++--
 src/utils/getL1TxnReceipt.ts   | 4 ++--
 src/utils/getL2ToL1Messages.ts | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/tx/[tx]/page.tsx b/src/app/tx/[tx]/page.tsx
index cdddd6f..d45a615 100644
--- a/src/app/tx/[tx]/page.tsx
+++ b/src/app/tx/[tx]/page.tsx
@@ -134,7 +134,7 @@ const Transaction = async ({ params }: Props) => {
         l1Network,
         l2Network,
         createdAtL2BlockNumber,
-        l2ToL1EventIndex
+        l2ToL1EventIndex,
       }) => ({
         status,
         confirmationInfo: confirmationInfo
@@ -152,7 +152,7 @@ const Transaction = async ({ params }: Props) => {
           name: l2Network.name,
         },
         createdAtL2BlockNumber,
-        l2ToL1EventIndex
+        l2ToL1EventIndex,
       }),
     );
 
diff --git a/src/utils/getL1TxnReceipt.ts b/src/utils/getL1TxnReceipt.ts
index 915e05d..cd3634e 100644
--- a/src/utils/getL1TxnReceipt.ts
+++ b/src/utils/getL1TxnReceipt.ts
@@ -15,7 +15,7 @@ export const getL1TxnReceipt = async (
       try {
         const l1Network = await getL1Network(+chainID);
         const l1Provider = new StaticJsonRpcProvider(rpcURL);
-  
+
         const rec = await l1Provider.getTransactionReceipt(txnHash);
         if (rec) {
           return {
@@ -25,7 +25,7 @@ export const getL1TxnReceipt = async (
           };
         }
       } catch (e) {
-        console.warn(rpcURL, "not working")
+        console.warn(rpcURL, 'not working');
       }
     },
   );
diff --git a/src/utils/getL2ToL1Messages.ts b/src/utils/getL2ToL1Messages.ts
index b765158..62b21f3 100644
--- a/src/utils/getL2ToL1Messages.ts
+++ b/src/utils/getL2ToL1Messages.ts
@@ -29,8 +29,8 @@ export const getL2ToL1Messages = async (
         try {
           await l1Provider.getBlockNumber();
         } catch (e) {
-          console.warn(supportedL1Networks[l1ChainID], "not working")
-          return null
+          console.warn(supportedL1Networks[l1ChainID], 'not working');
+          return null;
         }
         const [l1Network, l1BlogNumber, receipt] = await Promise.all([
           getL1Network(l1ChainID),
@@ -57,7 +57,7 @@ export const getL2ToL1Messages = async (
             const l2ToL1Message = new L2ToL1MessageReader(
               l1Provider,
               l2ToL1Event,
-            )
+            );
             try {
               const status = await l2ToL1Message.status(l2Provider);
               const deadlineBlock =

From 9ccc79b274b7f8d021046cafdedd95049d4a65ae Mon Sep 17 00:00:00 2001
From: Christophe <contact@christophedeveaux.com>
Date: Fri, 13 Oct 2023 15:19:49 +0200
Subject: [PATCH 4/4] Cleanup

---
 package.json                          |  4 +-
 src/app/global.css                    |  4 ++
 src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx | 53 ++++++++++++++++-----------
 src/utils/getL2ToL1Messages.ts        |  2 +-
 src/utils/network.ts                  | 23 +++++++-----
 yarn.lock                             |  4 +-
 6 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index fee9d91..5df559e 100644
--- a/package.json
+++ b/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%",
diff --git a/src/app/global.css b/src/app/global.css
index 8e5bff0..fca2166 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -270,3 +270,7 @@ ul {
   padding-left: 0;
   margin-top: 0;
 }
+
+.redeem-button-container {
+  text-align: center;
+}
diff --git a/src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx b/src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx
index 1cbf4ad..2190d68 100644
--- a/src/app/tx/[tx]/L2ToL1MsgsDisplay.tsx
+++ b/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);
                     }
                   }}
                 >
diff --git a/src/utils/getL2ToL1Messages.ts b/src/utils/getL2ToL1Messages.ts
index 62b21f3..c7071c7 100644
--- a/src/utils/getL2ToL1Messages.ts
+++ b/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(
diff --git a/src/utils/network.ts b/src/utils/network.ts
index c6a5185..5845297 100644
--- a/src/utils/network.ts
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index 37acb3e..678f279 100644
--- a/yarn.lock
+++ b/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"