;(function () { /* PortfolioCard — total portfolio value + 3 action pills (Deposit / Withdraw / Transfer). */ const EyeOff = ({ width, height, color, opacity }) => ( ); const CreditCardDown = ({ width, height }) => ( ); const CreditCardUp = ({ width, height }) => ( ); const CreditCardRefresh = ({ width, height }) => ( ); /* Icon already has its own stroke colors (teal arrow + dark card), so no tint applied. iconSize prop allows callers to bump the icon up from the RN default of 20 — useful on web where vector strokes anti-alias thinner than they do at native iOS pixel density. The icon is wrapped in a div with flexShrink:0 because CSS flex-shrinks SVGs without min-width constraints all the way to 0 when content overflows; the longer "Withdraw" label hits min-content:auto first and absorbs zero shrink, leaving the SVG to disappear entirely. RN's flex layout doesn't have this quirk. */ const ActionPill = ({ Icon, label, onPress, iconSize = 20 }) => ( ); const PortfolioCard = () => { const { total } = window.useTradingNumbers(); /* Open the global cash-flow sheet via the App-level trigger. PortfolioCard doesn't need to know which modal renders — it just signals intent. */ const openFlow = (mode) => () => { if (window.openCashFlow) window.openCashFlow(mode); }; const onDeposit = openFlow('deposit'); const onWithdraw = openFlow('withdraw'); const onTransfer = openFlow('transfer'); return (
{/* Label row — title + eye-off, mirroring the wallet hero where the eye-off sits next to the "Total Available Funds" caption rather than at the end of the value. */}
Total Portfolio Value
{/* Total value comes from the shared portfolio data module — same sum used by the Wallet hero, so the two screens always agree. Layout mirrors the wallet hero: large bold whole, smaller regular-weight fraction, semibold USD tag. */} {(function () { const parts = formatAmount(total); return ( {'$' + parts.amount} {parts.fraction} USD ); })()}
); }; const styles = { card: { backgroundColor: '#fff', borderRadius: '20px', paddingLeft: '20px', paddingRight: '20px', paddingTop: '16px', paddingBottom: '16px', /* Strengthened lg-modal shadow — same boost as Card primitive. */ boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)', }, labelRow: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', }, label: { fontFamily: 'Inter', fontWeight: 400, fontSize: '14px', lineHeight: '18px', color: colors.muted, }, valueRow: { display: 'flex', flexDirection: 'row', /* baseline-aligned so the smaller fraction + currency tag sit on the bottom edge of the big whole-amount glyphs (wallet-hero parity). */ alignItems: 'flex-end', gap: '10px', marginTop: '2px', }, value: { fontFamily: 'Gilroy', fontWeight: 700, fontSize: '36px', lineHeight: '44px', color: colors.ink, letterSpacing: '-0.7px', }, valueFraction: { fontFamily: 'Gilroy', fontWeight: 400, fontSize: '18px', lineHeight: '32px', color: colors.ink, /* tighten the visual gap between '$124,670' and '.18'; the parent row's gap:10px is intended for the eye-icon spacing, not the intra-number spacing. */ marginLeft: '-6px', }, valueCurrency: { fontFamily: 'Gilroy', fontWeight: 600, fontSize: '20px', lineHeight: '36px', color: colors.ink, marginLeft: '-4px', }, actions: { display: 'flex', flexDirection: 'row', gap: '8px', marginTop: '12px', }, pill: { flex: 1, /* CSS default `min-width: auto` on flex items prevents shrinking below intrinsic content. RN doesn't have this quirk; set explicitly so three pills + gaps fit inside the card. */ minWidth: 0, height: '42px', /* RN spec is paddingHorizontal:14, but that pushes the longer "Withdraw" label past the available width. Reduce to 10 so all three labels + icons fit comfortably without flex-shrinking. */ paddingLeft: '10px', paddingRight: '10px', border: `1px solid ${colors.line}`, borderRadius: '32px', backgroundColor: '#fff', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: '6px', }, pillLabel: { fontFamily: 'Gilroy', fontWeight: 600, fontSize: '14px', color: colors.ink2, }, }; Object.assign(window, { PortfolioCard }); })();