// screens.jsx — wallet onboarding screens for Paisa wallet const { useState, useEffect, useRef } = React; // ─── 1. Welcome / start screen ───────────────────────────── function WelcomeScreen({ onStart, tier, returningUser }) { return (
paisa
Wallet · Nepal

Money you
can move
in seconds.

Sign up with your National ID. No paperwork, no branch visits — verified by the Government of Nepal.

{returningUser && ( ↺ Returning · CKYCR match )}
Sign up with National ID →
); } // ─── 2. NID + DOB entry ──────────────────────────────────── function NIDEntryScreen({ onNext, onBack }) { const [nid, setNid] = useState(''); const [dob, setDob] = useState(''); // Format NID as XXX-XXX-XXX-XX (11 digits) const fmt = (raw) => { const d = raw.replace(/\D/g, '').slice(0, 11); const a = d.slice(0,3), b = d.slice(3,6), c = d.slice(6,9), e = d.slice(9,11); return [a, b, c, e].filter(Boolean).join('-'); }; const fmtDob = (raw) => { const d = raw.replace(/\D/g, '').slice(0, 8); const y = d.slice(0,4), m = d.slice(4,6), day = d.slice(6,8); return [y, m, day].filter(Boolean).join('/'); }; const valid = nid.replace(/\D/g, '').length === 11 && dob.length === 10; return (

Your National ID

We'll verify with the NID Authority. Your raw ID number never leaves their server.

setNid(fmt(v))} placeholder="000-000-000-00" hint="11 digits, printed on the front of your card" /> setDob(fmtDob(v))} placeholder="YYYY/MM/DD" />
Tokenized. Paisa stores a Virtual ID — useless if our database is ever breached. Only the NID Authority sees your real number.
Continue
); } // ─── 3. Send-to-NID + OTP ────────────────────────────────── function OTPScreen({ onNext, onBack, otpFail }) { const [code, setCode] = useState(['', '', '', '', '', '']); const [resending, setResending] = useState(false); const [phase, setPhase] = useState('sending'); // sending → enter const [seconds, setSeconds] = useState(58); useEffect(() => { const t = setTimeout(() => setPhase('enter'), 1400); return () => clearTimeout(t); }, []); useEffect(() => { if (phase !== 'enter') return; const i = setInterval(() => setSeconds(s => Math.max(0, s - 1)), 1000); return () => clearInterval(i); }, [phase]); const setDigit = (i, v) => { const d = v.replace(/\D/g, '').slice(-1); const next = [...code]; next[i] = d; setCode(next); if (d && i < 5) { const el = document.getElementById('otp-' + (i + 1)); if (el) el.focus(); } if (next.every(x => x) && !otpFail) { setTimeout(() => onNext(), 500); } }; if (phase === 'sending') { return (
Calling NID Authority…
POST /v2/authenticate
); } return (

Enter the 6-digit code

Sent to your NID-registered mobile +977 98•••••42.

{code.map((d, i) => ( setDigit(i, e.target.value)} inputMode="numeric" maxLength={1} style={{ width: 48, height: 60, borderRadius: 12, border: `1.5px solid ${otpFail ? C.bad : d ? C.ink : C.line}`, background: C.surface, textAlign: 'center', fontSize: 24, fontWeight: 600, fontFamily: 'JetBrains Mono, monospace', color: C.ink, outline: 'none', }} /> ))}
{otpFail && (
Code not received? Try the fallback options — Paisa supports alternative authentication so no one is locked out.
)}
Resend in {String(seconds).padStart(2,'0')}s
✓ TLS · pinned to nid.gov.np
); } // ─── 4. Government Consent Screen (handoff to NID app) ──── function ConsentScreen({ onNext, onBack, tier }) { const fields = [ { k: 'Full name', v: 'Aanya Sharma' }, { k: 'Photo', v: 'Profile photograph' }, { k: 'Date of birth', v: '1996 / 04 / 12' }, { k: 'Permanent address', v: 'Lalitpur · Bagmati' }, { k: 'Gender', v: 'Female' }, ]; return (
{/* Top NID bar */}
National ID Authority
gov.np · secure
↗ handoff
Consent request

Paisa Wallet wants to verify your identity for account opening.

