chore(explorer): performance optimizations (wip)

examples/local-explorer/packages/client/src/App.tsx

@@ -1,7 +1,14 @@
 import { useMUD } from "./MUDContext";
+import { useEffect } from "react";
 
 const styleUnset = { all: "unset" } as const;
 
+// Function to generate random task descriptions
+const generateRandomTask = () => {
+  const tasks = ["Buy groceries", "Walk the dog", "Do laundry", "Clean the house", "Pay bills"];
+  return tasks[Math.floor(Math.random() * tasks.length)] + " " + Math.floor(Math.random() * 1000);
+};
+
 export const App = () => {
   const {
     network: { tables, useStore },
@@ -14,6 +21,17 @@ export const App = () => {
     return records;
   });
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const randomTask = generateRandomTask();
+      addTask(randomTask);
+    }, 5000); // 100ms interval for 10 tasks per second
+
+    // TODO: Add a way to stop the interval (e.g., after a certain number of tasks or time)
+
+    return () => clearInterval(interval);
+  }, [addTask]);
+
   return (
     <>
       <table>

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

@@ -1,10 +1,20 @@
 "use client";
 
 import { BoxIcon, CheckCheckIcon, ReceiptTextIcon, UserPenIcon, XIcon } from "lucide-react";
+import { parseAsInteger, useQueryState } from "nuqs";
 import React, { useState } from "react";
-import { ExpandedState, flexRender, getCoreRowModel, getExpandedRowModel, useReactTable } from "@tanstack/react-table";
+import {
+  ExpandedState,
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import { createColumnHelper } from "@tanstack/react-table";
 import { Badge } from "../../../../../../components/ui/Badge";
+import { Button } from "../../../../../../components/ui/Button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../../../components/ui/Select";
 import { Skeleton } from "../../../../../../components/ui/Skeleton";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../../components/ui/Table";
 import { TruncatedHex } from "../../../../../../components/ui/TruncatedHex";
@@ -96,48 +106,103 @@ export const columns = [
 export function TransactionsTable() {
   const transactions = useTransactionWatcher();
   const [expanded, setExpanded] = useState<ExpandedState>({});
+  const [pageIndex, setPageIndex] = useQueryState("txPage", parseAsInteger.withDefault(0));
+  const [pageSize, setPageSize] = useQueryState("txPageSize", parseAsInteger.withDefault(10));
 
   const table = useReactTable({
     data: transactions,
     columns,
     state: {
       expanded,
+      pagination: {
+        pageIndex,
+        pageSize,
+      },
     },
     getRowId: (row) => row.writeId,
     onExpandedChange: setExpanded,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: (updater) => {
+      // TODO: check this more
+      if (typeof updater === "function") {
+        const newState = updater({ pageIndex, pageSize });
+        setPageIndex(newState.pageIndex);
+        setPageSize(newState.pageSize);
+      }
+    },
   });
 
   return (
-    <Table>
-      <TableHeader className="sticky top-0 z-10 bg-[var(--color-background)]">
-        {table.getHeaderGroups().map((headerGroup) => (
-          <TableRow key={headerGroup.id}>
-            {headerGroup.headers.map((header) => {
-              return (
-                <TableHead key={header.id} className="text-xs uppercase">
-                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                </TableHead>
-              );
-            })}
-          </TableRow>
-        ))}
-      </TableHeader>
-      <TableBody>
-        {table.getRowModel().rows?.length ? (
-          table.getRowModel().rows.map((row) => <TransactionTableRow key={row.id} row={row} />)
-        ) : (
-          <TableRow>
-            <TableCell colSpan={columns.length}>
-              <p className="flex items-center justify-center gap-3 py-4 font-mono text-xs font-bold uppercase text-muted-foreground">
-                <span className="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-muted-foreground" /> Waiting for
-                transactions…
-              </p>
-            </TableCell>
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
+    <>
+      <Table>
+        <TableHeader className="sticky top-0 z-10 bg-[var(--color-background)]">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id} className="text-xs uppercase">
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => <TransactionTableRow key={row.id} row={row} />)
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length}>
+                <p className="flex items-center justify-center gap-3 py-4 font-mono text-xs font-bold uppercase text-muted-foreground">
+                  <span className="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-muted-foreground" /> Waiting
+                  for transactions…
+                </p>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <div className="flex items-center justify-between px-2 py-4">
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+            Next
+          </Button>
+        </div>
+        <div className="flex items-center space-x-2">
+          <span className="text-sm text-muted-foreground">
+            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          </span>
+
+          <Select
+            value={table.getState().pagination.pageSize.toString()}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className="w-[130px]">
+              <SelectValue placeholder="Select page size" />
+            </SelectTrigger>
+            <SelectContent>
+              {[10, 20, 30, 40, 50, 100, 200].map((pageSize) => (
+                <SelectItem key={pageSize} value={pageSize.toString()}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </>
   );
 }

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts

@@ -1,6 +1,6 @@
 import { useParams } from "next/navigation";
 import {
   AbiFunction,
   Address,
   BaseError,
   DecodeFunctionDataReturnType,
@@ -9,16 +9,18 @@
   Transaction,
   TransactionReceipt,
   decodeFunctionData,
   parseAbiItem,
   parseEventLogs,
 } from "viem";
 import { useConfig, useWatchBlocks } from "wagmi";
 import { getTransaction, simulateContract, waitForTransactionReceipt } from "wagmi/actions";
 import { useStore } from "zustand";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { observer } from "../../../../../../observer/decorator";
 import { Message } from "../../../../../../observer/messages";
 import { type Write, store } from "../../../../../../observer/store";
 import { useChain } from "../../../../hooks/useChain";
+import { usePrevious } from "../../../../hooks/usePrevious";
 import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
 
 export type WatchedTransaction = {
@@ -45,6 +47,10 @@
   const [transactions, setTransactions] = useState<WatchedTransaction[]>([]);
   const observerWrites = useStore(store, (state) => state.writes);
 
+  // const observerWritesLen = observerWrites.length;
+  // const prevObserverWritesLen = usePrevious(observerWrites.length);
+  // const latestUpdatesLen = observerWritesLen - (prevObserverWritesLen || 0);
+
   const handleTransaction = useCallback(
     async (hash: Hex, timestamp: bigint) => {
       if (!abi) return;
@@ -65,7 +71,7 @@
         functionName = transaction.input.length > 10 ? transaction.input.slice(0, 10) : "unknown";
       }
 
-      const write = Object.values(observerWrites).find((write) => write.hash === hash);
+      const write = observerWrites.find((write) => write.hash === hash);
       setTransactions((prevTransactions) => [
         {
           hash,
@@ -133,7 +139,7 @@
   );
 
   useEffect(() => {
-    for (const write of Object.values(observerWrites)) {
+    for (const write of observerWrites.slice(0, 50)) {
       const hash = write.hash;
       if (write.type === "waitForTransactionReceipt" && hash && write.address === worldAddress) {
         const transaction = transactions.find((transaction) => transaction.hash === hash);
@@ -155,42 +161,42 @@
     pollingInterval: 500,
   });
 
-  const mergedTransactions = useMemo((): WatchedTransaction[] => {
-    const mergedMap = new Map<string | undefined, WatchedTransaction>();
-
-    for (const write of Object.values(observerWrites)) {
-      if (write.address !== worldAddress) continue;
-
-      const parsedAbiItem = parseAbiItem(`function ${write.functionSignature}`) as AbiFunction;
-      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,
-        functionData: {
-          functionName: parsedAbiItem.name,
-          args: write.args,
-        },
-        value: write.value,
-        error: writeResult && "reason" in writeResult ? (writeResult.reason as BaseError) : undefined,
-        write,
-      });
-    }
-
-    for (const transaction of transactions) {
-      const existing = mergedMap.get(transaction.hash);
-      if (existing) {
-        mergedMap.set(transaction.hash, { ...transaction, write: existing.write });
-      } else {
-        mergedMap.set(transaction.hash, { ...transaction });
-      }
-    }
-
-    return Array.from(mergedMap.values()).sort((a, b) => Number(b.timestamp ?? 0n) - Number(a.timestamp ?? 0n));
-  }, [observerWrites, worldAddress, transactions]);
-
-  return mergedTransactions;
+  // const mergedTransactions = useMemo((): WatchedTransaction[] => {
+  //   const mergedMap = new Map<string | undefined, WatchedTransaction>();
+
+  //   for (const write of observerWrites) {
+  //     if (write.address !== worldAddress) continue;
+
+  //     const parsedAbiItem = parseAbiItem(`function ${write.functionSignature}`) as AbiFunction;
+  //     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,
+  //       functionData: {
+  //         functionName: parsedAbiItem.name,
+  //         args: write.args,
+  //       },
+  //       value: write.value,
+  //       error: writeResult && "reason" in writeResult ? (writeResult.reason as BaseError) : undefined,
+  //       write,
+  //     });
+  //   }
+
+  //   for (const transaction of transactions) {
+  //     const existing = mergedMap.get(transaction.hash);
+  //     if (existing) {
+  //       mergedMap.set(transaction.hash, { ...transaction, write: existing.write });
+  //     } else {
+  //       mergedMap.set(transaction.hash, { ...transaction });
+  //     }
+  //   }
+
+  //   return Array.from(mergedMap.values()).sort((a, b) => Number(b.timestamp ?? 0n) - Number(a.timestamp ?? 0n));
+  // }, [observerWrites, worldAddress, transactions]);
+
+  return transactions;
 }

packages/explorer/src/observer/store.ts

@@ -21,31 +21,45 @@ export type Write = {
 };
 
 export type State = {
-  writes: {
-    [id: string]: Write;
-  };
+  writes: Write[];
 };
 
 export const store = createStore<State>(() => ({
-  writes: {},
+  writes: [],
 }));
 
 debug("listening for relayed messages", relayChannelName);
 const channel = new BroadcastChannel(relayChannelName);
 channel.addEventListener("message", ({ data }: MessageEvent<Message>) => {
   if (data.type === "ping") return;
   store.setState((state) => {
-    const write = data.type === "write" ? ({ ...data, events: [] } satisfies Write) : state.writes[data.writeId];
+    const writeIndex = state.writes.findIndex((w) => w.writeId === data.writeId);
+    const write =
+      writeIndex !== -1
+        ? state.writes[writeIndex]
+        : data.type === "write"
+          ? ({ ...data, events: [] } satisfies Write)
+          : undefined;
+
+    if (!write) return state;
+
+    const updatedWrite = {
+      ...write,
+      type: data.type,
+      hash: data.type === "waitForTransactionReceipt" ? data.hash : write.hash,
+      events: [...write.events, data],
+    };
+
+    const newWrites = [...state.writes];
+    if (writeIndex !== -1) {
+      newWrites.splice(writeIndex, 1);
+      newWrites.unshift(updatedWrite);
+    } else {
+      newWrites.unshift(updatedWrite);
+    }
+
     return {
-      writes: {
-        ...state.writes,
-        [data.writeId]: {
-          ...write,
-          type: data.type,
-          hash: data.type === "waitForTransactionReceipt" ? data.hash : write.hash,
-          events: [...write.events, data],
-        },
-      },
+      writes: newWrites,
     };
   });
 });