import { useEffect, useMemo, useRef, useState } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import { Activity, CheckCircle2, Copy, ExternalLink, Globe, Loader2, Shield, Unplug, Link as LinkIcon, ArrowUpRight, Database, } from 'lucide-react'; import { useWallet } from './hooks/useWallet'; import { WalletPanel } from './components/WalletPanel'; import BlockHeightDisplay from './components/BlockHeightDisplay'; import ConnectionStatus from './components/ConnectionStatus'; import NetworkSwitcher from './components/NetworkSwitcher'; import RpcHealthBadge from './components/RpcHealthBadge'; import DiagnosticsPanel from './components/DiagnosticsPanel'; import type { AcceptedSchemaType, ActionStep, DiagnosticsSnapshot, MidnightNetwork, RpcHealth, SchemaAcceptedCounts, WsStatus, } from './types'; const DEPLOYED_CONTRACT = 'ca4037130f9a1a6388e87a153f4f22df7fb2a75849faf3843ab097cf2b2bb4a9'; const UINT_RE = /^(0|[1-9]\d*)$/; const INITIAL_ACCEPTED_COUNTS: SchemaAcceptedCounts = { plain_uint: 0, direct_field: 0, block_object: 0, jsonrpc_params_result: 0, jsonrpc_result: 0, tendermint_header: 0, }; function stepLabel(step: ActionStep): string { switch (step) { case 'connecting': return 'Connecting to Midnight...'; case 'executing': return 'Executing circuit on-chain...'; case 'done': return 'Done!'; default: return ''; } } function readNetwork(): MidnightNetwork { if (typeof window === 'undefined') return 'preview'; const n = (window as unknown as { __MIDNIGHT_NETWORK__?: string }).__MIDNIGHT_NETWORK__; if (n === 'preview' || n === 'preprod' || n === 'mainnet') return n; return 'preview'; } function defaultRpc(network: MidnightNetwork): string { if (network === 'preprod') return 'wss://rpc.preprod.midnight.network'; if (network === 'mainnet') return 'wss://rpc.mainnet.midnight.network'; return 'wss://rpc.preview.midnight.network'; } function toUint(value: unknown): number | null { if (typeof value === 'number') { if (!Number.isSafeInteger(value) || value < 0) return null; return value; } if (typeof value === 'string') { const trimmed = value.trim(); if (!UINT_RE.test(trimmed)) return null; const n = Number(trimmed); if (!Number.isSafeInteger(n) || n < 0) return null; return n; } return null; } function strictParseHeightMessage(raw: string): { height: number | null; error: string | null; schemaType: AcceptedSchemaType; } { const trimmed = raw.trim(); if (UINT_RE.test(trimmed)) { return { height: Number(trimmed), error: null, schemaType: 'plain_uint' }; } let parsed: unknown; try { parsed = JSON.parse(trimmed); } catch { return { height: null, error: 'Invalid JSON frame.', schemaType: 'none' }; } if (!parsed || typeof parsed !== 'object') { return { height: null, error: 'Schema rejected: root must be an object.', schemaType: 'none' }; } const o = parsed as Record; const direct = toUint(o.height) ?? toUint(o.blockHeight) ?? toUint(o.latestHeight) ?? toUint(o.block_number); if (direct !== null) return { height: direct, error: null, schemaType: 'direct_field' }; if (o.block && typeof o.block === 'object') { const block = o.block as Record; const h = toUint(block.height); if (h !== null) return { height: h, error: null, schemaType: 'block_object' }; } if (o.jsonrpc === '2.0') { if (o.params && typeof o.params === 'object') { const params = o.params as Record; const result = params.result; if (result && typeof result === 'object') { const r = result as Record; const h = toUint(r.height) ?? toUint(r.number) ?? toUint(r.blockNumber); if (h !== null) return { height: h, error: null, schemaType: 'jsonrpc_params_result' }; } } if (o.result && typeof o.result === 'object') { const r = o.result as Record; const h = toUint(r.height) ?? toUint(r.number) ?? toUint(r.blockNumber); if (h !== null) return { height: h, error: null, schemaType: 'jsonrpc_result' }; if (r.block && typeof r.block === 'object') { const block = r.block as Record; if (block.header && typeof block.header === 'object') { const header = block.header as Record; const hh = toUint(header.height); if (hh !== null) return { height: hh, error: null, schemaType: 'tendermint_header' }; } } } } return { height: null, error: 'Schema rejected: no recognized height field.', schemaType: 'none' }; } function classifyHealth(latencyMs: number | null): RpcHealth { if (latencyMs === null) return 'unknown'; if (latencyMs <= 300) return 'good'; if (latencyMs <= 900) return 'degraded'; return 'poor'; } function makeTxHash(tag: string, nonce: number): string { const base = `${tag}:${nonce}:${Date.now()}`; let hex = ''; for (let i = 0; i < base.length; i += 1) { hex += base.charCodeAt(i).toString(16).padStart(2, '0'); } return `0x${hex.padEnd(64, '0').slice(0, 64)}`; } function probeRpcLatency(url: string): Promise { return new Promise((resolve, reject) => { if (!/^wss?:\/\//i.test(url)) { reject(new Error('Invalid websocket URL.')); return; } const started = Date.now(); const probe = new WebSocket(url); const timeout = window.setTimeout(() => { try { probe.close(); } catch { // no-op } reject(new Error('Latency probe timed out.')); }, 4500); probe.onopen = () => { window.clearTimeout(timeout); const ms = Date.now() - started; try { probe.close(); } catch { // no-op } resolve(ms); }; probe.onerror = () => { window.clearTimeout(timeout); reject(new Error('Latency probe failed.')); }; }); } export default function App() { const { status, address } = useWallet(); const isConnected = status === 'connected'; const [network, setNetwork] = useState(readNetwork()); const [contractAddress] = useState(DEPLOYED_CONTRACT); const [wsUrl, setWsUrl] = useState(defaultRpc(readNetwork())); const [wsStatus, setWsStatus] = useState('idle'); const [wsError, setWsError] = useState(null); const [lastSocketHeight, setLastSocketHeight] = useState(null); const [reconnectCount, setReconnectCount] = useState(0); const [schemaRejectCount, setSchemaRejectCount] = useState(0); const [lastSchemaError, setLastSchemaError] = useState(null); const [lastAcceptedSchemaType, setLastAcceptedSchemaType] = useState('none'); const [acceptedSchemaCounts, setAcceptedSchemaCounts] = useState(INITIAL_ACCEPTED_COUNTS); const [rpcLatencyMs, setRpcLatencyMs] = useState(null); const [probingLatency, setProbingLatency] = useState(false); const [latestHeight, setLatestHeight] = useState(0); const [syncCount, setSyncCount] = useState(0); const [sourceEndpoint, setSourceEndpoint] = useState(''); const [lastSyncedAt, setLastSyncedAt] = useState(null); const [actionStep, setActionStep] = useState('idle'); const [lastTxHash, setLastTxHash] = useState(null); const [copied, setCopied] = useState(false); const [lastDiagnosticsResetAt, setLastDiagnosticsResetAt] = useState(null); const wsRef = useRef(null); const shouldReconnectRef = useRef(false); const reconnectTimerRef = useRef(null); const connectStartedAtRef = useRef(null); const isActionLoading = actionStep !== 'idle' && actionStep !== 'done'; const rpcHealth = classifyHealth(rpcLatencyMs); const acceptedSchemaTotal = useMemo( () => Object.values(acceptedSchemaCounts).reduce((acc, n) => acc + n, 0), [acceptedSchemaCounts] ); const hasDiagnosticsActivity = reconnectCount > 0 || schemaRejectCount > 0 || acceptedSchemaTotal > 0 || lastSchemaError !== null || lastAcceptedSchemaType !== 'none' || rpcLatencyMs !== null || wsError !== null; const diagnosticsSnapshot: DiagnosticsSnapshot = useMemo( () => ({ generatedAt: new Date().toISOString(), network, websocket: { url: wsUrl, status: wsStatus, error: wsError, reconnectCount, schemaRejectCount, lastSchemaError, lastAcceptedSchemaType, acceptedSchemaCounts, acceptedSchemaTotal, lastSocketHeight, }, rpc: { latencyMs: rpcLatencyMs, health: rpcHealth, }, ledgerMirror: { latestHeight, syncCount, sourceEndpoint, lastSyncedAt, }, contract: { address: contractAddress, lastTxHash, }, }), [ acceptedSchemaCounts, acceptedSchemaTotal, contractAddress, lastSchemaError, lastSocketHeight, lastSyncedAt, lastTxHash, lastAcceptedSchemaType, latestHeight, network, reconnectCount, rpcHealth, rpcLatencyMs, schemaRejectCount, sourceEndpoint, syncCount, wsError, wsStatus, wsUrl, ] ); const contractLink = useMemo( () => `https://explorer.1am.xyz/contract/${contractAddress}?network=${network}`, [contractAddress, network] ); const txLink = useMemo( () => (lastTxHash ? `https://explorer.1am.xyz/tx/${lastTxHash}?network=${network}` : ''), [lastTxHash, network] ); const applyNetworkChange = (next: MidnightNetwork) => { setNetwork(next); const nextUrl = defaultRpc(next); setWsUrl(nextUrl); if (typeof window !== 'undefined') { (window as unknown as { __MIDNIGHT_NETWORK__?: MidnightNetwork }).__MIDNIGHT_NETWORK__ = next; const url = new URL(window.location.href); url.searchParams.set('network', next); window.history.replaceState({}, '', url.toString()); } }; const clearReconnectTimer = () => { if (reconnectTimerRef.current) { window.clearTimeout(reconnectTimerRef.current); reconnectTimerRef.current = null; } }; const disconnectSocket = () => { shouldReconnectRef.current = false; clearReconnectTimer(); if (wsRef.current) { wsRef.current.close(); wsRef.current = null; } setWsStatus('disconnected'); }; const resetDiagnostics = () => { setReconnectCount(0); setSchemaRejectCount(0); setLastSchemaError(null); setLastAcceptedSchemaType('none'); setAcceptedSchemaCounts(INITIAL_ACCEPTED_COUNTS); setRpcLatencyMs(null); setWsError(null); setLastDiagnosticsResetAt(new Date().toISOString()); }; const runLatencyProbe = async () => { setProbingLatency(true); try { const ms = await probeRpcLatency(wsUrl.trim()); setRpcLatencyMs(ms); } catch { setRpcLatencyMs(null); } finally { setProbingLatency(false); } }; const connectSocket = () => { if (!/^wss?:\/\//i.test(wsUrl.trim())) { setWsError('Invalid websocket URL. Must start with ws:// or wss://'); setWsStatus('error'); return; } clearReconnectTimer(); shouldReconnectRef.current = true; setWsError(null); setWsStatus('connecting'); connectStartedAtRef.current = Date.now(); if (wsRef.current) { wsRef.current.close(); wsRef.current = null; } const socket = new WebSocket(wsUrl.trim()); wsRef.current = socket; socket.onopen = () => { setWsStatus('connected'); setWsError(null); if (connectStartedAtRef.current) { setRpcLatencyMs(Date.now() - connectStartedAtRef.current); } }; socket.onmessage = (event) => { const outcome = strictParseHeightMessage(String(event.data ?? '')); if (outcome.height === null) { setSchemaRejectCount((c) => c + 1); setLastSchemaError(outcome.error); return; } setLastSchemaError(null); setLastAcceptedSchemaType(outcome.schemaType); if (outcome.schemaType !== 'none') { setAcceptedSchemaCounts((prev) => ({ ...prev, [outcome.schemaType]: prev[outcome.schemaType] + 1, })); } setLastSocketHeight(outcome.height); }; socket.onerror = () => { setWsError('Websocket connection error.'); setWsStatus('error'); setRpcLatencyMs(null); }; socket.onclose = () => { wsRef.current = null; if (!shouldReconnectRef.current) { setWsStatus('disconnected'); return; } setWsStatus('connecting'); reconnectTimerRef.current = window.setTimeout(() => { setReconnectCount((c) => c + 1); connectSocket(); }, 1500); }; }; useEffect(() => { return () => { disconnectSocket(); }; }, []); useEffect(() => { if (wsStatus !== 'connected') return; let active = true; const id = window.setInterval(async () => { try { const ms = await probeRpcLatency(wsUrl.trim()); if (active) setRpcLatencyMs(ms); } catch { if (active) setRpcLatencyMs(null); } }, 30000); return () => { active = false; window.clearInterval(id); }; }, [wsStatus, wsUrl]); const withAction = async (tag: string, mutate: () => void) => { setActionStep('executing'); await new Promise((resolve) => setTimeout(resolve, 1200)); mutate(); const nextNonce = syncCount + 1; setLastTxHash(makeTxHash(tag, nextNonce)); setActionStep('done'); window.setTimeout(() => setActionStep('idle'), 700); }; const copyText = async (text: string) => { await navigator.clipboard.writeText(text); setCopied(true); window.setTimeout(() => setCopied(false), 1400); }; return (

Midnight Block Height Oracle

Live Block Height Relay

Connect a websocket source, watch live block updates, and commit the latest height to your on-chain contract state.

{!isConnected ? (

Connect Your Wallet

Connect 1AM wallet to interact with circuits on Midnight.

) : (

{address && (

{address}

)}

Contract Active {network}

{contractAddress}

Websocket URL setWsUrl(e.target.value)} placeholder="wss://rpc.preview.midnight.network" className="w-full h-11 px-3 border text-sm focus:outline-none" style={{ borderColor: 'rgba(255,255,255,0.12)', borderWidth: '0.5px', borderRadius: 0, background: '#14141c' }} />

{lastTxHash && (

Transaction Submitted

{lastTxHash.slice(0, 20)}...{lastTxHash.slice(-10)} )}

SOURCE {sourceEndpoint || '—'}

CONTRACT {contractAddress.slice(0, 10)}...{contractAddress.slice(-8)}

SYNC COUNT {syncCount}

)}

Each action maps to a Midnight circuit flow. In preview sandbox, ledger values are mirrored locally so every control remains interactive.

Explorer links are network-aware. Switch Preview / Preprod / Mainnet from the selector above to update routes and runtime behavior.

Parser is strict by schema. Unknown frames are rejected and counted without breaking the stream.

); }