fix: add error logging in catch blocks and improve history pane UI consistency

tu11aa · tu11aa · commit 622ade0aadd7 · 2026-03-31T16:10:02.000+07:00
- Add console.warn in empty catch blocks for history logging failures
- Restyle history pane to match Read/Write panel (purple border card, tabs-box header)
- Use consistent rounded-[5px] borders, bg-component, and border-[#8A45FC]
- Improve search bar, filter chips, and toolbar styling for dark/light themes
- Extract StatusIcon outside component body to avoid re-renders
- Clean up modal layout with meta info row and consistent section styling
diff --git a/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx b/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx
@@ -139,7 +139,9 @@ export const ReadOnlyFunctionForm = ({
           duration,
         });
       }
-    } catch {}
+    } catch (e) {
+      console.warn("Failed to log read history:", e);
+    }
   };
 
   return (
diff --git a/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
@@ -102,7 +102,9 @@ export const WriteOnlyFunctionForm = ({
           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);
@@ -126,7 +128,9 @@ export const WriteOnlyFunctionForm = ({
           duration: Date.now() - startTime,
           errorDetails: e.stack || e.message,
         });
-      } catch {}
+      } catch (histErr) {
+        console.warn("Failed to log write history:", histErr);
+      }
     }
   };
 
diff --git a/packages/nextjs/app/debug/_components/contract/history/DebugHistory.tsx b/packages/nextjs/app/debug/_components/contract/history/DebugHistory.tsx
@@ -50,6 +50,15 @@ function entriesToCSV(entries: HistoryEntry[]): string {
   return [headers, ...rows].join("\n");
 }
 
