net apr tooltip

solendprotocol · May 10, 2024 · 03e9490 · 03e9490
1 parent 703c661
commit 03e9490
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 3 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",
@@ -74,7 +75,7 @@
     "postcss": "^8.4.33",
     "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "tw-colors": "^3.3.1"
+    "tw-colors": "^3.3.1",
+    "typescript": "^5.3.3"
   }
 }
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,7 +105,17 @@ function AccountPositionCardContent() {
       </div>
 
       <div className="flex flex-row items-center justify-between gap-2">
-        <LabelWithTooltip>Net APR</LabelWithTooltip>
+        <LabelWithTooltip
+          tooltip={NET_APR_TOOLTIP}
+          tooltipContentProps={{
+            style: {
+              maxWidth:
+                "min(var(--radix-tooltip-content-available-width), 360px)",
+            },
+          }}
+        >
+          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
@@ -1,4 +1,7 @@
+import Latex from "react-latex-next";
+
 import TextLink from "@/components/shared/TextLink";
+import "katex/dist/katex.min.css";
 
 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.";
@@ -21,6 +24,24 @@ export const EQUITY_TOOLTIP = (
   </>
 );
 
+export const NET_APR_TOOLTIP = (
+  <>
+    If your account is worth $X, assuming no prices or rates change, in 1 year
+    it will be worth $X * (1 + Net APR).
+    <br />
+    <br />
+    <span className="font-mono text-muted-foreground">
+      Formula:
+      <br />
+      <Latex>
+        {
+          "$$\\frac{\\sum_{Deposits} d_{USD,i} \\times d_{APR,i} - \\sum_{Borrows} b_{USD,i} \\times b_{APR,i}}{d_{USD} - b_{USD}}$$"
+        }
+      </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
@@ -332,3 +332,9 @@ body {
     border-radius: 38% 52% 75% 36% / 50% 40% 50% 60%;
   }
 }
+
+/* LaTeX */
+.katex-display {
+  width: max-content;
+  margin: 6px 0 !important;
+}