// ───────────────────────────────────────────────────────────────── // SIKKA ROYALE — Onboarding: splash, phone, OTP, name, pick, linking // ───────────────────────────────────────────────────────────────── const ROYAL_CATALOGUE = [ // Popular — what most people in the GCC carry { id: 'adcb', bank: 'adcb', name: 'ADCB TouchPoints', ar: 'بنك أبوظبي التجاري', perk: 'Everyday · 4 TouchPoints / AED', last4: '6242', initials: 'AD', popular: true }, { id: 'fab', bank: 'fab', name: 'FAB Cashback', ar: 'بنك الإمارات الأول', perk: 'Cashback · 1% on all', last4: '2891', initials: 'FAB', popular: true }, { id: 'enbd-sky', bank: 'enbd', name: 'ENBD Skywards Infinite', ar: 'بنك الإمارات دبي الوطني', perk: 'Travel · 2× miles', initials: 'EN', popular: true }, { id: 'mashreq', bank: 'mashreq', name: 'Mashreq Smiles World', ar: 'بنك المشرق', perk: 'Dining · 5× Smiles', initials: 'MA', popular: true }, // ADCB { id: 'adcb-365', bank: 'adcb', name: 'ADCB 365 Cashback', ar: 'بنك أبوظبي التجاري', perk: 'Cashback · 1.5% everyday', initials: 'AD' }, { id: 'adcb-lulu', bank: 'adcb', name: 'ADCB Lulu Platinum', ar: 'بنك أبوظبي التجاري', perk: 'Groceries · 5× points at Lulu', initials: 'AD' }, { id: 'adcb-etihad', bank: 'adcb', name: 'ADCB Etihad Guest Above', ar: 'بنك أبوظبي التجاري', perk: 'Travel · 2.5× Etihad miles', initials: 'AD' }, // FAB { id: 'fab-rewards', bank: 'fab', name: 'FAB Rewards Signature', ar: 'بنك الإمارات الأول', perk: 'Rewards · 3× on dining & travel', initials: 'FAB' }, { id: 'fab-etihad', bank: 'fab', name: 'FAB Etihad Guest Elite', ar: 'بنك الإمارات الأول', perk: 'Travel · 2.25× Etihad miles', initials: 'FAB' }, { id: 'fab-istarter', bank: 'fab', name: 'FAB iStartHere', ar: 'بنك الإمارات الأول', perk: 'Starter · no annual fee', initials: 'FAB' }, // ENBD { id: 'enbd-emaar', bank: 'enbd', name: 'ENBD U By Emaar', ar: 'بنك الإمارات دبي الوطني', perk: 'Lifestyle · 10% U-points at Emaar', initials: 'EN' }, { id: 'enbd-dnata', bank: 'enbd', name: 'ENBD dnata World', ar: 'بنك الإمارات دبي الوطني', perk: 'Travel · 5% off dnata bookings', initials: 'EN' }, { id: 'enbd-go', bank: 'enbd', name: 'ENBD Go4it Platinum', ar: 'بنك الإمارات دبي الوطني', perk: 'Lifestyle · BOGO dining', initials: 'EN' }, // Others { id: 'wio', bank: 'wio', name: 'Wio One', ar: 'ويو', perk: 'Digital · 1% cashback', initials: 'WI' }, { id: 'rak', bank: 'rak', name: 'RAK World Currency', ar: 'بنك رأس الخيمة', perk: 'Multi-currency · 0% FX', initials: 'RA' }, { id: 'rak-titanium', bank: 'rak', name: 'RAK Titanium', ar: 'بنك رأس الخيمة', perk: 'Cashback · 2% on supermarkets', initials: 'RA' }, { id: 'adib', bank: 'adib', name: 'ADIB Cashback Visa', ar: 'مصرف أبوظبي الإسلامي', perk: 'Sharia · Groceries 3%', initials: 'AB' }, { id: 'adib-etihad', bank: 'adib', name: 'ADIB Etihad Gold', ar: 'مصرف أبوظبي الإسلامي', perk: 'Travel · 1.5× Etihad miles', initials: 'AB' }, { id: 'cbd', bank: 'cbd', name: 'CBD Visa Signature', ar: 'بنك دبي التجاري', perk: 'Travel · Lounge access', initials: 'CB' }, { id: 'cbd-super', bank: 'cbd', name: 'CBD Super Saver', ar: 'بنك دبي التجاري', perk: 'Cashback · 10% on utilities', initials: 'CB' }, { id: 'hsbc-prem', bank: 'hsbc', name: 'HSBC Premier World', ar: 'بنك إتش إس بي سي', perk: 'Travel · global lounges', initials: 'HS' }, { id: 'sc-priority', bank: 'sc', name: 'SC Priority Visa Infinite', ar: 'ستاندرد تشارترد', perk: 'Travel · 4 free lounges / mo', initials: 'SC' }, { id: 'citi-prest', bank: 'citi', name: 'Citi Prestige', ar: 'سيتي', perk: 'Premium · concierge + 4th-night-free', initials: 'CI' }, ]; // ─── Splash ─────────────────────────────────────────────────────── function Splash({ onStart, onSignIn, name = '', hasSaved = false }) { return (
{/* Establishment tag — anchored to the top safe area so the content below has room to breathe and the layout fills the viewport. */}
ESTABLISHED · 2026
{/* center stack — logo + wordmark + tagline (fills remaining height) */}
{/* Animated brand coin — orbiting particles, expanding rings, halo pulse */}
{/* Soft glow halo (existing, slightly stronger) */}
{/* Expanding ripple rings — three staggered */} {[0, 1, 2].map(i => ( ))} {/* Slow orbit ring — gradient stroked circle */} {/* Counter-spinning inner ring */} {/* Orbiting particles — small dots traveling around the coin */} {[0, 1, 2, 3].map(i => ( ))} {/* The coin itself — gentle breathing + slow rotation layered */}
{/* Scoped keyframes for splash logo */}
{/* Wordmark — lowercase serif "sikka" matching brand */}
sikka
سِكَّة
{/* Tagline */}
One wallet. Every reward.
An advantage few will see.
{/* Bottom CTAs — pinned to the very bottom */}
{hasSaved && name && (
)} {hasSaved ? 'Continue' : 'Begin'}
); } // ─── Phone ──────────────────────────────────────────────────────── function PhoneStep({ onContinue, onBack, onSkip }) { const [num, setNum] = React.useState('501234567'); const valid = num.length >= 7; return (
} right={} />
MOBILE · هاتف
🇦🇪 +971
setNum(e.target.value.replace(/\D/g, '').slice(0, 9))} placeholder="501234567" style={{ width: '100%', height: 60, padding: '0 16px', background: R.ink2, border: `0.5px solid ${R.hair2}`, borderRadius: 14, fontFamily: FR.mono, fontSize: 17, color: R.pearl, letterSpacing: 1.4, outline: 'none', }} />
{/* Bottom footer — CTA + trust marks */}
onContinue('+971 ' + num)} disabled={!valid}> Continue
ENCRYPTED · NEVER SOLD · ALWAYS YOURS
); } // ─── OTP ────────────────────────────────────────────────────────── function OtpStep({ phone = '+971 50 123 4567', onVerify, onBack }) { const [code, setCode] = React.useState(''); const [shake, setShake] = React.useState(false); const [countdown, setCountdown] = React.useState(0); const slots = 6; React.useEffect(() => { if (code.length === slots) { const t = setTimeout(() => onVerify(code), 350); return () => clearTimeout(t); } }, [code]); React.useEffect(() => { if (!countdown) return; const t = setTimeout(() => setCountdown(c => c - 1), 1000); return () => clearTimeout(t); }, [countdown]); return (
} />
Sent to {phone}} ar="أُرسِلَ إلى رقمك الكريم." size={15} style={{ marginTop: 16 }} />
{Array.from({ length: slots }).map((_, i) => { const ch = code[i]; const active = code.length === i; return (
{ch || (active ? : '')} {/* tiny corner pip when filled */} {ch && ( )}
); })}
Didn't receive it?{' '} {countdown > 0 ? Resend in {countdown}s : }
{ if (code.length === slots) onVerify(code); else { setShake(true); setTimeout(() => setShake(false), 300); } }} disabled={code.length < slots}> Verify
); } // ─── Name ───────────────────────────────────────────────────────── function NameStep({ onContinue, onBack, initial = 'Praneet Sinha' }) { const [name, setName] = React.useState(initial); return (
} />
FULL NAME · الاسم الكامل setName(e.target.value)} placeholder="Your name" autoFocus style={{ width: '100%', height: 64, padding: '0 16px', background: R.ink2, border: `0.5px solid ${R.hair2}`, borderRadius: 14, fontFamily: FR.serif, fontSize: 22, color: R.pearl, outline: 'none', letterSpacing: -0.3, fontStyle: 'italic', }} />
onContinue(name)} disabled={!name.trim()}> Continue
); } // ─── Section header — roman numeral + title + sublabel ─────────── function SectionHeader({ index, title, sub, delay = 0 }) { return (
{index}
{title}
{sub && ( {sub} )}
); } // ─── Pick cards ─────────────────────────────────────────────────── // Vertical list with miniature card-face previews, animated check // stamps, and a sticky footer showing a fanned stack of the picks. function PickCards({ name = 'Praneet', linked = ['adcb', 'fab'], onLink, onDone, onBack }) { const [picked, setPicked] = React.useState(new Set(linked)); const [query, setQuery] = React.useState(''); const toggle = (id) => { setPicked(prev => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; }); }; const popularCards = ROYAL_CATALOGUE.filter(c => c.popular); const bankCards = ROYAL_CATALOGUE.filter(c => !c.popular); const q = query.trim().toLowerCase(); const filteredBank = q ? bankCards.filter(c => c.name.toLowerCase().includes(q) || c.bank.toLowerCase().includes(q) || (c.perk || '').toLowerCase().includes(q)) : bankCards; return (
} />
WELCOME, {name.toUpperCase()} Sikka reads every reward catalogue in the GCC. The more cards you bring, the better routes we find.
{/* ─── Section I — Scan a card ─────────────────────────── */}
{/* ─── Section II — Popular cards ──────────────────────── */}
{popularCards.map((c, i) => ( toggle(c.id)} /> ))}
{/* ─── Section III — Choose from your bank ────────────── */} {/* Search bar */}
setQuery(e.target.value)} placeholder="Search ADCB, Etihad, cashback…" style={{ flex: 1, height: '100%', background: 'transparent', border: 'none', outline: 'none', color: R.pearl, fontFamily: FR.serif, fontSize: 15, letterSpacing: -0.1, fontStyle: query ? 'normal' : 'italic', }} /> {query && ( )} {filteredBank.length}
{/* Filtered list */}
{filteredBank.length > 0 ? filteredBank.map((c, i) => ( toggle(c.id)} /> )) : (
No matches for "{query}"
REQUEST · TYPE A BANK NAME
)}
{/* Sticky footer — stack preview + CTA */}
{picked.size > 0 && (
{[...picked].slice(0, 5).map((id, j) => { const b = R.bank[id] || { bg: R.ink3 }; return (
); })}
YOUR SIKKA
{picked.size} {picked.size === 1 ? 'card linked' : 'cards linked'}
)} onDone(Array.from(picked))} disabled={picked.size === 0}> {picked.size === 0 ? 'Pick at least one' : `Mint my Sikka · ${picked.size}`}
); } // Row component — animated row with miniature card face on the left function CardRow({ card, on, index, onToggle }) { const b = R.bank[card.bank] || { bg: R.ink3, tx: R.pearl }; return ( ); } // ─── Minting / Linking screen ───────────────────────────────────── // Cinematic per-card mint. For each card: // - Card flies in // - A mint scan line sweeps top→bottom across it // - Extracted data (BIN, last-4, issuer, status) appears below // - A trace path animates from the card down to a small Sikka coin // - Card gets a check stamp, then slides off into a growing fanned stack function LinkingScreen({ name = 'Praneet', cards = ['adcb', 'fab'], onDone }) { const SCAN_MS = 1900; const COOL_MS = 520; const [i, setI] = React.useState(0); const [phase, setPhase] = React.useState('scan'); // scan | done | finished const [completed, setCompleted] = React.useState([]); React.useEffect(() => { if (i >= cards.length) { setPhase('finished'); const t = setTimeout(onDone, 1400); return () => clearTimeout(t); } setPhase('scan'); const t1 = setTimeout(() => setPhase('done'), SCAN_MS); const t2 = setTimeout(() => { setCompleted(c => [...c, cards[i]]); setI(j => j + 1); }, SCAN_MS + COOL_MS); return () => { clearTimeout(t1); clearTimeout(t2); }; }, [i]); const finished = phase === 'finished'; const currentId = finished ? cards[cards.length - 1] : cards[Math.min(i, cards.length - 1)]; const card = ROYAL_CATALOGUE.find(c => c.id === currentId) || ROYAL_CATALOGUE[0]; return (
{/* Soft mint halo */}
{/* Top: progress counter */}
MINTING {Math.min(i + (finished ? 0 : 1), cards.length)} / {cards.length}
{/* Completed stack rail — small fanned thumbnails */}
{completed.map((id, idx) => { const c = ROYAL_CATALOGUE.find(x => x.id === id); const b = R.bank[(c || {}).bank] || { bg: R.ink3 }; return (
); })}
{/* Center: card being scanned */}
{finished ? ( ) : (
)}
{/* Bottom status */}
{finished ? (
Your Sikka is minted.
{cards.length} {cards.length === 1 ? 'CARD LINKED' : 'CARDS LINKED'} · READY
) : ( {phase === 'done' ? ( <>{card.name} linked ) : ( <>Reading {card.name}… )} SECURE TOKENISATION · OAUTH HANDSHAKE )}
{/* Scoped keyframes */}
); } // Card being scanned — face + variant-specific animation + extracted data + check stamp on done // variant: 0=vertical scan · 1=diagonal sheen · 2=radial pulse · 3=horizontal holo shimmer · 4=decode reveal function ScanningCard({ card, name, phase, variant = 0 }) { const b = R.bank[card.bank] || { bg: R.ink3, tx: R.pearl }; const last4 = card.last4 || '0000'; return (
{/* Card face */}
{card.name.split(' ')[0]}
{(card.name.split(' ').slice(1).join(' ') || '')}
))
{phase === 'scan' && variant === 4 ? : <>···· ···· ···· {last4}}
{name.toUpperCase()}
VALID THRU
12/30
VISA
{/* ── Variant overlays during scan phase ── */} {phase === 'scan' && ( )} {/* Check stamp when linked */} {phase === 'done' && (
)}
{/* Data points emerging during scan — rule of 3: BIN · LAST 4 · MODE */} {phase === 'scan' && (
)}
); } // ─── Per-variant scan overlay ──────────────────────────────────── function ScanOverlay({ variant }) { // 0 — Vertical mint scan line + horizontal grid if (variant === 0) { return (
); } // 1 — Diagonal gold sheen sweep if (variant === 1) { return (
); } // 2 — Radial pulse from chip (centre-left) if (variant === 2) { return ( {[0, 1, 2].map(i => ( ))}
); } // 3 — Holographic horizontal shimmer if (variant === 3) { return (
); } // 4 — Decode reveal (corner brackets close in) return ( {[ { top: 8, left: 8, rot: 0 }, { top: 8, right: 8, rot: 90 }, { bottom: 8, right: 8, rot: 180 }, { bottom: 8, left: 8, rot: 270 }, ].map((p, idx) => ( ))}
); } // Scrambling decode reveal — locks in characters left-to-right function DecodeText({ final, duration = 1700 }) { const [text, setText] = React.useState(final.replace(/[0-9]/g, '0')); React.useEffect(() => { const start = performance.now(); const indices = []; for (let i = 0; i < final.length; i++) if (/[0-9]/.test(final[i])) indices.push(i); let raf; const tick = (t) => { const p = Math.min(1, (t - start) / duration); const locked = Math.floor(p * indices.length); const arr = final.split(''); for (let j = locked; j < indices.length; j++) { arr[indices[j]] = String(Math.floor(Math.random() * 10)); } setText(arr.join('')); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [final, duration]); return {text}; } function DataPoint({ label, value, delay }) { return (
{label} {value}
); } // Stacked tile variant — label on top, value below. Used in 3-col grids // where horizontal label/value layout would crowd long values. function DataTile({ label, value, delay = 0, accent = false }) { return (
{label}
{value}
); } // Finished state — animated coin + all-linked seal function FinishedSeal({ name }) { return (
); } // Legacy alias kept for compatibility — used by other prototypes/screens function BankCardFace({ card, name = 'Praneet Sinha' }) { return ; } Object.assign(window, { ROYAL_CATALOGUE, Splash, PhoneStep, OtpStep, NameStep, PickCards, LinkingScreen, BankCardFace, });