+const StatusIcon = ({ status }: { status: HistoryEntry["status"] }) => (
+  <Image
+    src={status === "success" ? "/success-icon.svg" : "/fail-icon.svg"}
+    alt={status}
+    width={16}
+    height={16}
+  />
+);
+
 export default function DebugHistory() {
   const [selectedContract] = useLocalStorage<ContractName>(
     "scaffoldStark2.selectedContract",
@@ -58,7 +67,9 @@ export default function DebugHistory() {
   );
   const historyByContract = useHistoryStore((s) => s.historyByContract);
   const clearHistory = useHistoryStore((s) => s.clearHistory);
-  const selectedAddress = (contractsData as Record<string, { address: string }>)[selectedContract as string]?.address as string;
+  const selectedAddress = (
+    contractsData as Record<string, { address: string }>
+  )[selectedContract as string]?.address as string;
   const entries = useMemo(
     () => historyByContract[selectedAddress] || [],
     [historyByContract, selectedAddress],
@@ -107,15 +118,6 @@ export default function DebugHistory() {
 
   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}
-    />
-  );
-
   const chips: FilterChip[] = ["All", "Read", "Write", "Success", "Error"];
 
   const handleExportJSON = () => {
@@ -137,99 +139,122 @@ export default function DebugHistory() {
   };
 
   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 className="w-full xl:w-[400px] flex flex-col gap-6">
+      {/* Tab header — matches Read/Write tab bar */}
+      <div className="tabs tabs-box border border-[#8A45FC] rounded-[5px] bg-transparent">
+        <a className="tab h-10 w-full tab-active bg-[#8A45FC]! rounded-[5px]! text-white!">
+          History
+        </a>
       </div>
 
-      {/* Search bar */}
-      <input
-        type="text"
-        className="w-full bg-input text-sm rounded-[5px] px-3 py-1.5 outline-none border border-transparent focus:border-[#8A45FC] placeholder:text-neutral"
-        placeholder="Search by function name..."
-        value={searchTerm}
-        onChange={(e) => setSearchTerm(e.target.value)}
-      />
-
-      {/* Filter chips */}
-      <div className="flex flex-wrap gap-1.5">
-        {chips.map((chip) => {
-          const isActive =
-            chip === "All" ? activeFilters.length === 0 : activeFilters.includes(chip);
-          return (
+      {/* Content card — matches the contract methods card */}
+      <div className="rounded-[5px] border border-[#8A45FC] bg-component flex flex-col max-h-[600px]">
+        {/* Search bar */}
+        <div className="p-3 pb-0">
+          <input
+            type="text"
+            className={`w-full text-sm rounded-[5px] px-3 py-2 outline-none border transition-colors ${
+              isDarkMode
+                ? "bg-[#0C1023] border-[#ffffff1a] focus:border-[#8A45FC] placeholder:text-neutral"
+                : "bg-base-200 border-transparent focus:border-[#8A45FC] placeholder:text-neutral"
+            }`}
+            placeholder="Search by function name..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+
+        {/* Filter chips + toolbar */}
+        <div className="px-3 pt-3 space-y-2">
+          <div className="flex flex-wrap gap-1.5">
+            {chips.map((chip) => {
+              const isActive =
+                chip === "All"
+                  ? activeFilters.length === 0
+                  : activeFilters.includes(chip);
+              return (
+                <button
+                  key={chip}
+                  onClick={() => toggleFilter(chip)}
+                  className={`px-2.5 py-1 rounded-[5px] text-xs font-medium transition-colors border ${
+                    isActive
+                      ? "bg-[#8A45FC] text-white border-[#8A45FC]"
+                      : isDarkMode
+                        ? "bg-transparent text-neutral border-[#ffffff1a] hover:border-[#8A45FC]/50"
+                        : "bg-transparent text-neutral border-black/10 hover:border-[#8A45FC]/50"
+                  }`}
+                >
+                  {chip}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Export / Clear toolbar */}
+          <div className="flex items-center gap-1 border-b border-secondary pb-2">
             <button
-              key={chip}
-              onClick={() => toggleFilter(chip)}
-              className={`px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors ${
-                isActive
-                  ? "bg-[#8A45FC] text-white"
-                  : "bg-base-200 text-neutral hover:bg-base-300"
-              }`}
+              className="text-xs text-[#8A45FC] hover:text-[#a06aff] transition-colors disabled:opacity-40 disabled:hover:text-[#8A45FC] px-1.5 py-0.5"
+              onClick={handleExportJSON}
+              disabled={formatted.length === 0}
             >
-              {chip}
+              Export JSON
             </button>
-          );
-        })}
-      </div>
-
-      {/* Toolbar: export + clear */}
-      <div className="flex items-center gap-2">
-        <button
-          className="btn btn-ghost btn-xs"
-          onClick={handleExportJSON}
-          disabled={formatted.length === 0}
-        >
-          Export JSON
-        </button>
-        <button
-          className="btn btn-ghost btn-xs"
-          onClick={handleExportCSV}
-          disabled={formatted.length === 0}
-        >
-          Export CSV
-        </button>
-        <button
-          className="btn btn-ghost btn-xs text-error ml-auto"
-          onClick={handleClear}
-          disabled={entries.length === 0}
-        >
-          Clear
-        </button>
-      </div>
+            <span className="text-neutral/30">|</span>
+            <button
+              className="text-xs text-[#8A45FC] hover:text-[#a06aff] transition-colors disabled:opacity-40 disabled:hover:text-[#8A45FC] px-1.5 py-0.5"
+              onClick={handleExportCSV}
+              disabled={formatted.length === 0}
+            >
+              Export CSV
+            </button>
+            <button
+              className="text-xs text-red-400 hover:text-red-300 transition-colors disabled:opacity-40 ml-auto px-1.5 py-0.5"
+              onClick={handleClear}
+              disabled={entries.length === 0}
+            >
+              Clear
+            </button>
+          </div>
+        </div>
 
-      <div className="border-gradient rounded-[5px] h-full w-full overflow-y-auto">
-        <div className="flex flex-col">
+        {/* History entries list */}
+        <div className="flex-1 overflow-y-auto">
           {formatted.length === 0 ? (
-            <div className="p-4 text-sm text-neutral">No history yet.</div>
+            <div className="p-4 text-sm text-neutral text-center">
+              No history yet.
+            </div>
           ) : (
             formatted.map((e) => (
               <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"}`}
+                className={`w-full flex items-center justify-between py-3 px-3 text-left border-b transition-colors ${
+                  isDarkMode
+                    ? "border-b-[#ffffff12] hover:bg-[#ffffff08]"
+                    : "border-b-black/10 hover:bg-black/5"
+                }`}
                 onClick={() => setOpenEntry(e)}
               >
-                <div className="flex items-center gap-1.5 min-w-0">
-                  {/* callType badge */}
+                <div className="flex items-center gap-2 min-w-0">
                   <span
-                    className={`flex-shrink-0 inline-flex items-center justify-center w-4 h-4 rounded text-[10px] font-bold leading-none ${
+                    className={`flex-shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-[3px] text-[10px] font-bold leading-none ${
                       e.callType === "read"
                         ? "bg-blue-500/20 text-blue-400"
                         : "bg-amber-500/20 text-amber-400"
                     }`}
                   >
                     {e.callType === "read" ? "R" : "W"}
                   </span>
-                  <span className="truncate text-[#4DB4FF]">
+                  <span className="truncate text-sm text-[#4DB4FF]">
                     {e.functionName}
                   </span>
                 </div>
-                <div className="flex items-center gap-3 flex-shrink-0">
+                <div className="flex items-center gap-2 flex-shrink-0 ml-2">
                   <div className="flex flex-col items-end">
-                    <span className="text-xs text-neutral">
+                    <span className="text-[11px] text-neutral">
                       {formatDate(e.timestamp)}
                     </span>
                     {e.duration !== undefined && (
-                      <span className="text-[10px] text-neutral/60">
+                      <span className="text-[10px] text-neutral/50">
                         {e.duration}ms
                       </span>
                     )}
diff --git a/packages/nextjs/app/debug/_components/contract/history/HistoryModal.tsx b/packages/nextjs/app/debug/_components/contract/history/HistoryModal.tsx
