{items.map(([ic, lb]) => { const on = app.tab === map[ic]; return app.nav.tab(map[ic])}>

{lb}

; })}

); } function TabRoot({ children }) { const app = useApp(); return

{children}

; } // ---------- HOME ---------- function Home() { const app = useApp(); const [more, setMore] = useState(false); const n = app.nav; return ( {/* header */}
app.nav.tab('me')}>
Hi, William

n.push('coming', { title: 'Support', icon: 'help', note: 'Chat with Zitch support 24/7.' })}> n.push('coming', { title: 'Scan to pay', icon: 'scan', note: 'Scan any Zitch or bank QR.' })}> n.push('notifications')}>
24

{/* balance hero */}

Available Balance
n.push('history')}>
Transaction History

{app.showBal ? fmtN(app.balance) : '₦ ••••••'}{app.showBal ? '.00' : ''}
app.setShowBal(!app.showBal)}>

{ try { navigator.clipboard.writeText('9012345678'); } catch (e) { } app.toast('Account number copied'); }}>
Acct: 9012 345 678
n.push('addmoney')}>
Add Money

{/* daily interest strip */} n.push('coming', { title: 'Daily Interest', icon: 'spark', note: 'Earn interest on your balance, paid daily.' })}>

Act now — start earning daily interest

{/* quick actions */} {[['send', 'Transfer', () => n.push('transfer')], ['airtime', 'Airtime', () => n.push('airtime', { initialTab: 'airtime' })], ['withdraw', 'Withdraw', () => n.push('transfer')]].map(([ic, lb, go]) => (

{lb}
))} {/* services grid */}
{GRID.map(s => ( s.go(n, setMore)}>

{s.badge && {s.badge}}
{s.label}
))}
{/* promo */} n.push('fixedsave')}>

Fixed Save · 22% p.a
Grow your savings, locked & safe

Save

{/* recent */}
n.push('history')}>Recent activity {app.txns.slice(0, 4).map((x, i) => 0} onClick={() => n.push('txn', { x })} />)}
{more && setMore(false)} onPick={(m) => { setMore(false); setTimeout(() => m.go(n), 240); }} />} {app.detected && app.clearDetected()} nav={n} />} ); } function SmartPaste({ num, onClose, nav }) { const fmt = num.length >= 11 ? num.replace(/(\d{4})(\d{3})(\d{4})/, '$1 $2 $3') : num.replace(/(\d{3})(\d{3})(\d{4})/, '$1 $2 $3'); const isPhone = num.length >= 11; return {(close) => (

{isPhone ? 'Phone number detected' : 'Account number detected'}

{fmt}

We noticed you copied this number. What would you like to do?

{ close(); setTimeout(() => nav.push('transfer', { initialAcct: isPhone ? num.replace(/^0/, '') : num }), 240); }} /> {isPhone && { close(); setTimeout(() => nav.push('airtime', { initialTab: 'airtime', initialPhone: num }), 240); }}>
Buy airtime
}
Not now

)}; } function MoreSheet({ onClose, onPick }) { return {(close) => (

All services

{MORE.map(s => ( { onPick(s); }}>

{s.label}
))}

)}; } // ---------- WALLET ---------- function Wallet() { const app = useApp(); const n = app.nav; return
Wallet

Total balance

{app.showBal ? fmtN(app.balance) : '₦ ••••••'}

n.push('addmoney')} style={{ flex: 1 }}>
+ Add money
n.push('transfer')} style={{ flex: 1 }}>
Send

{[['Money in', '+₦150,000', 'var(--z-lime)'], ['Money out', '-₦94,100', 'var(--ink-1)']].map(([k, v, c]) => (

{k} · May

{v}

))}

Transactions {app.txns.map((x, i) => 0} onClick={() => n.push('txn', { x })} />)}
; } // ---------- LOANS ---------- function Loans() { const app = useApp(); const n = app.nav; return
Loans

Available credit

₦500,000

₦320,000 of ₦500,000 limit used

n.push('loan')} />
Active loans

Quick loan
Due Jun 26 · 30 days

₦156,750

n.push('coming', { title: 'Repay loan', icon: 'loan', note: 'Repay ₦156,750 before Jun 26.' })} />

; } // ---------- CARDS ---------- function Cards() { const app = useApp(); const n = app.nav; const [freeze, setFreeze] = useState(false); return
Cards

ZITCH

5061 •••• •••• 2043

WILLIAM A.08/27
{freeze &&
❄ FROZEN
}

{[['lock', freeze ? 'Unfreeze' : 'Freeze', () => setFreeze(f => !f)], ['eye', 'Details', () => n.push('coming', { title: 'Card details', icon: 'card', note: 'View full card number & CVV.' })], ['settings', 'Settings', () => n.push('coming', { title: 'Card settings', icon: 'settings', note: 'Limits, channels & more.' })]].map(([ic, lb, go]) => (
{lb}
))}

