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] 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;