feat(explorer): abi explorer (#3635)

Author: karooolis

.changeset/thin-nails-shop.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Added an ABI page for exploring world ABI. The ABI Explorer also includes a form for searching custom errors or functions based on their selectors.

packages/explorer/package.json

@@ -73,6 +73,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
+    "react18-json-view": "^0.2.9",
     "sonner": "^1.5.0",
     "sql-autocomplete": "^1.1.1",
     "tailwind-merge": "^1.12.0",

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

@@ -0,0 +1,26 @@
+"use client";
+
+import JsonView from "react18-json-view";
+import { CopyButton } from "../../../../../../components/CopyButton";
+import { Skeleton } from "../../../../../../components/ui/Skeleton";
+import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
+
+export function AbiExplorer() {
+  const { data, isLoading, isError } = useWorldAbiQuery();
+
+  if (isLoading) {
+    return <Skeleton className="h-[106px] w-full" />;
+  } else if (isError) {
+    throw new Error("Failed to fetch ABI");
+  }
+
+  return (
+    <div className="space-y-4">
+      <h4 className="font-semibold uppercase">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" />
+      </pre>
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+"use client";
+
+import { AbiEvent, AbiFunction, toFunctionSelector } from "viem";
+import { formatAbiItem } from "viem/utils";
+import * as z from "zod";
+import { useState } from "react";
+import "react18-json-view/src/dark.css";
+import "react18-json-view/src/style.css";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CopyButton } from "../../../../../../components/CopyButton";
+import { Button } from "../../../../../../components/ui/Button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../../../../../components/ui/Form";
+import { Input } from "../../../../../../components/ui/Input";
+import { Skeleton } from "../../../../../../components/ui/Skeleton";
+import { cn } from "../../../../../../utils";
+import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
+import { getErrorSelector } from "./getErrorSelector";
+
+const formSchema = z.object({
+  selector: z.string().min(1).optional(),
+});
+
+export function DecodeForm() {
+  const { data, isLoading } = useWorldAbiQuery();
+  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") {
+        return toFunctionSelector(item) === selector;
+      } else if (item.type === "error") {
+        return getErrorSelector(item) === selector;
+      }
+
+      return false;
+    });
+
+    setResult(abiItem);
+  }
+
+  if (isLoading) {
+    return <Skeleton className="h-[152px] w-full" />;
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="selector"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Encoded selector</FormLabel>
+              <FormControl>
+                <Input placeholder="0xf0f0f0f0" type="text" {...field} />
+              </FormControl>
+              <FormDescription>Find the function or error by its selector</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {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,
+            })}
+          >
+            {result ? (
+              <>
+                <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="text-red-700">No matching function or error found for this selector</span>
+            )}
+          </pre>
+        )}
+
+        <Button type="submit" size="sm">
+          Find
+        </Button>
+      </form>
+    </Form>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { AbiItem } from "viem";
+import { keccak256, stringToHex } from "viem";
+
+export function getErrorSelector(errorAbi: AbiItem) {
+  if (errorAbi.type !== "error") {
+    throw new Error("Abi item is not an error");
+  }
+
+  const inputTypes = errorAbi.inputs.map((input) => input.type);
+  const signature = `${errorAbi.name}(${inputTypes.join(",")})`;
+  const hash = keccak256(stringToHex(signature));
+
+  return hash.slice(0, 10);
+}

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

@@ -0,0 +1,20 @@
+import { Metadata } from "next";
+import { Separator } from "../../../../../../components/ui/Separator";
+import { AbiExplorer } from "./AbiExplorer";
+import { DecodeForm } from "./DecodeForm";
+
+export const metadata: Metadata = {
+  title: "ABI Explorer",
+};
+
+export default async function UtilsPage() {
+  return (
+    <div className="flex h-[calc(100vh-70px)] flex-col space-y-8">
+      <DecodeForm />
+
+      <Separator />
+
+      <AbiExplorer />
+    </div>
+  );
+}

packages/explorer/src/app/(explorer)/globals.css

@@ -6,6 +6,7 @@ html,
 body,
 .container {
   font-family: var(--font-jetbrains-mono);
+  background: var(--color-background);
 }
 
 @layer base {

packages/explorer/src/components/Navigation.tsx

@@ -36,6 +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>
         </div>
 
         {isFetched && !data?.isWorldDeployed && (