;(function () { /* WalletScreen — three-section vertical stack below the PageHeader. 1. Balance hero — full-bleed SVG (wallet-header.svg) carries the gradient card, "Total Available Funds" label + eye-off, action pills row, black CTA bar, and the F2F4F7 base strip. The dollar value is overlaid as live Text so it can be data-bound. Three invisible Pressables sit on top of the action pill regions for tap targets. 2. Accounts — full-bleed SVG (wallet-accounts.svg) carries the translucent container, inset shadow, section label, five overlapping rounded-top white card rectangles, and the bottom shadow strip. We overlay 5 rows of dynamic content (gradient-backed icon + label + value OR "Activate" pill) at fixed y-positions on each card. */ /* Home-page service-tile illustrations — reused as account-row icons. */ const IlloLeveraged = 'superapp/img/illo-leveraged.png'; const IlloGold = 'superapp/img/illo-gold.png'; const IlloWealth = 'superapp/img/illo-wealth.png'; const IlloShares = 'superapp/img/illo-shares.png'; /* Inline JSX SVG icon components — replace RN's react-native-svg loader. ArrowDownRight / ArrowUpRight / PiggyBank are recoloured at runtime via their `color` prop (mapped onto stroke). */ const ArrowDownRight = ({ width = 24, height = 24, color = '#000' }) => ( ); const ArrowUpRight = ({ width = 24, height = 24, color = '#000' }) => ( ); const PiggyBank = ({ width = 24, height = 24, color = '#344054' }) => ( ); /* ───────── data ───────── */ /* Five business-unit rows. Amount/fraction are derived dynamically from the central `data/portfolio.js` module so any changes there (including a demo deposit) propagate here automatically. Cards 1-4 use the home-page service-tile illustrations; card 5 (Savings) is a CTA row with an "Activate" pill instead of a value. */ const ACCOUNTS = [ { id: 'trading', label: 'Trading', illo: IlloLeveraged, ...formatAmount(getBalance('trading')), currency: 'USD' }, { id: 'gold', label: 'Gold', illo: IlloGold, ...formatAmount(getBalance('gold')), currency: 'USD' }, { id: 'wealth', label: 'Wealth', illo: IlloWealth, ...formatAmount(getBalance('wealth')), currency: 'USD' }, { id: 'shares', label: 'Shares', illo: IlloShares, ...formatAmount(getBalance('shares')), currency: 'USD' }, { id: 'savings', label: 'Savings', icon: PiggyBank, sub: 'Earn upto 6% yearly interest', action: 'Activate' }, ]; const TRANSACTIONS = [ /* Each row carries: kind — picks the card icon (in|out|transfer|trade) status — picks the state icon (success|pending|failed) title — short verb-phrase label meta — timestamp only; the source/destination lives in the pill amount — raw number; the renderer splits into whole + fraction direction — 'to' (inflow) or 'from' (outflow); used for the pill account — the business line the cash moves into / out of Times align with the trade activity feed where applicable: Added money (Visa) ↔ activity a3 (Today 05:50) Trade close (TSLA) ↔ activity a4 (Yesterday) */ { id: 't1', kind: 'in', status: 'success', title: 'Added money', meta: 'Today · 05:50 AM', amount: 5000.00, direction: 'to', account: 'Trading' }, { id: 't2', kind: 'transfer', status: 'success', title: 'Transfer', meta: 'Today · 04:18 AM', amount: 3000.00, direction: 'from', account: 'Trading' }, { id: 't3', kind: 'trade', status: 'success', title: 'Trade close', meta: 'Yesterday · 02:45 PM', amount: 1070.00, direction: 'from', account: 'Trading' }, { id: 't4', kind: 'in', status: 'success', title: 'Bonus credit', meta: 'May 8 · 10:00 AM', amount: 300.00, direction: 'to', account: 'Trading' }, ]; /* Expose for the voice agent's get_recent_transactions tool. */ window.WALLET_TRANSACTIONS = TRANSACTIONS; /* ───────── tiny inline glyph (no chevron in the asset library) ───────── */ const ChevronRight = ({ size = 16, color = '#fff', stroke = 1.5 }) => ( ); /* ───────── balance hero (SVG-driven) ───────── The Figma-exported header SVG is laid out in a 393×277 viewBox — every visual element is baked in (gradient card, label, eye-off, action pills with their own icons + labels, black CTA bar, F2F4F7 base strip). We only overlay the live dollar value (so it's data-bound) and three transparent Pressables on the action-pill rectangles to capture taps. Coordinate convention: SVG units map 1:1 to a 393-wide layout. We scale everything by `s = W / 393` so the overlay tracks the SVG on every device width. */ const HEADER_VB_W = 393; const HEADER_VB_H = 277; /* Card-coord positions (SVG units), measured against the source SVG paths. - Value row sits inside Content (padding 16) which sits inside Wrap (padding 8): x = 8 + 16 = 24 (left edge inside the visible 377-wide card starting at SVG x=8). - Value row top: card padding 8 + content padding 16 + label-row 20 + 4 gap = 48. Glyph baselines hover ~y=86 in SVG space, so a `top: 48` container with a 36px line ends up reading right. - Action pills row: y=116 → 176 (60h). First pill x=32, each pill 101.67w with 12 gap horizontally. */ const VALUE_X = 32; const VALUE_Y = 48; const PILL_Y = 116; const PILL_H = 60; const PILL_W = 101.67; const PILL_GAP = 12; const PILL_X = 32; function HeroHeader({ amount = '0', fraction = '.00', currency = 'USD', onAdd, onWithdraw, onMove }) { const W = DEVICE_WIDTH; const s = W / HEADER_VB_W; const H = HEADER_VB_H * s; return (
{/* Live dollar value — overlaid on the empty value-row slot in the SVG. Three Texts share a baseline-aligned row: large number, small decimal "fracture", currency tag. */}
{amount} {fraction} {currency}
{/* Tap targets layered over the three action pills. The pills' visuals (icons + labels) are inside the SVG; these Pressables only catch touches. */} {[onAdd, onWithdraw, onMove].map((handler, i) => (
); } /* ───────── accounts section (layered) ───────── Built from primitives + a single SVG for the wavy bottom strip. The Figma export's drop-shadow filters don't render reliably in react-native-svg's filter chain, so the cards are rendered as plain RN Views (rounded-top rectangle + boxShadow) instead of SVGs — this gives us a visible drop shadow that actually paints. Visual stack: • Outer white wrapper with rounded TOP corners + soft outer shadow. • "Balance" section label (RN Text, padded 16/24 per CSS). • Five business-unit cards — each is 329×84 (Figma body dimensions) with rounded TOP corners, white fill, and a `0 0 6 rgba(0,0,0,0.15)` boxShadow. Subsequent cards have marginTop = -24 so body bottoms overlap by exactly 24px (Figma spec), creating the deck-of-cards effect — `zIndex: i` ensures later cards paint on top. • Bottom strip (account-base.svg) — 361×72 wavy-top + rounded-bottom SVG. Wrapper carries its own boxShadow so it reads as a discrete layer below the last card. */ const CARD_BODY_W = 329; const CARD_BODY_H = 84; /* Savings is rendered shorter than the rest. Body height 68*s means only 8*s of savings is hidden behind the BG bar at the sides (down from 24 in the original deck), keeps savings's visible portion above the bar at exactly 60*s (matching every other card's visible portion), and opens the smile-zone gap between savings.bottom and the wave middle dip to ~21*s. */ const SAVINGS_BODY_H = 68; const CARD_INNER_PAD_X = 16; const CARD_INNER_PAD_Y = 12; const CARD_OVERLAP = 24; const CONTAINER_PAD_X = 16; // matches the original `padding 0 16` on the accounts list const BASE_VB_W = 361; /* Was 72; grew to 92 because the SVG now reserves a 20-unit upward strip above the wavy top so its inner-shadow Gaussian blur has room to render without being cut off at the viewBox edge. The body silhouette itself is unchanged; the wavy top simply moved from y=10 to y=30 inside the SVG. */ const BASE_VB_H = 92; const BASE_TOP_OFFSET = 20; // viewBox padding above the wavy top in SVG units function AccountsSection({ accounts = ACCOUNTS, onPress }) { const deviceW = DEVICE_WIDTH; const W = deviceW - 32; // 16px page gutter on each side const s = W / 361; // overall scale (Figma container = 361) const cardW = CARD_BODY_W * s; const cardH = CARD_BODY_H * s; const cardInsetX = CONTAINER_PAD_X * s; const cardOverlap = CARD_OVERLAP * s; const baseH = BASE_VB_H * (W / BASE_VB_W); /* BG wavy-top sides are at SVG y=30 (BASE_TOP_OFFSET 20 + 10 within the body region). Savings is now SAVINGS_BODY_H=68 tall, and we want only SAVINGS_BAR_OVERLAP=8 of it tucked behind the bar at sides — so the wavy sides land at savings.bottom-8, which means wrapper_top sits at savings.bottom-38. With inner_bottom = savings.bottom (no padding), baseOverlap = (8 + 30) * s = 38*s. (At MIDDLE the wavy curve dips down 28.67 below the sides, opening a clear ~21*s smile-zone gap between savings.bottom and the wave dip.) */ const baseOverlap = (8 + 30) * s; return (
{/* Outer white surface with rounded TOP corners. Bottom corners are provided by the BG strip's own rounded-bottom path so they line up. Soft halo only — the inset top shadow was removed; the outer drop shadow on the wrapper above (this View's parent) carries the lift. */}
Balance
{accounts.map((a, i) => { const isLast = i === accounts.length - 1; return (
{/* Row overlay fills the VISIBLE card area (60*s for cards 1-4, 84*s for the last) so we can use flex-center to vertically align the icon/label/value content with the visible card body. Per home-tile parity: labels in Gilroy-SemiBold 16/20, no scaling. */}
); })}
{/* BG strip: wavy top peeks below the last card; rounded bottom corners seal the section. The depth between the savings card and the BG comes from TWO existing shadows: (a) the savings card's own `0 0 8 rgba(0,0,0,0.18)` halo, which casts onto the BG's transparent area in the smile zone, and (b) the BG's outer halo below. An inset top shadow on the wrapper would paint as a flat rectangular band that doesn't follow the wavy curve — so we don't use one. `borderBottomLeftRadius/Right: 20 * s` matches the SVG's own scaled corner radius at any device width; `overflow: 'hidden'` clips any stray rendering to that rounded-bottom silhouette. */}
); } /* ───────── transaction row ───────── Left column = vertical [card-icon, state-icon] stack pulled from the user-uploaded SVGs in superapp/icons/wallet/. The card-icon picks the right verb (download / upload / refresh) based on row.kind; the state-icon picks success / pending / failed based on row.status. */ const KIND_ICON = { in: 'superapp/icons/wallet/card-download.svg', out: 'superapp/icons/wallet/card-upload.svg', transfer: 'superapp/icons/wallet/card-refresh.svg', trade: 'superapp/icons/wallet/card-refresh.svg', }; const STATE_ICON = { success: 'superapp/icons/wallet/state-success.svg', pending: 'superapp/icons/wallet/state-pending.svg', failed: 'superapp/icons/wallet/state-failed.svg', }; /* Tiny "+" glyph as a 12×12 SVG icon — the Figma spec uses an icon here, not the literal "+" character. */ const PlusGlyph = ({ color = '#344054' }) => ( ); /* 3×3 grey divider dot used between the "Today" and "09:15 AM" timestamp halves. Spec calls for a 4×4 box with a 3×3 dot inside. */ const TimeDot = () => ( ); /* Split the row's `meta` ("Today · 09:15 AM") on the centre dot so we can render the explicit dot glyph between the two halves per spec. */ function splitMeta(meta) { if (!meta) return { left: '', right: '' }; const parts = meta.split('·').map((s) => s.trim()); if (parts.length < 2) return { left: meta, right: '' }; return { left: parts[0], right: parts.slice(1).join(' · ') }; } const TxRow = ({ t }) => { const status = t.status || 'success'; const cardIcon = KIND_ICON[t.kind] || KIND_ICON.in; const stateIcon = STATE_ICON[status] || STATE_ICON.success; const parts = formatAmount(t.amount); /* "+" sign on every row regardless of direction — spec mock shows this. The To/From pill carries the directional semantics. */ const meta = splitMeta(t.meta); const pillLabel = (t.direction === 'from' ? 'From ' : 'To ') + (t.account || 'Trading'); return (
{t.title}
{meta.left} {meta.right ? : null} {meta.right ? {meta.right} : null}
{parts.amount} {parts.fraction} USD
{pillLabel}
); }; /* ───────── screen ───────── */ function WalletScreen({ active }) { /* When the user enters the wallet tab while a pending withdrawal exists, surface the "payment provider delay" notification. We fire only on transitions into active=true, not on every render while the tab is active, by gating on a ref. */ const lastActiveRef = React.useRef(false); const pending = window.usePendingWithdrawals ? window.usePendingWithdrawals() : []; React.useEffect(() => { if (active && !lastActiveRef.current && pending.length > 0) { if (window.showCashFlowNotification) window.showCashFlowNotification('withdraw'); } lastActiveRef.current = active; }, [active, pending.length]); const liveBalances = window.useBalances(); const accountsLive = ACCOUNTS.map((a) => { if (a.id === 'savings') return a; const live = liveBalances[a.id]; if (live == null) return a; return { ...a, ...formatAmount(live) }; }); const liveTotalValue = Object.values(liveBalances).reduce((a, b) => a + b, 0); const liveTotal = formatAmount(liveTotalValue); return (
{/* Top overscroll cushion — matches white PageHeader on pull-down. */}
}/> {/* ─── 1. BALANCE HERO ────────────────────────────────────────── Total amount is computed from the shared portfolio data module so it always equals the sum of the per-account values shown below. */} window.openCashFlow && window.openCashFlow('deposit')} onWithdraw={() => window.openCashFlow && window.openCashFlow('withdraw')} onMove={() => window.openCashFlow && window.openCashFlow('transfer')} /> {/* ─── 2. ACCOUNTS ────────────────────────────────────────────── */} {/* ─── 3. TRANSACTIONS ───────────────────────────────────────────── Spec: 361×452 white card, borderRadius 20, harder shadow (0 4 4 rgba(0,0,0,0.25)). Section label header (52px tall, padding 16 24) over a list of activity cards (76px each) with inset hairline dividers between them. */}
Recent transactions
{[ /* Live pending withdrawals from the trade-store. Prepend them so they sit above the static demo transactions. */ ...pending.map((p) => { const accountLabel = ({ trading: 'Trading', gold: 'Gold', wealth: 'Wealth', shares: 'Cash Equities', savings: 'Savings' })[p.account] || 'Trading'; const reqDate = p.requestedAt ? new Date(p.requestedAt) : null; const meta = reqDate ? `Today · ${reqDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}` : 'Just now'; return { id: p.id, kind: 'out', status: 'pending', title: 'Withdrawal', meta, amount: p.amount, direction: 'from', account: accountLabel }; }), ...TRANSACTIONS, ].map((t, i, arr) => ( {i < arr.length - 1 ?
: null} ))}
); } /* ───────── styles ───────── */ const styles = { /* Card surface — Figma spec: 361 wide white card with the harder 0 4 4 rgba(0,0,0,0.25) shadow. Zero padding here; the section header and the row list each carry their own padding. */ cardWrap: { paddingLeft: '16px', paddingRight: '16px', marginTop: '16px' }, cardSurface: { backgroundColor: '#fff', borderRadius: '20px', boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', }, /* Section label header — 52px tall, padding 16 24, title left, action right. */ txSectionHead: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingTop: '16px', paddingBottom: '16px', paddingLeft: '24px', paddingRight: '24px', height: '52px', boxSizing: 'border-box', }, txSectionTitle: { fontFamily: 'Inter', fontWeight: 500, fontSize: '14px', lineHeight: '20px', color: '#475467', }, txViewAllRow: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '4px', }, txViewAllText: { fontFamily: 'Inter', fontWeight: 400, fontSize: '12px', lineHeight: '18px', color: '#667085', }, /* Row list — padding 0 16 16 per spec, dividers inset 8 each side. */ txList: { paddingLeft: '16px', paddingRight: '16px', paddingBottom: '16px', display: 'flex', flexDirection: 'column', }, /* Each transaction — 76px tall, padding 16 16 16 12, 4-gap row. */ txRow: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '4px', height: '76px', paddingTop: '16px', paddingRight: '16px', paddingBottom: '16px', paddingLeft: '12px', boxSizing: 'border-box', }, /* Divider between rows — 304px hairline inset 8px each side. */ txDivider: { height: '1px', backgroundColor: '#EAECF0', marginLeft: '8px', marginRight: '8px', }, /* Left column — vertical [card-icon, state-icon] stack. The card icon is given a -8px vertical margin so it overlaps the holder's bounds, matching the Figma spec's compact stacking. */ txIconStack: { width: '32px', height: '44px', flexShrink: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }, txCardIconWrap: { width: '32px', height: '32px', borderRadius: '31px', backgroundColor: '#fff', border: '1px solid #EAECF0', display: 'flex', alignItems: 'center', justifyContent: 'center', }, /* State icon sits under the card icon with a small overlap — its top edge laps onto the card's lower-right curve, matching the Figma reference. -6px gives the visible "lapping" without the state icon sitting on top of the card glyph. */ txStateIcon: { display: 'block', marginTop: '-6px', }, /* Head — title + timestamp column, 44 tall. */ txHead: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start', height: '44px', paddingLeft: '4px', }, txTitle: { fontFamily: 'Inter', fontWeight: 500, fontSize: '14px', lineHeight: '20px', color: '#101828', }, txTimeRow: { display: 'flex', flexDirection: 'row', alignItems: 'center', flexWrap: 'nowrap', gap: '4px', height: '18px', marginTop: '6px', }, txTimeLabel: { fontFamily: 'Inter', fontWeight: 400, fontSize: '12px', lineHeight: '18px', color: '#667085', whiteSpace: 'nowrap', }, /* Tail — amount row + chip, right-aligned, 44 tall. */ txTail: { width: '133px', height: '44px', flexShrink: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-end', }, /* Number row — plus icon + value (Gilroy 700 16) + fraction (Inter 12) + currency (Inter 12). All in #344054. */ txNumberRow: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '2px', height: '20px', fontVariantNumeric: 'tabular-nums', }, txAmountValue: { fontFamily: 'Gilroy', fontWeight: 700, fontSize: '16px', lineHeight: '20px', color: '#344054', }, txAmountFraction: { fontFamily: 'Inter', fontWeight: 400, fontSize: '12px', lineHeight: '18px', color: '#344054', }, txAmountCurrency: { fontFamily: 'Inter', fontWeight: 400, fontSize: '12px', lineHeight: '18px', color: '#344054', }, /* Chip row — 18 tall, right-aligned. */ txChipRow: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', gap: '4px', height: '18px', marginTop: '6px', }, /* Source/destination chip — replaces old "TICKET" tag. Inter Medium 10/14 #344054 on a light grey #F9FAFB pill, 4px radius. */ txAccountChip: { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingTop: '2px', paddingBottom: '2px', paddingLeft: '6px', paddingRight: '6px', backgroundColor: '#F9FAFB', borderRadius: '4px', }, txAccountChipText: { fontFamily: 'Inter', fontWeight: 500, fontSize: '10px', lineHeight: '14px', color: '#344054', textAlign: 'center', }, }; Object.assign(window, { WalletScreen }); })();