feat: enhance debug interaction logs

packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx

@@ -81,7 +81,7 @@ export const ReadOnlyFunctionForm = ({
     );
   });
 
-  const handleRead = () => {
+  const handleRead = async () => {
     const newInputValue = getArgsAsStringInputFromForm(form);
     const expectedArgCount = abiFunction.inputs.length;
 
@@ -102,19 +102,46 @@ export const ReadOnlyFunctionForm = ({
       lastForm.current = form;
     }
 
-    refetch();
+    const startTime = Date.now();
+    const { data: refetchData, error: refetchError } = await refetch();
+    const duration = Date.now() - startTime;
+
     try {
       const inputStr = JSON.stringify(newInputValue);
-      // Optimistically log a read call as success; real error will be captured via useReadContract error effect
-      addHistory(contractAddress, {
-        txHash: undefined,
-        functionName: abiFunction.name,
-        timestamp: Date.now(),
-        status: "success",
-        message: "Read executed",
-        input: inputStr,
-      });
-    } catch {}
+      if (refetchError) {
+        addHistory(contractAddress, {
+          txHash: undefined,
+          functionName: abiFunction.name,
+          callType: "read",
+          timestamp: Date.now(),
+          status: "error",
+          message: refetchError.message,
+          input: inputStr,
+          duration,
+          errorDetails: refetchError.stack || refetchError.message,
+        });
+      } else {
+        const decodedResult = decodeContractResponse({
+          resp: refetchData,
+          abi,
+          functionOutputs: abiFunction?.outputs,
+          asText: true,
+        });
+        addHistory(contractAddress, {
+          txHash: undefined,
+          functionName: abiFunction.name,
+          callType: "read",
+          timestamp: Date.now(),
+          status: "success",
+          message: "Read executed",
+          input: inputStr,
+          decodedResult: decodedResult ?? undefined,
+          duration,
+        });
+      }
+    } catch (e) {
+      console.warn("Failed to log read history:", e);
+    }
   };
 
   return (

packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

@@ -77,6 +77,7 @@ export const WriteOnlyFunctionForm = ({
   }, [error]);
 
   const handleWrite = async () => {
+    const startTime = Date.now();
     try {
       const txHash = await writeTransaction(
         !!contractInstance
@@ -94,12 +95,16 @@ export const WriteOnlyFunctionForm = ({
         addHistory(contractAddress, {
           txHash: typeof txHash === "string" ? txHash : undefined,
           functionName: abiFunction.name,
+          callType: "write",
           timestamp: Date.now(),
           status: "success",
           message,
           input: inputStr,
+          duration: Date.now() - startTime,
         });
-      } catch {}
+      } catch (histErr) {
+        console.warn("Failed to log write history:", histErr);
+      }
     } catch (e: any) {
       const errorPattern = /Contract (.*?)"}/;
       const match = errorPattern.exec(e.message);
@@ -115,12 +120,17 @@ export const WriteOnlyFunctionForm = ({
         addHistory(contractAddress, {
           txHash: undefined,
           functionName: abiFunction.name,
+          callType: "write",
           timestamp: Date.now(),
           status: "error",
           message,
           input: inputStr,
+          duration: Date.now() - startTime,
+          errorDetails: e.stack || e.message,
         });
-      } catch {}
+      } catch (histErr) {
+        console.warn("Failed to log write history:", histErr);
+      }
     }
   };