Add total vesting

src/pages/stakingPage/components/RewardsCard.tsx

@@ -4,8 +4,11 @@ import { useAccount } from 'wagmi';
 
 import { GrixLogo } from '@/components/commons/Logo';
 import { EthLogo } from '@/components/commons/Logo/EthLogo';
+import { AssetPriceResponse } from '@/types/api';
 import { claim, compound } from '@/web3Config/staking/hooks';
 
+import { useVesting } from '../hooks/useVesting';
+
 type RewardsCardProps = {
   data: {
     claimable: string;
@@ -16,26 +19,26 @@ type RewardsCardProps = {
   refetchData: () => Promise<void>;
 };
 
-type DexScreenerResponse = {
-  grix: {
-    usd: number;
-  };
-};
-
 export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Element => {
   const { address } = useAccount();
   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
   useEffect(() => {
     const fetchPrice = async () => {
       try {
-        const res = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=grix&vs_currencies=usd');
-        const json = (await res.json()) as DexScreenerResponse;
-        const price = json.grix.usd;
+        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()) as AssetPriceResponse;
+        const price = json.assetPrice;
         setGrixPrice(price);
       } catch {
         setGrixPrice(null);
@@ -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: 1,
+              maximumFractionDigits: 1,
+            })}{' '}
+            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}

src/pages/stakingPage/components/StakingCard.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { parseEther } from 'viem';
 import { useAccount } from 'wagmi';
 
+import { AssetPriceResponse } from '@/types/api';
 import { stakingContracts } from '@/web3Config/staking/config';
 import {
   approveStaking,
@@ -11,6 +12,8 @@ import {
   getEsGrixStakedAmount,
   getStakedAmount,
   getTokenBalance,
+  getTotalEsGrixStaked,
+  getTotalGrixStaked,
   stakeEsGRIX,
   stakeGRIX,
   unstakeEsGRIX,
@@ -42,6 +45,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 +95,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()) as AssetPriceResponse;
+      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 +194,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 +277,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/pages/stakingPage/components/VestingModal.tsx

@@ -18,6 +18,7 @@ import { useEffect, useState } from 'react';
 import { FaEquals, FaPlus } from 'react-icons/fa';
 
 import { GrixLogo } from '@/components/commons/Logo';
+import { AssetPriceResponse } from '@/types/api';
 
 type VestingModalProps = {
   isOpen: boolean;
@@ -29,12 +30,6 @@ type VestingModalProps = {
   claimableRewards: string;
 };
 
-type DexScreenerResponse = {
-  grix: {
-    usd: number;
-  };
-};
-
 export const VestingModal = ({
   isOpen,
   onClose,
@@ -52,9 +47,14 @@ export const VestingModal = ({
   useEffect(() => {
     const fetchPrice = async () => {
       try {
-        const res = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=grix&vs_currencies=usd');
-        const json = (await res.json()) as DexScreenerResponse;
-        const price = json.grix.usd;
+        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()) as AssetPriceResponse;
+        const price = json.assetPrice;
         setGrixPrice(price);
       } catch {
         setGrixPrice(null);

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,

src/types/api.ts

@@ -0,0 +1,5 @@
+// API Response Types
+
+export type AssetPriceResponse = {
+  assetPrice: number;
+};