diff --git a/components/APRWithBreakdown/index.tsx b/components/APRWithBreakdown/index.tsx index 5e5a3f263..fdbdce6eb 100644 --- a/components/APRWithBreakdown/index.tsx +++ b/components/APRWithBreakdown/index.tsx @@ -3,6 +3,7 @@ import React, { FC, PropsWithChildren, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { toPercentage } from 'utils/utils'; import MultiRewardPill from 'components/markets/MultiRewardPill'; +import numbers from 'config/numbers.json'; type APR = { apr?: number; @@ -19,6 +20,8 @@ type APRWithBreakdownProps = { rewardAPR?: string; }; +const { minRewardsRate } = numbers; + const APRWithBreakdown: FC = ({ directionMobile = 'row-reverse', directionDesktop = 'row', @@ -29,9 +32,11 @@ const APRWithBreakdown: FC = ({ natives = [], rewardAPR, }) => { + const filteredRewards = useMemo(() => rewards.filter(({ apr }) => (apr ? apr >= minRewardsRate : 0)), [rewards]); + const symbols = useMemo( - () => [...rewards.map(({ symbol }) => symbol), ...natives.map(({ symbol }) => symbol)], - [natives, rewards], + () => [...filteredRewards.map(({ symbol }) => symbol), ...natives.map(({ symbol }) => symbol)], + [natives, filteredRewards], ); return ( @@ -60,14 +65,15 @@ const APRWithBreakdown: FC = ({ const APRBreakdown: FC> = ({ markets, rewards = [], natives = [] }) => { const { t } = useTranslation(); + const filteredRewards = useMemo(() => rewards.filter(({ apr }) => (apr ? apr >= minRewardsRate : 0)), [rewards]); return ( {Boolean(markets.length) && } - {Boolean(rewards.length) && ( + {Boolean(filteredRewards.length) && ( <> {Boolean(markets.length) && } - + )} {Boolean(natives.length) && (