milify number

burrowHQ · Feb 22, 2024 · 5a52eed · 5a52eed
1 parent 65257f1
commit 5a52eed
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 20 deletions.
diff --git a/helpers/helpers.ts b/helpers/helpers.ts
@@ -1,5 +1,5 @@
 import millify from "millify";
-import { APY_FORMAT, DUST_FORMAT, TOKEN_FORMAT, USD_FORMAT } from "../store";
+import { APY_FORMAT, DUST_FORMAT, NUMBER_FORMAT, TOKEN_FORMAT, USD_FORMAT } from "../store";
 
 export const formatTokenValue = (v) => {
   return Number(v).toLocaleString(undefined, TOKEN_FORMAT);
@@ -30,25 +30,41 @@ export const millifyNumber = (v: string | number, ignoreBelow?: number, isDispla
   return millify(number);
 };
 
+export const formatTokenValueWithMilify = (
+  v,
+  fractionDigits = 2,
+  bigNumberFractionDigits = 0,
+  milifyThreshold = 1000000,
+  zeroPlacement = "-",
+) => {
+  if (v === 0 && zeroPlacement) {
+    return zeroPlacement;
+  }
+  if (Math.abs(Number(v)) >= milifyThreshold) {
+    return bigNumberMilify(Number(v), fractionDigits, bigNumberFractionDigits, zeroPlacement);
+  }
+  return Number(v).toLocaleString(undefined, TOKEN_FORMAT);
+};
+
 export const bigNumberMilify = (
-  labelValue,
+  n,
   fractionDigits = 2,
   bigNumberFractionDigits = 0,
   zeroPlacement = "-",
 ) => {
-  if (labelValue === 0 && zeroPlacement) {
+  if (n === 0 && zeroPlacement) {
     return zeroPlacement;
   }
-  // Nine Zeroes for Billions
-  return Math.abs(Number(labelValue)) >= 1.0e9
-    ? `${(Math.abs(Number(labelValue)) / 1.0e9).toFixed(bigNumberFractionDigits)}B`
-    : // Six Zeroes for Millions
-    Math.abs(Number(labelValue)) >= 1.0e6
-    ? `${(Math.abs(Number(labelValue)) / 1.0e6).toFixed(bigNumberFractionDigits)}M`
-    : // : // Three Zeroes for Thousands
-      // Math.abs(Number(labelValue)) >= 1.0e3
-      // ? `${(Math.abs(Number(labelValue)) / 1.0e3).toFixed(bigNumberFractionDigits)}K`
-      Math.abs(Number(labelValue)).toFixed(fractionDigits);
+  const formatNumber = (num, factor) => {
+    return (+(n / factor).toFixed(fractionDigits)).toLocaleString(undefined, NUMBER_FORMAT);
+  };
+
+  if (n >= 1e3 && n < 1e6) return `${formatNumber(n, 1e3)}K`;
+  if (n >= 1e6 && n < 1e9) return `${formatNumber(n, 1e6)}M`;
+  if (n >= 1e9 && n < 1e12) return `${formatNumber(n, 1e9)}B`;
+  if (n >= 1e12) return `${formatNumber(n, 1e12)}T`;
+
+  return n.toFixed(fractionDigits);
 };
 
 export const removeUndefinedInObj = (obj, removeNull) => {

diff --git a/screens/Dashboard/index.tsx b/screens/Dashboard/index.tsx
@@ -11,8 +11,8 @@ import DashboardReward from "./dashboardReward";
 import DashboardApy from "./dashboardApy";
 import CustomTable from "../../components/CustomTable/CustomTable";
 import {
-  bigNumberMilify,
   formatTokenValue,
+  formatTokenValueWithMilify,
   formatUSDValue,
   isMobileDevice,
   millifyNumber,
@@ -136,7 +136,7 @@ const yourSuppliedColumns = [
       return (
         <>
           <div title={originalData?.collateral ? formatTokenValue(originalData?.collateral) : "-"}>
-            {bigNumberMilify(originalData.collateral, 4, undefined, "-")}
+            {formatTokenValueWithMilify(originalData.collateral, 4)}
           </div>
           <div className="h6 text-gray-300">
             {originalData?.collateral
@@ -153,7 +153,7 @@ const yourSuppliedColumns = [
       return (
         <>
           <div title={formatTokenValue(originalData.supplied)}>
-            {bigNumberMilify(originalData.supplied, 4)}
+            {formatTokenValueWithMilify(originalData.supplied, 4)}
           </div>
           <div className="h6 text-gray-300">
             {formatUSDValue(originalData.supplied * originalData.price)}
@@ -293,7 +293,7 @@ const yourBorrowedColumns = [
       return (
         <>
           <div title={formatTokenValue(originalData?.borrowed)}>
-            {bigNumberMilify(originalData.borrowed, 4)}
+            {formatTokenValueWithMilify(originalData.borrowed, 4)}
           </div>
           <div className="h6 text-gray-300">
             ${millifyNumber(originalData.borrowed * originalData.price)}

diff --git a/screens/Dashboard/liquidations.tsx b/screens/Dashboard/liquidations.tsx
@@ -4,7 +4,7 @@ import { useAccountId, useUnreadLiquidation } from "../../hooks/hooks";
 import { shrinkToken, TOKEN_FORMAT } from "../../store";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { getAssets } from "../../redux/assetsSelectors";
-import { bigNumberMilify, getDateString } from "../../helpers/helpers";
+import { formatTokenValueWithMilify, getDateString } from "../../helpers/helpers";
 import { getLiquidations } from "../../api/get-liquidations";
 import { setUnreadLiquidation } from "../../redux/appSlice";
 
@@ -112,7 +112,7 @@ const columns = [
             className="whitespace-normal"
             title={`${tokenAmount.toLocaleString(undefined, TOKEN_FORMAT)} ${tokenSymbol}`}
           >
-            {bigNumberMilify(tokenAmount, 4)} {tokenSymbol}
+            {formatTokenValueWithMilify(tokenAmount, 4)} {tokenSymbol}
           </div>
         );
       });
@@ -138,7 +138,7 @@ const columns = [
             className="whitespace-normal"
             title={`${tokenAmount.toLocaleString(undefined, TOKEN_FORMAT)} ${tokenSymbol}`}
           >
-            {bigNumberMilify(tokenAmount, 4)} {tokenSymbol}
+            {formatTokenValueWithMilify(tokenAmount, 4)} {tokenSymbol}
           </div>
         );
       });