Add total staked and GRIX price fetching to StakingCard component

- Implemented functions to fetch total GRIX and esGRIX staked amounts.
- Added state management for total staked amount and GRIX price.
- Updated data fetching logic to include total staked and GRIX price.
- Enhanced StakingCardContent to display total staked amount and its value in USD.

Author: asalef10

src/pages/stakingPage/components/StakingCard.tsx

@@ -11,6 +11,8 @@ import {
   getEsGrixStakedAmount,
   getStakedAmount,
   getTokenBalance,
+  getTotalEsGrixStaked,
+  getTotalGrixStaked,
   stakeEsGRIX,
   stakeGRIX,
   unstakeEsGRIX,
@@ -42,6 +44,8 @@ export const StakingCard: React.FC<StakingCardProps> = ({
   const [needsApproval, setNeedsApproval] = useState(true);
   const [availableBalance, setAvailableBalance] = useState('0');
   const [stakedAmount, setStakedAmount] = useState('0');
+  const [totalStakedInProtocol, setTotalStakedInProtocol] = useState('0');
+  const [grixPrice, setGrixPrice] = useState<number | null>(null);
   const [apr, setApr] = useState(0);
   const toast = useToast();
   const tokenAddress = type === 'gx' ? stakingContracts.grixToken.address : stakingContracts.esGRIXToken.address;
@@ -90,19 +94,53 @@ export const StakingCard: React.FC<StakingCardProps> = ({
     setApr(calculatedAPR);
   }, []);
 
+  const fetchTotalStaked = useCallback(async () => {
+    try {
+      if (type === 'gx') {
+        const total = await getTotalGrixStaked();
+        setTotalStakedInProtocol(total);
+      } else {
+        const total = await getTotalEsGrixStaked();
+        setTotalStakedInProtocol(total);
+      }
+    } catch (error) {
+      setTotalStakedInProtocol('0');
+    }
+  }, [type]);
+
+  const fetchGrixPrice = useCallback(async () => {
+    try {
+      const res = await fetch('https://z61hgkwkn8.execute-api.us-east-1.amazonaws.com/dev/assetprice?asset=GRIX', {
+        headers: {
+          'x-api-key': import.meta.env.VITE_GRIX_API_KEY,
+          origin: 'https://app.grix.finance',
+        },
+      });
+      const json = await res.json();
+      const price = json.assetPrice;
+      setGrixPrice(price);
+    } catch {
+      setGrixPrice(null);
+    }
+  }, []);
+
   useEffect(() => {
     void fetchBalance();
     void fetchStakedAmount();
     void fetchAPR();
+    void fetchTotalStaked();
+    void fetchGrixPrice();
 
     const interval = setInterval(() => {
       void fetchBalance();
       void fetchStakedAmount();
       void fetchAPR();
+      void fetchTotalStaked();
+      void fetchGrixPrice();
     }, 30000);
 
     return () => clearInterval(interval);
-  }, [fetchBalance, fetchStakedAmount, fetchAPR, refreshTrigger]);
+  }, [fetchBalance, fetchStakedAmount, fetchAPR, fetchTotalStaked, fetchGrixPrice, refreshTrigger]);
 
   const isAmountValid = useCallback(() => {
     if (!amount) return false;
@@ -155,12 +193,12 @@ export const StakingCard: React.FC<StakingCardProps> = ({
 
   const refreshAllData = useCallback(
     async (triggerParentRefresh = true) => {
-      await Promise.all([fetchBalance(), fetchStakedAmount(), fetchAPR()]);
+      await Promise.all([fetchBalance(), fetchStakedAmount(), fetchAPR(), fetchTotalStaked(), fetchGrixPrice()]);
       if (triggerParentRefresh) {
         onActionComplete();
       }
     },
-    [fetchBalance, fetchStakedAmount, fetchAPR, onActionComplete]
+    [fetchBalance, fetchStakedAmount, fetchAPR, fetchTotalStaked, fetchGrixPrice, onActionComplete]
   );
 
   useEffect(() => {
@@ -238,6 +276,8 @@ export const StakingCard: React.FC<StakingCardProps> = ({
       description={description}
       stakedAmount={stakedAmount}
       availableBalance={availableBalance}
+      totalStakedInProtocol={totalStakedInProtocol}
+      grixPrice={grixPrice}
       apr={apr}
       amount={amount}
       handleInputChange={handleInputChange}

src/pages/stakingPage/components/StakingCardContent.tsx

@@ -12,6 +12,8 @@ type StakingCardContentProps = {
   description: string;
   stakedAmount: string;
   availableBalance: string;
+  totalStakedInProtocol: string;
+  grixPrice: number | null;
   apr: number;
   amount: string;
   handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -33,6 +35,8 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
   description,
   stakedAmount,
   availableBalance,
+  totalStakedInProtocol,
+  grixPrice,
   apr,
   amount,
   handleInputChange,
@@ -115,6 +119,30 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
             {apr.toFixed(2)}%
           </Text>
         </VStack>
+
+        <VStack align="stretch">
+          <Text fontSize="sm" color="gray.500" mb={1}>
+            Total Staked
+          </Text>
+          <VStack align="flex-start" spacing={1}>
+            <Text fontSize="xl" fontWeight="700" color="white">
+              {Number(totalStakedInProtocol).toLocaleString(undefined, {
+                minimumFractionDigits: 1,
+                maximumFractionDigits: 1,
+              })}
+            </Text>
+            {grixPrice && Number(totalStakedInProtocol) > 0 && (
+              <Text fontSize="sm" color="green.300" fontWeight="600">
+                ($
+                {(Number(totalStakedInProtocol) * grixPrice).toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+                )
+              </Text>
+            )}
+          </VStack>
+        </VStack>
       </SimpleGrid>
 
       <HStack spacing={4}>

src/web3Config/staking/hooks.ts

@@ -185,6 +185,36 @@ export const getStakedAmount = async (userAddress: string) => {
   }
 };
 
+// Get total GRIX staked in the protocol
+export const getTotalGrixStaked = async () => {
+  try {
+    const balance = await readContract(wagmiConfig, {
+      abi: erc20Abi,
+      address: normalizeAddress(stakingContracts.grixToken.address),
+      functionName: 'balanceOf',
+      args: [normalizeAddress(stakingContracts.rewardTracker.address)],
+    });
+    return formatEther(balance);
+  } catch (error) {
+    return '0';
+  }
+};
+
+// Get total esGRIX staked in the protocol
+export const getTotalEsGrixStaked = async () => {
+  try {
+    const balance = await readContract(wagmiConfig, {
+      abi: erc20Abi,
+      address: normalizeAddress(stakingContracts.esGRIXToken.address),
+      functionName: 'balanceOf',
+      args: [normalizeAddress(stakingContracts.rewardTracker.address)],
+    });
+    return formatEther(balance);
+  } catch (error) {
+    return '0';
+  }
+};
+
 // Update the getEsGrixStakedAmount function to correctly fetch esGRIX staked amount
 export const getEsGrixStakedAmount = async (userAddress: string) => {
   try {