↳ Your positions

Loading account from Hyperliquid…

); } const ms = u.marginSummary || {}; const accountValue = ms.accountValue ? +ms.accountValue : null; const totalNtlPos = ms.totalNtlPos ? +ms.totalNtlPos : null; const withdrawable = u.withdrawable ? +u.withdrawable : null; // Aggregate outcome MTM const outcomeMtm = u.outcomePositions.reduce((s, p) => { const avg = (p.entryNtl != null && p.sz > 0) ? p.entryNtl / p.sz : null; if (avg == null || p.mark == null) return s; return s + (p.mark - avg) * p.sz; }, 0); // Aggregate perp uPnL const perpUpnl = u.perpPositions.reduce((s, p) => s + (+p.unrealizedPnl || 0), 0); const totalPositions = u.perpPositions.length + u.outcomePositions.length; const totalOrders = u.openOrders.length; return (

↳ Your positions on Hyperliquid live · webData2

{/* Account summary strip */}

Account value

{fmtUsd2(accountValue)}

Open notional

{fmtUsd0(totalNtlPos)}

Withdrawable

{fmtUsd0(withdrawable)}

Open MTM (perp+outcome)

= 0 ? 'var(--mint)' : 'var(--coral)', }}> {((perpUpnl + outcomeMtm) >= 0 ? '+' : '') + fmtUsd2(perpUpnl + outcomeMtm)}

{/* Trading stats strip — derived from lifetime userFills */} {/* Historical P&L chart — drawn from lifetime fills */}

{/* OPEN BOOK — your resting orders, surfaced first because they're "what you're trying to do" */}

{totalOrders === 0 ? (

No resting orders. Place a limit order to see it here.

) : (

Order

Size

Limit

Notional

Placed

{u.openOrders.slice(0, 50).map(o => ( ))} {u.openOrders.length > 50 && (

Showing first 50 of {u.openOrders.length} resting orders.

)}

{/* OPEN POSITIONS — what's actually risked in the market */}

{totalPositions === 0 ? (

No open positions. Once an order fills, the position appears here.

) : (

Market

Size

Entry

Mark / Notional

P&L

{u.outcomePositions.map(p => ( ))} {u.perpPositions.map(p => ( ))}

)}

); } // ─────────── Historical P&L chart ─────────── // Cumulative realized P&L over time, computed from userFills. function HistoricalPnlChart({ fills }) { const [rangeKey, setRangeKey] = useState('ALL'); const wrapRef = React.useRef(null); const [size, setSize] = useState({ w: 800, h: 200 }); const [hover, setHover] = useState(null); useEffect(() => { if (!wrapRef.current) return; const ro = new ResizeObserver((es) => { const cr = es[0].contentRect; setSize({ w: Math.max(320, Math.floor(cr.width)), h: 200 }); }); ro.observe(wrapRef.current); return () => ro.disconnect(); }, []); const ranges = [ { key: '24H', ms: 24 * 3600 * 1000 }, { key: '7D', ms: 7 * 24 * 3600 * 1000 }, { key: '30D', ms: 30 * 24 * 3600 * 1000 }, { key: 'ALL', ms: null }, ]; const range = ranges.find(r => r.key === rangeKey) || ranges[3]; const now = Date.now(); const cutoff = range.ms != null ? now - range.ms : 0; // Sort fills oldest → newest, compute cumulative realized PnL through time const series = React.useMemo(() => { const sorted = (fills || []).slice().sort((a, b) => a.time - b.time); let cum = 0; const pts = []; for (const f of sorted) { cum += +f.closedPnl || 0; pts.push({ t: f.time, p: cum, fill: f }); } return pts; }, [fills]); // For range-filtering, we want the cumulative P&L delta over the period — i.e. start from // whatever the cumulative was at the cutoff, then plot relative motion from there. const filtered = React.useMemo(() => { if (!series.length) return []; if (cutoff === 0) return series; // Find the first point >= cutoff; baseline = last cum before cutoff let baseline = 0; let startIdx = 0; for (let i = 0; i < series.length; i++) { if (series[i].t < cutoff) baseline = series[i].p; else { startIdx = i; break; } } // Also include a synthetic anchor at cutoff with cumulative = baseline const out = series.slice(startIdx).map(p => ({ ...p, p: p.p - baseline })); return [{ t: cutoff, p: 0 }].concat(out); }, [series, cutoff]); const M = { l: 10, r: 56, t: 12, b: 24 }; const W = size.w, H = size.h; const innerW = Math.max(10, W - M.l - M.r); const innerH = Math.max(10, H - M.t - M.b); if (!filtered.length || filtered.length === 1) { return (

No fills in this range yet.

); } const tMin = filtered[0].t; const tMax = filtered[filtered.length - 1].t || (tMin + 1); const ys = filtered.map(p => p.p); const yMinR = Math.min(0, ...ys); const yMaxR = Math.max(0, ...ys); const yPad = Math.max((yMaxR - yMinR) * 0.10, Math.abs(yMaxR + yMinR) * 0.001 || 1); const yMin = yMinR - yPad; const yMax = yMaxR + yPad; const xScale = (t) => M.l + ((t - tMin) / (tMax - tMin || 1)) * innerW; const yScale = (p) => M.t + (1 - (p - yMin) / (yMax - yMin || 1)) * innerH; const last = filtered[filtered.length - 1]; const totalPnl = last.p; const tone = totalPnl >= 0 ? 'mint' : 'coral'; const toneColor = totalPnl >= 0 ? 'var(--mint)' : 'var(--coral)'; const linePath = filtered.map((p, i) => `${i === 0 ? 'M' : 'L'} ${xScale(p.t).toFixed(2)} ${yScale(p.p).toFixed(2)}`).join(' '); const zeroY = yScale(0); function onMove(e) { const r = e.currentTarget.getBoundingClientRect(); const mx = e.clientX - r.left; let best = 0, bestDist = Infinity; for (let i = 0; i < filtered.length; i++) { const sx = xScale(filtered[i].t); const d = Math.abs(sx - mx); if (d < bestDist) { best = i; bestDist = d; } } const p = filtered[best]; setHover({ x: xScale(p.t), y: yScale(p.p), t: p.t, pnl: p.p }); } function onLeave() { setHover(null); } return (

{(totalPnl >= 0 ? '+' : '') + fmtUsd2(totalPnl)} {filtered.length - 1} fills

} />

{hover && (

{new Date(hover.t).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}

= 0 ? 'var(--mint)' : 'var(--coral)' }}> {(hover.pnl >= 0 ? '+' : '') + fmtUsd2(hover.pnl)}

)}