fix(explorer): expand selected transaction table row by hash/writeId (#…

…3263) Co-authored-by: Kevin Ingersoll <[email protected]>
latticexyz · Oct 7, 2024 · 645b7e0 · 645b7e0
1 parent 7c0ae07
commit 645b7e0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/.changeset/heavy-experts-protect.md 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/...plorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx b/...plorer/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/...rer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts b/...rer/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,