diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx index 9051f46..159680f 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(null); + const { totalStaked } = useVesting(); const toast = useToast(); // Fetch GRIX price from CoinGecko @@ -143,6 +146,32 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen )} + + + + + + Total Staked + + + + {Number(totalStaked).toLocaleString(undefined, { + minimumFractionDigits: 1, + maximumFractionDigits: 1, + })}{' '} + GRIX + {grixPrice && Number(totalStaked) > 0 && ( + +  ($ + {(Number(totalStaked) * grixPrice).toLocaleString(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })} + ) + + )} + +