feat(explorer): global transactions listener

.changeset/tall-penguins-promise.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Transactions are now monitored across all tabs while the World Explorer is open.

packages/explorer/src/app/(explorer)/[chainName]/worlds/WorldsForm.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import { useParams, useRouter } from "next/navigation";
 import { Address, isAddress } from "viem";
 import * as z from "zod";
+import { useStore } from "zustand";
 import { Command as CommandPrimitive } from "cmdk";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -12,6 +13,7 @@ import { Button } from "../../../../components/ui/Button";
 import { Command, CommandGroup, CommandItem, CommandList } from "../../../../components/ui/Command";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "../../../../components/ui/Form";
 import { Input } from "../../../../components/ui/Input";
+import { store } from "../../../../observer/store";
 import mudLogo from "../../icon.svg";
 import { getWorldUrl } from "../../utils/getWorldUrl";
 
@@ -25,6 +27,9 @@ const formSchema = z.object({
 });
 
 export function WorldsForm({ worlds }: { worlds: Address[] }) {
+  // Initialize the observer store to start fetching transactions
+  useStore(store);
+
   const router = useRouter();
   const { chainName } = useParams();
   const [open, setOpen] = useState(false);

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/layout.tsx

@@ -2,11 +2,13 @@
 
 import { Navigation } from "../../../../../components/Navigation";
 import { Providers } from "./Providers";
+import { TransactionsWatcher } from "./observe/TransactionsWatcher";
 
 export default function WorldLayout({ children }: { children: React.ReactNode }) {
   return (
     <Providers>
       <Navigation />
+      <TransactionsWatcher />
       {children}
     </Providers>
   );

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx

@@ -8,7 +8,7 @@ import { cn } from "../../../../../../utils";
 import { Confirmations } from "./Confirmations";
 import { TimingRowExpanded } from "./TimingRowExpanded";
 import { columns } from "./TransactionsTable";
-import { WatchedTransaction } from "./useTransactionWatcher";
+import { WatchedTransaction } from "./useTransactionsWatcher";
 
 function TransactionTableRowDataCell({
   label,

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx

@@ -12,7 +12,7 @@ import { BlockExplorerLink } from "./BlockExplorerLink";
 import { TimeAgo } from "./TimeAgo";
 import { TimingRowHeader } from "./TimingRowHeader";
 import { TransactionTableRow } from "./TransactionTableRow";
-import { WatchedTransaction, useTransactionWatcher } from "./useTransactionWatcher";
+import { WatchedTransaction, useTransactionsWatcher } from "./useTransactionsWatcher";
 
 const columnHelper = createColumnHelper<WatchedTransaction>();
 export const columns = [
@@ -94,7 +94,7 @@ export const columns = [
 ];
 
 export function TransactionsTable() {
-  const transactions = useTransactionWatcher();
+  const transactions = useTransactionsWatcher();
   const [expanded, setExpanded] = useState<ExpandedState>({});
 
   const table = useReactTable({

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsWatcher.tsx

@@ -0,0 +1,122 @@
+import { useParams } from "next/navigation";
+import { BaseError, Hex, TransactionReceipt, decodeFunctionData, parseEventLogs } from "viem";
+import { useConfig, useWatchBlocks } from "wagmi";
+import { getTransaction, simulateContract, waitForTransactionReceipt } from "wagmi/actions";
+import { useStore } from "zustand";
+import { useCallback, useEffect } from "react";
+import { store as observerStore } from "../../../../../../observer/store";
+import { useChain } from "../../../../hooks/useChain";
+import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
+import { store as worldStore } from "../store";
+
+export function TransactionsWatcher() {
+  const { id: chainId } = useChain();
+  const { worldAddress } = useParams();
+  const wagmiConfig = useConfig();
+  const { data: worldAbiData } = useWorldAbiQuery();
+  const abi = worldAbiData?.abi;
+  const { transactions, setTransaction, updateTransaction } = useStore(worldStore);
+  const observerWrites = useStore(observerStore, (state) => state.writes);
+
+  const handleTransaction = useCallback(
+    async (hash: Hex, timestamp: bigint) => {
+      if (!abi) return;
+
+      const transaction = await getTransaction(wagmiConfig, { hash });
+      if (transaction.to !== worldAddress) return;
+
+      let functionName: string | undefined;
+      let args: readonly unknown[] | undefined;
+      let transactionError: BaseError | undefined;
+
+      try {
+        const functionData = decodeFunctionData({ abi, data: transaction.input });
+        functionName = functionData.functionName;
+        args = functionData.args;
+      } catch (error) {
+        transactionError = error as BaseError;
+        functionName = transaction.input.length > 10 ? transaction.input.slice(0, 10) : "unknown";
+      }
+
+      const write = Object.values(observerWrites).find((write) => write.hash === hash);
+      setTransaction({
+        hash,
+        writeId: write?.writeId ?? hash,
+        from: transaction.from,
+        timestamp,
+        transaction,
+        status: "pending",
+        functionData: {
+          functionName,
+          args,
+        },
+        value: transaction.value,
+      });
+
+      let receipt: TransactionReceipt | undefined;
+      try {
+        receipt = await waitForTransactionReceipt(wagmiConfig, { hash });
+      } catch {
+        console.error(`Failed to fetch transaction receipt. Transaction hash: ${hash}`);
+      }
+
+      if (receipt && receipt.status === "reverted" && functionName) {
+        try {
+          // Simulate the failed transaction to retrieve the revert reason
+          // Note, it only works for functions that are declared in the ABI
+          // See: https://github.com/wevm/viem/discussions/462
+          await simulateContract(wagmiConfig, {
+            account: transaction.from,
+            address: worldAddress,
+            abi,
+            value: transaction.value,
+            blockNumber: receipt.blockNumber,
+            functionName,
+            args,
+          });
+        } catch (error) {
+          transactionError = error as BaseError;
+        }
+      }
+
+      const status = receipt ? receipt.status : "unknown";
+      const logs = parseEventLogs({
+        abi,
+        logs: receipt?.logs || [],
+      });
+
+      updateTransaction(hash, {
+        receipt,
+        logs,
+        status,
+        error: transactionError as BaseError,
+      });
+    },
+    [abi, wagmiConfig, worldAddress, observerWrites, setTransaction, updateTransaction],
+  );
+
+  useEffect(() => {
+    for (const write of Object.values(observerWrites)) {
+      const hash = write.hash;
+      if (hash && write.address === worldAddress) {
+        const transaction = transactions.find((transaction) => transaction.hash === hash);
+        if (!transaction) {
+          handleTransaction(hash, BigInt(write.time) / 1000n);
+        }
+      }
+    }
+  }, [handleTransaction, observerWrites, transactions, worldAddress]);
+
+  useWatchBlocks({
+    onBlock(block) {
+      for (const hash of block.transactions) {
+        if (transactions.find((transaction) => transaction.hash === hash)) continue;
+        handleTransaction(hash, block.timestamp);
+      }
+    },
+    chainId,
+    pollingInterval: 500,
+  });
+
+  return null;
+}