// ui.jsx — Zitch prototype UI kit (sheets, pin pad, receipt, fields, provider grids) (function () { const { useState, useEffect, useRef } = React; const I = (props) => React.createElement(window.ZIcon, props); if (!window.AppCtx) window.AppCtx = React.createContext(null); const useApp = () => React.useContext(window.AppCtx); const fmtN = (n) => '₦' + Math.round(n).toLocaleString('en-NG'); const fmtK = (n) => '₦' + Number(n).toLocaleString('en-NG'); // press feedback wrapper function Tap({ onClick, children, style, className }) { const [d, setD] = useState(false); return (
setD(true)} onPointerUp={() => setD(false)} onPointerLeave={() => setD(false)} onClick={onClick} style={{ transition: 'transform .12s, opacity .12s', transform: d ? 'scale(.97)' : 'none', opacity: d ? .85 : 1, cursor: 'pointer', ...style }}> {children}
); } function AppHeader({ title, sub, onBack, right }) { return (
{onBack && ( )}
{title}
{sub &&
{sub}
}
{right}
); } function PrimaryButton({ label, onClick, disabled, icon }) { return ( {icon && } {label} ); } // fixed bottom action holder inside a screen function BottomBar({ children }) { const app = useApp(); return
{children}
; } function Field({ label, value, placeholder, onChange, prefix, suffix, type, mono, onClick, readOnly }) { return (
{label &&
{label}
}
{prefix} onChange(e.target.value) : undefined} className={mono ? 'z-num' : ''} style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font)', fontSize: 16, fontWeight: 600, color: 'var(--ink-1)', minWidth: 0 }} /> {suffix}
); } function Segmented({ options, value, onChange }) { return (
{options.map((o) => ( onChange(o.v)} style={{ flex: 1 }}>
{o.label}
 ))}
); } function QuickAmounts({ amounts, value, onPick }) { return (
{amounts.map((a) => { const on = String(value) === String(a); return ( onPick(a)}>
{fmtK(a)}
 ); })}
); } function Monogram({ text, color, size = 44, r = 14 }) { return
{text}
; } // provider/network selector grid function ProviderGrid({ items, value, onPick, cols = 4 }) { return (
{items.map((it) => { const on = value === it.id; const initials = it.name.replace(/[^A-Za-z0-9 ]/g, '').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase(); return ( onPick(it.id)}>
{it.logo ?
{it.name}
:
{initials}
} {it.name} {on && }
); })}
); } // list of plans (data / cable) function PlanList({ plans, value, onPick }) { return (
{plans.map((p) => { const on = value === p.id; return ( onPick(p.id)}>
{p.label}
{p.sub}
{fmtK(p.price)}
 ); })}
); } function ListRow({ icon, iconColor, mono, monoColor, title, sub, right, onClick, divider }) { return (
{mono != null ? : icon ?
: null}
{title}
{sub &&
{sub}
}
{right}
); } function Toggle({ on, onChange }) { return (
onChange(!on)} style={{ width: 46, height: 28, borderRadius: 999, padding: 3, background: on ? 'var(--brand)' : 'var(--surface-3)', cursor: 'pointer', transition: 'background .2s' }}>
); } // ---------- Bottom Sheet ---------- function Sheet({ children, onClose, pad = true }) { const [vis, setVis] = useState(false); useEffect(() => { const t = setTimeout(() => setVis(true), 20); return () => clearTimeout(t); }, []); const close = () => { setVis(false); setTimeout(onClose, 270); }; return (
e.stopPropagation()} style={{ width: '100%', maxHeight: '90%', overflowY: 'auto', background: 'var(--surface)', borderRadius: '28px 28px 0 0', transform: vis ? 'translateY(0)' : 'translateY(100%)', transition: 'transform .3s var(--ease-spring)', padding: pad ? '10px 18px 26px' : 0, boxShadow: '0 -10px 40px rgba(0,0,0,.25)' }}>
{typeof children === 'function' ? children(close) : children}
); } function Row2({ k, v, strong }) { return (
{k} {v}
); } // ---------- Confirm sheet (OPay-aligned) ---------- function ConfirmSheet({ title, rows, total, onPay, onClose }) { const app = useApp(); return ( {(close) => (
{title}
{fmtN(total)}
{rows.map((r, i) => )}
{/* sender / payment method */}
Pay with
Zitch Wallet
William A. · 9012 345 678
Available balance {fmtN(app.balance)}
{ close(); setTimeout(onPay, 280); }} />
)} ); } // ---------- PIN sheet ---------- function PinSheet({ amount, onDone, onClose, onBio }) { const [pin, setPin] = useState(''); const [state, setState] = useState('input'); // input | loading const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'del']; const press = (k) => { if (state !== 'input') return; if (k === 'del') return setPin(p => p.slice(0, -1)); if (k === '' || pin.length >= 4) return; const np = pin + k; setPin(np); if (np.length === 4) { setState('loading'); setTimeout(() => onDone(), 1400); } }; return ( {(close) => (
Enter your PIN
{state === 'loading' ? 'Authorizing payment…' : 'Confirm payment of ' + fmtN(amount)}
{[0, 1, 2, 3].map(i => (
i ? 'var(--brand)' : 'transparent'), border: '2px solid ' + (pin.length > i ? 'var(--brand)' : 'var(--line)'), animation: state === 'loading' ? `zpulse 1s ${i * .12}s infinite` : 'none' }} /> ))}
{state === 'loading' ?
: (
{keys.map((k, i) => ( k === 'del' ? press(k) : (k === '' ? (onBio && onBio()) : press(k))}>
{k === 'del' ? : (k === '' ? (onBio ? : null) : k)}
))}
)}
Secured by Zitch
)} ); } // ---------- Generic option-picker sheet ---------- function OptionSheet({ title, items, onPick, onClose, renderItem }) { return ( {(close) => (
{title}
{items.map((it, i) => (
{ onPick(it); close(); }}>{renderItem(it, i)}
))}
)} ); } // ---------- Biometric scan (Face ID / fingerprint) ---------- function BiometricScan({ title, subtitle, faceMode, onDone, onFallback, onClose }) { const [state, setState] = useState('scan'); // scan | done const run = () => { if (state !== 'scan') return; setState('done'); setTimeout(onDone, 600); }; useEffect(() => { const t = setTimeout(run, 1500); return () => clearTimeout(t); }, []); const done = state === 'done'; const accent = done ? 'var(--z-lime)' : 'var(--brand)'; return ( {(close) => (
{title || 'Confirm with biometrics'}
{subtitle &&
{subtitle}
}
{done ?
: }
{done ? 'Approved' : (faceMode ? 'Scanning your face…' : 'Touch the sensor to authenticate')}
{onFallback && !done && (
Use PIN instead
)}
Secured by Zitch
)} ); } // ---------- Success receipt (full screen) ---------- function SuccessReceipt({ title, message, rows, onDone }) { const [show, setShow] = useState(false); useEffect(() => { const t = setTimeout(() => setShow(true), 60); return () => clearTimeout(t); }, []); return (
{title}
{message}
{/* receipt card */}
{rows.map((r, i) => )}
{[['download', 'Save'], ['share', 'Share'], ['copy', 'Copy ref']].map(([ic, lb]) => (
{lb}
))}
); } Object.assign(window, { ZUI: { fmtN, fmtK }, useApp, Tap, AppHeader, PrimaryButton, BottomBar, Field, Segmented, QuickAmounts, Monogram, ProviderGrid, PlanList, ListRow, Toggle, Sheet, ConfirmSheet, PinSheet, OptionSheet, BiometricScan, SuccessReceipt, Row2, }); })();