feat: add metric units to nova landing page

client/src/app/components/nova/landing/LandingEpochSection.tsx

@@ -9,11 +9,11 @@ import RightHalfArrow from "~assets/right-half-arrow.svg?react";
 import ArrowUp from "~assets/arrow_up.svg?react";
 import ProgressBar from "./ProgressBar";
 import StatDisplay from "../../StatDisplay";
-import { formatAmount } from "~/helpers/stardust/valueFormatHelper";
 import { clamp } from "~/helpers/clamp";
 import { Link } from "react-router-dom";
-import "./LandingEpochSection.scss";
 import { getTimeRemaining } from "~/helpers/nova/novaTimeUtils";
+import { formatRawAmountWithMetricUnit } from "~/helpers/nova/formatRawAmountWithMetricUnit";
+import "./LandingEpochSection.scss";
 
 const EPOCH_DATE_FORMAT = "DD MMM YYYY HH:mm:ss";
 
@@ -50,11 +50,11 @@ const LandingEpochSection: React.FC = () => {
             subtitle: "Validators",
         },
         {
-            title: `${totalCommitteeStake !== undefined ? formatAmount(totalCommitteeStake, tokenInfo) : "--"}`,
+            title: `${totalCommitteeStake !== undefined ? formatRawAmountWithMetricUnit(totalCommitteeStake, tokenInfo) : "--"}`,
             subtitle: "Staked in committee",
         },
         {
-            title: `${commiiteeDelegatorStake !== undefined ? formatAmount(commiiteeDelegatorStake, tokenInfo) : "--"}`,
+            title: `${commiiteeDelegatorStake !== undefined ? formatRawAmountWithMetricUnit(commiiteeDelegatorStake, tokenInfo) : "--"}`,
             subtitle: "Delegated in committee",
         },
         {

client/src/app/routes/nova/landing/Landing.tsx

@@ -8,7 +8,7 @@ import { useNetworkStats } from "~/helpers/nova/hooks/useNetworkStats";
 import Hero from "~/app/components/Hero";
 import { IStatDisplay } from "~/app/lib/interfaces";
 import { StatDisplaySize } from "~/app/lib/enums";
-import { formatAmount } from "~/helpers/stardust/valueFormatHelper";
+import { formatRawAmountWithMetricUnit } from "~/helpers/nova/formatRawAmountWithMetricUnit";
 import "./Landing.scss";
 
 const Landing: React.FC = () => {
@@ -52,12 +52,12 @@ const Landing: React.FC = () => {
             size: StatDisplaySize.Small,
         },
         {
-            title: `${totalValidatorsStake !== undefined ? formatAmount(totalValidatorsStake, tokenInfo) : "--"}`,
+            title: `${totalValidatorsStake !== undefined ? formatRawAmountWithMetricUnit(totalValidatorsStake, tokenInfo) : "--"}`,
             subtitle: "Total Staked",
             size: StatDisplaySize.Small,
         },
         {
-            title: `${totalDelegatedStake !== null ? formatAmount(totalDelegatedStake, tokenInfo) : "--"}`,
+            title: `${totalDelegatedStake !== null ? formatRawAmountWithMetricUnit(totalDelegatedStake, tokenInfo) : "--"}`,
             subtitle: "Total Delegated",
             size: StatDisplaySize.Small,
         },

client/src/helpers/nova/formatRawAmountWithMetricUnit.ts

@@ -0,0 +1,52 @@
+import { INodeInfoBaseToken } from "@iota/sdk-wasm-stardust/web";
+import { formatAmount } from "~/helpers/stardust/valueFormatHelper";
+
+const UNIT_MAP: { threshold: number; unit: string }[] = [
+    { unit: "", threshold: 1 },
+    { unit: "K", threshold: 1_000 },
+    { unit: "M", threshold: 1_000_000 },
+    { unit: "G", threshold: 1_000_000_000 },
+    { unit: "T", threshold: 1_000_000_000_000 },
+    { unit: "P", threshold: 1_000_000_000_000_000 },
+];
+
+const sortedUnits = UNIT_MAP.sort((a, b) => b.threshold - a.threshold);
+
+/**
+ * Format the best amount with metric unit.
+ * @param value The value to format.
+ * @returns The formatted string with the metric unit.
+ */
+function formatBestAmountWithMetric(value: number): string {
+    for (const { threshold, unit } of sortedUnits) {
+        if (value >= threshold) {
+            return `${Math.floor(value / threshold)}${unit}`;
+        }
+    }
+
+    return `${Math.floor(value)}`;
+}
+
+/**
+ * Format token amount to metric unit.
+ * @param value The raw amount to format.
+ * @param tokenInfo The token info configuration to use.
+ * @returns The formatted string with the metric unit.
+ */
+export function formatRawAmountWithMetricUnit(value: number | bigint | string, tokenInfo: INodeInfoBaseToken): string {
+    if (Number.isNaN(value)) {
+        return "";
+    }
+
+    const tokenAmount = parseInt(formatAmount(value, tokenInfo, false, 0).replace(tokenInfo.unit, ""));
+    const formattedValue = formatBestAmountWithMetric(tokenAmount);
+
+    // Remove iota unit if it exists
+    const lastIotaIndex = formattedValue.lastIndexOf("i");
+    if (lastIotaIndex === -1) return `${formattedValue} ${tokenInfo.unit}`;
+
+    const formattedAmountWithToken =
+        formattedValue.substring(0, lastIotaIndex) + formattedValue.substring(lastIotaIndex + 1) + ` ${tokenInfo.unit}`;
+
+    return formattedAmountWithToken;
+}