import { useMemo, useState } from 'react'; import { Loader2, Shield, ExternalLink, CheckCircle2, XCircle, FileCheck2 } from 'lucide-react'; import { useWallet } from './hooks/useWallet'; import { WalletPanel } from './components/WalletPanel'; import ContractInfo from './components/ContractInfo'; import LedgerPanel from './components/LedgerPanel'; import CircuitActions from './components/CircuitActions'; type ActionStep = 'idle' | 'executing' | 'done'; function stepLabel(step: ActionStep): string { if (step === 'executing') return 'Submitting to Midnight...'; if (step === 'done') return 'Done!'; return ''; } export default function App() { const { status, address } = useWallet(); const [contractAddress] = useState( 'cd0ad70feb77348256ba3013fe6021c86edec74d20d0321cf4a365952f19884f' ); // Mirror ledger state (constructor values) const [totalDocuments, setTotalDocuments] = useState(0); const [paused, setPaused] = useState(false); const [nonce, setNonce] = useState(0); const [notarized, setNotarized] = useState>({}); const [notarizedAt, setNotarizedAt] = useState>({}); const [documentHash, setDocumentHash] = useState(''); const [timestamp, setTimestamp] = useState(() => Math.floor(Date.now() / 1000)); const [actionStep, setActionStep] = useState('idle'); const [loadingAction, setLoadingAction] = useState<'pause' | 'unpause' | 'notarize' | null>(null); const [lastTxHash, setLastTxHash] = useState(null); const [successMsg, setSuccessMsg] = useState(''); const [errorMsg, setErrorMsg] = useState(''); const explorerContractUrl = useMemo( () => `https://explorer.1am.xyz/contract/${contractAddress}?network=preview`, [contractAddress] ); const runAction = async ( action: 'pause' | 'unpause' | 'notarize', updater: () => void, successText: string ) => { setErrorMsg(''); setSuccessMsg(''); setLoadingAction(action); setActionStep('executing'); await new Promise((resolve) => setTimeout(resolve, 1500)); try { updater(); const nextNonce = nonce + 1; setNonce(nextNonce); const tx = `demo-${action}-tx-${nextNonce}`; setLastTxHash(tx); setSuccessMsg(successText); setActionStep('done'); } catch (err) { setErrorMsg(err instanceof Error ? err.message : 'Action failed'); setActionStep('idle'); } finally { setLoadingAction(null); } }; const onPause = async () => { await runAction( 'pause', () => { if (paused) throw new Error('Registry already paused'); setPaused(true); }, 'Registry paused successfully.' ); }; const onUnpause = async () => { await runAction( 'unpause', () => { if (!paused) throw new Error('Registry is not paused'); setPaused(false); }, 'Registry unpaused successfully.' ); }; const onNotarize = async () => { await runAction( 'notarize', () => { if (paused) throw new Error('Registry is paused'); if (!documentHash.trim()) throw new Error('Document hash is required'); if (notarized[documentHash]) throw new Error('Document already notarized'); setNotarized((prev) => ({ ...prev, [documentHash]: true })); setNotarizedAt((prev) => ({ ...prev, [documentHash]: timestamp })); setTotalDocuments((prev) => prev + 1); }, 'Document notarized on-chain.' ); }; return (

Midnight Notary

Notary Registry DApp

Anchor document hashes on Midnight with privacy-friendly ZK execution.

{status === 'connected' && address && (

{address}

)}

{status === 'connected' && (

{(successMsg || errorMsg) && (

{errorMsg ? : } {errorMsg || successMsg}

)} {loadingAction && (

{stepLabel(actionStep)}

)} {lastTxHash && ( Last Tx {lastTxHash} )}

)}

This app mirrors contract ledger state in-session for interactive preview behavior.

On real execution, wallet prompts generate ZK proofs and submit transactions to Midnight preview.

); }