Updated the formatBalance utility function

src/pages/stakingPage/components/VestingComponents/VestingStats.tsx

@@ -40,7 +40,7 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
             <BoldGrix text="Claimable GRIX" />
           </Text>
           <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
-            {vestingData ? formatBalance(vestingData.claimable) : '0.0000'}
+            {vestingData ? formatBalance(vestingData.claimable) : '0'}
           </Text>
         </VStack>
       </GridItem>
@@ -51,7 +51,7 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
             <BoldGrix text="Total Vested esGRIX" />
           </Text>
           <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
-            {vestingData ? Number(formatBalance(vestingData.totalVested)).toFixed(2) : '0.0000'}
+            {vestingData ? formatBalance(vestingData.totalVested) : '0'}
           </Text>
         </VStack>
       </GridItem>

src/pages/stakingPage/utils/formatters.ts

@@ -1,23 +1,18 @@
 /**
- * Format balance with 4 decimal places and commas for large numbers
+ * Format balance with 2 decimal places and commas for large numbers
  */
 export const formatBalance = (value: string): string => {
   try {
     // Convert scientific notation to regular number
     const num = Number(value);
-    if (isNaN(num)) return '0.0000';
+    if (isNaN(num)) return '0.00';
 
-    // If it's a large number, format it with commas
-    if (num > 1000) {
-      return num.toLocaleString('en-US', {
-        minimumFractionDigits: 4,
-        maximumFractionDigits: 4,
-      });
-    }
-
-    // Otherwise just show 4 decimal places
-    return num.toFixed(4);
+    // Format with 2 decimal places and commas for large numbers
+    return num.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
   } catch (error) {
-    return '0.0000';
+    return '0.00';
   }
 };