Skip to content

Add APY utilization stress panel #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sikkra wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add APY utilization stress panel #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,18 @@ <h2 id="action-card-title">Open Position</h2>
<span>Days to liquidation</span><strong id="prev-liq-days">—</strong>
</div>
</div>
<div class="stress-panel" id="stress-panel">
<div class="stress-panel-head">
<span>Utilization stress test <span class="tooltip" data-tip="Shows how the current leverage choice behaves if pool utilization moves to each scenario. Rates are recomputed with projectRates.">?</span></span>
<strong id="stress-current-util" class="mono">—</strong>
</div>
<div class="stress-custom-row">
<label for="stress-util-slider">Custom</label>
<input type="range" id="stress-util-slider" class="stress-slider" min="50" max="99" step="1" value="97" />
<strong id="stress-custom-label" class="mono">97%</strong>
</div>
<div class="stress-scenarios" id="stress-scenarios"></div>
</div>
<p class="hf-warning hidden" id="hf-warning">&#9888; HF too low — liquidation risk. Reduce leverage.</p>
<p class="hf-warning hidden" id="liquidity-warning"></p>
</div>
Expand Down
93 changes: 93 additions & 0 deletions frontend/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,8 @@ const fmt = (n: number, d = 2) =>
n.toLocaleString("en-US", { maximumFractionDigits: d, minimumFractionDigits: d });
const aprToApy = (apr: number) => (Math.exp(apr / 100) - 1) * 100;
const fmtAddr = (addr: string) => addr.slice(0, 6) + "…" + addr.slice(-4);
const STRESS_PRESET_UTILS = [0.80, 0.90, 0.95, 0.99];
const STRESS_HF_DAYS = 30;

// ── Skeleton loading (#3) ────────────────────────────────────────────────────

