refactor: moved some formatting functions to utils

Author: jaybuidl

cspell.json

@@ -12,6 +12,7 @@
     "arbitrum",
     "autorestart",
     "codegen",
+    "commify",
     "commitlint",
     "COOLDOWN",
     "datetime",

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

@@ -1,19 +1,17 @@
 import React from "react";
 import styled from "styled-components";
-import { formatUnits, formatEther } from "viem";
 import { useParams } from "react-router-dom";
 import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
-import { KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS } from "src/consts/index";
+import { useCoinPrice } from "hooks/useCoinPrice";
+import { KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS } from "consts/index";
+import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
 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 VoteStake from "svgs/icons/vote-stake.svg";
 import PNKIcon from "svgs/icons/pnk.svg";
 import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
 import EthereumIcon from "svgs/icons/ethereum.svg";
-import { useCoinPrice } from "hooks/useCoinPrice";
-import { isUndefined } from "utils/index";
 
 const StyledCard = styled.div`
   width: auto;
@@ -36,18 +34,16 @@ const stats: IStat[] = [
   {
     title: "Min Stake",
     coinId: 0,
-    getText: (data) => commify(formatUnits(data?.minStake, 18)),
-    getSubtext: (data, coinPrice) =>
-      (parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
+    getText: (data) => formatPNK(data?.minStake),
+    getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.minStake)) * (coinPrice ?? 0)),
     color: "purple",
     icon: MinStake,
   },
   {
     title: "Vote Stake",
     coinId: 0,
-    getText: (data) => commify(formatUnits(data?.minStake, 18)),
-    getSubtext: (data, coinPrice) =>
-      (parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
+    getText: (data) => formatPNK(data?.minStake),
+    getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.minStake)) * (coinPrice ?? 0)),
     color: "purple",
     icon: VoteStake,
   },
@@ -61,9 +57,8 @@ const stats: IStat[] = [
   {
     title: "PNK Staked",
     coinId: 0,
-    getText: (data) => commify(Number(formatUnits(data?.stake, 18)).toFixed(0)),
-    getSubtext: (data, coinPrice) =>
-      (parseInt(formatUnits(data?.stake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
+    getText: (data) => formatPNK(data?.stake),
+    getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.stake)) * (coinPrice ?? 0)),
     color: "purple",
     icon: PNKIcon,
   },
@@ -84,18 +79,16 @@ const stats: IStat[] = [
   {
     title: "ETH paid to Jurors",
     coinId: 1,
-    getText: (data) => commify(Number(formatEther(BigInt(data?.paidETH))).toFixed(4)),
-    getSubtext: (data, coinPrice) =>
-      (Number(formatUnits(data?.paidETH, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
+    getText: (data) => formatETH(data?.paidETH),
+    getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.paidETH)) * (coinPrice ?? 0)),
     color: "blue",
     icon: EthereumIcon,
   },
   {
     title: "PNK redistributed",
     coinId: 0,
-    getText: (data) => commify(Number(formatUnits(data?.paidPNK, 18)).toFixed(0)),
-    getSubtext: (data, coinPrice) =>
-      (parseInt(formatUnits(data?.paidPNK, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
+    getText: (data) => formatPNK(data?.paidPNK, 18),
+    getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.paidPNK)) * (coinPrice ?? 0)),
     color: "purple",
     icon: PNKRedistributedIcon,
   },

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

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { formatEther, formatUnits } from "viem";
 import { Card } from "@kleros/ui-components-library";
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";
 import PNKIcon from "svgs/icons/pnk.svg";
@@ -9,8 +8,7 @@ import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
 import JurorIcon from "svgs/icons/user.svg";
 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 { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
 import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";
 import { useCoinPrice } from "hooks/useCoinPrice";
 
@@ -39,29 +37,27 @@ const stats: IStat[] = [
   {
     title: "PNK staked",
     coinId: 0,
-    getText: (counters) => commify(Number(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)).toFixed(0)),
+    getText: (counters) => formatPNK(getLastOrZero(counters, "stakedPNK")),
     getSubtext: (counters, coinPrice) =>
-      (parseInt(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
+      formatUSD(Number(formatUnitsWei(getLastOrZero(counters, "stakedPNK"))) * (coinPrice ?? 0)),
     color: "purple",
     icon: PNKIcon,
   },
   {
     title: "ETH Paid to jurors",
     coinId: 1,
-    getText: (counters) => commify(Number(formatEther(getLastOrZero(counters, "paidETH"))).toFixed(4)),
+    getText: (counters) => formatETH(getLastOrZero(counters, "paidETH")),
     getSubtext: (counters, coinPrice) =>
-      (Number(formatUnits(getLastOrZero(counters, "paidETH"), 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
+      formatUSD(Number(formatUnitsWei(getLastOrZero(counters, "paidETH"))) * (coinPrice ?? 0)),
     color: "blue",
     icon: EthereumIcon,
   },
   {
     title: "PNK redistributed",
     coinId: 0,
-    getText: (counters) => commify(Number(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)).toFixed(0)),
+    getText: (counters) => formatPNK(getLastOrZero(counters, "redistributedPNK")),
     getSubtext: (counters, coinPrice) =>
-      (parseInt(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)) * (coinPrice ?? 0))
-        .toFixed(2)
-        .toString() + "$",
+      formatUSD(Number(formatUnitsWei(getLastOrZero(counters, "redistributedPNK"))) * (coinPrice ?? 0)),
     color: "purple",
     icon: PNKRedistributedIcon,
   },

web/src/utils/index.ts

@@ -1 +1,14 @@
+import { formatEther, formatUnits } from "viem";
+import { commify } from "./commify";
+
 export const isUndefined = (maybeObject: any): maybeObject is undefined => typeof maybeObject === "undefined";
+
+export const formatUnitsWei = (value: bigint) => formatUnits(value, 18);
+
+export const formatPNK = (value: bigint, fractionDigits = 0) =>
+  commify(Number(formatUnitsWei(value)).toFixed(fractionDigits));
+
+export const formatETH = (value: bigint, fractionDigits = 4) =>
+  commify(Number(formatEther(value)).toFixed(fractionDigits));
+
+export const formatUSD = (value: number, fractionDigits = 2) => "$" + commify(Number(value).toFixed(fractionDigits));