From e226bec4f5c436a4323d28565e28f2fdda3b9598 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Thu, 5 Jun 2025 19:54:05 +0300
Subject: [PATCH 1/3] Add total staked display in RewardsCard component and
 implement total staked fetching in useVesting hook

---
 .../stakingPage/components/RewardsCard.tsx    | 30 +++++++++++++++++++
 src/pages/stakingPage/hooks/useVesting.ts     | 27 +++++++++++++++--
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index 9051f46..66aa1fc 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/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>
   );
diff --git a/src/pages/stakingPage/hooks/useVesting.ts b/src/pages/stakingPage/hooks/useVesting.ts
index 32063ea..a2cc58b 100644
--- a/src/pages/stakingPage/hooks/useVesting.ts
+++ b/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,

From f448fc6473c1dea23f5fa3cc15be0cdd7682b703 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Thu, 5 Jun 2025 20:19:43 +0300
Subject: [PATCH 2/3] refactor

---
 src/pages/stakingPage/components/RewardsCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index 66aa1fc..df17b6f 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -156,8 +156,8 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
           </HStack>
           <Text color="gray.400" fontSize="sm" fontWeight="500" flexShrink={0} textAlign="right">
             {Number(totalStaked).toLocaleString(undefined, {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
+              minimumFractionDigits: 1,
+              maximumFractionDigits: 1,
             })}{' '}
             GRIX
             {grixPrice && Number(totalStaked) > 0 && (

From fad39b58d67129748616990f7e2e883325af3c88 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Thu, 5 Jun 2025 20:32:20 +0300
Subject: [PATCH 3/3] lint

---
 src/pages/stakingPage/components/RewardsCard.tsx | 1 -
 src/pages/stakingPage/hooks/useVesting.ts        | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index df17b6f..159680f 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -204,7 +204,6 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
         >
           Compound
         </Button>
-
       </VStack>
     </Box>
   );
diff --git a/src/pages/stakingPage/hooks/useVesting.ts b/src/pages/stakingPage/hooks/useVesting.ts
index a2cc58b..4c57edc 100644
--- a/src/pages/stakingPage/hooks/useVesting.ts
+++ b/src/pages/stakingPage/hooks/useVesting.ts
@@ -39,7 +39,7 @@ export const useVesting = () => {
         functionName: 'balanceOf',
         args: [normalizeAddress(stakingContracts.rewardTracker.address)],
       });
-      
+
       const amount = formatEther(balance);
       setTotalStaked(amount);
     } catch (error) {