Expand Down Expand Up @@ -749,6 +751,87 @@ function renderApyChart(rs: ReserveStats | undefined, currentLev: number, equity
</svg>`;
}

// ── Utilization stress panel ──────────────────────────────────────────────────

function formatStressDays(hf: number, spreadPct: number): { text: string; cls: string } {
if (!isFinite(hf)) return { text: "Never", cls: "hf-ok" };
if (hf <= 1) return { text: "Now", cls: "hf-bad" };
if (spreadPct <= 0) return { text: "Never", cls: "hf-ok" };

const days = Math.log(hf) / (spreadPct / 100) * 365;
if (!isFinite(days) || days > 3650) return { text: ">10 years", cls: "hf-ok" };
return {
text: `~${Math.max(0, Math.round(days))} days`,
cls: days < 30 ? "hf-bad" : days < 90 ? "hf-warn" : "hf-ok",
};
}

function stressHfAfterDays(hf: number, spreadPct: number, days: number): number {
if (!isFinite(hf)) return Infinity;
return hf * Math.exp(-(spreadPct / 100) * (days / 365));
}

function renderStressPanel(
rs: ReserveStats | undefined,
lev: number,
equity: number,
oldSupply: number,
oldBorrow: number,
hf: number,
) {
const scenariosEl = $("stress-scenarios");
const currentUtilEl = $("stress-current-util");
const customSlider = $("stress-util-slider") as HTMLInputElement;
const customLabel = $("stress-custom-label");
const customUtil = Math.max(0.5, Math.min(0.99, Number(customSlider.value) / 100));
customLabel.textContent = `${Math.round(customUtil * 100)}%`;

if (!rs) {
currentUtilEl.textContent = "No pool data";
scenariosEl.innerHTML = `<div class="stress-empty">Load reserve data to run utilization stress scenarios.</div>`;
return;
}

const currentUtil = rs.totalSupply > 0 ? rs.totalBorrow / rs.totalSupply : 0;
currentUtilEl.textContent = `Current ${fmt(currentUtil * 100, 1)}%`;

const addSupply = equity * lev - oldSupply;
const baseSupply = rs.totalSupply + addSupply;
if (baseSupply <= 0) {
scenariosEl.innerHTML = `<div class="stress-empty">Pool supply is unavailable for stress testing.</div>`;
return;
}

const scenarios = [
...STRESS_PRESET_UTILS.map(util => ({ label: `${Math.round(util * 100)}%`, util, custom: false })),
{ label: `${Math.round(customUtil * 100)}%`, util: customUtil, custom: true },
];

scenariosEl.innerHTML = scenarios.map(s => {
const stressedBorrow = Math.max(0, baseSupply * s.util);
const stressed = projectRates(rs, addSupply, stressedBorrow - rs.totalBorrow);
const netApr = stressed.netSupplyApr * lev - stressed.netBorrowCost * (lev - 1);
const netApy = aprToApy(netApr);
const spreadPct = stressed.interestBorrowApr - stressed.interestSupplyApr;
const hf30 = stressHfAfterDays(hf, spreadPct, STRESS_HF_DAYS);
const ttl = formatStressDays(hf, spreadPct);
const kink = s.util >= 0.95;
const hfCls = !isFinite(hf30) || hf30 > 1.1 ? "hf-ok" : hf30 > 1.03 ? "hf-warn" : "hf-bad";

return `<div class="stress-scenario ${kink ? "stress-scenario-kink" : ""}">
<div class="stress-scenario-top">
<span class="stress-util mono">${s.label}</span>
<span class="stress-badge">${s.custom ? "custom" : kink ? "r_three kink" : "preset"}</span>
</div>
<div class="stress-metrics">
<span>Net APY</span><strong class="${netApy >= 0 ? "apr-great" : "apr-bad"}">${netApy >= 0 ? "+" : ""}${fmt(netApy, 2)}%</strong>
<span>${STRESS_HF_DAYS}d HF</span><strong class="${hfCls}">${isFinite(hf30) ? fmt(hf30, 3) : "∞"}</strong>
<span>Liquidation</span><strong class="${ttl.cls}">${ttl.text}</strong>
</div>
</div>`;
}).join("");
}

// ── Render reserve stats for selected asset ───────────────────────────────────

function renderSelectedAsset() {
Expand Down Expand Up @@ -1236,6 +1319,9 @@ function updatePreview() {

// APY chart (#14)
renderApyChart(rs, lev, equity, oldSupply, oldBorrow);
renderStressPanel(rs, lev, equity, oldSupply, oldBorrow, hf);
} else {
renderStressPanel(undefined, lev, equity, oldSupply, oldBorrow, hf);
}

// Risk zone labels (#9)
Expand Down Expand Up @@ -2201,6 +2287,7 @@ async function refreshAddFundsBalance() {
}

($("leverage-slider") as HTMLInputElement).addEventListener("input", updatePreview);
($("stress-util-slider") as HTMLInputElement).addEventListener("input", updatePreview);
// Live preview while typing (no clamping so user can type multi-digit numbers like "10")
($("leverage-input") as HTMLInputElement).addEventListener("input", () => {
const numIn = $("leverage-input") as HTMLInputElement;
Expand Down Expand Up @@ -2238,6 +2325,12 @@ $("demo-btn").addEventListener("click", () => {
asset: a, cFactor: a.cFactor, lFactor: 1, interestSupplyApr: 4.2, interestBorrowApr: 6.8,
blndSupplyApr: 2.1, blndBorrowApr: 1.5, netSupplyApr: 6.3, netBorrowCost: 5.3,
totalSupply: 1000000, totalBorrow: 650000, available: 350000, priceUsd: 1.0,
bRate: 1_000_000_000_000n, dRate: 1_000_000_000_000n, bSupply: 1_000_000_000_000n, dSupply: 650_000_000_000n,
supplyEps: 0n, borrowEps: 0n, supplyEmission: null, borrowEmission: null,
rateConfig: {
rBase: 0, rOne: 500_000, rTwo: 2_000_000, rThree: 150_000_000,
utilOpt: Math.round(a.maxUtil * 10_000_000), irMod: 10_000_000, backstopFP: selectedPool.backstopFP,
},
}));
positions = { byAsset: new Map() };
// One sample position
Expand Down
44 changes: 44 additions & 0 deletions frontend/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -640,6 +640,50 @@ main { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 20px 24
.preview-net-apr { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.prev-net-apr { font-size: 16px !important; font-weight: 700 !important; }

.stress-panel {
margin-top: 10px; background: var(--metric-bg); border: 1px solid var(--border);
border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.stress-panel-head {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
font-size: 12px; color: var(--text-2); font-weight: 700;
}
.stress-panel-head strong { color: var(--text); font-weight: 600; white-space: nowrap; }
.stress-custom-row {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
font-size: 12px; color: var(--text-3);
}
.stress-custom-row label { color: var(--text-2); font-weight: 600; }
.stress-slider {
width: 100%; height: 6px; border-radius: 999px; appearance: none; background: var(--slider-bg);
}
.stress-slider::-webkit-slider-thumb {
appearance: none; width: 14px; height: 14px; border-radius: 50%;
background: var(--primary); box-shadow: 0 0 0 3px var(--slider-glow); cursor: pointer;
}
.stress-scenarios { display: grid; gap: 8px; }
.stress-scenario {
border: 1px solid var(--border); border-radius: var(--r-xs); padding: 9px 10px;
background: rgba(255,255,255,.02);
}
.stress-scenario-kink { border-color: var(--danger-border); background: var(--danger-bg); }
.stress-scenario-top {
display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px;
}
.stress-util { color: var(--text); font-weight: 800; font-size: 13px; }
.stress-badge {
color: var(--text-3); border: 1px solid var(--border); border-radius: var(--r-xs);
padding: 2px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .3px;
}
.stress-scenario-kink .stress-badge { color: var(--danger); border-color: var(--danger-border); }
.stress-metrics {
display: grid; grid-template-columns: auto minmax(72px, auto); gap: 4px 10px;
align-items: center; font-size: 12px;
}
.stress-metrics span { color: var(--text-3); }
.stress-metrics strong { text-align: right; font-family: var(--mono); font-weight: 700; }
.stress-empty { color: var(--text-3); font-size: 12px; }

.hf-ok { color: var(--success) !important; }
.hf-warn { color: var(--warning) !important; }
.hf-bad { color: var(--danger) !important; }
Expand Down