initial work on handling tuples/arrays

latticexyz · Jan 8, 2025 · 8a6e323 · 8a6e323
1 parent a7625b9
commit 8a6e323
Showing 1 changed file with 30 additions and 4 deletions.
diff --git a/.../explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/FunctionField.tsx b/.../explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/FunctionField.tsx
@@ -35,10 +35,14 @@ type DecodedEvent = {
 };
 
 const formSchema = z.object({
-  inputs: z.array(z.string()),
+  inputs: z.array(z.union([z.string(), z.array(z.any()), z.record(z.any())])),
   value: z.string().optional(),
 });
 
+function isArrayOrTuple(type: string) {
+  return type.includes("[]") || type.includes("tuple");
+}
+
 export function FunctionField({ worldAbi, functionAbi }: Props) {
   const operationType: FunctionType =
     functionAbi.stateMutability === "view" || functionAbi.stateMutability === "pure"
@@ -55,13 +59,26 @@ export function FunctionField({ worldAbi, functionAbi }: Props) {
   const [txHash, setTxHash] = useState<Hex>();
   const txUrl = blockExplorerTransactionUrl({ hash: txHash, chainId });
 
+  console.log(functionAbi);
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       inputs: [],
     },
   });
 
+  const parseInput = (value: string, type: string) => {
+    try {
+      if (isArrayOrTuple(type)) {
+        return JSON.parse(value);
+      }
+      return value;
+    } catch (e) {
+      return value;
+    }
+  };
+
   async function onSubmit(values: z.infer<typeof formSchema>) {
     if (!account.isConnected) {
       return openConnectModal?.();
@@ -70,12 +87,16 @@ export function FunctionField({ worldAbi, functionAbi }: Props) {
     setIsLoading(true);
     let toastId;
     try {
+      const parsedInputs = values.inputs.map((input, index) =>
+        parseInput(input as string, functionAbi.inputs[index].type),
+      );
+
       if (operationType === FunctionType.READ) {
         const result = await readContract(wagmiConfig, {
           abi: worldAbi,
           address: worldAddress as Address,
           functionName: functionAbi.name,
-          args: values.inputs,
+          args: parsedInputs,
           chainId,
         });
 
@@ -86,7 +107,7 @@ export function FunctionField({ worldAbi, functionAbi }: Props) {
           abi: worldAbi,
           address: worldAddress as Address,
           functionName: functionAbi.name,
-          args: values.inputs,
+          args: parsedInputs,
           ...(values.value && { value: BigInt(values.value) }),
           chainId,
         });
@@ -134,7 +155,12 @@ export function FunctionField({ worldAbi, functionAbi }: Props) {
               name={`inputs.${index}`}
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>{input.name}</FormLabel>
+                  <FormLabel>
+                    {input.name}
+                    {isArrayOrTuple(input.type) && (
+                      <span className="ml-2 text-xs text-muted-foreground">(Enter as JSON array)</span>
+                    )}
+                  </FormLabel>
                   <FormControl>
                     <Input placeholder={input.type} {...field} />
                   </FormControl>