{/* ---------- FRONT ---------- */}

VISA

DEBIT

{holder}

•• {CARD_LAST4}

{interactive && flipHint("Tap to flip")} {frozen &&

Frozen

}

{/* ---------- BACK ---------- */}

{/* magnetic stripe */}

{/* number */}

Card number

{revealed ? CARD_NUM : `•••• •••• •••• ${CARD_LAST4}`} {revealed ? : }

{/* exp + cvv */}

Exp

{CARD_EXP}

CVV

{revealed ? CARD_CVV : "•••"}

Yoshi debit

{interactive && flipHint("Tap to flip")}

); }; /* ---- security gate · Face ID or PIN before revealing card details --------- */ const SecurityGate = ({ onSuccess, onCancel }) => { const [mode, setMode] = useState("faceid"); // faceid | pin const [authing, setAuthing] = useState(false); const [pin, setPin] = useState(""); const runFace = () => { setAuthing(true); setTimeout(() => { setAuthing(false); onSuccess(); }, 1150); }; const pinKey = (k) => { if (k === "⌫") { setPin((p) => p.slice(0, -1)); return; } if (pin.length >= 4) return; const next = pin + k; setPin(next); if (next.length === 4) setTimeout(() => onSuccess(), 220); }; return (

{mode === "faceid" ? (

{authing && }

{authing ? "Authenticating…" : "Reveal card details"}

Confirm with Face ID to show your full card number and CVV.

{authing ? "Confirming…" : "Confirm with Face ID"} setMode("pin")} style={{ marginTop: 8 }} disabled={authing}>Enter PIN instead

) : (

Enter your card PIN

Verify it's you to reveal card details.

)}

); }; const CardActionTile = ({ icon, label, on, onClick }) => ; const CardRow = ({ icon, name, sub, right, onClick, danger, last }) => ; /* ---- no card yet · intro + provision ------------------------------------- */ const CardBenefit = ({ icon, title, sub }) =>

{title}

{sub}

; const CardIntro = ({ onGet, holder }) =>

Preview

Your Yoshi debit card

One card on your unified balance.

Activate

Set a PIN to activate · issued instantly · no fees · FDIC-insured to applicable limits.

; /* ---- PIN setup · enter → confirm, before the card activates --------------- */ const PinDots = ({ filled, len, error }) =>

{Array.from({ length: len }).map((_, i) => )}

; const PinPad = ({ onKey }) => { const keys = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "⌫"]; return (

{keys.map((k, i) => k === "" ? : )}

); }; const CardPinSetup = ({ onDone }) => { const LEN = 4; const [phase, setPhase] = useState("set"); // set | confirm const [first, setFirst] = useState(""); const [pin, setPin] = useState(""); const [error, setError] = useState(false); const press = (k) => { if (error) {setError(false);} if (k === "⌫") {setPin((p) => p.slice(0, -1));return;} if (pin.length >= LEN) return; const next = pin + k; setPin(next); if (next.length === LEN) { setTimeout(() => { if (phase === "set") {setFirst(next);setPin("");setPhase("confirm");} else if (next === first) {onDone();} else {setError(true);setPin("");setPhase("set");setFirst("");} }, 180); } }; const heading = error ? "PINs didn't match" : phase === "set" ? "Set your card PIN" : "Confirm your PIN"; const sub = error ? "Let's try that again — choose a 4-digit PIN." : phase === "set" ? "Choose a 4-digit PIN for ATMs and in-store payments." : "Enter the same four digits once more."; return (

{heading}

{sub}

Avoid an obvious PIN like 1234 or your birth year.

); }; const CardDetail = ({ nav, flash, hasCard, onGetCard }) => { const [frozen, setFrozen] = useState(false); const [flipped, setFlipped] = useState(false); const [revealed, setRevealed] = useState(false); const [auth, setAuth] = useState(false); // security gate for reveal const [step, setStep] = useState("intro"); // intro | pin (pre-issue activation) const f = flash || (() => {}); const holder = window.PROFILE && window.PROFILE.name || "Rivka Lipson"; const freeze = (v) => {setFrozen(v);f(v ? "Card frozen" : "Card unfrozen");}; const copyNumber = () => {try {navigator.clipboard && navigator.clipboard.writeText("4862224199302291");} catch (e) {}f("Card number copied");}; const toggleFlip = () => setFlipped((v) => { if (v) setRevealed(false); return !v; }); const agentCard = () => { nav.ask("Give Yoshi a card to spend on.", "Done, well, almost. I’ll mint a virtual card scoped to a monthly cap and a set of merchants, and it runs as a standing automation inside your trust ladder. Tell me the cap (say “$400/month for cloud and SaaS”) and I’ll set it up for you to approve. You can freeze it anytime."); }; if (!hasCard) { return (

{step === "pin" ? <> setStep("intro")} /> {onGetCard && onGetCard();f("Card activated · PIN set");}} /> : <> nav.pop()} /> setStep("pin")} /> }

); } return (

nav.pop()} />

setAuth(true)} onCopy={copyNumber} /> {frozen &&

Card is frozen. New charges and withdrawals are blocked.

} {/* quick actions */}

f("Added to Apple Wallet")} /> freeze(!frozen)} />

{/* rewards */} Rewards

Back this month

1.5%

on everything · paid to Checking

{/* manage */} Manage

f("Limits open")} /> nav.tab && nav.tab("profile")} last />

{/* danger */}

{setFrozen(true);f("Reported · a new card number is on the way");}} last />

Your virtual card works online right away. The Yoshi debit card draws from Checking. Credit is coming soon.

{auth && { setAuth(false); setRevealed(true); setFlipped(true); f("Card details revealed"); }} onCancel={() => setAuth(false)} />}

); }; window.CardDetail = CardDetail;