Add total staked display in RewardsCard component and implement total staked fetching in useVesting hook

Author: asalef10

src/pages/stakingPage/components/RewardsCard.tsx

@@ -6,6 +6,8 @@ import { GrixLogo } from '@/components/commons/Logo';
 import { EthLogo } from '@/components/commons/Logo/EthLogo';
 import { claim, compound } from '@/web3Config/staking/hooks';
 
+import { useVesting } from '../hooks/useVesting';
+
 type RewardsCardProps = {
   data: {
     claimable: string;
@@ -27,6 +29,7 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
   const [isClaiming, setIsClaiming] = useState(false);
   const [isCompounding, setIsCompounding] = useState(false);
   const [grixPrice, setGrixPrice] = useState<number | null>(null);
+  const { totalStaked } = useVesting();
   const toast = useToast();
 
   // Fetch GRIX price from CoinGecko
@@ -143,6 +146,32 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
             )}
           </Text>
         </HStack>
+
+        <HStack justify="space-between" pt={2} borderTop="1px solid" borderColor="gray.800">
+          <HStack spacing={2}>
+            <GrixLogo boxSize="14px" />
+            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
+              Total Staked
+            </Text>
+          </HStack>
+          <Text color="gray.400" fontSize="sm" fontWeight="500" flexShrink={0} textAlign="right">
+            {Number(totalStaked).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}{' '}
+            GRIX
+            {grixPrice && Number(totalStaked) > 0 && (
+              <Text as="span" color="green.300" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
+                &nbsp;($
+                {(Number(totalStaked) * grixPrice).toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+                )
+              </Text>
+            )}
+          </Text>
+        </HStack>
         <Button
           onClick={() => void handleClaim()}
           isLoading={isClaiming}
@@ -175,6 +204,7 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
         >
           Compound
         </Button>
+
       </VStack>
     </Box>
   );

src/pages/stakingPage/hooks/useVesting.ts

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import { parseEther } from 'viem';
+import { erc20Abi, formatEther, parseEther } from 'viem';
 import { useAccount } from 'wagmi';
+import { readContract } from 'wagmi/actions';
 
+import { normalizeAddress } from '@/utils/web3Util';
+import { wagmiConfig } from '@/web3Config/reownConfig';
 import { stakingContracts } from '@/web3Config/staking/config';
 import {
   approveVesting,
@@ -24,8 +27,26 @@ export const useVesting = () => {
   const [esGrixBalance, setEsGrixBalance] = useState('0');
   const [grixBalance, setGrixBalance] = useState('0');
   const [vestingData, setVestingData] = useState<VestingData | null>(null);
+  const [totalStaked, setTotalStaked] = useState('0');
   const [isLoading, setIsLoading] = useState(false);
 
+  const fetchTotalStaked = useCallback(async () => {
+    try {
+      // Get total GRIX tokens staked in the vester contract
+      const balance = await readContract(wagmiConfig, {
+        abi: erc20Abi,
+        address: normalizeAddress(stakingContracts.grixToken.address),
+        functionName: 'balanceOf',
+        args: [normalizeAddress(stakingContracts.rewardTracker.address)],
+      });
+      
+      const amount = formatEther(balance);
+      setTotalStaked(amount);
+    } catch (error) {
+      setTotalStaked('0');
+    }
+  }, []);
+
   const fetchVestingData = useCallback(async () => {
     if (!address) return;
 
@@ -35,6 +56,7 @@ export const useVesting = () => {
         getTokenBalance(stakingContracts.esGRIXToken.address, address),
         getTokenBalance(stakingContracts.grixToken.address, address),
         getVestingData(address),
+        fetchTotalStaked(),
       ]);
 
       setVestingAllowance(allowance.toString());
@@ -45,7 +67,7 @@ export const useVesting = () => {
       setVestingData(null);
       throw error;
     }
-  }, [address]);
+  }, [address, fetchTotalStaked]);
 
   useEffect(() => {
     void fetchVestingData();
@@ -80,6 +102,7 @@ export const useVesting = () => {
     esGrixBalance,
     grixBalance,
     vestingData,
+    totalStaked,
     isLoading,
     handleVest,
     fetchVestingData,