From 6f044fce8417c6a3ea117410075232b72dccb67d Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Fri, 24 Feb 2023 10:25:40 -0700
Subject: [PATCH] fix: idle opportunities DeFi modal title

---
 .../components/IdleManager/Claim/IdleClaim.tsx  | 17 ++++++++++++++---
 .../IdleManager/Deposit/IdleDeposit.tsx         |  4 ++--
 .../IdleManager/Withdraw/IdleWithdraw.tsx       |  4 ++--
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/features/defi/providers/idle/components/IdleManager/Claim/IdleClaim.tsx b/src/features/defi/providers/idle/components/IdleManager/Claim/IdleClaim.tsx
index e5a9463398f..3ee4ad67574 100644
--- a/src/features/defi/providers/idle/components/IdleManager/Claim/IdleClaim.tsx
+++ b/src/features/defi/providers/idle/components/IdleManager/Claim/IdleClaim.tsx
@@ -15,7 +15,12 @@ import { CircularProgress } from 'components/CircularProgress/CircularProgress'
 import type { DefiStepProps } from 'components/DeFi/components/Steps'
 import { Steps } from 'components/DeFi/components/Steps'
 import { useBrowserRouter } from 'hooks/useBrowserRouter/useBrowserRouter'
-import { selectAssetById, selectMarketDataById } from 'state/slices/selectors'
+import type { StakingId } from 'state/slices/opportunitiesSlice/types'
+import {
+  selectAssetById,
+  selectMarketDataById,
+  selectStakingOpportunitiesById,
+} from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
 import { ClaimContext } from './ClaimContext'
@@ -50,6 +55,12 @@ export const IdleClaim: React.FC<IdleClaimProps> = ({ accountId }) => {
 
   const marketData = useAppSelector(state => selectMarketDataById(state, underlyingAssetId))
 
+  const opportunitiesMetadata = useAppSelector(state => selectStakingOpportunitiesById(state))
+  const opportunityMetadata = useMemo(
+    () => opportunitiesMetadata[assetId as StakingId],
+    [assetId, opportunitiesMetadata],
+  )
+
   // user info
   const handleBack = useCallback(() => {
     history.push({
@@ -78,7 +89,7 @@ export const IdleClaim: React.FC<IdleClaimProps> = ({ accountId }) => {
     // We only need this to update on symbol change
   }, [accountId, translate, underlyingAsset.symbol])
 
-  if (!asset || !marketData)
+  if (!asset || !marketData || !opportunityMetadata)
     return (
       <Center minW='350px' minH='350px'>
         <CircularProgress />
@@ -90,7 +101,7 @@ export const IdleClaim: React.FC<IdleClaimProps> = ({ accountId }) => {
       <DefiModalContent>
         <DefiModalHeader
           title={translate('modals.claim.claimFrom', {
-            opportunity: `${underlyingAsset.symbol} Vault`,
+            opportunity: opportunityMetadata.name,
           })}
           onBack={handleBack}
         />
diff --git a/src/features/defi/providers/idle/components/IdleManager/Deposit/IdleDeposit.tsx b/src/features/defi/providers/idle/components/IdleManager/Deposit/IdleDeposit.tsx
index 1ee520700bc..4e601597f22 100644
--- a/src/features/defi/providers/idle/components/IdleManager/Deposit/IdleDeposit.tsx
+++ b/src/features/defi/providers/idle/components/IdleManager/Deposit/IdleDeposit.tsx
@@ -142,7 +142,7 @@ export const IdleDeposit: React.FC<IdleDepositProps> = ({
 
   const value = useMemo(() => ({ state, dispatch }), [state])
 
-  if (loading || !asset || !marketData) {
+  if (loading || !asset || !marketData || !opportunityData) {
     return (
       <Center minW='350px' minH='350px'>
         <CircularProgress />
@@ -154,7 +154,7 @@ export const IdleDeposit: React.FC<IdleDepositProps> = ({
     <DepositContext.Provider value={value}>
       <DefiModalContent>
         <DefiModalHeader
-          title={translate('modals.deposit.depositInto', { opportunity: `${asset.symbol} Vault` })}
+          title={translate('modals.deposit.depositInto', { opportunity: opportunityData.name })}
           onBack={handleBack}
         />
         <Steps steps={StepConfig} />
diff --git a/src/features/defi/providers/idle/components/IdleManager/Withdraw/IdleWithdraw.tsx b/src/features/defi/providers/idle/components/IdleManager/Withdraw/IdleWithdraw.tsx
index bb46d46a49f..ee3bd49b3ca 100644
--- a/src/features/defi/providers/idle/components/IdleManager/Withdraw/IdleWithdraw.tsx
+++ b/src/features/defi/providers/idle/components/IdleManager/Withdraw/IdleWithdraw.tsx
@@ -134,7 +134,7 @@ export const IdleWithdraw: React.FC<WithdrawProps> = ({ accountId }) => {
 
   const value = useMemo(() => ({ state, dispatch }), [state])
 
-  if (!asset || !marketData)
+  if (!asset || !marketData || !opportunityData)
     return (
       <Center minW='350px' minH='350px'>
         <CircularProgress />
@@ -146,7 +146,7 @@ export const IdleWithdraw: React.FC<WithdrawProps> = ({ accountId }) => {
       <DefiModalContent>
         <DefiModalHeader
           title={translate('modals.withdraw.withdrawFrom', {
-            opportunity: `${underlyingAsset.symbol} Vault`,
+            opportunity: opportunityData.name,
           })}
           onBack={handleBack}
         />