From ef5c501d18b27a4ab5fc4c5eafbd8dc2d9544b24 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 25 Jan 2024 16:33:17 +0100
Subject: [PATCH 1/2] feat: hide APY and show expired tag for expired
 opportunities

---
 src/assets/translations/en/main.json                     | 1 +
 .../components/ProviderDetails/OpportunityRow.tsx        | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index 110d7cea34a..f7f7ea59e6e 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -15,6 +15,7 @@
     "continue": "Continue",
     "reward": "Reward",
     "claimable": "Claimable",
+    "expired": "Expired",
     "approve": "Approve",
     "confirm": "Confirm",
     "seeDetails": "See details",
diff --git a/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx b/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx
index 5167d68e727..f31edcd8a15 100644
--- a/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx
+++ b/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, List } from '@chakra-ui/react'
+import { Button, Flex, List, Tag } from '@chakra-ui/react'
 import { DefiAction } from 'features/defi/contexts/DefiManagerProvider/DefiCommon'
 import { useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
@@ -50,6 +50,7 @@ export const OpportunityRow: React.FC<
     type,
     apy,
     icons,
+    expired,
   } = opportunity
   const translate = useTranslate()
   const history = useHistory()
@@ -104,10 +105,12 @@ export const OpportunityRow: React.FC<
 
   const subTextJoined = useMemo(() => {
     const aprElement = <Amount.Percent value={bnOrZero(apy).toString()} suffix='APY' autoColor />
+    const expiredElement = <Tag colorScheme='red'>{translate('common.expired')}</Tag>
     const hasBalanceElement = <RawText textTransform='capitalize'>{group ?? type}</RawText>
     const subText = [
-      aprElement,
+      ...(expired ? [] : [aprElement]),
       ...(!bnOrZero(cryptoAmountBaseUnit).isZero() ? [hasBalanceElement] : []),
+      ...(expired ? [expiredElement] : []),
     ]
 
     return subText.map((element, index) => (
@@ -116,7 +119,7 @@ export const OpportunityRow: React.FC<
         {element}
       </Flex>
     ))
-  }, [apy, cryptoAmountBaseUnit, group, type])
+  }, [apy, cryptoAmountBaseUnit, expired, group, translate, type])
 
   const renderNestedAssets = useMemo(() => {
     return (

From 0d71ba260500e1ef5bc60789f43ceab70024b07e Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 25 Jan 2024 16:40:20 +0100
Subject: [PATCH 2/2] feat: reuse "Ended" tag

---
 src/assets/translations/en/main.json              |  1 -
 .../components/ProviderDetails/OpportunityRow.tsx | 15 +++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index f7f7ea59e6e..110d7cea34a 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -15,7 +15,6 @@
     "continue": "Continue",
     "reward": "Reward",
     "claimable": "Claimable",
-    "expired": "Expired",
     "approve": "Approve",
     "confirm": "Confirm",
     "seeDetails": "See details",
diff --git a/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx b/src/components/EarnDashboard/components/ProviderDetails/OpportunityRow.tsx
index f31edcd8a15..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, Tag } 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,
@@ -105,7 +105,14 @@ export const OpportunityRow: React.FC<
 
   const subTextJoined = useMemo(() => {
     const aprElement = <Amount.Percent value={bnOrZero(apy).toString()} suffix='APY' autoColor />
-    const expiredElement = <Tag colorScheme='red'>{translate('common.expired')}</Tag>
+    const expiredElement = (
+      <Stat fontWeight='medium'>
+        <Tag colorScheme='yellow'>
+          <Text translation='defi.ended' />
+        </Tag>
+      </Stat>
+    )
+
     const hasBalanceElement = <RawText textTransform='capitalize'>{group ?? type}</RawText>
     const subText = [
       ...(expired ? [] : [aprElement]),
@@ -119,7 +126,7 @@ export const OpportunityRow: React.FC<
         {element}
       </Flex>
     ))
-  }, [apy, cryptoAmountBaseUnit, expired, group, translate, type])
+  }, [apy, cryptoAmountBaseUnit, expired, group, type])
 
   const renderNestedAssets = useMemo(() => {
     return (