import { useEffect, useMemo, useState } from 'react'; import { useWallet } from './hooks/useWallet'; import { WalletPanel } from './components/WalletPanel'; type ParamSpec = { name: string; type: string; label: string; }; type CircuitSpec = { name: string; label: string; params: ParamSpec[]; }; const CONTRACT_NAME = "contract"; const DEFAULT_CONTRACT_ADDRESS = ""; const DEPLOY_NETWORK = "preview"; const CIRCUITS: CircuitSpec[] = [{"name":"increment","params":[],"label":"Increment"},{"name":"decrement","params":[],"label":"Decrement"},{"name":"reset","params":[],"label":"Reset"}]; const CONSTRUCTOR_PARAMS: ParamSpec[] = []; const LEDGER_FIELDS: Array<{ name: string; label: string }> = [{"name":"count","label":"Count"}]; function createEmptyActionInputs() { return Object.fromEntries( CIRCUITS.map((circuit) => [ circuit.name, Object.fromEntries(circuit.params.map((param) => [param.name, ''])), ]), ) as Record>; } function createEmptyDeployInputs() { return Object.fromEntries( CONSTRUCTOR_PARAMS.map((param) => [param.name, '']), ) as Record; } function formatError(error: unknown) { if (error instanceof Error) { return error.message; } if (typeof error === 'string') { return error; } try { return JSON.stringify(error); } catch { return 'Unknown runtime error'; } } function formatValue(value: unknown) { if (value === null || value === undefined || value === '') { return '—'; } if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') { return String(value); } try { return JSON.stringify(value); } catch { return String(value); } } function coerceArg(rawValue: string, type: string) { const value = rawValue.trim(); if (!value) { return value; } const normalizedType = type.toLowerCase(); if ( normalizedType.includes('uint') || normalizedType.includes('int') || normalizedType.includes('counter') || normalizedType.includes('number') ) { const parsed = Number(value); return Number.isNaN(parsed) ? value : parsed; } if (normalizedType.includes('bool')) { return value === 'true'; } return value; } function getLedgerSnapshot(state: any) { const namedLedger = { "count": state?.count ?? state?.ledger?.count ?? null, }; if (Object.keys(namedLedger).length > 0) { return namedLedger as Record; } const ledger = state?.ledger && typeof state.ledger === 'object' ? state.ledger : state; if (!ledger || typeof ledger !== 'object') { return {}; } return ledger as Record; } export default function App() { const { status, providers, address, error: walletError } = useWallet(); const [contractAddress, setContractAddress] = useState(DEFAULT_CONTRACT_ADDRESS); const [attachedAddress, setAttachedAddress] = useState(DEFAULT_CONTRACT_ADDRESS); const [ledgerState, setLedgerState] = useState>({}); const [busy, setBusy] = useState(''); const [error, setError] = useState(''); const [txHash, setTxHash] = useState(''); const [actionInputs, setActionInputs] = useState>>(() => createEmptyActionInputs(), ); const [deployInputs, setDeployInputs] = useState>(() => createEmptyDeployInputs(), ); const explorerHref = useMemo(() => { if (!attachedAddress) { return ''; } return `https://explorer.1am.xyz/contract/${attachedAddress}?network=${DEPLOY_NETWORK}`; }, [attachedAddress]); async function getRuntime() { if (!providers) { throw new Error('Connect the 1AM wallet before interacting with the contract.'); } const [{ createManagedContractRuntime }, contractModule, { managedArtifacts }] = await Promise.all([ import('./lib/compact-contract'), import('./managed/contract/contract/index.js'), import('./managed/contract/compiler/artifact-map'), ]); return createManagedContractRuntime({ compiledContract: contractModule, artifacts: managedArtifacts, wallet: providers, }); } async function refreshContract(nextAddress = contractAddress) { const trimmedAddress = nextAddress.trim(); if (!trimmedAddress) { throw new Error('Enter a contract address or deploy a new contract first.'); } const runtime = await getRuntime(); const nextState = await runtime.read(trimmedAddress); setAttachedAddress(trimmedAddress); setContractAddress(trimmedAddress); setLedgerState(getLedgerSnapshot(nextState)); return nextState; } async function runBusy(label: string, action: () => Promise) { setBusy(label); setError(''); try { await action(); } catch (nextError) { setError(formatError(nextError)); } finally { setBusy(''); } } async function handleAttach() { await runBusy('attach', async () => { await refreshContract(contractAddress); }); } async function handleRefresh() { await runBusy('refresh', async () => { await refreshContract(attachedAddress || contractAddress); }); } async function handleDeploy() { await runBusy('deploy', async () => { const runtime = await getRuntime(); const args = CONSTRUCTOR_PARAMS.map((param) => coerceArg(deployInputs[param.name] ?? '', param.type), ); const deployed = await runtime.deploy(args); const nextAddress = String( deployed?.contractAddress || deployed?.contract?.contractAddress || '', ); if (!nextAddress) { throw new Error('Deployment succeeded without a contract address.'); } setContractAddress(nextAddress); setAttachedAddress(nextAddress); setTxHash(String(deployed?.txHash ?? '')); setLedgerState(getLedgerSnapshot(deployed)); await refreshContract(nextAddress); }); } async function handleInvoke(circuit: CircuitSpec) { await runBusy(`invoke:${circuit.name}`, async () => { const nextAddress = (attachedAddress || contractAddress).trim(); if (!nextAddress) { throw new Error('Attach to a contract before calling circuits.'); } const runtime = await getRuntime(); const instance = await runtime.attach(nextAddress); const args = circuit.params.map((param) => coerceArg(actionInputs[circuit.name]?.[param.name] ?? '', param.type), ); const result = await instance.invoke(circuit.name, ...args); setTxHash(String((result as any)?.txHash ?? result ?? '')); setLedgerState(getLedgerSnapshot(result)); await refreshContract(nextAddress); }); } useEffect(() => { if (status !== 'connected' || !providers || !DEFAULT_CONTRACT_ADDRESS) { return; } let cancelled = false; void (async () => { try { const runtime = await getRuntime(); const nextState = await runtime.read(DEFAULT_CONTRACT_ADDRESS); if (cancelled) { return; } setAttachedAddress(DEFAULT_CONTRACT_ADDRESS); setContractAddress(DEFAULT_CONTRACT_ADDRESS); setLedgerState(getLedgerSnapshot(nextState)); setError(''); } catch (nextError) { if (!cancelled) { setError(formatError(nextError)); } } })(); return () => { cancelled = true; }; }, [status, providers]); const activeAddress = attachedAddress || contractAddress; const hasAttachedContract = Boolean(activeAddress); const isConnected = status === 'connected'; return (

Midnight Preview

{CONTRACT_NAME.replace(/_/g, ' ')}

Connect wallet, verify on-chain state, and run live contract circuits.

Network

{DEPLOY_NETWORK}

Wallet

{isConnected ? address || 'Connected' : 'Connect the 1AM wallet to unlock contract actions.'}

{walletError ?

{walletError}

: null}

Contract

{activeAddress || 'Not attached'}

Activity

{busy ? busy : txHash || 'Idle'}

Explorer

{explorerHref ? ( {explorerHref} ) : ( 'Available after attach or deploy' )}

Attach Contract

setContractAddress(event.target.value)} className="mt-2 h-11 w-full border border-white/10 bg-black px-3 font-mono text-sm text-white outline-none placeholder:text-white/25" placeholder="Paste a preview contract address" />

