diff --git a/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx b/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx
index 5167d68e727..9ceacd10cab 100644
--- a/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx
+++ b/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx
@@ -1,11 +1,11 @@
-import { Button, Flex, List } from '@chakra-ui/react'
+import { Button, Flex, List, Stat, Tag } from '@chakra-ui/react'
import { DefiAction } from 'features/defi/contexts/DefiManagerProvider/DefiCommon'
import { useCallback, useMemo } from 'react'
import { useTranslate } from 'react-polyglot'
import { useHistory } from 'react-router'
import { Amount } from 'components/Amount/Amount'
import { AssetCell } from 'components/StakingVaults/Cells'
-import { RawText } from 'components/Text'
+import { RawText, Text } from 'components/Text'
import { bn, bnOrZero } from 'lib/bignumber/bignumber'
import type {
LpEarnOpportunityType,
@@ -50,6 +50,7 @@ export const OpportunityRow: React.FC<
type,
apy,
icons,
+ expired,
} = opportunity
const translate = useTranslate()
const history = useHistory()
@@ -104,10 +105,19 @@ export const OpportunityRow: React.FC<
const subTextJoined = useMemo(() => {
const aprElement =
+ const expiredElement = (
+
+
+
+
+
+ )
+
const hasBalanceElement = {group ?? type}
const subText = [
- aprElement,
+ ...(expired ? [] : [aprElement]),
...(!bnOrZero(cryptoAmountBaseUnit).isZero() ? [hasBalanceElement] : []),
+ ...(expired ? [expiredElement] : []),
]
return subText.map((element, index) => (
@@ -116,7 +126,7 @@ export const OpportunityRow: React.FC<
{element}
))
- }, [apy, cryptoAmountBaseUnit, group, type])
+ }, [apy, cryptoAmountBaseUnit, expired, group, type])
const renderNestedAssets = useMemo(() => {
return (