From 1ae3e872e3e689168702599cdcf6e9a13e64696b Mon Sep 17 00:00:00 2001
From: Sikkra <159844544+Sikkra@users.noreply.github.com>
Date: Tue, 19 May 2026 11:02:22 -0500
Subject: [PATCH] Add APY utilization stress panel
---
frontend/index.html | 12 ++++++
frontend/src/main.ts | 93 ++++++++++++++++++++++++++++++++++++++++++
frontend/src/style.css | 44 ++++++++++++++++++++
3 files changed, 149 insertions(+)
diff --git a/frontend/index.html b/frontend/index.html
index f904f23..8be7415 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -429,6 +429,18 @@ Open Position
Days to liquidation—
+
+
+ Utilization stress test ?
+ —
+
+
+
+
+ 97%
+
+
+
⚠ HF too low — liquidation risk. Reduce leverage.
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index fcc1ceb..aa6d2a1 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -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) ────────────────────────────────────────────────────
@@ -749,6 +751,87 @@ function renderApyChart(rs: ReserveStats | undefined, currentLev: number, equity
`;
}
+// ── 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 = `Load reserve data to run utilization stress scenarios.
`;
+ 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 = `Pool supply is unavailable for stress testing.
`;
+ 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 `
+
+ ${s.label}
+ ${s.custom ? "custom" : kink ? "r_three kink" : "preset"}
+
+
+ Net APY${netApy >= 0 ? "+" : ""}${fmt(netApy, 2)}%
+ ${STRESS_HF_DAYS}d HF${isFinite(hf30) ? fmt(hf30, 3) : "∞"}
+ Liquidation${ttl.text}
+
+