Create a virtual card
For online & USD payments
; } // ---------- ME ---------- function Me() { const app = useApp(); const n = app.nav; const [enroll, setEnroll] = useState(false); const go = (title, icon, note) => () => n.push('coming', { title, icon, note }); const Badge = ({ t, hot }) => {t}; const grp1 = [ ['history', 'Transaction History', null, null, () => n.push('history')], ['chart', 'Account Limits', 'View your transaction limits', null, go('Account Limits', 'chart', 'Tier 3 · ₦5,000,000 daily.')], ['card', 'Bank Card / Account', 'Add a payment option', null, go('Bank Card / Account', 'card', 'Link your cards & bank accounts.')], ['bank', 'My BizPayment', 'Receive payment for business', null, go('My BizPayment', 'bank', 'Accept payments as a merchant.')], ['invite', 'Zitch Junior', 'Create an account for your child', { t: 'New' }, go('Zitch Junior', 'invite', 'A safe account for your child or ward.')], ['loan', 'Buy Now, Pay Later', 'Shop now, spread the cost', { t: 'Enjoy ₦0' }, go('Buy Now Pay Later', 'loan', 'Split payments over time, interest-free.')], ]; const grp2 = [ ['insurance', 'Security Center', 'Protect your funds', null, go('Security Center', 'insurance', 'PIN, biometrics, devices & alerts.')], ['help', 'Customer Service Center', null, null, go('Support', 'help', 'We reply in minutes, 24/7.')], ['gift', 'Invitation', 'Invite friends & earn up to ₦5,600', null, go('Invite & Earn', 'gift', 'Earn ₦500 per friend who joins Zitch.')], ['airtime', 'Zitch USSD', 'Bank without internet', null, go('Zitch USSD', 'airtime', 'Dial *xyz# to use Zitch offline.')], ]; const Group = ({ items }) => ( {items.map((r, i) => 0} right={
{r[3] && }
} onClick={r[4]} />)} ); return {/* header */}

Hi, William

Tier 3

{/* balance */}

Total balance

{app.showBal ? fmtN(app.balance) : '₦ ••••••'}

{/* safety tips banner */}

5 Safety Tips
Make your account more secure

View

Face ID / Fingerprint
Sign in & approve payments
{ if (v) { setEnroll(true); } else { app.setBiometrics(false); app.toast('Biometrics turned off'); } }} />

Dark mode
app.setTheme(v ? 'dark' : 'light')} />
app.nav.reset('splash')}>
Log out

{enroll && { app.setBiometrics(true); setEnroll(false); app.toast('Biometrics enabled'); }} onClose={() => setEnroll(false)} />} ; } // ---------- HISTORY ---------- function History() { const app = useApp(); const [filter, setFilter] = useState('All'); const FILTERS = { All: () => true, 'Money in': (x) => x.amt > 0, 'Money out': (x) => x.amt < 0, Airtime: (x) => x.cat === 'airtime' || x.cat === 'data', Bills: (x) => ['tv', 'electricity', 'betting', 'exams'].includes(x.cat), Transfers: (x) => x.cat === 'transfer' || x.cat === 'fund', }; const list = app.txns.filter(FILTERS[filter]); return
{Object.keys(FILTERS).map((f) => { const on = filter === f; return setFilter(f)}>
{f}
; })}
{list.length ? list.map((x, i) => 0} onClick={() => app.nav.push('txn', { x })} />) :
No {filter.toLowerCase()} transactions yet
} ; } function TxnDetail({ x }) { const app = useApp(); const neg = x.amt < 0; return

{(neg ? '-' : '+') + fmtN(Math.abs(x.amt))}

{x.status || 'Successful'}

{[['Description', x.t], ['Date', x.time || 'Today'], ['Reference', 'ZTCH' + (1000000 + Math.floor(Math.random() * 8999999))], ['Channel', 'Zitch Wallet']].map((r, i) => )}

{ }} />
; } function Notifications() { const app = useApp(); const items = [ ['gift', 'You earned ₦120 cashback', 'Bonus from airtime purchase', 'var(--z-lime)'], ['loan', 'Loan limit increased', 'Your new limit is ₦500,000', 'var(--brand)'], ['spark', 'Daily interest paid', '₦84.20 added to your wallet', 'var(--z-amber)'], ['bills', 'DSTV due in 2 days', 'Renew Compact Plus to avoid cut-off', 'var(--z-red)'], ]; return {items.map((x, i) => 0} />)} ; } function ComingSoon({ title, icon, note }) { const app = useApp(); return

{title}

{note}

Fully designed in handoff →

; } Object.assign(window, { Home, Wallet, Loans, Cards, Me, History, TxnDetail, Notifications, ComingSoon, BottomNav }); })();