);
// ─────────────────────────────────────────────────────────
// Fake QR for deposit step 4
// ─────────────────────────────────────────────────────────
const QrSample = () => {
const cells = [];
const pattern = "10010110100110101010010110101001011001101010110100101100110110101010110010110100110100101101010";
for (let y = 0; y < 25; y++) {
for (let x = 0; x < 25; x++) {
const idx = (y * 25 + x + y * 3) % pattern.length;
const isCorner = (
(x < 7 && y < 7) || (x > 17 && y < 7) || (x < 7 && y > 17)
);
let fill = pattern[idx] === "1";
if (isCorner) {
const sx = x > 17 ? x - 18 : x;
const sy = y > 17 ? y - 18 : y;
if (sx === 0 || sx === 6 || sy === 0 || sy === 6) fill = true;
else if (sx >= 2 && sx <= 4 && sy >= 2 && sy <= 4) fill = true;
else fill = false;
}
if (fill) cells.push();
}
}
return ;
};
// ─────────────────────────────────────────────────────────
// Annotation panel content (one per step, per flow)
// ─────────────────────────────────────────────────────────
const ANNOTATIONS = {
deposit: [
{
eyebrow: "Step 1 · Sample Casino dashboard",
title: "Player chooses to deposit",
desc: "This is the casino's own UI. Swapin is invisible to the player at this stage — they just see the existing deposit button.",
bullets: [
"Branded as Sample Casino (operator) — not Swapin",
"Same UI surface as any other deposit method",
],
tapHint: "Tap the highlighted Deposit button to continue",
},
{
eyebrow: "Step 2 · Choose method",
title: "Crypto is just another payment method",
desc: "Cards, banking, crypto — the player picks whichever they prefer. No new flow, no surprises.",
bullets: [
"Crypto appears alongside existing methods",
"Operator's existing payment treatment applies",
],
tapHint: "Tap Crypto",
},
{
eyebrow: "Step 3 · Choose crypto to deposit",
title: "Picks their preferred coin",
desc: "Supports all major stablecoins and cryptocurrencies. Min/max limits per coin are configurable by the operator.",
bullets: [
"USDT · USDC · BTC · ETH · TON · TRX · USDT.POL · EURC · and more",
"Min 5 EUR · Max 1 000 000 EUR per transaction",
],
tapHint: "Tap USDT",
},
{
eyebrow: "Step 4 · Recurring deposit address",
title: "Same address every time",
desc: "Each player has a persistent address per coin. They send crypto from any wallet they own — exchange, hardware, app — and Swapin handles the rest.",
bullets: [
"Persistent address — no new wallet per transaction",
"KYT screening runs on incoming funds",
"Network shown so player doesn't miss-send",
],
tapHint: "Tap Done to simulate the deposit arriving",
},
{
eyebrow: "Step 5 · Deposit completed",
title: "Balance credited in EUR",
desc: "Swapin detected the deposit, ran KYT, converted to EUR at floating rate, called back the operator. The player's casino balance is credited — they never see a crypto amount.",
bullets: [
"0.86 EUR per USDT at moment of execution",
"Operator receives EUR via SEPA or stablecoin",
"Treasury, accounting, banking unchanged",
],
tapHint: "Tap Close to wrap the flow",
},
],
withdraw: [
{
eyebrow: "Step 1 · Sample Casino dashboard",
title: "Player initiates a withdrawal",
desc: "Same casino UI, same withdraw button. The crypto handling is entirely behind the scenes.",
bullets: [
"Player balance reflects the previous deposit (€72.90)",
"Branded as Sample Casino — not Swapin",
],
tapHint: "Tap the highlighted Withdraw button",
},
{
eyebrow: "Step 2 · Choose network",
title: "Player chooses where to receive",
desc: "Same crypto, multiple networks. The choice routes the payout through the right blockchain at the lowest fee for the player.",
bullets: [
"Ethereum · TRON · Polygon — operator-configurable",
"Network shown alongside the asset",
],
tapHint: "Tap TRON",
},
{
eyebrow: "Step 3 · Wallet address",
title: "Player provides their destination",
desc: "Address is screened by KYT before Swapin sends anything. Sanctioned wallets are blocked before execution.",
bullets: [
"Address pre-filled for the demo",
"Real product validates against the selected network",
],
tapHint: "Tap Confirm",
},
{
eyebrow: "Step 4 · Amount in EUR",
title: "Player picks EUR — Swapin quotes crypto",
desc: "Operator's balance is in EUR. The player chooses how much they want to cash out; Swapin handles the conversion at floating rate at execution.",
bullets: [
"Floating rate, locked at execution — no slippage windows",
"Operator-set delays for large amounts (>50 000 EUR)",
],
tapHint: "Tap Confirm",
},
{
eyebrow: "Step 5 · Processing",
title: "Three-phase authorization runs",
desc: "Initiator → Authorizer → Executor. KYT screens the destination wallet. EUR is converted to crypto at the rate at execution.",
bullets: [
"Initiator → Authorizer → Executor chain",
"KYT clears destination wallet",
"EUR → crypto at floating rate",
],
tapHint: "Auto-advances when the transfer completes",
},
{
eyebrow: "Step 6 · Withdrawal completed",
title: "Player receives crypto",
desc: "Crypto arrives in the player's wallet. Operator's EUR balance was debited at execution. Callback confirms — operator can mark the cashier ticket as paid.",
bullets: [
"Player wallet credited with 58.14 USDT",
"Casino EUR balance debited at 1.1627 USDT/EUR",
"No locked quotes, no crypto custody by the operator",
],
tapHint: "Tap Close to wrap the flow",
},
],
};
// ─────────────────────────────────────────────────────────
// MockupOverlay shell
// ─────────────────────────────────────────────────────────
const FLOW_SCREENS = {
deposit: [DepStep1, DepStep2, DepStep3, DepStep4, DepStep5],
withdraw: [WdStep1, WdStep2, WdStep3, WdStep4, WdStep5, WdStep6],
};
const MockupOverlay = ({ flow, onClose, onSwitchFlow }) => {
const [step, setStep] = React.useState(0);
const open = flow !== null;
// Reset step when flow changes
React.useEffect(() => {
setStep(0);
}, [flow]);
// Esc to close
React.useEffect(() => {
if (!open) return;
const onKey = (e) => {
if (e.key === "Escape") onClose();
else if (e.key === "ArrowRight") setStep((s) => Math.min(s + 1, (FLOW_SCREENS[flow]?.length || 1) - 1));
else if (e.key === "ArrowLeft") setStep((s) => Math.max(s - 1, 0));
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, flow, onClose]);
if (!flow) {
return ;
}
const screens = FLOW_SCREENS[flow];
const ScreenComp = screens[step];
const annot = ANNOTATIONS[flow][step];
const total = screens.length;
const next = () => {
if (step < total - 1) setStep(step + 1);
else setStep(0); // restart on final tap
};
const back = () => step > 0 && setStep(step - 1);
return (