[GSW-2363] Explore token-amount decimals (#777)

* feat: [GSW-2363] Explore token-amount decimals

* refactor: [GSW-2363] Prefer `Number.isNaN` over `isNaN`.

Author: tfrg

packages/web/src/common/values/default-object/explore-dashboard/governance-overview-info.ts

@@ -0,0 +1,9 @@
+import { GovernanceOverviewResponse } from "@repositories/dashboard";
+
+export const DEFAULT_GOVERNANCE_OVERVIEW_INFO: GovernanceOverviewResponse = {
+  totalDelegated: 0,
+  holders: 0,
+  passedCount: 0,
+  activeCount: 0,
+  communityPool: 0,
+};

packages/web/src/layouts/dashboard/containers/dashboard-info-container/DashboardInfoContainer.tsx

@@ -22,14 +22,18 @@ const DashboardInfoContainer: React.FC = () => {
   const { breakpoint } = useWindowSize();
   const { isLoading: isLoadingCommon } = useLoading();
 
-  const { data: tokenData, isFetched: isFetchedDashboardToken } = useGetDashboardToken();
-  const convertedTokenData = React.useMemo(() => {
-    return ExploreDashboardConverter.convertDashboardToken(tokenData);
-  }, [tokenData]);
+  const { data: dashboardTokenData, isFetched: isFetchedDashboardToken } = useGetDashboardToken();
+  const convertedDashboardTokenData = React.useMemo(() => {
+    return ExploreDashboardConverter.convertDashboardToken(dashboardTokenData);
+  }, [dashboardTokenData]);
 
   const { data: governanceOverview = null, isFetched: isFetchedGovernanceOverview } =
     useGetDashboardGovernanceOverview();
 
+  const convertedGovernanceOverview = React.useMemo(() => {
+    return ExploreDashboardConverter.convertGovernanceOverview(governanceOverview);
+  }, [governanceOverview]);
+
   const isLoading = useMemo(() => {
     if (isLoadingCommon) {
       return true;
@@ -39,23 +43,23 @@ const DashboardInfoContainer: React.FC = () => {
   }, [isFetchedDashboardToken, isFetchedGovernanceOverview, isLoadingCommon]);
 
   const progressBar = useMemo(() => {
-    if (!convertedTokenData) return "0%";
-    const circSupply = Number(convertedTokenData?.gnsCirculatingSupply);
-    const totalSupply = Number(convertedTokenData?.gnsTotalSupply);
+    if (!convertedDashboardTokenData) return "0%";
+    const circSupply = Number(convertedDashboardTokenData?.gnsCirculatingSupply);
+    const totalSupply = Number(convertedDashboardTokenData?.gnsTotalSupply);
     if (totalSupply === 0) return "0%";
     const percent = Math.min((circSupply / totalSupply) * 100, 100);
     return `${percent}%`;
-  }, [convertedTokenData]);
+  }, [convertedDashboardTokenData]);
   const stakingRatio = useMemo(() => {
-    if (!convertedTokenData) return "-";
-    const circSupply = Number(convertedTokenData?.gnsCirculatingSupply);
-    const totalStaked = Number(convertedTokenData?.gnsTotalStaked);
+    if (!convertedDashboardTokenData) return "-";
+    const circSupply = Number(convertedDashboardTokenData?.gnsCirculatingSupply);
+    const totalStaked = Number(convertedDashboardTokenData?.gnsTotalStaked);
 
     if (totalStaked === 0 || circSupply === 0) return "0%";
     if ((totalStaked * 100) / circSupply < 0.01) return "<0.01%";
     const ratio = ((totalStaked / circSupply) * 100).toFixed(3);
     return `${ratio}%`;
-  }, [convertedTokenData]);
+  }, [convertedDashboardTokenData]);
 
   const supplyOverviewInfo: SupplyOverviewInfo = useMemo(() => {
     const DISTRIBUTION_RATIOS = {
@@ -64,10 +68,10 @@ const DashboardInfoContainer: React.FC = () => {
       COMMUNITY: 0.05, // 5%
     };
 
-    const circulatingSupply = convertedTokenData.gnsCirculatingSupply;
-    const totalSupply = convertedTokenData.gnsTotalSupply;
-    const totalStaked = Number(convertedTokenData.gnsTotalStaked);
-    const dailyBlockEmissions = Number(convertedTokenData.gnsDailyBlockEmissions);
+    const circulatingSupply = convertedDashboardTokenData.gnsCirculatingSupply;
+    const totalSupply = convertedDashboardTokenData.gnsTotalSupply;
+    const totalStaked = Number(convertedDashboardTokenData.gnsTotalStaked);
+    const dailyBlockEmissions = Number(convertedDashboardTokenData.gnsDailyBlockEmissions);
 
     const emissionDistribution = {
       liquidityStaking: dailyBlockEmissions * DISTRIBUTION_RATIOS.LIQUIDITY_STAKING,
@@ -95,31 +99,31 @@ const DashboardInfoContainer: React.FC = () => {
         community: formatOtherPrice(Math.floor(emissionDistribution.community), { isKMB: false, usd: false }),
       },
     };
-  }, [tokenData, progressBar, stakingRatio]);
+  }, [dashboardTokenData, progressBar, stakingRatio]);
 
   const governanceOverviewInfo = useMemo(() => {
-    if (!governanceOverview) {
+    if (!convertedGovernanceOverview) {
       return null;
     }
 
     return {
-      totalDelegated: `${numberToFormat(governanceOverview.totalDelegated)} ${XGNS_TOKEN.symbol}`,
-      holders: `${numberToFormat(governanceOverview.holders)}`,
-      passedCount: `${numberToFormat(governanceOverview.passedCount)}`,
-      activeCount: `${numberToFormat(governanceOverview.activeCount)} `,
-      communityPool: `${formatOtherPrice(governanceOverview.communityPool, {
+      totalDelegated: `${numberToFormat(convertedGovernanceOverview.totalDelegated)} ${XGNS_TOKEN.symbol}`,
+      holders: `${numberToFormat(convertedGovernanceOverview.holders)}`,
+      passedCount: `${numberToFormat(convertedGovernanceOverview.passedCount)}`,
+      activeCount: `${numberToFormat(convertedGovernanceOverview.activeCount)} `,
+      communityPool: `${formatOtherPrice(convertedGovernanceOverview.communityPool, {
         isKMB: false,
       })}`,
     };
-  }, [governanceOverview]);
+  }, [convertedGovernanceOverview]);
 
   return (
     <DashboardInfo
       dashboardTokenInfo={{
-        gnosAmount: formatPrice(tokenData?.gnsPrice, {
+        gnosAmount: formatPrice(dashboardTokenData?.gnsPrice, {
           isKMB: false,
         }),
-        gnotAmount: formatPrice(tokenData?.gnotPrice ?? "0", {
+        gnotAmount: formatPrice(dashboardTokenData?.gnotPrice ?? "0", {
           isKMB: false,
         }),
       }}

packages/web/src/services/converters/explore-dashboard/explore-dashboard.converter.ts

@@ -1,9 +1,10 @@
 import { AmountConverter } from "@services/converters/common/amount";
 
-import { GNS_TOKEN } from "@common/values/token-constant";
-import { DashboardTokenResponse } from "@repositories/dashboard";
+import { GNS_TOKEN, XGNS_TOKEN } from "@common/values/token-constant";
+import { DashboardTokenResponse, GovernanceOverviewResponse } from "@repositories/dashboard";
 import { DEFAULT_DASHBOARD_TOKEN_INFO } from "@common/values/default-object/explore-dashboard/dashboard-token-info";
 import { ActivityData } from "@repositories/activity/responses/activity-responses";
+import { DEFAULT_GOVERNANCE_OVERVIEW_INFO } from "@common/values/default-object/explore-dashboard/governance-overview-info";
 
 /**
  * Utility class responsible for converting dashboard token data
@@ -31,6 +32,24 @@ export class ExploreDashboardConverter {
     };
   }
 
+  /**
+   * Convert raw governance overview data to display format
+   * Converts XGNS token amounts to safe number format while preserving other fields
+   *
+   * @param data - raw governance overview response from API (can be null)
+   * @returns governance overview data with converted XGNS amounts as numbers (default values if input is invalid)
+   */
+  static convertGovernanceOverview(data: GovernanceOverviewResponse | null): GovernanceOverviewResponse {
+    if (!data) {
+      return DEFAULT_GOVERNANCE_OVERVIEW_INFO;
+    }
+
+    return {
+      ...data,
+      totalDelegated: this.safeConvertToNumber(AmountConverter.convertSingle(XGNS_TOKEN, data.totalDelegated)),
+    };
+  }
+
   /**
    * Convert dashboard activity list with token amounts to display format
    * Converts raw token amounts for both tokenA and tokenB in each activity using their respective token models
@@ -49,4 +68,25 @@ export class ExploreDashboardConverter {
       };
     });
   }
+
+  /**
+   * Safely convert a value to number type with fallback to 0
+   * Handles null, undefined, and invalid number conversions (NaN)
+   *
+   * @param value - value to convert (string, number, null, or undefined)
+   * @returns converted number value, or 0 if conversion fails or value is null/undefined
+   *
+   * @example
+   * safeConvertToNumber("123") // returns 123
+   * safeConvertToNumber(null) // returns 0
+   * safeConvertToNumber("invalid") // returns 0
+   */
+  private static safeConvertToNumber(value: string | number | null | undefined): number {
+    if (value == null) {
+      return 0;
+    }
+
+    const converted = Number(value);
+    return Number.isNaN(converted) ? 0 : converted;
+  }
 }