feat(demo): allow to edit class hash

demo/src/App.css

@@ -34,23 +34,61 @@ h3 {
   margin: 0 auto;
 }
 
-.pool-selector {
-  display: flex;
+.pool-selector-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 8px;
   align-items: center;
-  gap: 8px;
+  margin-top: 12px;
   margin-bottom: 12px;
-  padding: 8px;
+  padding: 12px 12px 8px;
   background: #161b22;
   border: 1px solid #30363d;
   border-radius: 4px;
 }
 
+.pool-selector-label {
+  color: #8b949e;
+  white-space: nowrap;
+}
+
+.pool-selector-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pool-selector-value code {
+  color: #c9d1d9;
+  font-size: 13px;
+  padding-left: 12px;
+}
+
+.pool-selector-value input {
+  width: 540px;
+}
+
+.pool-selector-value > button {
+  font-size: 11px;
+  padding: 2px 8px;
+}
+
+.copy-button {
+  background: #21262d;
+  border-color: #30363d;
+  color: #8b949e;
+}
+
+.copy-button:hover:not(:disabled) {
+  background: #30363d;
+}
+
 .account-selector {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 12px;
-  padding: 8px;
+  padding: 8px 12px;
   background: #161b22;
   border: 1px solid #30363d;
   border-radius: 4px;
@@ -183,6 +221,9 @@ input[type="number"] {
 
 .action-form button {
   margin-top: 4px;
+  font-size: 12px;
+  padding: 3px 9px;
+  margin-left: 6px;
 }
 
 .status-bar {
@@ -225,8 +266,11 @@ input[type="number"] {
 .subtitle code {
   color: #c9d1d9;
   font-size: 11px;
+  cursor: default;
+  word-break: break-all;
 }
 
+
 .chip {
   display: inline-block;
   background: #30363d;

demo/src/App.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { formatChainId, truncateAddress } from "./format.ts";
+import { formatChainId } from "./format.ts";
 import { loadConfig } from "./config.ts";
 import { createProvider, createAccount, createTransfers } from "./starknet.ts";
 import { useAccounts } from "./hooks/useAccounts.ts";
@@ -21,15 +21,22 @@ import "./App.css";
 const config = loadConfig();
 
 export function App() {
+  const [classHash, setClassHash] = useState(config.poolClassHash);
+
   const { accounts, activeIndex, activeAccount, setActiveIndex } =
     useAccounts(config.accounts);
 
   const provider = useMemo(() => createProvider(config.rpcUrl), []);
 
   const { pools, activePool, selectPool, addPool, loading: poolsLoading } =
-    usePoolSelector(provider, config.poolAddress, config.poolClassHash);
+    usePoolSelector(provider, config.poolAddress, classHash);
+
+  const configWithClassHash = useMemo(
+    () => ({ ...config, poolClassHash: classHash }),
+    [classHash],
+  );
 
-  const { deploying, deployError, deploy } = useDeployPool(provider, config);
+  const { deploying, deployError, deploy } = useDeployPool(provider, configWithClassHash);
 
   const handleDeploy = useCallback(async () => {
     try {
@@ -89,7 +96,7 @@ export function App() {
     <div className="app">
       <h1>Privacy Pool Explorer</h1>
       <div className="subtitle">
-        Chain: <code>{formatChainId(config.chainId)}</code> | Pool class: <code>{truncateAddress(config.poolClassHash)}</code>
+        Chain: <code>{formatChainId(config.chainId)}</code>
         <ServiceHealthBar health={serviceHealth} />
       </div>
       <PoolSelector
@@ -98,8 +105,10 @@ export function App() {
         loading={poolsLoading}
         deploying={deploying}
         deployError={deployError}
+        classHash={classHash}
         onSelect={selectPool}
         onDeploy={handleDeploy}
+        onClassHashChange={setClassHash}
       />
       <AccountSelector
         accounts={accounts}

demo/src/components/PoolSelector.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import type { PoolEntry } from "../hooks/usePoolSelector.ts";
 
 type Props = {
@@ -6,13 +7,15 @@ type Props = {
   loading: boolean;
   deploying: boolean;
   deployError: string | null;
+  classHash: string;
   onSelect: (address: string) => void;
   onDeploy: () => void;
+  onClassHashChange: (hash: string) => void;
 };
 
-function truncatePoolAddress(address: string): string {
-  if (address.length <= 14) return address;
-  return `${address.slice(0, 8)}...${address.slice(-4)}`;
+function truncateHash(hex: string): string {
+  if (hex.length <= 14) return hex;
+  return `${hex.slice(0, 8)}...${hex.slice(-4)}`;
 }
 
 export function PoolSelector({
@@ -21,28 +24,85 @@ export function PoolSelector({
   loading,
   deploying,
   deployError,
+  classHash,
   onSelect,
   onDeploy,
+  onClassHashChange,
 }: Props) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [copied, setCopied] = useState(false);
+
   return (
-    <div className="pool-selector">
-      <label>
-        Pool:{" "}
+    <div className="pool-selector-grid">
+      <span className="pool-selector-label">Class hash:</span>
+      <div className="pool-selector-value">
+        {editing ? (
+          <>
+            <input
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  onClassHashChange(draft);
+                  setEditing(false);
+                }
+                if (event.key === "Escape") setEditing(false);
+              }}
+              autoFocus
+            />
+            <button
+              onClick={() => {
+                onClassHashChange(draft);
+                setEditing(false);
+              }}
+            >
+              Apply
+            </button>
+          </>
+        ) : (
+          <>
+            <code>{truncateHash(classHash)}</code>
+            <button
+              onClick={() => {
+                setDraft(classHash);
+                setEditing(true);
+              }}
+            >
+              Change
+            </button>
+          </>
+        )}
+      </div>
+
+      <span className="pool-selector-label">Address:</span>
+      <div className="pool-selector-value">
         <select
           value={activePool.address}
           onChange={(event) => onSelect(event.target.value)}
         >
           {pools.map((pool) => (
             <option key={pool.address} value={pool.address}>
-              {truncatePoolAddress(pool.address)}{pool.isDefault ? " (default)" : pool.isNewest ? " (newest)" : ""}
+              {truncateHash(pool.address)}{pool.isDefault ? " (default)" : pool.isNewest ? " (newest)" : ""}
             </option>
           ))}
         </select>
-      </label>
-      <button type="button" disabled={loading || deploying} onClick={onDeploy}>
-        {loading ? "Loading..." : deploying ? "Deploying..." : "Deploy New Pool"}
-      </button>
-      {deployError && <span className="error">{deployError}</span>}
+        <button type="button" disabled={loading || deploying} onClick={onDeploy}>
+          {loading ? "Loading..." : deploying ? "Deploying..." : "Deploy New Pool"}
+        </button>
+        <button
+          type="button"
+          className="copy-button"
+          onClick={() => {
+            navigator.clipboard.writeText(activePool.address);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+          }}
+        >
+          {copied ? "Copied" : "Copy"}
+        </button>
+        {deployError && <span className="error">{deployError}</span>}
+      </div>
     </div>
   );
 }