import React, { useCallback, useEffect, useRef, useState } from 'react'; interface LedgerState { counter?: string | number | bigint; nonce?: string | number | bigint; } // ─── StatusBar ─────────────────────────────────────────────────────────────── function StatusBar({ status, busy }: { status: string; busy: boolean }) { return (

{status}

); } // ─── ContractPanel ──────────────────────────────────────────────────────────── interface ContractPanelProps { onDeploy: () => Promise; onAttach: (address: string) => Promise; contractAddress: string | null; ledger: LedgerState | null; onIncrement: () => Promise; onGetCounter: () => Promise; onGetNonce: () => Promise; txHash: string | null; error: string | null; busy: boolean; walletReady: boolean; } function ContractPanel({ onDeploy, onAttach, contractAddress, ledger, onIncrement, onGetCounter, onGetNonce, txHash, error, busy, walletReady, }: ContractPanelProps) { const [addressInput, setAddressInput] = useState(''); const fmt = (v: string | number | bigint | undefined) => { if (v === undefined || v === null) return '—'; return String(v); }; const btn: React.CSSProperties = { background: '#1a1a1a', border: '1px solid #2e2e2e', color: '#c0c0c0', fontFamily: 'monospace', fontSize: 11, letterSpacing: '0.08em', padding: '7px 14px', cursor: 'pointer', whiteSpace: 'nowrap', }; const sectionLabel: React.CSSProperties = { fontSize: 10, letterSpacing: '0.12em', color: '#555', marginBottom: 12, fontFamily: 'monospace', }; const divider: React.CSSProperties = { height: 1, background: '#1e1e1e' }; const section: React.CSSProperties = { padding: '16px 20px' }; const label: React.CSSProperties = { fontSize: 9, letterSpacing: '0.12em', color: '#555', fontFamily: 'monospace', flexShrink: 0, }; return (

{/* Deploy / Attach */}

CONTRACT

setAddressInput(e.target.value)} spellCheck={false} />

{contractAddress && (

ADDRESS {contractAddress}

)}

{/* Ledger State */}

LEDGER STATE

{(['counter', 'nonce'] as const).map(key => (

{key.toUpperCase()} {fmt(ledger?.[key])}

))}

{/* Circuit Actions */}

CIRCUITS

{[ { name: 'increment()', desc: 'Increments counter and nonce by 1', fn: onIncrement }, { name: 'getCounter()', desc: 'Reads current counter value', fn: onGetCounter }, { name: 'getNonce()', desc: 'Reads current nonce value', fn: onGetNonce }, ].map(({ name, desc, fn }) => (

{name}

{desc}

))}

{/* Feedback */} {(txHash || error) && ( <>

{txHash && (

TX {txHash}

)} {error && (

ERROR {error}

)}

); } // ─── App ────────────────────────────────────────────────────────────────────── export default function App() { const runtimeRef = useRef(null); const [walletReady] = useState(false); // replace with real wallet hook const [contractAddress, setContractAddress] = useState(null); const [ledger, setLedger] = useState(null); const [txHash, setTxHash] = useState(null); const [error, setError] = useState(null); const [busy, setBusy] = useState(false); const [status, setStatus] = useState('AWAITING WALLET'); const getRuntime = useCallback(async () => { if (runtimeRef.current) return runtimeRef.current; setStatus('LOADING RUNTIME…'); const [{ createManagedContractRuntime }, contractModule, { managedArtifacts }] = await Promise.all([ import('./lib/compact-contract'), import('./managed/contract/contract/index.js'), import('./managed/contract/compiler/artifact-map'), ]); const runtime = await createManagedContractRuntime({ compiledContract: contractModule, artifacts: managedArtifacts, }); runtimeRef.current = runtime; setStatus('RUNTIME READY'); return runtime; }, []); const refreshLedger = useCallback( async (address: string) => { try { const runtime = await getRuntime(); const state = await runtime.read(address); setLedger({ counter: state.counter ?? state.ledger?.counter, nonce: state.nonce ?? state.ledger?.nonce, }); } catch (e: any) { setError(e?.message ?? String(e)); } }, [getRuntime], ); const handleDeploy = useCallback(async () => { setError(null); setTxHash(null); setBusy(true); setStatus('DEPLOYING…'); try { const runtime = await getRuntime(); const result = await runtime.deploy(); const addr = result?.contractAddress ?? result?.address ?? result; setContractAddress(String(addr)); setTxHash(result?.txHash ?? result?.transactionHash ?? null); setStatus('DEPLOYED'); await refreshLedger(String(addr)); } catch (e: any) { setError(e?.message ?? String(e)); setStatus('DEPLOY FAILED'); } finally { setBusy(false); } }, [getRuntime, refreshLedger]); const handleAttach = useCallback(async (address: string) => { setError(null); setTxHash(null); setBusy(true); setStatus('ATTACHING…'); try { const runtime = await getRuntime(); await runtime.attach(address); setContractAddress(address); setStatus('ATTACHED'); await refreshLedger(address); } catch (e: any) { setError(e?.message ?? String(e)); setStatus('ATTACH FAILED'); } finally { setBusy(false); } }, [getRuntime, refreshLedger]); const callCircuit = useCallback( async (circuitName: string) => { if (!contractAddress) return; setError(null); setTxHash(null); setBusy(true); setStatus(`INVOKING ${circuitName}…`); try { const runtime = await getRuntime(); const instance = await runtime.attach(contractAddress); const hash = await instance.invoke(circuitName); setTxHash(typeof hash === 'string' ? hash : JSON.stringify(hash)); setStatus(`${circuitName} OK`); await refreshLedger(contractAddress); } catch (e: any) { setError(e?.message ?? String(e)); setStatus(`${circuitName} FAILED`); } finally { setBusy(false); } }, [contractAddress, getRuntime, refreshLedger], ); return (

{/* Header */}

COUNTER CONTRACT Midnight · Compact

{/* Status */} {/* Contract Panel */} callCircuit('increment')} onGetCounter={() => callCircuit('getCounter')} onGetNonce={() => callCircuit('getNonce')} txHash={txHash} error={error} busy={busy} walletReady={walletReady} />

); }