// Portfolio.jsx — Client Portfolio dashboard, redesign pass. // // Addresses, from Renée's review: // · C-1 scaffolding: no "For Internal Use Only" pill (lives on AppShell); // no floating mock-data banner (replaced by thin bottom strip on the shell). // · C-2 repeated labels: each lending pool now reads with a distinguishing // facility name + tranche/term + native token (no more 6× "USDC Lending // Pool"); margin-account cards prefix with `ma-NNNN · facility`. // · C-4 hierarchy: ONE hero KPI (Net position) carries the weight of the // dashboard; supporting KPIs sit as a hairline strip below. Sub-sections // each get a clear eyebrow + section heading + count. Cards lose // equal-weight numbers in favor of label/value pairs. // · C-5 copy: sentence case, declarative voice. Min HF gets a context line // ("Across 3 at-risk accounts \u00b7 1.39 closest to liquidation") so the // red number is never naked. // · C-6 data coherence: Net position is the *single* source of truth and is // defined in plain English directly under the value. // =========================================================================== // Hero KPI — the one number the page is about // =========================================================================== const HeroKPI = ({ label, value, sub, trend }) => (
{label}
{value}
{sub} {trend && ( {trend} )}
); // Supporting KPI — sits in the hairline strip const SupportKPI = ({ label, value, sub, tone, last }) => (
{label}
{value}
{sub && (
{sub}
)}
); // =========================================================================== // Wallet balances — compact strip, no longer a hero card // =========================================================================== const WalletStrip = ({ balances, onViewAll }) => (
Wallet balances {balances.length} tokens
{balances.map((b, i) => ( {b.ticker} {b.balance} ))}
); // =========================================================================== // Lending positions — distinguishable cards, no repeated labels // =========================================================================== const LendingPositionCard = ({ pos }) => (
e.currentTarget.style.borderColor = "var(--border-strong)"} onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--border)"}>
{pos.name}
{pos.tranche} · Settles {pos.settles}
{pos.apy} APY
Current value
{pos.currentValue}
Earned yield
+{pos.earnedYield}
Deposited {pos.deposited} TVL {pos.tvl}
); const LendingPositions = ({ positions }) => (
{} }} />
{positions.map((p, i) => ( ))}
); // =========================================================================== // Facilities with active accounts — table, not card grid // (the OZ design used a card grid with 6 facilities at once which over-weights // this section; a compact table reads faster and frees breathing room) // =========================================================================== const FacilitiesWithAccounts = ({ rows, onOpenFacility }) => (
Borrow

Facilities you're active in {rows.length}

r.status === "healthy").length }, { value: "at-risk", label: "At risk", count: rows.filter(r => r.status === "at-risk").length }, { value: "default", label: "Liquidated", count: rows.filter(r => r.status === "default").length }, ]} onChange={() => {}} />
Facility Collateral Borrowed Health Rate
{rows.map((r, i) => { const hf = parseFloat(r.hf); const hfColor = r.status === "default" || hf < 1.2 ? "var(--danger)" : r.status === "at-risk" || hf < 1.5 ? "var(--gold-70)" : "var(--success)"; const accent = r.status === "at-risk" ? "var(--gold-60)" : r.status === "default" ? "var(--danger)" : "transparent"; return ( ); })}
); // =========================================================================== // Shared section header — eyebrow + heading + count + optional action // =========================================================================== const SectionHeader = ({ eyebrow, title, count, action }) => (
{eyebrow}

{title} {count !== undefined && ( {count} )}

{action && ( )}
); // =========================================================================== // Segment control — tab pill row // =========================================================================== const SegmentControl = ({ value, options, onChange }) => (
{options.map((o) => { const active = o.value === value; return ( ); })}
); // =========================================================================== // Portfolio page — composes everything // =========================================================================== const Portfolio = ({ data, onOpenFacility, state = "live", onRetry }) => { if (state === "loading") return ; if (state === "error") return ; if (state === "empty") { return (
Overview

Portfolio

Margin accounts and lending positions across connected facilities.
onOpenFacility && onOpenFacility(null) }} secondary={{ label: "Learn how Ascend works", onClick: () => {} }} />
); } // Min Health Factor gets a context line so it's never a naked red number (C-6) const minHF = data.minHF; const minHFTone = parseFloat(minHF.value) < 1.2 ? "danger" : parseFloat(minHF.value) < 1.5 ? "warning" : "success"; return (
{/* Page header */}
Overview

Portfolio

Margin accounts and lending positions across connected facilities.
{/* Hero KPI + supporting strip */}
{/* Wallet balances */} {/* Facilities with active accounts */} {/* Lending positions */}
); }; Object.assign(window, { Portfolio, HeroKPI, SupportKPI, WalletStrip, LendingPositionCard, FacilitiesWithAccounts, SectionHeader, SegmentControl, });