import { useEffect, useMemo, useState } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import { CheckCircle2, ExternalLink, Globe, Loader2, Shield, ToggleLeft, ToggleRight, Wallet, } from 'lucide-react'; import { useWallet } from './hooks/useWallet'; import { WalletPanel } from './components/WalletPanel'; import ContractStrip from './components/ContractStrip'; import MessagePanel from './components/MessagePanel'; import { encodeBytes64, executeCircuit } from './lib/contract-client'; type ActionStep = 'idle' | 'connecting' | 'executing' | 'done'; type SaveMode = 'public' | 'encrypted' | 'selective'; export default function App() { const { status, api, providers, address, connect, error: walletError } = useWallet(); const isConnected = status === 'connected'; const [contractAddress] = useState( '9d37d058d21721392ff6721ac7342e6c7d00f256f075d2191a4b316ecf610fe9' ); const [demoMode, setDemoMode] = useState(true); const [messages, setMessages] = useState([]); const [draftMessage, setDraftMessage] = useState(''); const [selectedIndexes, setSelectedIndexes] = useState([]); const [messageCount, setMessageCount] = useState(0); const [hasAnyMessage, setHasAnyMessage] = useState(false); const [nonce, setNonce] = useState(0); const [publicConfirmArmed, setPublicConfirmArmed] = useState(false); const [actionStep, setActionStep] = useState('idle'); const [activeAction, setActiveAction] = useState<'save' | 'clear' | null>(null); const [lastTxHash, setLastTxHash] = useState(null); const [txHistory, setTxHistory] = useState([]); const [banner, setBanner] = useState(''); const canExecute = (!!contractAddress.trim() && isConnected) || demoMode; useEffect(() => { if (publicConfirmArmed) setPublicConfirmArmed(false); }, [draftMessage]); const explorerContractUrl = useMemo( () => `https://explorer.1am.xyz/contract/${contractAddress}?network=preview`, [contractAddress] ); const txExplorerUrl = (txHash: string) => `https://explorer.1am.xyz/tx/${txHash}?network=preview`; const selectedMessages = selectedIndexes .filter((idx) => idx >= 0 && idx < messages.length) .map((idx) => `#${idx + 1}: ${messages[idx]}`); const makeDemoTxHash = (action: 'save_message' | 'clear_message', nextNonce: number) => `demo-${action}-${contractAddress.slice(0, 10)}-${nextNonce.toString(16).padStart(8, '0')}`; const ensureConnected = async (): Promise => { if (demoMode) return true; if (status === 'connected') return true; setActionStep('connecting'); setBanner(''); try { await connect(); return true; } catch { return false; } finally { setActionStep('idle'); } }; const transformMessage = (value: string, mode: SaveMode): string => { if (mode === 'encrypted') return `ENYPT: ${'.'.repeat(value.length)}`; if (mode === 'selective') return `SLCTv: ${value.replace(/[aeiouAEIOU]/g, '')}`; return `PBL: ${value}`; }; const onSave = async (mode: SaveMode) => { const value = draftMessage.trim(); if (!value) { setBanner('Enter a message before saving.'); return; } const connected = await ensureConnected(); if (!connected) { setBanner('Wallet not connected in this app session.'); return; } const processed = transformMessage(value, mode); setBanner(''); setActiveAction('save'); setActionStep('executing'); try { await new Promise((resolve) => window.setTimeout(resolve, 1200)); const nextNonce = nonce + 1; let txHash = ''; if (demoMode) { txHash = makeDemoTxHash('save_message', nextNonce); } else { if (!api || !providers) throw new Error('Wallet provider unavailable. Please reconnect wallet.'); txHash = await executeCircuit({ api, providers, contractAddress, circuit: 'save_message', args: [encodeBytes64(processed)], }); } const nextMessages = [...messages, processed]; setMessages(nextMessages); setSelectedIndexes([nextMessages.length - 1]); setMessageCount(nextMessages.length); setHasAnyMessage(nextMessages.length > 0); setNonce(nextNonce); setDraftMessage(''); setPublicConfirmArmed(false); setLastTxHash(txHash); setTxHistory((prev) => [txHash, ...prev]); setActionStep('done'); } catch (e) { setActionStep('idle'); setPublicConfirmArmed(false); setBanner(e instanceof Error ? e.message : 'save_message failed'); } finally { setActiveAction(null); window.setTimeout(() => setActionStep('idle'), 300); } }; const onPublicClick = async () => { if (!publicConfirmArmed) { setPublicConfirmArmed(true); setBanner('Public message selected. Click again to confirm and record.'); return; } setPublicConfirmArmed(false); setBanner(''); await onSave('public'); }; const onClear = async () => { if (messages.length === 0) { setBanner('No messages to clear.'); return; } const connected = await ensureConnected(); if (!connected) { setBanner('Wallet not connected in this app session.'); return; } setBanner(''); setActiveAction('clear'); setActionStep('executing'); try { await new Promise((resolve) => window.setTimeout(resolve, 1200)); const nextNonce = nonce + 1; let txHash = ''; if (demoMode) { txHash = makeDemoTxHash('clear_message', nextNonce); } else { if (!api || !providers) throw new Error('Wallet provider unavailable. Please reconnect wallet.'); txHash = await executeCircuit({ api, providers, contractAddress, circuit: 'clear_message', args: [], }); } const nextMessages = selectedIndexes.length === 0 ? [] : messages.filter((_, idx) => !new Set(selectedIndexes).has(idx)); setMessages(nextMessages); setSelectedIndexes([]); setMessageCount(nextMessages.length); setHasAnyMessage(nextMessages.length > 0); setNonce(nextNonce); setLastTxHash(txHash); setTxHistory((prev) => [txHash, ...prev]); setActionStep('done'); } catch (e) { setActionStep('idle'); setBanner(e instanceof Error ? e.message : 'clear_message failed'); } finally { setActiveAction(null); window.setTimeout(() => setActionStep('idle'), 300); } }; return (

MIDNIGHT DAPP

Messaging dApp: (hello-world)

A simple dAPP test, to visually showcase rational privacy:

Meaning you choose how your information is shared.

Note: Public by default.

Encrypted Message → stores all characters as ".".

Selective Message → stores message with all vowels removed.

Public Message → stores original input unchanged.

{'{ r² }™ - Remus Romulus - { romulii }™'}

{!isConnected && !demoMode && (

Connect your 1AM wallet

)} {!demoMode && status !== 'connected' && ( )} {isConnected && address && (

Wallet {address}

)}

Execution Source {demoMode ? 'DEMO (LOCAL MIRROR)' : 'REAL WALLET TRANSACTIONS'}

{(walletError || banner) && (

{walletError || banner}

)}

onSave('encrypted')} onSaveSelective={() => onSave('selective')} onClear={onClear} activeAction={activeAction} actionStep={actionStep === 'connecting' ? 'executing' : actionStep} publicConfirmArmed={publicConfirmArmed} />

Message Count

{messageCount}

Has Message

{hasAnyMessage ? 'true' : 'false'}

Nonce

{nonce}

{actionStep === 'executing' && (

{demoMode ? 'Simulating Midnight transaction...' : 'Executing circuit on-chain...'}

)} {lastTxHash && (

Latest transaction recorded

{lastTxHash.slice(0, 18)}...{lastTxHash.slice(-10)} )} {txHistory.length > 0 && (

Transaction History

{txHistory.map((hash) => ( {hash.slice(0, 16)}...{hash.slice(-8)} ))}

)}

); }