feat(demo): group notes by channel into card layout

.github/workflows/demo-deploy.yml

@@ -36,8 +36,8 @@ jobs:
           # Generate vercel.json with rewrites to proxy HTTP backends through
           # the Vercel deployment, avoiding mixed HTTP/HTTPS content errors.
           eval "$(grep '^BACKEND_' ".vercel/.env.preview.local")"
-          printf '{"installCommand":"echo skipped","outputDirectory":"dist","rewrites":[{"source":"/api/rpc/:path*","destination":"%s/rpc/:path*"},{"source":"/api/indexer/:path*","destination":"%s/:path*"},{"source":"/api/prover/:path*","destination":"%s/:path*"}]}\n' \
-            "$BACKEND_RPC_URL" "$BACKEND_INDEXER_URL" "$BACKEND_PROVER_URL" > vercel.json
+          printf '{"installCommand":"echo skipped","outputDirectory":"dist","rewrites":[{"source":"/api/rpc/:path*","destination":"%s/rpc/:path*"},{"source":"/api/indexer/:path*","destination":"%s/:path*"},{"source":"/api/prover/:path*","destination":"%s/:path*"},{"source":"/api/gateway/:path*","destination":"%s/:path*"}]}\n' \
+            "$BACKEND_RPC_URL" "$BACKEND_INDEXER_URL" "$BACKEND_PROVER_URL" "$BACKEND_GATEWAY_URL" > vercel.json
 
           npx vercel build
         env:

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;
@@ -318,3 +362,111 @@ input[type="number"] {
   font-size: 11px;
   min-width: auto;
 }
+
+.balances,
+.notes-section,
+.channels-section {
+  margin-top: 16px;
+}
+
+.notes-section h3 {
+  margin-bottom: 12px;
+}
+
+.channel-card {
+  background: #161b22;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+}
+
+.channel-card:last-child {
+  margin-bottom: 0;
+}
+
+.channel-card-header {
+  font-size: 12px;
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #21262d;
+  line-height: 1.6;
+}
+
+.channel-card-label {
+  color: #8b949e;
+}
+
+.channel-card-value {
+  color: #c9d1d9;
+}
+
+.channel-card-sep {
+  color: #30363d;
+  margin: 0 6px;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.pagination span {
+  color: #8b949e;
+  font-size: 12px;
+}
+
+.pagination button {
+  font-size: 11px;
+  padding: 2px 8px;
+}
+
+.service-health-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: 8px;
+}
+
+.health-indicator {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.health-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.health-label {
+  color: #c9d1d9;
+}
+
+.health-detail {
+  color: #8b949e;
+  font-size: 11px;
+}
+
+.app-footer {
+  text-align: center;
+  color: #8b949e;
+  font-size: 12px;
+  padding: 24px 0 12px;
+  border-top: 1px solid #30363d;
+  margin-top: 24px;
+}
+
+.app-footer a {
+  color: #58a6ff;
+  text-decoration: none;
+}
+
+.app-footer a:hover {
+  text-decoration: underline;
+}

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";
@@ -13,21 +13,30 @@ import { InfoPanel } from "./components/InfoPanel.tsx";
 import { ActionPanel } from "./components/ActionPanel.tsx";
 import { TransactionBuilder } from "./components/TransactionBuilder.tsx";
 import { StatusBar } from "./components/StatusBar.tsx";
+import { ServiceHealthBar } from "./components/ServiceHealthBar.tsx";
 import { useTransactionBuilder } from "./hooks/useTransactionBuilder.ts";
+import { useServiceHealth } from "./hooks/useServiceHealth.ts";
 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 {
@@ -52,6 +61,7 @@ export function App() {
     provider,
     transfers,
     activeAccount,
+    accounts,
     activePool.address,
     config,
   );
@@ -78,22 +88,27 @@ export function App() {
     refresh,
   );
 
+  const serviceHealth = useServiceHealth(provider, config);
+
   const [activeView, setActiveView] = useState<"actions" | "builder">("actions");
 
   return (
     <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
         pools={pools}
         activePool={activePool}
         loading={poolsLoading}
         deploying={deploying}
         deployError={deployError}
+        classHash={classHash}
         onSelect={selectPool}
         onDeploy={handleDeploy}
+        onClassHashChange={setClassHash}
       />
       <AccountSelector
         accounts={accounts}
@@ -126,6 +141,7 @@ export function App() {
           {activeView === "actions" ? (
             <ActionPanel
               pending={status.pending}
+              activeAddress={activeAccount!.address}
               otherAccounts={accounts.filter((_, index) => index !== activeIndex)}
               onRegister={register}
               onMint={mint}
@@ -143,6 +159,12 @@ export function App() {
           )}
         </div>
       </div>
+      <footer className="app-footer">
+        Built by Starkware &middot; Docs{" "}
+        <a href="https://github.com/starkware-libs/starknet-privacy" target="_blank" rel="noreferrer">
+          github.com/starkware-libs/starknet-privacy
+        </a>
+      </footer>
     </div>
   );
 }

demo/src/components/ActionPanel.tsx

@@ -3,6 +3,7 @@ import type { AccountConfig } from "../config.ts";
 
 type Props = {
   pending: boolean;
+  activeAddress: string;
   otherAccounts: AccountConfig[];
   onRegister: () => void;
   onMint: (amount: bigint) => void;
@@ -13,6 +14,7 @@ type Props = {
 
 export function ActionPanel({
   pending,
+  activeAddress,
   otherAccounts,
   onRegister,
   onMint,
@@ -66,14 +68,14 @@ export function ActionPanel({
       </form>
 
       <div className="action-form">
-        <h3>Register</h3>
+        <h3>Register in the pool</h3>
         <button type="button" disabled={pending} onClick={onRegister}>
           Register
         </button>
       </div>
 
       <form onSubmit={handleDeposit} className="action-form">
-        <h3>Deposit</h3>
+        <h3>Deposit to self (auto setup)</h3>
         <input
           type="number"
           value={depositAmount}
@@ -87,7 +89,7 @@ export function ActionPanel({
       </form>
 
       <form onSubmit={handleWithdraw} className="action-form">
-        <h3>Withdraw</h3>
+        <h3>Withdraw to self</h3>
         <input
           type="number"
           value={withdrawAmount}
@@ -101,12 +103,15 @@ export function ActionPanel({
       </form>
 
       <form onSubmit={handleTransfer} className="action-form">
-        <h3>Transfer</h3>
+        <h3>Transfer to someone (or sweep)</h3>
         <select
           value={transferRecipient}
           onChange={(event) => setTransferRecipient(event.target.value)}
         >
           <option value="">Select recipient...</option>
+          <option value={activeAddress}>
+            Self ({activeAddress.slice(0, 10)}...)
+          </option>
           {otherAccounts.map((account) => (
             <option key={account.address} value={account.address}>
               {account.name} ({account.address.slice(0, 10)}...)