// LenderDashboard.jsx — Lend → Lender dashboard (B13). // // Fills the former nav stub with the supply-side view: deposited stablecoins // and yield (KPI summary), the protocol reserve & protection status, and the // lender's positions table (paginated). Seeded from LENDER_DATA, which extends // PORTFOLIO_DATA.lendingPositions. // // Reuses HeroKPI / SupportKPI (from Portfolio.jsx) and Pagination (from // Primitives.jsx) for visual consistency with the rest of the app. // ── Reserve & protection ──────────────────────────────────────────────────── const ReserveProtection = ({ reserve }) => { const committedPct = 100 - reserve.availablePct; return (

Reserve & protection

Protocol reserve status

The reserve backs lender deposits against shortfalls. A coverage ratio above the 1.0x floor means committed protection exceeds outstanding risk.

{/* Capacity utilization bar */}

Capacity in use {committedPct}% committed · {reserve.availablePct}% available

); }; // ── Lender flow modal (deposit + withdraw) ────────────────────────────────── const LenderFlowModal = ({ type, pools = [], positions = [], prefillPool, prefillPosition, onClose }) => { const [step, setStep] = React.useState(prefillPool || prefillPosition ? 1 : 0); const [selectedPool, setSelectedPool] = React.useState(prefillPool || null); const [selectedPosition, setSelectedPosition] = React.useState(prefillPosition || null); const [amount, setAmount] = React.useState(""); const [done, setDone] = React.useState(false); // Escape closes the flow, matching the backdrop-click and Cancel affordances. React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]); const isDeposit = type === "deposit"; const item = isDeposit ? selectedPool : selectedPosition; const mockTxHash = "0x9f2a" + (item ? (item.id || item.name || "").replace(/[^a-z0-9]/gi, "").slice(0, 8) : "flow1234") + "c4b9"; const estYield = amount && item && item.apy ? "$" + (parseFloat(amount.replace(/,/g, "")) * (parseFloat(item.apy) / 100)).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " / yr" : "—"; if (done) { return ( ); } return ( ); }; // ── Positions table (paginated) ───────────────────────────────────────────── const LenderPositionsTable = ({ positions, onDeposit, onWithdraw }) => { const [page, setPage] = React.useState(1); const [perPage, setPerPage] = React.useState(6); const pageCount = Math.max(1, Math.ceil(positions.length / perPage)); const safePage = Math.min(page, pageCount); const rows = positions.slice((safePage - 1) * perPage, safePage * perPage); const cols = "minmax(170px, 1.6fr) 1fr 1fr 0.6fr 0.9fr 1fr 1fr auto"; return (

Lend

Your positions {positions.length}

Pool Deposited LP tokens APY Earned Value Withdrawable

{rows.map((p, i) => { const paused = /paused/i.test(p.name); return (

{p.name} {paused && Paused}

{p.tranche} · Settles {p.settles}

{p.deposited}

{p.lpTokens}

{p.apy}

+{p.earnedYield}

{p.currentValue}

{p.withdrawable}

); })}

{positions.length > 0 && (

)}

); }; // ── Page ──────────────────────────────────────────────────────────────────── const LenderDashboard = ({ data, pools = [], onAction, state = "live", onRetry }) => { const [tab, setTab] = React.useState("positions"); const [flow, setFlow] = React.useState(null); const openDeposit = (prefillPosition) => setFlow({ type: "deposit", prefillPosition: null, prefillPool: null }); const openWithdraw = (prefillPosition) => setFlow({ type: "withdraw", prefillPosition, prefillPool: null }); const openDepositForPool = (pool) => setFlow({ type: "deposit", prefillPool: pool, prefillPosition: null }); const openWithdrawForPosition = (pos) => setFlow({ type: "withdraw", prefillPosition: pos, prefillPool: null }); if (state === "loading") return ; if (state === "error") return ; if (state === "empty") { return (

Lend

Lender dashboard

Supply stablecoins to credit facilities and earn yield.

); } const k = data.kpi; const tabs = [ { value: "positions", label: "Your positions" }, { value: "reserve", label: "Reserve & protection" }, ]; return (

{/* Header + quick actions */}

Lend

Lender dashboard

Supply stablecoins to credit facilities and earn yield. The protocol reserve backs your deposits against shortfalls.

{/* KPI summary */}

{/* Subnav */}

{tabs.map((tb) => { const active = tab === tb.value; return ( ); })}

{tab === "positions" && ( )} {tab === "reserve" && } {flow && ( setFlow(null)} /> )}

); }; Object.assign(window, { LenderDashboard, LenderPositionsTable, ReserveProtection, LenderFlowModal });

Protocol reserve status

{isDeposit ? "Deposit submitted" : "Withdrawal submitted"}

{isDeposit ? "Deposit stablecoins" : "Withdraw stablecoins"}

Your positions {positions.length}

Lender dashboard

Lender dashboard