feat: added DebugHistory panel (#671)

Author: tu11aa

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -14,7 +14,6 @@ const ContractUI = dynamic(
 
 import { ContractName } from "~~/utils/scaffold-stark/contract";
 import { getAllContracts } from "~~/utils/scaffold-stark/contractsData";
-import { Abi } from "@starknet-react/core";
 
 const selectedContractStorageKey = "scaffoldStark2.selectedContract";
 const contractsData = getAllContracts();

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

@@ -13,6 +13,7 @@ import {
 } from "~~/utils/scaffold-stark/contract";
 import { ContractVariables } from "./ContractVariables";
 import { ClassHash } from "~~/components/scaffold-stark/ClassHash";
+import DebugHistory from "./history/DebugHistory";
 
 const ContractWriteMethods = dynamic(() =>
   import("./ContractWriteMethods").then((mod) => mod.ContractWriteMethods),
@@ -72,9 +73,9 @@ export const ContractUI = ({
 
   return (
     <div
-      className={`grid grid-cols-1 lg:grid-cols-6 px-6 lg:px-10 lg:gap-12 w-full max-w-7xl my-0 ${className}`}
+      className={`grid grid-cols-1 lg:grid-cols-6 px-6 lg:px-10 lg:gap-12 w-full max-w-7xl my-0 mx-auto ${className}`}
     >
-      <div className="col-span-5 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
+      <div className="col-span-6 grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-10">
         <div className="col-span-1 flex flex-col">
           <div className="bg-transparent border-gradient rounded-[5px] px-6 lg:px-8 mb-6 space-y-1 py-4">
             <div className="flex">
@@ -109,7 +110,7 @@ export const ContractUI = ({
           </div>
         </div>
 
-        <div className="col-span-1 lg:col-span-2 flex flex-col gap-6">
+        <div className="col-span-1 lg:col-span-2 flex flex-col gap-6 min-w-0">
           <div className="tabs tabs-box  border border-[#8A45FC] rounded-[5px] bg-transparent">
             {tabs.map((tab) => (
               <a
@@ -136,6 +137,10 @@ export const ContractUI = ({
             </div>
           </div>
         </div>
+
+        <div className="xl:col-span-1 min-w-0">
+          <DebugHistory />
+        </div>
       </div>
     </div>
   );

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

@@ -18,6 +18,7 @@ import { BlockNumber } from "starknet";
 import { useContract, useReadContract } from "@starknet-react/core";
 import { ContractInput } from "./ContractInput";
 import { isValidContractArgs } from "~~/utils/scaffold-stark/common";
+import { addHistory } from "~~/services/store/history";
 
 type ReadOnlyFunctionFormProps = {
   contractAddress: Address;
@@ -102,6 +103,18 @@ export const ReadOnlyFunctionForm = ({
     }
 
     refetch();
+    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 {}
   };
 
   return (

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

@@ -21,6 +21,8 @@ import { InvokeTransactionReceiptResponse } from "starknet";
 import { TxReceipt } from "./TxReceipt";
 import { useTransactor } from "~~/hooks/scaffold-stark";
 import { useAccount } from "~~/hooks/useAccount";
+import { addHistory } from "~~/services/store/history";
+import { safeStringify } from "~~/utils/scaffold-stark/common";
 
 type WriteOnlyFunctionFormProps = {
   abi: Abi;
@@ -76,7 +78,7 @@ export const WriteOnlyFunctionForm = ({
 
   const handleWrite = async () => {
     try {
-      await writeTransaction(
+      const txHash = await writeTransaction(
         !!contractInstance
           ? [
               contractInstance.populate(
@@ -86,6 +88,18 @@ export const WriteOnlyFunctionForm = ({
             ]
           : [],
       );
+      try {
+        const inputStr = safeStringify(getArgsAsStringInputFromForm(form));
+        const message = "Transaction sent";
+        addHistory(contractAddress, {
+          txHash: typeof txHash === "string" ? txHash : undefined,
+          functionName: abiFunction.name,
+          timestamp: Date.now(),
+          status: "success",
+          message,
+          input: inputStr,
+        });
+      } catch {}
     } catch (e: any) {
       const errorPattern = /Contract (.*?)"}/;
       const match = errorPattern.exec(e.message);
@@ -95,6 +109,18 @@ export const WriteOnlyFunctionForm = ({
         "⚡️ ~ file: WriteOnlyFunctionForm.tsx:handleWrite ~ error",
         message,
       );
+
+      try {
+        const inputStr = safeStringify(getArgsAsStringInputFromForm(form));
+        addHistory(contractAddress, {
+          txHash: undefined,
+          functionName: abiFunction.name,
+          timestamp: Date.now(),
+          status: "error",
+          message,
+          input: inputStr,
+        });
+      } catch {}
     }
   };
 

packages/nextjs/app/debug/_components/contract/history/DebugHistory.tsx

@@ -0,0 +1,88 @@
+"use client";
+import React, { useMemo, useState } from "react";
+import Image from "next/image";
+import { formatTimestamp } from "~~/utils/scaffold-stark/common";
+import { useLocalStorage } from "usehooks-ts";
+import { useHistoryStore, HistoryEntry } from "~~/services/store/history";
+import { ContractName } from "~~/utils/scaffold-stark/contract";
+import { getAllContracts } from "~~/utils/scaffold-stark/contractsData";
+import HistoryModal from "./HistoryModal";
+import { useTheme } from "next-themes";
+
+const contractsData = getAllContracts();
+const contractNames = Object.keys(contractsData) as ContractName[];
+
+export default function DebugHistory() {
+  const [selectedContract] = useLocalStorage<ContractName>(
+    "scaffoldStark2.selectedContract",
+    contractNames[0],
+    { initializeWithValue: false },
+  );
+  const historyByContract = useHistoryStore((s) => s.historyByContract);
+  const selectedAddress = contractsData[selectedContract]?.address as string;
+  const entries = useMemo(
+    () => historyByContract[selectedAddress] || [],
+    [historyByContract, selectedAddress],
+  );
+  const [openEntry, setOpenEntry] = useState<HistoryEntry | null>(null);
+
+  const { theme } = useTheme();
+  const isDarkMode = theme === "dark";
+
+  const formatted = useMemo(
+    () =>
+      entries.map((e) => ({
+        ...e,
+        ts: new Date(e.timestamp),
+      })),
+    [entries],
+  );
+
+  const formatDate = (ts: number) => formatTimestamp(ts);
+
+  const StatusIcon = ({ status }: { status: HistoryEntry["status"] }) => (
+    <Image
+      src={status === "success" ? "/success-icon.svg" : "/fail-icon.svg"}
+      alt={status}
+      width={20}
+      height={20}
+    />
+  );
+
+  return (
+    <div className="h-full max-h-[650px] w-full xl:w-[400px] space-y-4">
+      <div className="tab h-10 w-full xl:w-1/3 tab-active bg-[#8A45FC]! rounded-[5px] text-white!">
+        History
+      </div>
+      <div className="border-gradient rounded-[5px] h-full w-full overflow-y-auto">
+        <div className="flex flex-col">
+          {formatted.length === 0 ? (
+            <div className="p-4 text-sm text-neutral">No history yet.</div>
+          ) : (
+            formatted.map((e, idx) => (
+              <button
+                key={e.txHash ?? `${e.functionName}-${e.timestamp}`}
+                className={`w-full flex items-center justify-between py-3 px-3 text-left border-b ${isDarkMode ? "bg-[#0000002E] border-b-[#ffffff4f]" : "bg-[#ffffff0f] border-b-black/40"}`}
+                onClick={() => setOpenEntry(e)}
+              >
+                <span className="truncate mr-2 text-[#4DB4FF]">
+                  {e.functionName}
+                </span>
+                <div className="flex items-center gap-3">
+                  <span className="text-xs text-neutral">
+                    {formatDate(e.timestamp)}
+                  </span>
+                  <StatusIcon status={e.status} />
+                </div>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+
+      {openEntry && (
+        <HistoryModal entry={openEntry} onClose={() => setOpenEntry(null)} />
+      )}
+    </div>
+  );
+}

packages/nextjs/app/debug/_components/contract/history/HistoryModal.tsx

@@ -0,0 +1,70 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { HistoryEntry } from "~~/services/store/history";
+import { formatTimestamp } from "~~/utils/scaffold-stark/common";
+
+export default function HistoryModal({
+  entry,
+  onClose,
+}: {
+  entry: HistoryEntry;
+  onClose: () => void;
+}) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === "dark";
+  const formatDate = (ts: number) => formatTimestamp(ts);
+
+  const isSuccess = entry.status === "success";
+  const chipClasses = isSuccess
+    ? "bg-green-500/20 text-green-400"
+    : "bg-red-500/20 text-red-400";
+  const iconSrc = isSuccess ? "/success-icon.svg" : "/fail-icon.svg";
+  const sectionTitle = isSuccess ? "Message" : "Receipt";
+  const sectionBg = isSuccess ? "bg-green-900/30" : "bg-red-900/30";
+  const chipLabel = isSuccess ? "Success" : "Fail";
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 backdrop-blur-xs" onClick={onClose} />
+      <div
+        className={`relative z-10 w-full max-w-2xl max-h-[90vh] rounded-[5px] border border-[#8A45FC] p-4 flex flex-col ${isDarkMode ? "bg-[#0C1023]" : "bg-base-100"}`}
+      >
+        <div className="flex items-center justify-between mb-2 flex-shrink-0">
+          <div className="flex items-center gap-2">
+            <h3 className="m-0 font-semibold">{entry.functionName}</h3>
+            <span
+              className={`inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded ${chipClasses}`}
+            >
+              <Image src={iconSrc} alt={chipLabel} width={16} height={16} />
+              {chipLabel}
+            </span>
+          </div>
+          <button className="btn btn-ghost btn-xs" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto space-y-3">
+          <div className="bg-base-200 text-sm px-4 py-2 rounded">
+            <div className="flex items-center justify-between">
+              <span>Your input</span>
+              <span className="text-xs">{formatDate(entry.timestamp)}</span>
+            </div>
+            <pre className="m-0 whitespace-pre-wrap max-h-32 overflow-y-auto">
+              {entry.input || "[code here]"}
+            </pre>
+          </div>
+
+          <div className={`text-sm px-4 py-2 rounded ${sectionBg}`}>
+            <p className="font-bold m-0 mb-1">{sectionTitle}</p>
+            <pre className="whitespace-pre-wrap break-words m-0 max-h-64 overflow-y-auto">
+              {entry.message}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/nextjs/public/fail-icon.svg

@@ -0,0 +1,54 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+
+export type HistoryStatus = "success" | "error";
+export type HistoryEntry = {
+  txHash?: string;
+  functionName: string;
+  timestamp: number;
+  status: HistoryStatus;
+  message: string;
+  input?: string;
+};
+
+type HistoryState = {
+  historyByContract: Record<string, HistoryEntry[]>; // key: contractAddress
+  addHistory: (contractAddress: string, entry: HistoryEntry) => void;
+  clearHistory: (contractAddress: string) => void;
+};
+
+export const useHistoryStore = create<HistoryState>()(
+  persist(
+    (set) => ({
+      historyByContract: {},
+      addHistory: (contractAddress: string, entry: HistoryEntry) =>
+        set((state) => {
+          const current = state.historyByContract[contractAddress] || [];
+          return {
+            historyByContract: {
+              ...state.historyByContract,
+              [contractAddress]: [entry, ...current].slice(0, 200),
+            },
+          } as Partial<HistoryState> as HistoryState;
+        }),
+      clearHistory: (contractAddress: string) =>
+        set((state) => {
+          const copy = { ...state.historyByContract };
+          delete copy[contractAddress];
+          return {
+            historyByContract: copy,
+          } as Partial<HistoryState> as HistoryState;
+        }),
+    }),
+    {
+      name: "scaffoldStark2.history",
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);
+
+// Convenience helpers for non-hook contexts
+export const addHistory = (contractAddress: string, entry: HistoryEntry) =>
+  useHistoryStore.getState().addHistory(contractAddress, entry);
+export const clearHistory = (contractAddress: string) =>
+  useHistoryStore.getState().clearHistory(contractAddress);

packages/nextjs/public/success-icon.svg

@@ -37,3 +37,25 @@ export function isValidContractArgs(
     args.every((arg) => arg !== undefined && arg !== null && arg !== "")
   );
 }
+
+// Safely stringify objects that might contain bigint or complex values
+export function safeStringify(value: unknown): string {
+  try {
+    return JSON.stringify(value, (_key, val) =>
+      typeof val === "bigint" ? val.toString() : val,
+    );
+  } catch {
+    return String(value);
+  }
+}
+
+export function formatTimestamp(ts: number): string {
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(new Date(ts));
+}