net apr formula (#50)

* wip formula * net apr formula
solendprotocol · May 13, 2024 · 6892345 · 6892345
1 parent 280755c
commit 6892345
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 5 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/frontend/package.json b/frontend/package.json
@@ -51,6 +51,7 @@
     "next-themes": "^0.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-latex-next": "^3.0.0",
     "react-merge-refs": "^2.1.1",
     "react-responsive": "^10.0.0",
     "recharts": "^2.12.0",

diff --git a/frontend/src/components/dashboard/account/AccountPositionCard.tsx b/frontend/src/components/dashboard/account/AccountPositionCard.tsx
@@ -24,6 +24,7 @@ import {
   DEPOSITS_TOOLTIP,
   EQUITY_TOOLTIP,
   LIQUIDATION_THRESHOLD_TOOLTIP,
+  NET_APR_TOOLTIP,
   WEIGHTED_BORROWS_TOOLTIP,
 } from "@/lib/tooltips";
 
@@ -104,10 +105,7 @@ function AccountPositionCardContent() {
       </div>
 
       <div className="flex flex-row items-center justify-between gap-2">
-        <LabelWithTooltip
-        >
-          Net APR
-        </LabelWithTooltip>
+        <LabelWithTooltip tooltip={NET_APR_TOOLTIP}>Net APR</LabelWithTooltip>
         <TBody className="w-max text-right">
           {formatPercent(netAprPercent)}
         </TBody>

diff --git a/frontend/src/lib/tooltips.tsx b/frontend/src/lib/tooltips.tsx
@@ -2,6 +2,7 @@ import Latex from "react-latex-next";
 
 import TextLink from "@/components/shared/TextLink";
 import "katex/dist/katex.min.css";
+import { Separator } from "@/components/ui/separator";
 
 export const OPEN_LTV_BW_TOOLTIP =
   "Open LTV is a ratio that determines how much borrow power is contributed by a deposited asset. Borrow weight (BW) is a multiplier on the value borrowed, used for borrow limit calculations.";
@@ -24,6 +25,31 @@ export const EQUITY_TOOLTIP = (
   </>
 );
 
+export const NET_APR_TOOLTIP = (
+  <>
+    If your account is worth $X today, assuming no prices or rates change, in 1
+    year it will be worth $X × (1 + Net APR).
+    <br />
+    <br />
+    <Separator />
+    <span className="text-muted-foreground">
+      <Latex>
+        {
+          "$$D = \\sum_{i=0}^{N(\\textnormal{Deposits})} USD(d_i) \\times APR(d_i)$$"
+        }
+      </Latex>
+      <Latex>
+        {
+          "$$B = \\sum_{i=0}^{N(\\textnormal{Borrows})} USD(b_i) \\times APR(b_i)$$"
+        }
+      </Latex>
+      <Latex>
+        {"$$\\textnormal{Net APR} = \\frac{D-B}{USD(d) - USD(b)}$$"}
+      </Latex>
+    </span>
+  </>
+);
+
 export const WEIGHTED_BORROWS_TOOLTIP = (
   <>
     Your weighted borrows is the value of all assets borrowed, adjusted by their

diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
@@ -336,5 +336,5 @@ body {
 /* LaTeX */
 .katex-display {
   width: max-content;
-  margin: 6px 0 !important;
+  margin: 12px 0 !important;
 }