feat(explorer): use systems abis in decode form (#3646)

karooolis · frolic · web-flow · commit 13071c45dd7d · 2025-03-28T12:38:51.000Z
Co-authored-by: Kevin Ingersoll &lt;kingersoll@gmail.com&gt;
diff --git a/.changeset/khaki-walls-enjoy.md b/.changeset/khaki-walls-enjoy.md
@@ -0,0 +1,7 @@
+---
+"@latticexyz/explorer": patch
+---
+
+- Added the `/system-abis` endpoint to retrieve ABIs by system IDs.
+- The search form for decoding selectors now uses all system ABIs for complete results.
+- The `ABI` page has been renamed to `Decode`.
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/AbiExplorer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/AbiExplorer.tsx
@@ -16,7 +16,7 @@ export function AbiExplorer() {
 
   return (
     <div className="space-y-4">
-      <h4 className="font-semibold uppercase">ABI</h4>
+      <h4 className="font-semibold uppercase">World ABI</h4>
       <pre className="text-md relative mb-4 rounded border border-white/20 p-3 text-sm">
         <JsonView src={data?.abi} theme="a11y" />
         <CopyButton value={JSON.stringify(data?.abi, null, 2)} className="absolute right-1.5 top-1.5" />
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/DecodeForm.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/DecodeForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AbiEvent, AbiFunction, toFunctionSelector } from "viem";
+import { AbiFunction, AbiItem, toFunctionSelector } from "viem";
 import { formatAbiItem } from "viem/utils";
 import * as z from "zod";
 import { useState } from "react";
@@ -22,36 +22,50 @@ import {
 import { Input } from "../../../../../../components/ui/Input";
 import { Skeleton } from "../../../../../../components/ui/Skeleton";
 import { cn } from "../../../../../../utils";
+import { useSystemAbisQuery } from "../../../../queries/useSystemAbisQuery";
 import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
 import { getErrorSelector } from "./getErrorSelector";
 
+type AbiError = AbiItem & { type: "error" };
+
 const formSchema = z.object({
   selector: z.string().min(1).optional(),
 });
 
+function isAbiFunction(item: AbiItem): item is AbiFunction {
+  return item.type === "function";
+}
+
+function isAbiError(item: AbiItem): item is AbiItem & { type: "error" } {
+  return item.type === "error";
+}
+
 export function DecodeForm() {
-  const { data, isLoading } = useWorldAbiQuery();
+  const { data: worldData, isLoading: isWorldAbiLoading } = useWorldAbiQuery();
+  const { data: systemData, isLoading: isSystemAbisLoading } = useSystemAbisQuery();
+  const [abiItem, setAbiItem] = useState<AbiFunction | AbiError>();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
-  const [result, setResult] = useState<AbiFunction | AbiEvent>();
 
   function onSubmit({ selector }: z.infer<typeof formSchema>) {
-    const items = data?.abi.filter((item) => item.type === "function" || item.type === "error");
-    const abiItem = items?.find((item) => {
-      if (item.type === "function") {
+    const worldAbi = worldData?.abi || [];
+    const systemsAbis = systemData ? Object.values(systemData) : [];
+    const abis = [worldAbi, ...systemsAbis].flat();
+
+    const abiItem = abis.find((item): item is AbiFunction | AbiError => {
+      if (isAbiFunction(item)) {
         return toFunctionSelector(item) === selector;
-      } else if (item.type === "error") {
+      } else if (isAbiError(item)) {
         return getErrorSelector(item) === selector;
       }
-
       return false;
     });
 
-    setResult(abiItem);
+    setAbiItem(abiItem);
   }
 
-  if (isLoading) {
+  if (isWorldAbiLoading || isSystemAbisLoading) {
     return <Skeleton className="h-[152px] w-full" />;
   }
 
@@ -76,14 +90,14 @@ export function DecodeForm() {
         {form.formState.isSubmitted && (
           <pre
             className={cn("text-md relative mt-4 rounded border border-white/20 p-3 text-sm", {
-              "border-red-400 bg-red-100": !result,
+              "border-red-400 bg-red-100": !abiItem,
             })}
           >
-            {result ? (
+            {abiItem ? (
               <>
-                <span className="mr-2 text-sm opacity-50">{result.type === "function" ? "function" : "error"}</span>
-                <span>{formatAbiItem(result)}</span>
-                <CopyButton value={JSON.stringify(result, null, 2)} className="absolute right-1.5 top-1.5" />
+                <span className="mr-2 text-sm opacity-50">{abiItem.type === "function" ? "function" : "error"}</span>
+                <span>{formatAbiItem(abiItem)}</span>
+                <CopyButton value={JSON.stringify(abiItem, null, 2)} className="absolute right-1.5 top-1.5" />
               </>
             ) : (
               <span className="text-red-700">No matching function or error found for this selector</span>
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/getErrorSelector.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/getErrorSelector.ts
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/page.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/page.tsx
@@ -11,9 +11,7 @@ export default async function UtilsPage() {
   return (
     <div className="flex h-[calc(100vh-70px)] flex-col space-y-8">
       <DecodeForm />
-
       <Separator />
-
       <AbiExplorer />
     </div>
   );
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/InteractForm.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/InteractForm.tsx
@@ -2,7 +2,7 @@
 
 import { Coins, Eye, Send } from "lucide-react";
 import { useQueryState } from "nuqs";
-import { AbiFunction, stringify } from "viem";
+import { AbiFunction, AbiItem, stringify } from "viem";
 import { useDeferredValue, useMemo } from "react";
 import { Input } from "../../../../../../components/ui/Input";
 import { Separator } from "../../../../../../components/ui/Separator";
@@ -12,6 +12,10 @@ import { useHashState } from "../../../../hooks/useHashState";
 import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
 import { FunctionField } from "./FunctionField";
 
+function isFunction(abi: AbiItem): abi is AbiFunction {
+  return abi.type === "function";
+}
+
 export function InteractForm() {
   const [hash] = useHashState();
   const { data, isFetched } = useWorldAbiQuery();
@@ -20,7 +24,8 @@ export function InteractForm() {
   const filteredFunctions = useMemo(() => {
     if (!data?.abi) return [];
     return data.abi.filter(
-      (item) => item.type === "function" && item.name.toLowerCase().includes(deferredFilterValue.toLowerCase()),
+      (item): item is AbiFunction =>
+        isFunction(item) && item.name.toLowerCase().includes(deferredFilterValue.toLowerCase()),
     );
   }, [data?.abi, deferredFilterValue]);
 
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsWatcher.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsWatcher.tsx
@@ -81,7 +81,12 @@ export function TransactionsWatcher() {
         receipt,
         logs,
         value: transaction.value,
-        status: userOperationEvent?.args.success ? "success" : "reverted",
+        status:
+          userOperationEvent && "success" in userOperationEvent.args
+            ? userOperationEvent.args.success
+              ? "success"
+              : "reverted"
+            : "reverted",
       });
     },
     [abi, setTransaction, worldAddress],
diff --git a/packages/explorer/src/app/(explorer)/api/system-abis/route.ts b/packages/explorer/src/app/(explorer)/api/system-abis/route.ts
@@ -0,0 +1,42 @@
+import { Abi, Hex } from "viem";
+import { getSystemAbis } from "@latticexyz/store-sync/internal";
+import { validateChainId } from "../../../../common";
+import { getClient } from "../utils/getClient";
+import { getIndexerUrl } from "../utils/getIndexerUrl";
+
+export const dynamic = "force-dynamic";
+
+export type SystemAbisResponse = {
+  abis: {
+    [systemId: Hex]: Abi;
+  };
+};
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const chainId = Number(searchParams.get("chainId"));
+  const worldAddress = searchParams.get("worldAddress") as Hex;
+  const systemIds = searchParams.get("systemIds")?.split(",") as Hex[];
+
+  if (!chainId || !worldAddress || !systemIds) {
+    return Response.json({ error: "Missing chainId, worldAddress or systemIds" }, { status: 400 });
+  }
+  validateChainId(chainId);
+
+  try {
+    const client = await getClient(chainId);
+    const indexerUrl = getIndexerUrl(chainId);
+    const abis = await getSystemAbis({
+      client,
+      worldAddress,
+      systemIds,
+      indexerUrl,
+      chainId,
+    });
+
+    return Response.json({ abis });
+  } catch (error: unknown) {
+    const errorMessage = error instanceof Error ? error.message : "An unknown error occurred";
+    return Response.json({ error: errorMessage }, { status: 400 });
+  }
+}
diff --git a/packages/explorer/src/app/(explorer)/api/utils/getClient.ts b/packages/explorer/src/app/(explorer)/api/utils/getClient.ts
@@ -0,0 +1,12 @@
+import { createClient, http } from "viem";
+import { chainIdToName, supportedChainId, supportedChains } from "../../../../common";
+
+export async function getClient(chainId: supportedChainId) {
+  const chain = supportedChains[chainIdToName[chainId]];
+  const client = createClient({
+    chain,
+    transport: http(),
+  });
+
+  return client;
+}
diff --git a/packages/explorer/src/app/(explorer)/api/utils/getIndexerUrl.ts b/packages/explorer/src/app/(explorer)/api/utils/getIndexerUrl.ts
@@ -0,0 +1,6 @@
+import { chainIdToName, supportedChainId, supportedChains } from "../../../../common";
+
+export function getIndexerUrl(chainId: supportedChainId) {
+  const chain = supportedChains[chainIdToName[chainId]];
+  return "indexerUrl" in chain ? chain.indexerUrl : undefined;
+}
diff --git a/packages/explorer/src/app/(explorer)/api/world-abi/route.ts b/packages/explorer/src/app/(explorer)/api/world-abi/route.ts
@@ -1,29 +1,16 @@
-import { Address, Hex, createClient, http, parseAbi, size } from "viem";
+import { Address, Hex, parseAbi, size } from "viem";
 import { getBlockNumber, getCode } from "viem/actions";
 import { getAction } from "viem/utils";
 import { fetchBlockLogs } from "@latticexyz/block-logs-stream";
 import { helloStoreEvent } from "@latticexyz/store";
 import { getWorldAbi } from "@latticexyz/store-sync/world";
 import { helloWorldEvent } from "@latticexyz/world";
-import { chainIdToName, supportedChainId, supportedChains, validateChainId } from "../../../../common";
+import { supportedChainId, validateChainId } from "../../../../common";
+import { getClient } from "../utils/getClient";
+import { getIndexerUrl } from "../utils/getIndexerUrl";
 
 export const dynamic = "force-dynamic";
 
-async function getClient(chainId: supportedChainId) {
-  const chain = supportedChains[chainIdToName[chainId]];
-  const client = createClient({
-    chain,
-    transport: http(),
-  });
-
-  return client;
-}
-
-function getIndexerUrl(chainId: supportedChainId) {
-  const chain = supportedChains[chainIdToName[chainId]];
-  return "indexerUrl" in chain ? chain.indexerUrl : undefined;
-}
-
 async function getParameters(chainId: supportedChainId, worldAddress: Address) {
   const client = await getClient(chainId);
   const toBlock = await getAction(client, getBlockNumber, "getBlockNumber")({});
@@ -77,7 +64,6 @@ export async function GET(req: Request) {
       worldAddress,
       fromBlock,
       toBlock,
-      indexerUrl: getIndexerUrl(chainId),
       chainId,
     });
 
diff --git a/packages/explorer/src/app/(explorer)/queries/useSystemAbisQuery.ts b/packages/explorer/src/app/(explorer)/queries/useSystemAbisQuery.ts
@@ -0,0 +1,23 @@
+import { useParams } from "next/navigation";
+import { Hex } from "viem";
+import { useQuery } from "@tanstack/react-query";
+import { SystemAbisResponse } from "../api/system-abis/route";
+import { useChain } from "../hooks/useChain";
+
+export function useSystemAbisQuery() {
+  const { worldAddress, chainName } = useParams();
+  const { id: chainId } = useChain();
+
+  return useQuery<SystemAbisResponse, Error, SystemAbisResponse["abis"]>({
+    queryKey: ["systemAbis", worldAddress, chainName],
+    queryFn: async () => {
+      const res = await fetch(
+        `/api/system-abis?${new URLSearchParams({ chainId: chainId.toString(), worldAddress: worldAddress as Hex })}`,
+      );
+      const data = await res.json();
+      return data;
+    },
+    select: (data) => data.abis,
+    retry: false,
+  });
+}
diff --git a/packages/explorer/src/app/(explorer)/queries/useWorldAbiQuery.ts b/packages/explorer/src/app/(explorer)/queries/useWorldAbiQuery.ts
@@ -1,10 +1,10 @@
 import { useParams } from "next/navigation";
-import { AbiFunction, Hex } from "viem";
+import { Abi, Hex } from "viem";
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
 import { supportedChains, validateChainName } from "../../../common";
 
 type AbiQueryResult = {
-  abi: AbiFunction[];
+  abi: Abi;
   isWorldDeployed: boolean;
 };
 
diff --git a/packages/explorer/src/components/Navigation.tsx b/packages/explorer/src/components/Navigation.tsx
@@ -36,7 +36,7 @@ export function Navigation() {
           <NavigationLink href="explore">Explore</NavigationLink>
           <NavigationLink href="interact">Interact</NavigationLink>
           <NavigationLink href="observe">Observe</NavigationLink>
-          <NavigationLink href="abi">ABI</NavigationLink>
+          <NavigationLink href="decode">Decode</NavigationLink>
         </div>
 
         {isFetched && !data?.isWorldDeployed && (
diff --git a/packages/store-sync/src/world/getSystemAbis.test.ts b/packages/store-sync/src/world/getSystemAbis.test.ts
@@ -1,6 +1,6 @@
 import { createTestClient, http, parseAbi } from "viem";
 import { foundry } from "viem/chains";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi, beforeEach } from "vitest";
 import {
   mockError,
   mockMetadata,
@@ -20,25 +20,43 @@ vi.doMock("../getRecords", () => ({
 const { getSystemAbis } = await import("./getSystemAbis");
 
 describe("Systems ABIs", () => {
-  it("should return the systems ABIs", async () => {
-    const client = createTestClient({
+  let client;
+  const baseParams = {
+    worldAddress: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+    fromBlock: 0n,
+    toBlock: 0n,
+  };
+
+  beforeEach(() => {
+    client = createTestClient({
       chain: foundry,
       mode: "anvil",
       transport: http(),
     });
+  });
 
+  it("should return queried systems ABIs", async () => {
     const abi = await getSystemAbis({
+      ...baseParams,
       client,
-      worldAddress: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
-      systemIds: [mockSystem1Id, mockSystem2Id, mockSystem3Id],
-      fromBlock: 0n,
-      toBlock: 0n,
+      systemIds: [mockSystem1Id, mockSystem3Id],
     });
 
     expect(abi).toEqual({
       [mockSystem1Id]: parseAbi([mockSystem1Fn, mockError]),
-      [mockSystem2Id]: parseAbi([mockSystem2Fn, mockError]),
       [mockSystem3Id]: [],
     });
   });
+
+  it("should return all systems ABIs", async () => {
+    const abi = await getSystemAbis({
+      ...baseParams,
+      client,
+    });
+
+    expect(abi).toEqual({
+      [mockSystem1Id]: parseAbi([mockSystem1Fn, mockError]),
+      [mockSystem2Id]: parseAbi([mockSystem2Fn, mockError]),
+    });
+  });
 });
diff --git a/packages/store-sync/src/world/getSystemAbis.ts b/packages/store-sync/src/world/getSystemAbis.ts
@@ -13,7 +13,7 @@ export async function getSystemAbis({
 }: {
   readonly client: Client;
   readonly worldAddress: Address;
-  readonly systemIds: Hex[];
+  readonly systemIds?: Hex[];
   readonly fromBlock?: bigint;
   readonly toBlock?: bigint;
   readonly indexerUrl?: string;
@@ -30,9 +30,13 @@ export async function getSystemAbis({
   });
 
   const abis = Object.fromEntries([
-    ...systemIds.map((id) => [id, [] as Abi] as const),
+    ...(systemIds?.map((id) => [id, [] as Abi] as const) || []),
     ...records
-      .filter(({ resource, tag }) => tag === stringToHex("abi", { size: 32 }) && systemIds.includes(resource))
+      .filter(({ resource, tag }) => {
+        const isAbiTag = tag === stringToHex("abi", { size: 32 });
+        const matchesSystemId = systemIds ? systemIds.includes(resource) : true;
+        return isAbiTag && matchesSystemId;
+      })
       .map(({ resource, value }) => {
         const abi = value === "0x" ? [] : parseAbi(hexToString(value).split("\n"));
         return [resource, abi] as const;
