feat(explorer): decode function calls (#3710)

Co-authored-by: Karolis Ramanauskas <hello@karolisram.com>

Author: alvrs

.changeset/breezy-wolves-notice.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+The Worlds Explorer explorer now supports decoding function data.

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

@@ -1,13 +1,22 @@
 "use client";
 
-import { AbiFunction, AbiItem, toFunctionSelector } from "viem";
+import {
+  AbiFunction,
+  AbiItem,
+  Hex,
+  decodeErrorResult,
+  decodeFunctionData,
+  parseAbiItem,
+  toFunctionSelector,
+} from "viem";
 import { formatAbiItem } from "viem/utils";
 import * as z from "zod";
-import { useState } from "react";
+import { useMemo, 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 { Resource, hexToResource, resourceToLabel } from "@latticexyz/common";
 import { CopyButton } from "../../../../../../components/CopyButton";
 import { Button } from "../../../../../../components/ui/Button";
 import {
@@ -27,9 +36,23 @@ import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
 import { getErrorSelector } from "./getErrorSelector";
 
 type AbiError = AbiItem & { type: "error" };
+type ResourceItem = { type: "resource"; id: string; resource: Resource };
+type SelectorDatabase = { type: "signature"; selectors: string[] };
+type Result = {
+  type: string;
+  label: string;
+  decodedCall?: DecodedFunctionCall;
+};
+
+type DecodedFunctionCall = {
+  args: readonly unknown[];
+  abi: AbiFunction | AbiError;
+  functionName?: string;
+  errorName?: string;
+};
 
 const formSchema = z.object({
-  selector: z.string().min(1).optional(),
+  encodedData: z.string().min(1).optional(),
 });
 
 function isAbiFunction(item: AbiItem): item is AbiFunction {
@@ -40,30 +63,124 @@ function isAbiError(item: AbiItem): item is AbiItem & { type: "error" } {
   return item.type === "error";
 }
 
+function stringifyValue(value: unknown): string {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (typeof value === "object") {
+    if (Array.isArray(value)) {
+      return `[${value.map(stringifyValue).join(", ")}]`;
+    }
+    return `{${Object.entries(value as Record<string, unknown>)
+      .map(([key, val]) => `${key}: ${stringifyValue(val)}`)
+      .join(", ")}}`;
+  }
+  return String(value);
+}
+
+function decodeAbiItem(abiItem: AbiFunction | AbiError, data: Hex): DecodedFunctionCall {
+  if (abiItem.type === "function") {
+    const result = decodeFunctionData({ abi: [abiItem], data });
+    return { args: result.args, abi: abiItem, functionName: result.functionName };
+  } else {
+    const result = decodeErrorResult({ abi: [abiItem], data });
+    return { args: result.args, abi: abiItem, errorName: result.errorName };
+  }
+}
+
 export function DecodeForm() {
   const { data: worldData, isLoading: isWorldAbiLoading } = useWorldAbiQuery();
   const { data: systemData, isLoading: isSystemAbisLoading } = useSystemAbisQuery();
-  const [abiItem, setAbiItem] = useState<AbiFunction | AbiError>();
+  const [decoded, setDecoded] = useState<AbiFunction | AbiError | ResourceItem | SelectorDatabase>();
+  const [encoded, setEncoded] = useState<string | undefined>();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
 
-  function onSubmit({ selector }: z.infer<typeof formSchema>) {
+  const onSubmit = async ({ encodedData }: z.infer<typeof formSchema>) => {
+    setEncoded(encodedData);
+    if (!encodedData) return;
+
+    const selector = encodedData.substring(0, 10);
     const worldAbi = worldData?.abi || [];
     const systemsAbis = systemData ? Object.values(systemData) : [];
     const abis = [worldAbi, ...systemsAbis].flat();
 
+    // Try to find matching ABI item
     const abiItem = abis.find((item): item is AbiFunction | AbiError => {
       if (isAbiFunction(item)) {
         return toFunctionSelector(item) === selector;
-      } else if (isAbiError(item)) {
+      }
+      if (isAbiError(item)) {
         return getErrorSelector(item) === selector;
       }
       return false;
     });
 
-    setAbiItem(abiItem);
-  }
+    if (abiItem) {
+      setDecoded(abiItem);
+      return;
+    }
+
+    // Try to decode as resource
+    try {
+      const resource = hexToResource(encodedData as Hex);
+      if (resource) {
+        setDecoded({ type: "resource", id: encodedData, resource });
+        return;
+      }
+    } catch {
+      // Error decoding resource
+    }
+
+    // Try to find in 4-byte database
+    if (selector.length !== 10) return;
+    try {
+      const response = await fetch(`https://www.4byte.directory/api/v1/signatures/?hex_signature=${selector}`);
+      const data = await response.json();
+      if (data.results.length > 0) {
+        setDecoded({
+          type: "signature",
+          selectors: data.results.map((result: { text_signature: string }) => result.text_signature),
+        });
+        return;
+      }
+    } catch {
+      // Error fetching 4byte data
+    }
+
+    setDecoded(undefined);
+  };
+
+  const results = useMemo<Result[]>(() => {
+    if (!decoded || !encoded) return [];
+    try {
+      if (decoded.type === "resource") {
+        return [{ type: decoded.resource.type, label: resourceToLabel(decoded.resource) }];
+      }
+      if (decoded.type === "function" || decoded.type === "error") {
+        try {
+          const decodedCall = decodeAbiItem(decoded, encoded as Hex);
+          return [{ type: decoded.type, label: formatAbiItem(decoded), decodedCall }];
+        } catch {
+          return [{ type: decoded.type, label: formatAbiItem(decoded) }];
+        }
+      }
+      if (decoded.type === "signature") {
+        return decoded.selectors.map((selector) => {
+          const abiItem = parseAbiItem(`function ${selector}`) as AbiFunction;
+          try {
+            const decodedCall = decodeAbiItem(abiItem, encoded as Hex);
+            return { type: "signature", label: selector, decodedCall };
+          } catch {
+            return { type: "signature", label: selector };
+          }
+        });
+      }
+    } catch {
+      // Error decoding function data
+    }
+    return [];
+  }, [decoded, encoded]);
 
   if (isWorldAbiLoading || isSystemAbisLoading) {
     return <Skeleton className="h-[152px] w-full" />;
@@ -74,35 +191,47 @@ export function DecodeForm() {
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
         <FormField
           control={form.control}
-          name="selector"
+          name="encodedData"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Encoded selector</FormLabel>
+              <FormLabel>Encoded data</FormLabel>
               <FormControl>
                 <Input placeholder="0xf0f0f0f0" type="text" {...field} />
               </FormControl>
-              <FormDescription>Find the function or error by its selector</FormDescription>
+              <FormDescription>Decode function, error or resource data</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": !abiItem,
-            })}
-          >
-            {abiItem ? (
-              <>
-                <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" />
-              </>
+          <>
+            {results.length > 0 ? (
+              results.map(({ type, label, decodedCall }, index) => (
+                <pre key={`call-${index}`} className="text-md relative mt-4 rounded border border-white/20 p-3 text-sm">
+                  <span className="mr-2 text-sm opacity-50">{type}</span>
+                  <span>{label}</span>
+                  <pre className="block whitespace-pre-wrap">
+                    {decodedCall?.abi?.inputs?.map((input, inputIndex) => (
+                      <p key={`input-${inputIndex}`} className={"ml-4"}>
+                        <span className="opacity-50">{input.name ?? `arg ${inputIndex}`}: </span>
+                        <span>{stringifyValue(decodedCall.args[inputIndex])}</span>
+                      </p>
+                    ))}
+                  </pre>
+                  <CopyButton value={JSON.stringify(decoded, null, 2)} className="absolute right-1.5 top-1.5" />
+                </pre>
+              ))
             ) : (
-              <span className="text-red-700">No matching function or error found for this selector</span>
+              <pre
+                className={cn("text-md relative mt-4 rounded border border-white/20 p-3 text-sm", {
+                  "border-red-400 bg-red-100": !decoded,
+                })}
+              >
+                <span className="text-red-700">No matching function, error or resource found for this data</span>
+              </pre>
             )}
-          </pre>
+          </>
         )}
 
         <Button type="submit" size="sm">