Skip to content

Commit 13071c4

Browse files
karooolisfrolic
karooolis
and
frolic
authored
feat(explorer): use systems abis in decode form (#3646)
Co-authored-by: Kevin Ingersoll <[email protected]>
1 parent 490159e commit 13071c4

File tree

16 files changed

+173
-53
lines changed

16 files changed

+173
-53
lines changed

‎.changeset/khaki-walls-enjoy.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@latticexyz/explorer": patch
3+
---
4+
5+
- Added the `/system-abis` endpoint to retrieve ABIs by system IDs.
6+
- The search form for decoding selectors now uses all system ABIs for complete results.
7+
- The `ABI` page has been renamed to `Decode`.

‎packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/abi/AbiExplorer.tsx ‎packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/AbiExplorer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function AbiExplorer() {
1616

1717
return (
1818
<div className="space-y-4">
19-
<h4 className="font-semibold uppercase">ABI</h4>
19+
<h4 className="font-semibold uppercase">World ABI</h4>
2020
<pre className="text-md relative mb-4 rounded border border-white/20 p-3 text-sm">
2121
<JsonView src={data?.abi} theme="a11y" />
2222
<CopyButton value={JSON.stringify(data?.abi, null, 2)} className="absolute right-1.5 top-1.5" />

‎packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/abi/DecodeForm.tsx ‎packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/DecodeForm.tsx

+29-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { AbiEvent, AbiFunction, toFunctionSelector } from "viem";
3+
import { AbiFunction, AbiItem, toFunctionSelector } from "viem";
44
import { formatAbiItem } from "viem/utils";
55
import * as z from "zod";
66
import { useState } from "react";
@@ -22,36 +22,50 @@ import {
2222
import { Input } from "../../../../../../components/ui/Input";
2323
import { Skeleton } from "../../../../../../components/ui/Skeleton";
2424
import { cn } from "../../../../../../utils";
25+
import { useSystemAbisQuery } from "../../../../queries/useSystemAbisQuery";
2526
import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
2627
import { getErrorSelector } from "./getErrorSelector";
2728

29+
type AbiError = AbiItem & { type: "error" };
30+
2831
const formSchema = z.object({
2932
selector: z.string().min(1).optional(),
3033
});
3134

35+
function isAbiFunction(item: AbiItem): item is AbiFunction {
36+
return item.type === "function";
37+
}
38+
39+
function isAbiError(item: AbiItem): item is AbiItem & { type: "error" } {
40+
return item.type === "error";
41+
}
42+
3243
export function DecodeForm() {
33-
const { data, isLoading } = useWorldAbiQuery();
44+
const { data: worldData, isLoading: isWorldAbiLoading } = useWorldAbiQuery();
45+
const { data: systemData, isLoading: isSystemAbisLoading } = useSystemAbisQuery();
46+
const [abiItem, setAbiItem] = useState<AbiFunction | AbiError>();
3447
const form = useForm<z.infer<typeof formSchema>>({
3548
resolver: zodResolver(formSchema),
3649
});
37-
const [result, setResult] = useState<AbiFunction | AbiEvent>();
3850

3951
function onSubmit({ selector }: z.infer<typeof formSchema>) {
40-
const items = data?.abi.filter((item) => item.type === "function" || item.type === "error");
41-
const abiItem = items?.find((item) => {
42-
if (item.type === "function") {
52+
const worldAbi = worldData?.abi || [];
53+
const systemsAbis = systemData ? Object.values(systemData) : [];
54+
const abis = [worldAbi, ...systemsAbis].flat();
55+
56+
const abiItem = abis.find((item): item is AbiFunction | AbiError => {
57+
if (isAbiFunction(item)) {
4358
return toFunctionSelector(item) === selector;
44-
} else if (item.type === "error") {
59+
} else if (isAbiError(item)) {
4560
return getErrorSelector(item) === selector;
4661
}
47-
4862
return false;
4963
});
5064

51-
setResult(abiItem);
65+
setAbiItem(abiItem);
5266
}
5367

54-
if (isLoading) {
68+
if (isWorldAbiLoading || isSystemAbisLoading) {
5569
return <Skeleton className="h-[152px] w-full" />;
5670
}
5771

@@ -76,14 +90,14 @@ export function DecodeForm() {
7690
{form.formState.isSubmitted && (
7791
<pre
7892
className={cn("text-md relative mt-4 rounded border border-white/20 p-3 text-sm", {
79-
"border-red-400 bg-red-100": !result,
93+
"border-red-400 bg-red-100": !abiItem,
8094
})}
8195
>
82-
{result ? (
96+
{abiItem ? (
8397
<>
84-
<span className="mr-2 text-sm opacity-50">{result.type === "function" ? "function" : "error"}</span>
85-
<span>{formatAbiItem(result)}</span>
86-
<CopyButton value={JSON.stringify(result, null, 2)} className="absolute right-1.5 top-1.5" />
98+
<span className="mr-2 text-sm opacity-50">{abiItem.type === "function" ? "function" : "error"}</span>
99+
<span>{formatAbiItem(abiItem)}</span>
100+
<CopyButton value={JSON.stringify(abiItem, null, 2)} className="absolute right-1.5 top-1.5" />
87101
</>
88102
) : (
89103
<span className="text-red-700">No matching function or error found for this selector</span>

‎packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/abi/getErrorSelector.ts ‎packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/getErrorSelector.ts

File renamed without changes.

‎packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/abi/page.tsx ‎packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/decode/page.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ export default async function UtilsPage() {
1111
return (
1212
<div className="flex h-[calc(100vh-70px)] flex-col space-y-8">
1313
<DecodeForm />
14-
1514
<Separator />
16-
1715
<AbiExplorer />
1816
</div>
1917
);

‎packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/InteractForm.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { Coins, Eye, Send } from "lucide-react";
44
import { useQueryState } from "nuqs";
5-
import { AbiFunction, stringify } from "viem";
5+
import { AbiFunction, AbiItem, stringify } from "viem";
66
import { useDeferredValue, useMemo } from "react";
77
import { Input } from "../../../../../../components/ui/Input";
88
import { Separator } from "../../../../../../components/ui/Separator";
@@ -12,6 +12,10 @@ import { useHashState } from "../../../../hooks/useHashState";
1212
import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
1313
import { FunctionField } from "./FunctionField";
1414

15+
function isFunction(abi: AbiItem): abi is AbiFunction {
16+
return abi.type === "function";
17+
}
18+
1519
export function InteractForm() {
1620
const [hash] = useHashState();
1721
const { data, isFetched } = useWorldAbiQuery();
@@ -20,7 +24,8 @@ export function InteractForm() {
2024
const filteredFunctions = useMemo(() => {
2125
if (!data?.abi) return [];
2226
return data.abi.filter(
23-
(item) => item.type === "function" && item.name.toLowerCase().includes(deferredFilterValue.toLowerCase()),
27+
(item): item is AbiFunction =>
28+
isFunction(item) && item.name.toLowerCase().includes(deferredFilterValue.toLowerCase()),
2429
);
2530
}, [data?.abi, deferredFilterValue]);
2631

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,12 @@ export function TransactionsWatcher() {
8181
receipt,
8282
logs,
8383
value: transaction.value,
84-
status: userOperationEvent?.args.success ? "success" : "reverted",
84+
status:
85+
userOperationEvent && "success" in userOperationEvent.args
86+
? userOperationEvent.args.success
87+
? "success"
88+
: "reverted"
89+
: "reverted",
8590
});
8691
},
8792
[abi, setTransaction, worldAddress],

‎packages/explorer/src/app/(explorer)/api/system-abis/route.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Abi, Hex } from "viem";
2+
import { getSystemAbis } from "@latticexyz/store-sync/internal";
3+
import { validateChainId } from "../../../../common";
4+
import { getClient } from "../utils/getClient";
5+
import { getIndexerUrl } from "../utils/getIndexerUrl";
6+
7+
export const dynamic = "force-dynamic";
8+
9+
export type SystemAbisResponse = {
10+
abis: {
11+
[systemId: Hex]: Abi;
12+
};
13+
};
14+
15+
export async function GET(req: Request) {
16+
const { searchParams } = new URL(req.url);
17+
const chainId = Number(searchParams.get("chainId"));
18+
const worldAddress = searchParams.get("worldAddress") as Hex;
19+
const systemIds = searchParams.get("systemIds")?.split(",") as Hex[];
20+
21+
if (!chainId || !worldAddress || !systemIds) {
22+
return Response.json({ error: "Missing chainId, worldAddress or systemIds" }, { status: 400 });
23+
}
24+
validateChainId(chainId);
25+
26+
try {
27+
const client = await getClient(chainId);
28+
const indexerUrl = getIndexerUrl(chainId);
29+
const abis = await getSystemAbis({
30+
client,
31+
worldAddress,
32+
systemIds,
33+
indexerUrl,
34+
chainId,
35+
});
36+
37+
return Response.json({ abis });
38+
} catch (error: unknown) {
39+
const errorMessage = error instanceof Error ? error.message : "An unknown error occurred";
40+
return Response.json({ error: errorMessage }, { status: 400 });
41+
}
42+
}

‎packages/explorer/src/app/(explorer)/api/utils/getClient.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createClient, http } from "viem";
2+
import { chainIdToName, supportedChainId, supportedChains } from "../../../../common";
3+
4+
export async function getClient(chainId: supportedChainId) {
5+
const chain = supportedChains[chainIdToName[chainId]];
6+
const client = createClient({
7+
chain,
8+
transport: http(),
9+
});
10+
11+
return client;
12+
}

‎packages/explorer/src/app/(explorer)/api/utils/getIndexerUrl.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { chainIdToName, supportedChainId, supportedChains } from "../../../../common";
2+
3+
export function getIndexerUrl(chainId: supportedChainId) {
4+
const chain = supportedChains[chainIdToName[chainId]];
5+
return "indexerUrl" in chain ? chain.indexerUrl : undefined;
6+
}

‎packages/explorer/src/app/(explorer)/api/world-abi/route.ts

+4-18
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,16 @@
1-
import { Address, Hex, createClient, http, parseAbi, size } from "viem";
1+
import { Address, Hex, parseAbi, size } from "viem";
22
import { getBlockNumber, getCode } from "viem/actions";
33
import { getAction } from "viem/utils";
44
import { fetchBlockLogs } from "@latticexyz/block-logs-stream";
55
import { helloStoreEvent } from "@latticexyz/store";
66
import { getWorldAbi } from "@latticexyz/store-sync/world";
77
import { helloWorldEvent } from "@latticexyz/world";
8-
import { chainIdToName, supportedChainId, supportedChains, validateChainId } from "../../../../common";
8+
import { supportedChainId, validateChainId } from "../../../../common";
9+
import { getClient } from "../utils/getClient";
10+
import { getIndexerUrl } from "../utils/getIndexerUrl";
911

1012
export const dynamic = "force-dynamic";
1113

12-
async function getClient(chainId: supportedChainId) {
13-
const chain = supportedChains[chainIdToName[chainId]];
14-
const client = createClient({
15-
chain,
16-
transport: http(),
17-
});
18-
19-
return client;
20-
}
21-
22-
function getIndexerUrl(chainId: supportedChainId) {
23-
const chain = supportedChains[chainIdToName[chainId]];
24-
return "indexerUrl" in chain ? chain.indexerUrl : undefined;
25-
}
26-
2714
async function getParameters(chainId: supportedChainId, worldAddress: Address) {
2815
const client = await getClient(chainId);
2916
const toBlock = await getAction(client, getBlockNumber, "getBlockNumber")({});
@@ -77,7 +64,6 @@ export async function GET(req: Request) {
7764
worldAddress,
7865
fromBlock,
7966
toBlock,
80-
indexerUrl: getIndexerUrl(chainId),
8167
chainId,
8268
});
8369

‎packages/explorer/src/app/(explorer)/queries/useSystemAbisQuery.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { useParams } from "next/navigation";
2+
import { Hex } from "viem";
3+
import { useQuery } from "@tanstack/react-query";
4+
import { SystemAbisResponse } from "../api/system-abis/route";
5+
import { useChain } from "../hooks/useChain";
6+
7+
export function useSystemAbisQuery() {
8+
const { worldAddress, chainName } = useParams();
9+
const { id: chainId } = useChain();
10+
11+
return useQuery<SystemAbisResponse, Error, SystemAbisResponse["abis"]>({
12+
queryKey: ["systemAbis", worldAddress, chainName],
13+
queryFn: async () => {
14+
const res = await fetch(
15+
`/api/system-abis?${new URLSearchParams({ chainId: chainId.toString(), worldAddress: worldAddress as Hex })}`,
16+
);
17+
const data = await res.json();
18+
return data;
19+
},
20+
select: (data) => data.abis,
21+
retry: false,
22+
});
23+
}

‎packages/explorer/src/app/(explorer)/queries/useWorldAbiQuery.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { useParams } from "next/navigation";
2-
import { AbiFunction, Hex } from "viem";
2+
import { Abi, Hex } from "viem";
33
import { UseQueryResult, useQuery } from "@tanstack/react-query";
44
import { supportedChains, validateChainName } from "../../../common";
55

66
type AbiQueryResult = {
7-
abi: AbiFunction[];
7+
abi: Abi;
88
isWorldDeployed: boolean;
99
};
1010

‎packages/explorer/src/components/Navigation.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function Navigation() {
3636
<NavigationLink href="explore">Explore</NavigationLink>
3737
<NavigationLink href="interact">Interact</NavigationLink>
3838
<NavigationLink href="observe">Observe</NavigationLink>
39-
<NavigationLink href="abi">ABI</NavigationLink>
39+
<NavigationLink href="decode">Decode</NavigationLink>
4040
</div>
4141

4242
{isFetched && !data?.isWorldDeployed && (

‎packages/store-sync/src/world/getSystemAbis.test.ts

+26-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createTestClient, http, parseAbi } from "viem";
22
import { foundry } from "viem/chains";
3-
import { describe, expect, it, vi } from "vitest";
3+
import { describe, expect, it, vi, beforeEach } from "vitest";
44
import {
55
mockError,
66
mockMetadata,
@@ -20,25 +20,43 @@ vi.doMock("../getRecords", () => ({
2020
const { getSystemAbis } = await import("./getSystemAbis");
2121

2222
describe("Systems ABIs", () => {
23-
it("should return the systems ABIs", async () => {
24-
const client = createTestClient({
23+
let client;
24+
const baseParams = {
25+
worldAddress: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
26+
fromBlock: 0n,
27+
toBlock: 0n,
28+
};
29+
30+
beforeEach(() => {
31+
client = createTestClient({
2532
chain: foundry,
2633
mode: "anvil",
2734
transport: http(),
2835
});
36+
});
2937

38+
it("should return queried systems ABIs", async () => {
3039
const abi = await getSystemAbis({
40+
...baseParams,
3141
client,
32-
worldAddress: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
33-
systemIds: [mockSystem1Id, mockSystem2Id, mockSystem3Id],
34-
fromBlock: 0n,
35-
toBlock: 0n,
42+
systemIds: [mockSystem1Id, mockSystem3Id],
3643
});
3744

3845
expect(abi).toEqual({
3946
[mockSystem1Id]: parseAbi([mockSystem1Fn, mockError]),
40-
[mockSystem2Id]: parseAbi([mockSystem2Fn, mockError]),
4147
[mockSystem3Id]: [],
4248
});
4349
});
50+
51+
it("should return all systems ABIs", async () => {
52+
const abi = await getSystemAbis({
53+
...baseParams,
54+
client,
55+
});
56+
57+
expect(abi).toEqual({
58+
[mockSystem1Id]: parseAbi([mockSystem1Fn, mockError]),
59+
[mockSystem2Id]: parseAbi([mockSystem2Fn, mockError]),
60+
});
61+
});
4462
});

‎packages/store-sync/src/world/getSystemAbis.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export async function getSystemAbis({
1313
}: {
1414
readonly client: Client;
1515
readonly worldAddress: Address;
16-
readonly systemIds: Hex[];
16+
readonly systemIds?: Hex[];
1717
readonly fromBlock?: bigint;
1818
readonly toBlock?: bigint;
1919
readonly indexerUrl?: string;
@@ -30,9 +30,13 @@ export async function getSystemAbis({
3030
});
3131

3232
const abis = Object.fromEntries([
33-
...systemIds.map((id) => [id, [] as Abi] as const),
33+
...(systemIds?.map((id) => [id, [] as Abi] as const) || []),
3434
...records
35-
.filter(({ resource, tag }) => tag === stringToHex("abi", { size: 32 }) && systemIds.includes(resource))
35+
.filter(({ resource, tag }) => {
36+
const isAbiTag = tag === stringToHex("abi", { size: 32 });
37+
const matchesSystemId = systemIds ? systemIds.includes(resource) : true;
38+
return isAbiTag && matchesSystemId;
39+
})
3640
.map(({ resource, value }) => {
3741
const abi = value === "0x" ? [] : parseAbi(hexToString(value).split("\n"));
3842
return [resource, abi] as const;

0 commit comments

Comments
 (0)