chore: abstract beautifystatnumber

Author: kemuru

web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx

@@ -10,8 +10,8 @@ import { formatEther } from "viem";
 import { CoinIds } from "consts/coingecko";
 
 import { formatUSD } from "utils/format";
-import { commify } from "utils/commify";
 import { isUndefined } from "utils/index";
+import { beautifyStatNumber } from "utils/beautifyStatNumber";
 
 import { useCoinPrice } from "hooks/useCoinPrice";
 import { useHomePageExtraStats } from "queries/useHomePageExtraStats";
@@ -110,22 +110,6 @@ const InfoContainer = styled.div`
   padding-top: 4px;
 `;
 
-function beautifyStatNumber(value: number): string {
-  const absValue = Math.abs(value);
-
-  if (absValue >= 1e9) {
-    return `${commify((value / 1e9).toFixed(2))}B`;
-  } else if (absValue >= 1e6) {
-    return `${commify((value / 1e6).toFixed(2))}M`;
-  } else if (absValue >= 1e3) {
-    return `${commify((value / 1e3).toFixed(0))}K`;
-  } else if (absValue > 0 && absValue < 1) {
-    return value.toFixed(2);
-  }
-
-  return commify(value.toFixed(0));
-}
-
 const calculateJurorOdds = (newStake: number, totalStake: number): string => {
   const odds = totalStake !== 0 ? (newStake * 100) / totalStake : 0;
   return `${odds.toFixed(2)}%`;

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -27,7 +27,7 @@ import { useHomePageExtraStats } from "queries/useHomePageExtraStats";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
 import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format";
 import { isUndefined } from "utils/index";
-import { commify } from "utils/commify";
+import { beautifyStatNumber } from "utils/beautifyStatNumber";
 
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";
 import { StyledSkeleton } from "components/StyledSkeleton";
@@ -109,23 +109,6 @@ const StyledDropdownSelect = styled(DropdownSelect)`
   }
 `;
 
-function beautifyStatNumber(value: number): string {
-  const absValue = Math.abs(value);
-
-  if (absValue >= 1e9) {
-    return `${commify((value / 1e9).toFixed(2))}B`;
-  } else if (absValue >= 1e6) {
-    return `${commify((value / 1e6).toFixed(2))}M`;
-  } else if (absValue >= 1e3) {
-    return `${commify((value / 1e3).toFixed(0))}K`;
-  } else if (absValue < 1 && absValue !== 0) {
-    const inverseValue = 1 / absValue;
-    return commify(inverseValue.toFixed(0));
-  }
-
-  return commify(value.toFixed(0));
-}
-
 interface IStat {
   title: string;
   coinId?: number;
@@ -255,7 +238,7 @@ const Stats = () => {
         const ethPriceUSD = pricesData ? pricesData[CoinIds.ETH]?.price : undefined;
         if (!ethPriceUSD || !treeExpectedRewardPerPnk) return "N/A";
         const pnkNeeded = treeExpectedRewardPerPnk * ethPriceUSD;
-        return beautifyStatNumber(pnkNeeded);
+        return beautifyStatNumber(pnkNeeded, true);
       },
       color: "purple",
       icon: PNKUSDIcon,
@@ -270,7 +253,7 @@ const Stats = () => {
         const treeExpectedRewardPerPnk = data?.treeExpectedRewardPerPnk;
         if (!treeExpectedRewardPerPnk) return "N/A";
         const pnkNeeded = treeExpectedRewardPerPnk;
-        return beautifyStatNumber(pnkNeeded);
+        return beautifyStatNumber(pnkNeeded, true);
       },
       color: "blue",
       icon: PNKETHIcon,
@@ -283,7 +266,7 @@ const Stats = () => {
       ),
       getText: (data) => {
         const treeVotesPerPnk = data?.treeVotesPerPnk;
-        return beautifyStatNumber(treeVotesPerPnk);
+        return beautifyStatNumber(treeVotesPerPnk, true);
       },
       color: "orange",
       icon: VotesPerPNKIcon,
@@ -299,7 +282,7 @@ const Stats = () => {
       ),
       getText: (data) => {
         const treeDisputesPerPnk = data?.treeDisputesPerPnk;
-        return beautifyStatNumber(treeDisputesPerPnk);
+        return beautifyStatNumber(treeDisputesPerPnk, true);
       },
       color: "orange",
       icon: BalanceWithPNKIcon,

web/src/utils/beautifyStatNumber.ts

@@ -0,0 +1,22 @@
+import { commify } from "./commify";
+
+export function beautifyStatNumber(value: number, invertValue: boolean = false): string {
+  const absValue = Math.abs(value);
+
+  if (absValue >= 1e9) {
+    return `${commify((value / 1e9).toFixed(2))}B`;
+  } else if (absValue >= 1e6) {
+    return `${commify((value / 1e6).toFixed(2))}M`;
+  } else if (absValue >= 1e3) {
+    return `${commify((value / 1e3).toFixed(0))}K`;
+  } else if (absValue > 0 && absValue < 1) {
+    if (invertValue) {
+      const inverseValue = 1 / absValue;
+      return commify(inverseValue.toFixed(0));
+    } else {
+      return value.toFixed(2);
+    }
+  }
+
+  return commify(value.toFixed(0));
+}