import { useState, useEffect, useCallback } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { useWallet } from './hooks/useWallet'; import { WalletPanel } from './components/WalletPanel'; import ContractPanel from './components/ContractPanel'; import JurorConsole from './components/JurorConsole'; import { Scale, ExternalLink, Copy, Check, Loader2, Shield, } from 'lucide-react'; type AppStep = 'idle' | 'deploying' | 'attaching' | 'ready'; export interface OnChainState { case_status: string; guilty_votes: number; not_guilty_votes: number; abstain_votes: number; juror_count: number; selected_count: number; case_id: string; } const EXPLORER = 'https://explorer.1am.xyz'; const NETWORK = 'preview'; async function getRuntime(providers: any) { 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, }); } export default function App() { const { status, providers, address } = useWallet(); const [appStep, setAppStep] = useState('idle'); const [contractAddress, setContractAddress] = useState(''); const [pasteAddress, setPasteAddress] = useState(''); const [onChainState, setOnChainState] = useState(null); const [lastTxHash, setLastTxHash] = useState(null); const [error, setError] = useState(null); const [copied, setCopied] = useState(false); const [runtime, setRuntime] = useState(null); const isConnected = status === 'connected'; const isLoading = appStep === 'deploying' || appStep === 'attaching'; const copyToClipboard = async (text: string) => { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const readState = useCallback(async (rt: any, addr: string) => { try { const state = await rt.read(addr); const statusMap: Record = { 0: 'Open', 1: 'Deliberating', 2: 'Closed', }; setOnChainState({ case_status: statusMap[state.case_status] ?? 'Unknown', guilty_votes: Number(state.guilty_votes ?? 0), not_guilty_votes: Number(state.not_guilty_votes ?? 0), abstain_votes: Number(state.abstain_votes ?? 0), juror_count: Number(state.juror_count ?? 0), selected_count: Number(state.selected_count ?? 0), case_id: String(state.case_id ?? '0'), }); } catch (e: any) { setError('Failed to read on-chain state: ' + e.message); } }, []); const handleDeploy = async () => { if (!providers) return; setError(null); setAppStep('deploying'); try { const rt = await getRuntime(providers); setRuntime(rt); const instance = await rt.deploy(); const addr = instance.deployTxData.public.contractAddress; setContractAddress(addr); setLastTxHash(instance.deployTxData.public.txHash ?? null); await readState(rt, addr); setAppStep('ready'); } catch (e: any) { setError(e.message ?? 'Deploy failed'); setAppStep('idle'); } }; const handleAttach = async () => { if (!providers || !pasteAddress.trim()) return; setError(null); setAppStep('attaching'); try { const rt = await getRuntime(providers); setRuntime(rt); await rt.attach(pasteAddress.trim()); setContractAddress(pasteAddress.trim()); await readState(rt, pasteAddress.trim()); setAppStep('ready'); } catch (e: any) { setError(e.message ?? 'Attach failed'); setAppStep('idle'); } }; const handleCircuit = async (circuit: string, ...args: any[]) => { if (!runtime || !contractAddress) return; setError(null); try { const instance = await runtime.attach(contractAddress); const result = await instance.invoke(circuit, ...args); setLastTxHash(result?.txHash ?? result?.public?.txHash ?? null); await readState(runtime, contractAddress); } catch (e: any) { setError(e.message ?? 'Transaction failed'); } }; return (

{/* Header */}

Midnight Network · {NETWORK}

Juror Zero

Anonymous jury selection and private on-chain voting.

{/* Wallet Panel */}

{isConnected && address && (

{address}

)}

{/* Error Banner */} {error && ( {error} )} {/* Deploy / Attach Panel */} {isConnected && !contractAddress && (

Deploy or Attach

setPasteAddress(e.target.value)} placeholder="Paste existing contract address..." className="flex-1 h-11 border border-foreground/10 bg-background px-3 font-mono text-xs text-foreground placeholder:text-foreground/30 focus:outline-none focus:border-blue-500/40" />

)} {/* Contract Active */} {isConnected && contractAddress && appStep === 'ready' && ( { setContractAddress(''); setOnChainState(null); setLastTxHash(null); setAppStep('idle'); }} /> )}

); }