From 645b7e09f191b41ad296c23f212da1739f17add5 Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Mon, 7 Oct 2024 19:13:58 +0300
Subject: [PATCH] fix(explorer): expand selected transaction table row by
 hash/writeId (#3263)

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>
---
 .changeset/heavy-experts-protect.md                       | 5 +++++
 .../worlds/[worldAddress]/observe/TransactionsTable.tsx   | 1 +
 .../[worldAddress]/observe/useTransactionWatcher.ts       | 8 ++++++--
 3 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/heavy-experts-protect.md

diff --git a/.changeset/heavy-experts-protect.md b/.changeset/heavy-experts-protect.md
new file mode 100644
index 0000000000..9dee69b016
--- /dev/null
+++ b/.changeset/heavy-experts-protect.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Fixed row expansion in the transactions table where an incorrect row would expand when new transactions appeared.
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx
index 40a8546b29..96e5ae58fb 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx
@@ -97,6 +97,7 @@ export function TransactionsTable() {
     state: {
       expanded,
     },
+    getRowId: (row) => row.writeId,
     onExpandedChange: setExpanded,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts
index 97c5125d04..fa463e3750 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts
@@ -22,8 +22,8 @@ import { useChain } from "../../../../hooks/useChain";
 import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
 
 export type WatchedTransaction = {
+  writeId: string;
   hash?: Hex;
-  writeId?: string;
   from?: Address;
   timestamp?: bigint;
   transaction?: Transaction;
@@ -65,9 +65,11 @@ export function useTransactionWatcher() {
         functionName = transaction.input.length > 10 ? transaction.input.slice(0, 10) : "unknown";
       }
 
+      const write = Object.values(observerWrites).find((write) => write.hash === hash);
       setTransactions((prevTransactions) => [
         {
           hash,
+          writeId: write?.writeId ?? hash,
           from: transaction.from,
           timestamp,
           transaction,
@@ -127,7 +129,7 @@ export function useTransactionWatcher() {
         ),
       );
     },
-    [abi, wagmiConfig, worldAddress],
+    [abi, observerWrites, wagmiConfig, worldAddress],
   );
 
   useEffect(() => {
@@ -161,6 +163,8 @@ export function useTransactionWatcher() {
       const writeResult = write.events.find((event): event is Message<"write:result"> => event.type === "write:result");
 
       mergedMap.set(write.hash || write.writeId, {
+        hash: write.hash,
+        writeId: write.writeId,
         from: write.from,
         status: writeResult?.status === "rejected" ? "rejected" : "pending",
         timestamp: BigInt(write.time) / 1000n,