fix(web): round decimals in stats

Author: kemuru

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

@@ -8,6 +8,7 @@ import StatDisplay, { IStatDisplay } from "components/StatDisplay";
 import BalanceIcon from "svgs/icons/law-balance.svg";
 import MinStake from "svgs/icons/min-stake.svg";
 import { commify } from "utils/commify";
+import { roundDecimals } from "utils/roundDecimals";
 import VoteStake from "svgs/icons/vote-stake.svg";
 import PNKIcon from "svgs/icons/pnk.svg";
 import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
@@ -61,7 +62,7 @@ const stats: IStat[] = [
   {
     title: "PNK Staked",
     coinId: 0,
-    getText: (data) => commify(formatUnits(data?.stake, 18)),
+    getText: (data) => commify(roundDecimals(formatUnits(data?.stake, 18), 0)),
     getSubtext: (data, coinPrice) =>
       (parseInt(formatUnits(data?.stake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
@@ -84,7 +85,7 @@ const stats: IStat[] = [
   {
     title: "ETH paid to Jurors",
     coinId: 1,
-    getText: (data) => commify(formatEther(BigInt(data?.paidETH))),
+    getText: (data) => commify(roundDecimals(formatEther(BigInt(data?.paidETH)), 4)),
     getSubtext: (data, coinPrice) =>
       (Number(formatUnits(data?.paidETH, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "blue",
@@ -93,7 +94,7 @@ const stats: IStat[] = [
   {
     title: "PNK redistributed",
     coinId: 0,
-    getText: (data) => commify(formatUnits(data?.paidPNK, 18)),
+    getText: (data) => commify(roundDecimals(formatUnits(data?.paidPNK, 18), 0)),
     getSubtext: (data, coinPrice) =>
       (parseInt(formatUnits(data?.paidPNK, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",

web/src/pages/Home/CourtOverview/Stats.tsx

@@ -11,6 +11,7 @@ import BalanceIcon from "svgs/icons/law-balance.svg";
 import { KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS } from "src/consts/index";
 import { commify } from "utils/commify";
 import { isUndefined } from "utils/index";
+import { roundDecimals } from "utils/roundDecimals";
 import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";
 import { useCoinPrice } from "hooks/useCoinPrice";
 
@@ -39,7 +40,7 @@ const stats: IStat[] = [
   {
     title: "PNK staked",
     coinId: 0,
-    getText: (counters) => commify(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)),
+    getText: (counters) => commify(roundDecimals(formatUnits(getLastOrZero(counters, "stakedPNK"), 18), 0)),
     getSubtext: (counters, coinPrice) =>
       (parseInt(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
@@ -48,7 +49,7 @@ const stats: IStat[] = [
   {
     title: "ETH Paid to jurors",
     coinId: 1,
-    getText: (counters) => commify(formatEther(getLastOrZero(counters, "paidETH"))),
+    getText: (counters) => commify(roundDecimals(formatEther(getLastOrZero(counters, "paidETH")), 4)),
     getSubtext: (counters, coinPrice) =>
       (Number(formatUnits(getLastOrZero(counters, "paidETH"), 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "blue",
@@ -57,7 +58,7 @@ const stats: IStat[] = [
   {
     title: "PNK redistributed",
     coinId: 0,
-    getText: (counters) => commify(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)),
+    getText: (counters) => commify(roundDecimals(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18), 0)),
     getSubtext: (counters, coinPrice) =>
       (parseInt(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)) * (coinPrice ?? 0))
         .toFixed(2)

web/src/utils/roundDecimals.ts

@@ -0,0 +1,5 @@
+export const roundDecimals = (value: string, decimals: number): string => {
+  const numberValue = parseFloat(value);
+  const roundedValue = Math.round(numberValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+  return roundedValue.toString();
+};