import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Loader2, Rocket, RotateCcw, ExternalLink, Hash } from 'lucide-react'; import { useWallet } from '../hooks/useWallet'; import { WalletPanel } from '../components/WalletPanel'; import { CounterDisplay } from './components/CounterDisplay'; import { CircuitButtons } from './components/CircuitButtons'; import { TxBanner } from './components/TxBanner'; import { StepIndicator } from './components/StepIndicator'; export default function App() { const { status, providers } = useWallet(); const [contractAddress, setContractAddress] = useState(''); const [addressInput, setAddressInput] = useState(''); const [deploying, setDeploying] = useState(false); const [count, setCount] = useState(null); const [loadingAction, setLoadingAction] = useState<'increment' | 'decrement' | 'reset' | null>(null); const [txHash, setTxHash] = useState(''); const [error, setError] = useState(''); const isConnected = status === 'connected'; const hasContract = isConnected && contractAddress !== ''; // Simulate fetching on-chain count after deploy / action const refreshCount = async () => { if (!contractAddress) return; // In production: query indexer for ledger state // For now we track locally after each circuit call }; useEffect(() => { if (hasContract && count === null) { setCount(0); } }, [hasContract]); const handleDeploy = async () => { if (!providers) return; setDeploying(true); setError(''); setTxHash(''); try { // Production deploy flow: // const { contract, address } = await deployContract(providers); // setContractAddress(address); // setCount(0); await new Promise((r) => setTimeout(r, 1800)); const mockAddr = '0x' + Array.from({ length: 40 }, () => Math.floor(Math.random() * 16).toString(16)).join(''); setContractAddress(mockAddr); setCount(0); } catch (err) { setError(err instanceof Error ? err.message : 'Deploy failed'); } finally { setDeploying(false); } }; const handlePasteAddress = () => { if (!addressInput.trim()) return; setContractAddress(addressInput.trim()); setCount(0); setAddressInput(''); }; const handleIncrement = async () => { if (!providers || !contractAddress) return; setLoadingAction('increment'); setTxHash(''); setError(''); try { // Production: const tx = await contract.increment(); ... await new Promise((r) => setTimeout(r, 1200)); const hash = '0x' + Array.from({ length: 64 }, () => Math.floor(Math.random() * 16).toString(16)).join(''); setCount((c) => (c ?? 0) + 1); setTxHash(hash); } catch (err) { setError(err instanceof Error ? err.message : 'Increment failed'); } finally { setLoadingAction(null); } }; const handleDecrement = async () => { if (!providers || !contractAddress) return; if ((count ?? 0) <= 0) { setError('Counter cannot go below zero'); return; } setLoadingAction('decrement'); setTxHash(''); setError(''); try { await new Promise((r) => setTimeout(r, 1200)); const hash = '0x' + Array.from({ length: 64 }, () => Math.floor(Math.random() * 16).toString(16)).join(''); setCount((c) => Math.max(0, (c ?? 0) - 1)); setTxHash(hash); } catch (err) { setError(err instanceof Error ? err.message : 'Decrement failed'); } finally { setLoadingAction(null); } }; const handleReset = async () => { if (!providers || !contractAddress) return; setLoadingAction('reset'); setTxHash(''); setError(''); try { await new Promise((r) => setTimeout(r, 1200)); const hash = '0x' + Array.from({ length: 64 }, () => Math.floor(Math.random() * 16).toString(16)).join(''); setCount(0); setTxHash(hash); } catch (err) { setError(err instanceof Error ? err.message : 'Reset failed'); } finally { setLoadingAction(null); } }; const currentStep = !isConnected ? 1 : !contractAddress ? 2 : 3; return (

{/* Header */}

Counter DApp

On-chain counter deployed to Midnight Network

{/* Step Indicator */} {/* Step 1 — Connect Wallet */}

Step 1 — Connect Wallet

{/* Step 2 — Deploy Contract */} {isConnected && !contractAddress && (

Step 2 — Deploy Contract

Deploy the Counter contract to Midnight Network. Gas is sponsored — you pay nothing.

{/* Divider */}

or use existing contract

{/* Paste address */}

setAddressInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handlePasteAddress()} placeholder="Paste contract address..." className="flex-1 px-4 py-3 rounded-xl bg-zinc-950 border border-zinc-800 text-sm text-white placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 focus:border-emerald-500/40 transition-all font-mono" />

)} {/* Step 3 — Interact */} {hasContract && ( {/* Contract badge */}

Contract Active

{contractAddress}

{/* Counter display */} {/* Circuit buttons */} {/* TX Banner */} {txHash && } {/* Error */} {error && (

{error}

)} )}

); }