Add contract signature option

components/contract-execution/contract-functions-list.tsx → components/contract-execution/components/contract-functions-list.tsx

@@ -1,13 +1,14 @@
 import { Search } from "lucide-react";
 import { useMemo, useState } from "react";
 import type { AbiFunction } from "viem";
-import { cn } from "../../lib/utils.js";
-import { Accordion } from "../shadcn/accordion.js";
-import { Input } from "../shadcn/input.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../shadcn/tabs.js";
+import { cn } from "../../../lib/utils.js";
+import { Accordion } from "../../shadcn/accordion.js";
+import { Input } from "../../shadcn/input.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../shadcn/tabs.js";
+import type { ContractFunctionsListProps } from "../types.js";
 import { FunctionItem } from "./function-item.js";
 import { RawOperations } from "./raw-operations.js";
-import type { ContractFunctionsListProps } from "./types.js";
+import { SignatureOperations } from "./signature-operations.js";
 
 export function ContractFunctionsList({
   abi,
@@ -22,9 +23,11 @@ export function ContractFunctionsList({
   onSimulate,
   onRawCall,
   onRawTransaction,
+  enableSignature,
   addressRenderer,
   onHashClick,
   title,
+  NoAbiComponent,
 }: ContractFunctionsListProps) {
   const [searchTerm, setSearchTerm] = useState("");
 
@@ -51,7 +54,8 @@ export function ContractFunctionsList({
   }, [contractFunctions, searchTerm]);
 
   const hasRawOperations = onRawCall || onRawTransaction;
-  const tabCount = hasRawOperations ? 3 : 2;
+  const hasSignature = !!enableSignature;
+  const tabCount = 2 + (hasRawOperations ? 1 : 0) + (hasSignature ? 1 : 0);
 
   return (
     <div className="pb-7">
@@ -76,6 +80,7 @@ export function ContractFunctionsList({
               "grid w-full",
               tabCount === 2 && "grid-cols-2",
               tabCount === 3 && "grid-cols-3",
+              tabCount === 4 && "grid-cols-4",
             )}
           >
             <TabsTrigger
@@ -104,6 +109,14 @@ export function ContractFunctionsList({
                 Raw
               </TabsTrigger>
             )}
+            {hasSignature && (
+              <TabsTrigger
+                value="signature"
+                className="flex cursor-pointer items-center gap-2"
+              >
+                Signature
+              </TabsTrigger>
+            )}
           </TabsList>
 
           <TabsContent value="read" className="mt-4">
@@ -129,6 +142,10 @@ export function ContractFunctionsList({
                     />
                   ))}
                 </Accordion>
+              ) : NoAbiComponent &&
+                !searchTerm &&
+                contractFunctions.length === 0 ? (
+                <NoAbiComponent />
               ) : (
                 <div className="p-6 text-center text-muted-foreground">
                   {searchTerm
@@ -162,6 +179,10 @@ export function ContractFunctionsList({
                     />
                   ))}
                 </Accordion>
+              ) : NoAbiComponent &&
+                !searchTerm &&
+                contractFunctions.length === 0 ? (
+                <NoAbiComponent />
               ) : (
                 <div className="p-6 text-center text-muted-foreground">
                   {searchTerm
@@ -188,6 +209,24 @@ export function ContractFunctionsList({
               />
             </TabsContent>
           )}
+
+          {hasSignature && (
+            <TabsContent value="signature" className="mt-4">
+              <SignatureOperations
+                address={address}
+                chainId={chainId}
+                sender={sender}
+                addresses={addresses}
+                requiresConnection={requiresConnection}
+                isConnected={isConnected}
+                onQuery={onQuery}
+                onWrite={onWrite}
+                onSimulate={onSimulate}
+                addressRenderer={addressRenderer}
+                onHashClick={onHashClick}
+              />
+            </TabsContent>
+          )}
         </Tabs>
       </div>
     </div>

components/contract-execution/function-item.tsx → components/contract-execution/components/function-item.tsx

@@ -2,51 +2,23 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { memo, useCallback, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import type { AbiFunction, Address } from "viem";
-import { decodeFunctionResult, isAddress } from "viem";
+import { isAddress } from "viem";
 import { z } from "zod";
-import { AbiItemFormWithPreview } from "../abi-form/abi-item-form-with-preview.js";
-import type { AddressData } from "../address-autocomplete-input.js";
+import { AbiItemFormWithPreview } from "../../abi-form/abi-item-form-with-preview.js";
+import type { AddressData } from "../../address-autocomplete-input.js";
 import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "../shadcn/accordion.js";
+} from "../../shadcn/accordion.js";
+import type { ExecutionParams } from "../types.js";
+import { useFunctionExecution } from "../use-function-execution.js";
 import { DefaultResultDisplay } from "./result-display.js";
 import {
   ActionButtons,
   ConnectWalletAlert,
   MsgSenderInput,
 } from "./shared-components.js";
-import type { ExecutionParams } from "./types.js";
-
-type InternalResult = {
-  type: "call" | "simulation" | "execution" | "error";
-  data?: string;
-  hash?: string;
-  cleanResult?: string;
-  error?: string;
-};
-
-function formatDecodedResult(result: unknown): string {
-  if (typeof result === "bigint") {
-    return result.toString();
-  }
-  if (Array.isArray(result)) {
-    return JSON.stringify(
-      result,
-      (_, v) => (typeof v === "bigint" ? v.toString() : v),
-      2,
-    );
-  }
-  if (typeof result === "object" && result !== null) {
-    return JSON.stringify(
-      result,
-      (_, v) => (typeof v === "bigint" ? v.toString() : v),
-      2,
-    );
-  }
-  return String(result);
-}
 
 const executionFormSchema = z.object({
   msgSender: z
@@ -94,9 +66,8 @@ export const FunctionItem = memo(
     onHashClick,
   }: FunctionItemProps) => {
     const [callData, setCallData] = useState<string>("");
-    const [result, setResult] = useState<InternalResult | null>(null);
-    const [isSimulating, setIsSimulating] = useState(false);
-    const [isExecuting, setIsExecuting] = useState(false);
+    const { result, isSimulating, isExecuting, simulate, execute } =
+      useFunctionExecution();
 
     const form = useForm({
       mode: "onChange",
@@ -118,104 +89,26 @@ export const FunctionItem = memo(
       [],
     );
 
-    const handleSimulate = async () => {
-      if (!callData || !onSimulate) return;
-      setIsSimulating(true);
-      try {
-        const rawResult = await onSimulate({
-          abiFunction: func,
-          callData: callData as `0x${string}`,
-          msgSender: msgSender ? (msgSender as Address) : undefined,
-        });
-
-        if (isWrite) {
-          setResult({
-            type: "simulation",
-            cleanResult: "Simulation successful",
-            data: rawResult,
-          });
-        } else {
-          try {
-            const decoded = decodeFunctionResult({
-              abi: [func],
-              functionName: func.name,
-              data: rawResult,
-            });
-
-            setResult({
-              type: "simulation",
-              cleanResult: formatDecodedResult(decoded),
-              data: rawResult,
-            });
-          } catch {
-            setResult({
-              type: "simulation",
-              data: rawResult,
-            });
-          }
-        }
-      } catch (error) {
-        setResult({
-          type: "error",
-          error: error instanceof Error ? error.message : "Unknown error",
-        });
-      } finally {
-        setIsSimulating(false);
-      }
+    const handleSimulate = () => {
+      simulate({
+        abiFunction: func,
+        callData,
+        msgSender: msgSender ? (msgSender as Address) : undefined,
+        onQuery,
+        onWrite,
+        onSimulate,
+      });
     };
 
-    const handleExecute = async () => {
-      if (!callData) return;
-      setIsExecuting(true);
-      try {
-        if (isWrite) {
-          // Call write function - returns transaction hash
-          const hash = await onWrite({
-            abiFunction: func,
-            callData: callData as `0x${string}`,
-            msgSender: msgSender ? (msgSender as Address) : undefined,
-          });
-
-          setResult({
-            type: "execution",
-            hash,
-            cleanResult: "Transaction submitted",
-          });
-        } else {
-          // Call query function - returns raw hex
-          const rawResult = await onQuery({
-            abiFunction: func,
-            callData: callData as `0x${string}`,
-            msgSender: msgSender ? (msgSender as Address) : undefined,
-          });
-
-          try {
-            const decoded = decodeFunctionResult({
-              abi: [func],
-              functionName: func.name,
-              data: rawResult,
-            });
-
-            setResult({
-              type: "call",
-              cleanResult: formatDecodedResult(decoded),
-              data: rawResult,
-            });
-          } catch {
-            setResult({
-              type: "call",
-              data: rawResult,
-            });
-          }
-        }
-      } catch (error) {
-        setResult({
-          type: "error",
-          error: error instanceof Error ? error.message : "Unknown error",
-        });
-      } finally {
-        setIsExecuting(false);
-      }
+    const handleExecute = () => {
+      execute({
+        abiFunction: func,
+        callData,
+        msgSender: msgSender ? (msgSender as Address) : undefined,
+        onQuery,
+        onWrite,
+        onSimulate,
+      });
     };
 
     const functionKey = `${func.name}-${index}`;

components/contract-execution/raw-operations.tsx → components/contract-execution/components/raw-operations.tsx

@@ -4,18 +4,18 @@ import { FormProvider, useForm } from "react-hook-form";
 import type { Address } from "viem";
 import { isAddress } from "viem";
 import { z } from "zod";
-import { AbiItemFormWithPreview } from "../abi-form/abi-item-form-with-preview.js";
-import type { AddressData } from "../address-autocomplete-input.js";
+import { AbiItemFormWithPreview } from "../../abi-form/abi-item-form-with-preview.js";
+import type { AddressData } from "../../address-autocomplete-input.js";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "../shadcn/accordion.js";
-import { Button } from "../shadcn/button.js";
+} from "../../shadcn/accordion.js";
+import { Button } from "../../shadcn/button.js";
+import type { RawCallParams } from "../types.js";
 import { DefaultResultDisplay } from "./result-display.js";
 import { ConnectWalletAlert, MsgSenderInput } from "./shared-components.js";
-import type { RawCallParams } from "./types.js";
 
 type InternalResult = {
   type: "call" | "execution" | "error";

components/contract-execution/result-display.tsx → components/contract-execution/components/result-display.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react";
 import { useState } from "react";
-import { Button } from "../shadcn/button.js";
+import { Button } from "../../shadcn/button.js";
 
 type InternalResult = {
   type: "call" | "simulation" | "execution" | "error";

components/contract-execution/shared-components.tsx → components/contract-execution/components/shared-components.tsx

@@ -1,7 +1,7 @@
 import { Info } from "lucide-react";
-import { Form } from "../form/index.js";
-import { Alert, AlertDescription, AlertTitle } from "../shadcn/alert.js";
-import { Button } from "../shadcn/button.js";
+import { Form } from "../../form/index.js";
+import { Alert, AlertDescription, AlertTitle } from "../../shadcn/alert.js";
+import { Button } from "../../shadcn/button.js";
 
 export function MsgSenderInput() {
   return (