feat: improved formatting for deposits tooltips when approaching cap

mrgnlabs · Jan 17, 2025 · 71f8a0d · 71f8a0d
1 parent e0007f1
commit 71f8a0d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/apps/marginfi-v2-ui/src/components/desktop/AssetList/components/AssetCells.tsx b/apps/marginfi-v2-ui/src/components/desktop/AssetList/components/AssetCells.tsx
@@ -7,6 +7,7 @@ import {
   dynamicNumeralFormatter,
   numeralFormatter,
   percentFormatter,
+  percentFormatterMod,
   usdFormatter,
 } from "@mrgnlabs/mrgn-common";
 import { IconAlertTriangle, IconExternalLink } from "@tabler/icons-react";
@@ -255,7 +256,12 @@ export const getDepositsCell = (depositsData: DepositsData) => {
             <>
               <span>
                 {depositsData.symbol} {depositsData.isInLendingMode ? "deposits" : "borrows"} are at{" "}
-                {percentFormatter.format(depositsData.capacity)} capacity.
+                {percentFormatterMod(depositsData.capacity, {
+                  minFractionDigits: 0,
+                  maxFractionDigits:
+                    depositsData.isBankHigh && !depositsData.isBankFilled && depositsData.capacity >= 0.99 ? 4 : 2,
+                })}{" "}
+                capacity.
               </span>
               {!depositsData.isBankFilled && (
                 <>

diff --git a/packages/mrgn-common/src/utils/formatters.utils.ts b/packages/mrgn-common/src/utils/formatters.utils.ts
@@ -99,6 +99,23 @@ const percentFormatterDyn = new Intl.NumberFormat("en-US", {
   maximumFractionDigits: 2,
 });
 
+const percentFormatterMod = (
+  value: number,
+  opts: { minFractionDigits: number; maxFractionDigits: number } = { minFractionDigits: 2, maxFractionDigits: 2 }
+) => {
+  const percentFormatter = new Intl.NumberFormat("en-US", {
+    style: "percent",
+    minimumFractionDigits: opts.minFractionDigits,
+    maximumFractionDigits: opts.maxFractionDigits,
+  });
+
+  if (value === 0) {
+    return "0";
+  } else {
+    return percentFormatter.format(value);
+  }
+};
+
 const clampedNumeralFormatter = (value: number) => {
   if (value === 0) {
     return "0";
@@ -149,6 +166,7 @@ export {
   clampedNumeralFormatter,
   percentFormatter,
   percentFormatterDyn,
+  percentFormatterMod,
   usdFormatter,
   usdFormatterDyn,
   tokenPriceFormatter,