diff --git a/components/staking/StakedEXASummary/index.tsx b/components/staking/StakedEXASummary/index.tsx index 786f566b7..5f168cbdb 100644 --- a/components/staking/StakedEXASummary/index.tsx +++ b/components/staking/StakedEXASummary/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useMemo } from 'react'; +import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { AvatarGroup, Avatar, Box, Skeleton, Typography, Tooltip } from '@mui/material'; import { useTranslation } from 'react-i18next'; @@ -9,12 +9,17 @@ import useAccountData from 'hooks/useAccountData'; import formatNumber from 'utils/formatNumber'; import { calculateStakingRewardsAPR, calculateTotalStakingRewardsAPR } from 'utils/calculateStakingAPR'; import { InfoOutlined } from '@mui/icons-material'; +import getStakingSharedFees from 'queries/getStakingSharedFees'; +import useGraphClient from 'hooks/useGraphClient'; +import { formatEther, getAddress } from 'viem'; +import getVouchersPrice from 'utils/getVouchersPrice'; function StakedEXASummary() { const { t } = useTranslation(); const { totalAssets, rewardsTokens, rewards } = useStakeEXA(); const exaPrice = useEXAPrice(); const { accountData } = useAccountData(); + const request = useGraphClient(); const rewardsAPR = useMemo(() => { return calculateStakingRewardsAPR(totalAssets, rewards, accountData, exaPrice); @@ -24,6 +29,53 @@ function StakedEXASummary() { return calculateTotalStakingRewardsAPR(rewardsAPR); }, [rewardsAPR]); + const [totalFees, setTotalFees] = useState(undefined); + const [loading, setLoading] = useState(false); + const fetchFees = useCallback(async () => { + interface StakingSharedFee { + id: string; + amount: string; + } + + setLoading(true); + try { + const response = await request<{ stakingSharedFees: StakingSharedFee[] }>(getStakingSharedFees(), 'exactly'); + + if (!response) { + setLoading(false); + return; + } + + const data = response.stakingSharedFees; + + let totalUSD = 0n; + + data.forEach(({ id, amount }) => { + if (!accountData || !rewards) return; + const reward = getAddress(id); + + const rr = accountData.find((a) => a.asset === reward || a.market === reward); + const symbol = rewards.find((r) => r.reward === reward)?.symbol; + + const decimals = rr?.decimals || 18; + const decimalWAD = 10n ** BigInt(decimals); + const usdPrice = getVouchersPrice(accountData, symbol || ''); + + const feeUSD = (BigInt(amount) * usdPrice) / decimalWAD; + totalUSD += feeUSD; + }); + setTotalFees(totalUSD); + } catch (error) { + setTotalFees(undefined); + } finally { + setLoading(false); + } + }, [accountData, request, rewards]); + + useEffect(() => { + fetchFees(); + }, [fetchFees]); + return ( @@ -87,6 +139,21 @@ function StakedEXASummary() { )} + + {t('Total Fees Shared')} + + {loading || totalFees === undefined ? ( + + ) : ( + + ${formatNumber(formatEther(totalFees), 'USD')} + + )} + + {t('USD')} + + + ); } diff --git a/components/staking/StakingProgress/index.tsx b/components/staking/StakingProgress/index.tsx index 741fb65f9..26e546657 100644 --- a/components/staking/StakingProgress/index.tsx +++ b/components/staking/StakingProgress/index.tsx @@ -249,7 +249,7 @@ const StakingProgressBar: FC = ({ - +