// Vault wallet screens — original design, dark + light themes // Three screens per theme: Wallet Home · Send Confirm · Card Detail // ───────────────────────────────────────────────────────────── // Theme tokens // ───────────────────────────────────────────────────────────── const VAULT_DARK = { name: 'dark', bg: 'oklch(0.16 0.005 250)', // deep neutral surface1: 'oklch(0.20 0.006 250)', // card surface2: 'oklch(0.235 0.007 250)', // elevated surface3: 'oklch(0.275 0.008 250)', // hover / quick action hairline: 'oklch(1 0 0 / 0.07)', hairlineStrong: 'oklch(1 0 0 / 0.12)', text1: 'oklch(0.97 0.003 80)', text2: 'oklch(0.72 0.005 80)', text3: 'oklch(0.52 0.006 80)', accent: 'oklch(0.82 0.07 82)', // champagne accentInk: 'oklch(0.20 0.02 82)', // text on accent accentMuted: 'oklch(0.82 0.07 82 / 0.14)', pos: 'oklch(0.78 0.13 155)', // incoming neg: 'oklch(0.78 0.04 80)', // outgoing — neutral on dark warn: 'oklch(0.82 0.12 75)', err: 'oklch(0.68 0.16 25)', // Card visual cardA: 'oklch(0.22 0.008 250)', cardB: 'oklch(0.30 0.012 250)', cardEdge: 'oklch(1 0 0 / 0.10)', }; const VAULT_LIGHT = { name: 'light', bg: 'oklch(0.985 0.003 80)', // warm off-white surface1: 'oklch(1 0 0)', surface2: 'oklch(0.975 0.004 80)', surface3: 'oklch(0.955 0.005 80)', hairline: 'oklch(0.20 0.01 250 / 0.08)', hairlineStrong: 'oklch(0.20 0.01 250 / 0.14)', text1: 'oklch(0.18 0.01 250)', // graphite text2: 'oklch(0.42 0.008 250)', text3: 'oklch(0.60 0.006 250)', accent: 'oklch(0.50 0.06 200)', // muted teal accentInk: 'oklch(0.99 0 0)', accentMuted: 'oklch(0.50 0.06 200 / 0.10)', pos: 'oklch(0.55 0.14 155)', neg: 'oklch(0.30 0.01 250)', warn: 'oklch(0.62 0.14 75)', err: 'oklch(0.55 0.18 25)', cardA: 'oklch(0.22 0.01 250)', cardB: 'oklch(0.34 0.012 250)', cardEdge: 'oklch(1 0 0 / 0.12)', }; // ───────────────────────────────────────────────────────────── // Tiny inline icons (24px stroke, currentColor) // ───────────────────────────────────────────────────────────── const Icon = { arrowUp: (s = 18) => , arrowDown: (s = 18) => , plus: (s = 18) => , card: (s = 18) => , eye: (s = 16) => , eyeOff: (s = 16) => , lock: (s = 14) => , bell: (s = 18) => , search: (s = 18) => , back: (s = 22) => , more: (s = 22) => , check: (s = 14) => , shield: (s = 14) => , copy: (s = 14) => , snowflake: (s = 16) => , }; // Small helpers const mono = '"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace'; const sans = '"Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif'; function fmtNGN(amount, { sign = '', cents = true } = {}) { const [whole, dec] = amount.toFixed(2).split('.'); const grouped = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return `${sign}₦${grouped}${cents ? `.${dec}` : ''}`; } // ───────────────────────────────────────────────────────────── // 1) WALLET HOME // ───────────────────────────────────────────────────────────── function WalletHome({ t }) { const tx = [ { id: 1, who: 'Adaeze Okonkwo', sub: 'Transfer · 14:22', amt: -45000, kind: 'out' }, { id: 2, who: 'Salary · Spectra Labs', sub: 'Today · 09:00', amt: 1250000, kind: 'in' }, { id: 3, who: 'Ikeja Electric', sub: 'Bill · Yesterday', amt: -18420, kind: 'out' }, { id: 4, who: 'Tunde Bakare', sub: 'Refund · Apr 28', amt: 7500, kind: 'in' }, ]; return (
{/* header */}
OA
Good evening
Olumide
{Icon.search(17)} {Icon.bell(17)}
{/* balance card */}
{Icon.shield(12)} Available · NGN
₦ 2,847,320 .50
+₦1.25M this month Updated 2m ago
{/* quick actions */}
{[ { l: 'Send', i: Icon.arrowUp(18), primary: true }, { l: 'Receive', i: Icon.arrowDown(18) }, { l: 'Top up', i: Icon.plus(18) }, { l: 'Cards', i: Icon.card(18) }, ].map(a => (
{a.i}
{a.l}
))}
{/* insight strip */}
{Icon.shield(14)}
Enable hardware key
Add a second factor for transfers above ₦100K
→
{/* transactions header */}
Activity
This week
{/* transactions */}
{tx.map((r, i) => (
{r.kind === 'in' ? Icon.arrowDown(16) : Icon.arrowUp(16)}
{r.who}
{r.sub}
{r.kind === 'in' ? '+' : '−'}{fmtNGN(Math.abs(r.amt) / 1, { cents: false }).replace('₦', '₦')}
))}
{/* bottom tab spacer */}
); } function IconBtn({ t, children, dot }) { return (
{children}
{dot &&
}
); } function chipBtn(t) { return { display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 999, background: t.surface2, color: t.text2, border: `1px solid ${t.hairline}`, fontSize: 11, fontFamily: sans, cursor: 'pointer', }; } function BottomTab({ t, active }) { const items = [ { id: 'wallet', label: 'Wallet', i: }, { id: 'activity', label: 'Activity', i: }, { id: 'cards', label: 'Cards', i: Icon.card(20) }, { id: 'profile', label: 'Profile', i: }, ]; return (
{items.map(it => (
{it.i}
{it.label}
))}
); } // ───────────────────────────────────────────────────────────── // 2) SEND MONEY — confirmation // ───────────────────────────────────────────────────────────── function SendConfirm({ t }) { return (
{/* header */}
{Icon.back(20)}
Step 3 of 4
{/* progress */}
{[1, 2, 3, 4].map(n => (
))}
{/* title */}
Confirm transfer
Review the details before
you send.
{/* recipient */}
AO
Adaeze Okonkwo
GTBank · 0123456789
{Icon.check(10)} Verified
{/* amount block */}
You're sending
−₦ 45,000 .00
Forty‑five thousand naira
{/* breakdown */}
{[ ['Amount', '₦45,000.00'], ['Transfer fee', '₦0.00'], ['Stamp duty', '₦50.00'], ].map(([k, v]) => (
{k}
{v}
))}
Total debit
₦45,050.00
{/* note */}
NOTE   Rent contribution — April. Transfer arrives instantly.
{/* slide to send */}
{/* fill */}
{/* knob */}
{Icon.arrowUp(20)}
Slide to send
{Icon.lock(11)} Secured by hardware key · Face ID required
); } // ───────────────────────────────────────────────────────────── // 3) CARD DETAIL // ───────────────────────────────────────────────────────────── function CardDetail({ t }) { const cardTx = [ { id: 1, who: 'Spotify', sub: 'Subscription · Today', amt: -1900 }, { id: 2, who: 'Chicken Republic', sub: 'Food · Yesterday', amt: -8400 }, { id: 3, who: 'Bolt', sub: 'Ride · Apr 28', amt: -3250 }, ]; return (
{/* header */}
{Icon.back(20)}
Virtual card
{Icon.more(18)}
{/* CARD VISUAL */}
{/* shimmer line */}
{/* embossed grid */}
{/* top */}
Vault
Black · Virtual
{/* monogram mark */}
V
{/* number */}
4192  ••••  ••••  7042
Cardholder
OLUMIDE ADELEKE
Expires
09 / 28
CVV
•••
{/* card actions */}
{[ { l: 'Reveal', i: Icon.eye(16) }, { l: 'Freeze', i: Icon.snowflake(15) }, { l: 'Copy', i: Icon.copy(14) }, ].map(a => (
{a.i}
{a.l}
))}
{/* limits row */}
Daily limit
₦13,550 / ₦200,000
{/* card transactions */}
Recent on this card
3 today
{cardTx.map((r, i) => (
{r.who.slice(0,2).toUpperCase()}
{r.who}
{r.sub}
−₦{Math.abs(r.amt).toLocaleString()}
))}
); } // ───────────────────────────────────────────────────────────── // Phone wrapper that strips the auto status-bar (we draw our own header padding) // ───────────────────────────────────────────────────────────── function VaultPhone({ t, children }) { return (
{children}
); } // Expose (incl. shared helpers so marketing screens can reuse them) Object.assign(window, { VAULT_DARK, VAULT_LIGHT, WalletHome, SendConfirm, CardDetail, VaultPhone, Icon, mono, sans, fmtNGN, });