{!DEFAULT_CONTRACT_ADDRESS ? (

Deploy Contract

{CONSTRUCTOR_PARAMS.length > 0 ? (

{CONSTRUCTOR_PARAMS.map((param) => ( {param.label} setDeployInputs((current) => ({ ...current, [param.name]: event.target.value, })) } className="mt-2 h-11 w-full border border-white/10 bg-black px-3 text-sm text-white outline-none placeholder:text-white/25" placeholder={param.type} /> ))}

) : (

This contract does not require constructor inputs.

)}

) : null}

Ledger State

{isConnected ? 'Live Read' : 'Wallet Required'}

{(LEDGER_FIELDS.length > 0 ? LEDGER_FIELDS : [{ name: 'contractAddress', label: 'Contract Address' }]).map((field) => (

{field.label}

{formatValue(ledgerState[field.name])}

))}

Contract Actions

{CIRCUITS.map((circuit) => (

{circuit.label}

{circuit.params.length > 0 ? circuit.params.map((param) => `${param.label} · ${param.type}`).join(' / ') : 'No inputs required'}

{circuit.params.length > 0 ? (

{circuit.params.map((param) => ( {param.label} setActionInputs((current) => ({ ...current, [circuit.name]: { ...(current[circuit.name] ?? {}), [param.name]: event.target.value, }, })) } className="mt-2 h-11 w-full border border-white/10 bg-black px-3 text-sm text-white outline-none placeholder:text-white/25" placeholder={param.type} /> ))}

) : null}

))}

{busy ? (

Processing {busy.replace(/^invoke:/, '')} on preview...

) : null} {error ?

{error}

: null}

); }