Will be shared
{fields.map(f => (
{f.k} {f.v}
))}
Not shared: raw NID number, biometric templates, family records, passport / migration data.
↺
You can revoke this consent any time from mNID app → Authentications. Paisa will be required to delete the bundle within 7 days.
Purpose: ACCT_OPEN · Tier-{tier} · Token TTL 24h
Auth ID: NID-AUTH-2026-{('0000' + Math.floor(Math.random()*99999)).slice(-5)}
); } // ─── 5. Biometric / face scan (Tier 1+) ──────────────────── function BiometricScreen({ onNext, onBack, fail, tier }) { const [phase, setPhase] = useState('frame'); // frame → scan → match → done|fail const [progress, setProgress] = useState(0); useEffect(() => { const t1 = setTimeout(() => setPhase('scan'), 1200); return () => clearTimeout(t1); }, []); useEffect(() => { if (phase !== 'scan') return; let p = 0; const i = setInterval(() => { p += 4; setProgress(Math.min(100, p)); if (p >= 100) { clearInterval(i); setTimeout(() => setPhase('match'), 400); } }, 60); return () => clearInterval(i); }, [phase]); useEffect(() => { if (phase !== 'match') return; const t = setTimeout(() => { setPhase(fail ? 'fail' : 'done'); if (!fail) setTimeout(onNext, 800); }, 1100); return () => clearTimeout(t); }, [phase, fail]); const ringColor = phase === 'fail' ? C.bad : phase === 'done' ? C.good : C.accent; return (
Biometric · liveness check
{/* Face frame */}
{/* outer scan ring */} {phase === 'scan' && ( )} {phase === 'match' && ( )} {(phase === 'done' || phase === 'fail') && ( )} {/* corner brackets */} {[ { top: 30, left: 30, rot: 0 }, { top: 30, right: 30, rot: 90 }, { bottom: 30, right: 30, rot: 180 }, { bottom: 30, left: 30, rot: 270 }, ].map((p, i) => (
))} {/* placeholder face */}
[face_capture]
liveness ✓
{phase === 'scan' && (
)}
{phase === 'frame' && <>
Center your face in the frame
Look straight ahead. We'll detect movement to confirm liveness.
} {phase === 'scan' && <>
Scanning…
{progress}% · liveness · 1:N match
} {phase === 'match' && <>
Matching against NID database
encrypted · template-only
} {phase === 'done' && <>
Match · 99.6%
Identity verified by NID Authority.
} {phase === 'fail' && <>
Couldn't match
No problem — try a fallback. You can verify with fingerprint at any registered agent point, or proceed with Tier 0 access.
}
{phase === 'fail' && (
)}
); } // ─── 6. Signed eKYC bundle reveal ────────────────────────── function BundleScreen({ onNext, onBack, tier }) { const [revealed, setRevealed] = useState(false); useEffect(() => { const t = setTimeout(() => setRevealed(true), 200); return () => clearTimeout(t); }, []); return (

Signed by the
NID Authority

This is the eKYC bundle Paisa now stores. No manual review needed.

Aanya Sharma
VID · 9842•••••3076
Signed · ed25519 · verified against NID public key
sig: ed25519:7f3a…b29e · key: nid-auth-2026-01
ckyc-id: CKYC-NP-7HQ4J2-K88B
Activate my wallet
); } // ─── 7. CKYCR registration / success ─────────────────────── function SuccessScreen({ onDone, tier, returningUser }) { const [step, setStep] = useState(0); // 0 ckyc → 1 done useEffect(() => { const t = setTimeout(() => setStep(1), 1600); return () => clearTimeout(t); }, []); return (
paisa
{step === 0 ? (

Registering with the
Central KYC Registry…

So next time you open a wallet or bank account, you skip this whole flow.

POST ckycr.gov.np/v1/onboard
) : (

You're in,
Aanya.

Wallet activated. Verified by the Government of Nepal in {returningUser ? '6' : '52'} seconds.

Your CKYC ID
CKYC-NP-7HQ4J2-K88B
Reusable across all Nepali wallets, banks & fintechs — with your consent.
NPR {tier === 0 ? '10K' : tier === 1 ? '1L' : '5L+'} balance
)}
{step === 1 && ( Open my wallet )}
); } // ─── 8. Returning user / CKYCR hit ───────────────────────── function ReturningScreen({ onUseExisting, onStartFresh }) { return (
paisa
↺ Found in CKYCR

We already know
you, Aanya.

You completed KYC with eSewa on 18 Feb 2026. With your consent, we'll pull that record — no biometric, no OTP, no waiting.

Aanya Sharma
CKYC-NP-7HQ4J2-K88B
Re-using saves ~50 seconds. Your data never left the registry — Paisa requests, you approve, registry releases.
You can review every CKYCR pull in your mNID app at any time.
Use my CKYCR record →
); } // ─── 9. Wallet home (after onboarding) ───────────────────── function WalletHome({ tier, onOpenAudit, onUpgrade }) { const txs = [ { t: 'Top-up · IME Bank', a: '+ 5,000', when: 'Just now', cat: 'in' }, { t: 'Bhatbhateni Megastore', a: '− 1,840', when: '2h ago', cat: 'out' }, { t: 'From Manish K. (P2P)', a: '+ 750', when: 'Yesterday', cat: 'in' }, ]; return (
paisa
Available balance
NPR 5,910 .42
{tier < 2 && ( )}
{[ { l: 'Send', i: '→' }, { l: 'Receive', i: '↓' }, { l: 'Top-up', i: '+' }, { l: 'Pay', i: '⌗' }, ].map(a => (
{a.i} {a.l}
))}
Recent activity See all
{txs.map((t, i) => (
{t.cat === 'in' ? '↓' : '↑'}
{t.t}
{t.when}
{t.a}
))}
Verified by NID Authority
View or revoke this consent in mNID app → Authentications.
); } Object.assign(window, { WelcomeScreen, NIDEntryScreen, OTPScreen, ConsentScreen, BiometricScreen, BundleScreen, SuccessScreen, ReturningScreen, WalletHome, });