Contract execution fix

components/contract-execution/contract-execution-tabs/index.tsx

@@ -5,12 +5,12 @@ 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 "../shared/types.js";
+import type { ContractExecutionTabsProps } from "../shared/types.js";
 import { FunctionItem } from "./function-item.js";
 import { RawOperations } from "./raw-tab.js";
 import { SignatureOperations } from "./signature-tab.js";
 
-export function ContractFunctionsList({
+export function ContractExecutionTabs({
   abi,
   address,
   chainId,
@@ -21,14 +21,13 @@ export function ContractFunctionsList({
   onQuery,
   onWrite,
   onSimulate,
-  onRawCall,
-  onRawTransaction,
-  enableSignature,
+  enableRaw = true,
+  enableSignature = true,
   addressRenderer,
   onHashClick,
   title,
   NoAbiComponent,
-}: ContractFunctionsListProps) {
+}: ContractExecutionTabsProps) {
   const [searchTerm, setSearchTerm] = useState("");
 
   const contractFunctions = useMemo(() => {
@@ -53,9 +52,7 @@ export function ContractFunctionsList({
     };
   }, [contractFunctions, searchTerm]);
 
-  const hasRawOperations = onRawCall || onRawTransaction;
-  const hasSignature = !!enableSignature;
-  const tabCount = 2 + (hasRawOperations ? 1 : 0) + (hasSignature ? 1 : 0);
+  const tabCount = 2 + (enableRaw ? 1 : 0) + (enableSignature ? 1 : 0);
 
   return (
     <div className="pb-7">
@@ -101,15 +98,15 @@ export function ContractFunctionsList({
                 {writeFunctions.length}
               </span>
             </TabsTrigger>
-            {hasRawOperations && (
+            {enableRaw && (
               <TabsTrigger
                 value="raw"
                 className="flex cursor-pointer items-center gap-2"
               >
                 Raw
               </TabsTrigger>
             )}
-            {hasSignature && (
+            {enableSignature && (
               <TabsTrigger
                 value="signature"
                 className="flex cursor-pointer items-center gap-2"
@@ -201,7 +198,7 @@ export function ContractFunctionsList({
             </div>
           </TabsContent>
 
-          {hasRawOperations && (
+          {enableRaw && (
             <TabsContent
               forceMount
               value="raw"
@@ -214,15 +211,15 @@ export function ContractFunctionsList({
                 addresses={addresses}
                 requiresConnection={requiresConnection}
                 isConnected={isConnected}
-                onRawCall={onRawCall}
-                onRawTransaction={onRawTransaction}
+                onQuery={onQuery}
+                onWrite={onWrite}
                 addressRenderer={addressRenderer}
                 onHashClick={onHashClick}
               />
             </TabsContent>
           )}
 
-          {hasSignature && (
+          {enableSignature && (
             <TabsContent
               forceMount
               value="signature"

components/contract-execution/contract-execution-tabs/raw-tab.tsx

@@ -15,12 +15,12 @@ import {
   MsgSenderInput,
 } from "../shared/components.js";
 import { useMsgSenderForm } from "../shared/form-utils.js";
-import type { BaseExecutionProps, RawCallParams } from "../shared/types.js";
+import type { BaseExecutionProps, ExecutionParams } from "../shared/types.js";
 import { useRawExecution } from "../shared/use-raw-execution.js";
 
 interface RawOperationsProps extends BaseExecutionProps {
-  onRawCall?: (params: RawCallParams) => Promise<`0x${string}`>;
-  onRawTransaction?: (params: RawCallParams) => Promise<`0x${string}`>;
+  onQuery: (params: ExecutionParams) => Promise<`0x${string}`>;
+  onWrite: (params: ExecutionParams) => Promise<`0x${string}`>;
 }
 
 export function RawOperations({
@@ -30,50 +30,46 @@ export function RawOperations({
   addresses,
   requiresConnection,
   isConnected,
-  onRawCall,
-  onRawTransaction,
+  onQuery,
+  onWrite,
   addressRenderer,
   onHashClick,
 }: RawOperationsProps) {
   return (
     <div className="rounded-lg bg-card">
       <Accordion type="multiple" className="w-full rounded-lg border">
-        {onRawCall && (
-          <RawOperationItem
-            type="call"
-            address={address}
-            chainId={chainId}
-            sender={sender}
-            addresses={addresses}
-            requiresConnection={requiresConnection}
-            isConnected={isConnected}
-            onExecute={onRawCall}
-            addressRenderer={addressRenderer}
-            onHashClick={onHashClick}
-          />
-        )}
-        {onRawTransaction && (
-          <RawOperationItem
-            type="transaction"
-            address={address}
-            chainId={chainId}
-            sender={sender}
-            addresses={addresses}
-            requiresConnection={requiresConnection}
-            isConnected={isConnected}
-            onExecute={onRawTransaction}
-            addressRenderer={addressRenderer}
-            onHashClick={onHashClick}
-          />
-        )}
+        <RawOperationItem
+          type="call"
+          address={address}
+          chainId={chainId}
+          sender={sender}
+          addresses={addresses}
+          requiresConnection={requiresConnection}
+          isConnected={isConnected}
+          onExecute={onQuery}
+          addressRenderer={addressRenderer}
+          onHashClick={onHashClick}
+        />
+        <RawOperationItem
+          type="transaction"
+          address={address}
+          chainId={chainId}
+          sender={sender}
+          addresses={addresses}
+          requiresConnection={requiresConnection}
+          isConnected={isConnected}
+          onExecute={onWrite}
+          addressRenderer={addressRenderer}
+          onHashClick={onHashClick}
+        />
       </Accordion>
     </div>
   );
 }
 
 interface RawOperationItemProps extends BaseExecutionProps {
   type: "call" | "transaction";
-  onExecute: (params: RawCallParams) => Promise<`0x${string}`>;
+  onExecute: (params: ExecutionParams) => Promise<`0x${string}`>;
 }
 
 function RawOperationItem({

components/contract-execution/resend-transaction/index.tsx

@@ -10,7 +10,7 @@ import {
   MsgSenderInput,
 } from "../shared/components.js";
 import { useMsgSenderForm } from "../shared/form-utils.js";
-import type { ExecutionParams, RawCallParams } from "../shared/types.js";
+import type { ExecutionParams } from "../shared/types.js";
 import { useFunctionExecution } from "../shared/use-function-execution.js";
 import { useRawExecution } from "../shared/use-raw-execution.js";
 import { isWriteFunction } from "../shared/utils.js";
@@ -28,7 +28,6 @@ export interface ResendTransactionProps {
   onQuery: (params: ExecutionParams) => Promise<Hex>;
   onWrite: (params: ExecutionParams) => Promise<Hex>;
   onSimulate?: (params: ExecutionParams) => Promise<Hex>;
-  onRawTransaction?: (params: RawCallParams) => Promise<Hex>;
   addressRenderer?: (address: Address) => React.ReactNode;
   onHashClick?: (hash: string) => void;
 }
@@ -46,7 +45,6 @@ export function ResendTransaction({
   onQuery,
   onWrite,
   onSimulate,
-  onRawTransaction,
   addressRenderer,
   onHashClick,
 }: ResendTransactionProps) {
@@ -73,7 +71,7 @@ export function ResendTransaction({
   const functionExecution = useFunctionExecution();
   const rawExecution = useRawExecution({
     isWrite: true,
-    onExecute: onRawTransaction || (async () => "0x" as Hex),
+    onExecute: onWrite,
   });
 
   const handleSimulate = () => {

components/contract-execution/shared/types.ts

@@ -13,19 +13,13 @@ export interface BaseExecutionProps {
 }
 
 export interface ExecutionParams {
-  abiFunction: AbiFunction;
+  abiFunction?: AbiFunction;
   callData: Hex;
   msgSender?: Address;
   value?: bigint;
 }
 
-export interface RawCallParams {
-  data: Hex;
-  value?: bigint;
-  msgSender?: Address;
-}
-
-export interface ContractFunctionsListProps {
+export interface ContractExecutionTabsProps {
   /** Full contract ABI (will be filtered internally for functions) */
   abi: Abi;
   /** Contract address */
@@ -46,11 +40,9 @@ export interface ContractFunctionsListProps {
   onWrite: (params: ExecutionParams) => Promise<`0x${string}`>;
   /** Optional simulate function for write functions - returns raw hex result from simulation */
   onSimulate?: (params: ExecutionParams) => Promise<`0x${string}`>;
-  /** Optional raw call function (eth_call with arbitrary data) - returns raw hex result */
-  onRawCall?: (params: RawCallParams) => Promise<`0x${string}`>;
-  /** Optional raw transaction function (send transaction with arbitrary data) - returns transaction hash */
-  onRawTransaction?: (params: RawCallParams) => Promise<`0x${string}`>;
-  /** Enable signature-based interaction tab */
+  /** Enable raw call/transaction tab (default: true) */
+  enableRaw?: boolean;
+  /** Enable signature-based interaction tab (default: true) */
   enableSignature?: boolean;
   /** Custom address renderer for form inputs */
   addressRenderer?: (address: Address) => React.ReactNode;

components/contract-execution/shared/use-raw-execution.ts

@@ -1,11 +1,11 @@
 import { useState } from "react";
 import type { Address, Hex } from "viem";
-import type { RawCallParams } from "./types.js";
+import type { ExecutionParams } from "./types.js";
 import type { InternalResult } from "./use-function-execution.js";
 
 interface UseRawExecutionParams {
   isWrite: boolean;
-  onExecute: (params: RawCallParams) => Promise<Hex>;
+  onExecute: (params: ExecutionParams) => Promise<Hex>;
 }
 
 export function useRawExecution({ isWrite, onExecute }: UseRawExecutionParams) {
@@ -22,7 +22,7 @@ export function useRawExecution({ isWrite, onExecute }: UseRawExecutionParams) {
     setIsExecuting(true);
     try {
       const response = await onExecute({
-        data: params.callData as Hex,
+        callData: params.callData as Hex,
         value: params.value,
         msgSender: params.msgSender,
       });