feat: partial yield.xyz toggle

.env.production

@@ -1,8 +1,9 @@
-# feature flags
 VITE_FEATURE_MIXPANEL=true
 VITE_ENABLE_HYPELAB=true
 VITE_FEATURE_ADDRESS_BOOK=true
 VITE_FEATURE_THORCHAIN_TCY_ACTIVITY=false
 
 # mixpanel
 VITE_MIXPANEL_TOKEN=9d304465fc72224aead9e027e7c24356
+VITE_FEATURE_YIELD_XYZ=true
+VITE_FEATURE_YIELD_MULTI_ACCOUNT=true

src/Routes/RoutesCommon.tsx

@@ -141,6 +141,16 @@ const YieldsPage = makeSuspenseful(
   true,
 )
 
+const YieldDetailPage = makeSuspenseful(
+  lazy(() =>
+    import('@/pages/Yields/YieldDetailPage').then(({ YieldDetailPage }) => ({
+      default: YieldDetailPage,
+    })),
+  ),
+  {},
+  true,
+)
+
 const WalletConnectDeepLink = makeSuspenseful(
   lazy(() =>
     import('@/pages/WalletConnectDeepLink/WalletConnectDeepLink').then(
@@ -241,6 +251,12 @@ export const routes: Route[] = [
     mobileNav: false,
     disable: !getConfig().VITE_FEATURE_MARKETS,
   },
+  {
+    path: '/yield/:yieldId/*',
+    main: YieldDetailPage,
+    hide: true,
+    disable: !getConfig().VITE_FEATURE_YIELD_XYZ,
+  },
   {
     path: '/yields/*',
     label: 'navBar.yields',

src/components/EarnDashboard/components/PositionDetails/StakingPositionsByProvider.tsx

@@ -158,7 +158,7 @@ export const StakingPositionsByProvider: React.FC<StakingPositionsByProviderProp
         if (walletDrawer.isOpen) {
           walletDrawer.close()
         }
-        navigate(`/yields/${opportunity.yieldId}`)
+        navigate(`/yield/${opportunity.yieldId}`)
         return
       }
 

src/components/Layout/Header/Header.tsx

@@ -73,6 +73,7 @@ export const Header = memo(() => {
   const translate = useTranslate()
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`)
   const isYieldXyzEnabled = useFeatureFlag('YieldXyz')
+  const isYieldsPageEnabled = useFeatureFlag('YieldsPage')
 
   const navigate = useNavigate()
   const {
@@ -116,14 +117,14 @@ export const Header = memo(() => {
   const hasWallet = Boolean(walletInfo?.deviceId)
   const earnSubMenuItems = useMemo(
     () => [
-      ...(isYieldXyzEnabled
+      ...(isYieldsPageEnabled
         ? [{ label: 'navBar.yields', path: '/yields', icon: TbTrendingUp, isNew: true }]
         : []),
       { label: 'navBar.tcy', path: '/tcy', icon: TCYIcon },
       { label: 'navBar.pools', path: '/pools', icon: TbPool },
       { label: 'navBar.lending', path: '/lending', icon: TbBuildingBank },
     ],
-    [isYieldXyzEnabled],
+    [isYieldsPageEnabled],
   )
 
   /**
@@ -183,7 +184,7 @@ export const Header = memo(() => {
               <NavigationDropdown
                 label='defi.earn'
                 items={earnSubMenuItems}
-                defaultPath={isYieldXyzEnabled ? '/yields' : '/tcy'}
+                defaultPath={isYieldXyzEnabled && isYieldsPageEnabled ? '/yields' : '/tcy'}
               />
               <Link
                 as={ReactRouterLink}

src/lib/yieldxyz/providerDescriptions.ts

@@ -0,0 +1,47 @@
+export const PROVIDER_DESCRIPTIONS: Record<
+  string,
+  {
+    description: string
+  }
+> = {
+  morpho: {
+    description:
+      'Morpho is a money market and vault infrastructure protocol, multiply audited by top-tier security firms, live since 2022, with $2.5M in bug bounty incentives.',
+  },
+  'morpho-aave': {
+    description:
+      'Morpho is a money market and vault infrastructure protocol, multiply audited by top-tier security firms, live since 2022, with $2.5M in bug bounty incentives.',
+  },
+  'morpho-compound': {
+    description:
+      'Morpho is a money market and vault infrastructure protocol, multiply audited by top-tier security firms, live since 2022, with $2.5M in bug bounty incentives.',
+  },
+  lido: {
+    description:
+      'Lido is a liquid staking protocol that lets users stake ETH while keeping liquidity via stETH. Multiply audited by top-tier security firms, live since 2020, with $2M in bug bounty incentives.',
+  },
+  aave: {
+    description:
+      'Aave is a multi-chain lending marketplace enabling users to lend, borrow, and build advanced strategies. Multiply audited by top-tier security firms, live since 2017, with $1M in bug bounty incentives.',
+  },
+  compound: {
+    description:
+      'Compound is a foundational DeFi money market with algorithmic interest rates. Multiply audited by top-tier security firms, live since 2018, with $1M in bug bounty incentives.',
+  },
+  kamino: {
+    description:
+      'Kamino is a Solana DeFi suite unifying lending, liquidity, and leverage into one platform. Runs an Immunefi program with up to $1.5M maximum bounty.',
+  },
+  fluid: {
+    description:
+      'Fluid is a liquidity layer built by the Instadapp team, connecting lending, DEX, borrowing, and stablecoin markets into one efficient system. Multiply audited by top-tier security firms, live since 2024, with $0.5M in bug bounty incentives.',
+  },
+  venus: {
+    description:
+      'Venus is a lending and borrowing protocol focused on BNB Chain. Emphasizes security through third-party audits and an ongoing bug bounty program.',
+  },
+  gearbox: {
+    description:
+      'Gearbox is a composable leverage protocol enabling credit accounts that plug into DeFi strategies. Multiply audited by top-tier security firms, live since 2021, with $0.2M in bug bounty incentives.',
+  },
+}

src/pages/Yields/YieldDetail.tsx

@@ -68,16 +68,20 @@ export const YieldDetail = memo(() => {
     selectMarketDataByAssetIdUserCurrency(state, inputTokenAssetId),
   )
 
-  const handleBack = useCallback(() => navigate('/yields'), [navigate])
+  const isYieldMultiAccountEnabled = useFeatureFlag('YieldMultiAccount')
+  const isYieldsPageEnabled = useFeatureFlag('YieldsPage')
+
+  const handleBack = useCallback(
+    () => (isYieldsPageEnabled ? navigate('/yields') : navigate(-1)),
+    [navigate, isYieldsPageEnabled],
+  )
 
   const availableAccounts = useAppSelector(state =>
     selectorAssetId
       ? selectPortfolioAccountIdsByAssetIdFilter(state, { assetId: selectorAssetId })
       : [],
   )
 
-  const isYieldMultiAccountEnabled = useFeatureFlag('YieldMultiAccount')
-
   const { selectedAccountId, handleAccountChange } = useYieldAccountSync({
     availableAccountIds: availableAccounts,
   })
@@ -158,7 +162,7 @@ export const YieldDetail = memo(() => {
     return getYieldDisplayName(yieldItem)
   }, [yieldItem, translate])
 
-  const userBalances = useMemo(() => {
+  const userBalances = (() => {
     if (!balances) return { userCurrency: '0', crypto: '0' }
 
     const balancesByType = selectedValidatorAddress
@@ -186,44 +190,42 @@ export const YieldDetail = memo(() => {
       userCurrency: totalUsd.times(userCurrencyToUsdRate).toFixed(),
       crypto: totalCrypto.toFixed(),
     }
-  }, [balances, selectedValidatorAddress, userCurrencyToUsdRate])
+  })()
 
   useEffect(() => {
-    if (!yieldId) navigate('/yields')
-  }, [yieldId, navigate])
+    if (!yieldId) navigate(isYieldsPageEnabled ? '/yields' : '/')
+  }, [yieldId, navigate, isYieldsPageEnabled])
 
   const isModalOpen = searchParams.get('modal') === 'yield'
 
-  const loadingElement = useMemo(
-    () => (
-      <Container maxW={{ base: 'full', md: 'container.md' }} py={20}>
-        <Flex direction='column' gap={8} alignItems='center'>
-          <Text color='text.subtle' fontSize='lg'>
-            {translate('common.loadingText')}
-          </Text>
-        </Flex>
-      </Container>
-    ),
-    [translate],
+  const loadingElement = (
+    <Container maxW={{ base: 'full', md: 'container.md' }} py={20}>
+      <Flex direction='column' gap={8} alignItems='center'>
+        <Text color='text.subtle' fontSize='lg'>
+          {translate('common.loadingText')}
+        </Text>
+      </Flex>
+    </Container>
   )
 
-  const errorElement = useMemo(
-    () => (
-      <Container maxW={{ base: 'full', md: 'container.md' }} py={20}>
-        <Box textAlign='center' py={16} bg='background.surface.raised.base' borderRadius='2xl'>
-          <Heading as='h2' size='xl' mb={4}>
-            {translate('common.error')}
-          </Heading>
-          <Text color='text.subtle'>
-            {error ? String(error) : translate('common.noResultsFound')}
-          </Text>
-          <Button mt={8} onClick={() => navigate('/yields')} size='lg'>
-            {translate('common.back')}
-          </Button>
-        </Box>
-      </Container>
-    ),
-    [error, navigate, translate],
+  const errorElement = (
+    <Container maxW={{ base: 'full', md: 'container.md' }} py={20}>
+      <Box textAlign='center' py={16} bg='background.surface.raised.base' borderRadius='2xl'>
+        <Heading as='h2' size='xl' mb={4}>
+          {translate('common.error')}
+        </Heading>
+        <Text color='text.subtle'>
+          {error ? String(error) : translate('common.noResultsFound')}
+        </Text>
+        <Button
+          mt={8}
+          onClick={() => (isYieldsPageEnabled ? navigate('/yields') : navigate(-1))}
+          size='lg'
+        >
+          {translate('common.back')}
+        </Button>
+      </Box>
+    </Container>
   )
 
   if (isLoading) return loadingElement

src/pages/Yields/YieldDetailPage.tsx

@@ -0,0 +1,13 @@
+import { memo } from 'react'
+import { Route, Routes } from 'react-router-dom'
+
+import { YieldAccountProvider } from '@/pages/Yields/YieldAccountContext'
+import { YieldDetailRouter } from '@/pages/Yields/Yields'
+
+export const YieldDetailPage = memo(() => (
+  <YieldAccountProvider>
+    <Routes>
+      <Route path='*' element={<YieldDetailRouter />} />
+    </Routes>
+  </YieldAccountProvider>
+))

src/pages/Yields/Yields.tsx

@@ -17,3 +17,11 @@ export const Yields = memo(() => (
     </Routes>
   </YieldAccountProvider>
 ))
+
+export const YieldDetailRouter = memo(() => (
+  <Routes>
+    <Route path='enter' element={<YieldDetail />} />
+    <Route path='exit' element={<YieldDetail />} />
+    <Route index element={<YieldDetail />} />
+  </Routes>
+))

src/pages/Yields/components/YieldActivePositions.tsx

@@ -176,7 +176,7 @@ export const YieldActivePositions = memo(
         const params = new URLSearchParams()
         params.set('accountId', accountId)
         if (validatorAddress) params.set('validator', validatorAddress)
-        navigate(`/yields/${yieldId}?${params.toString()}`)
+        navigate(`/yield/${yieldId}?${params.toString()}`)
       },
       [navigate],
     )

src/pages/Yields/components/YieldItem.tsx

@@ -78,7 +78,7 @@ export const YieldItem = memo(
     const isSingle = data.type === 'single'
     const isGroup = data.type === 'group'
 
-    const stats = useMemo(() => {
+    const stats = (() => {
       if (isSingle) {
         const y = data.yieldItem
         return {
@@ -110,7 +110,7 @@ export const YieldItem = memo(
         name: data.assetName,
         canEnter: true,
       }
-    }, [data, isSingle, yieldProviders])
+    })()
 
     const apyFormatted = `${(stats.apy * 100).toFixed(2)}%`
     const tvlUserCurrency = bnOrZero(stats.tvlUsd).times(userCurrencyToUsdRate).toFixed()
@@ -126,15 +126,15 @@ export const YieldItem = memo(
         if (stats.canEnter && onEnter) {
           onEnter(data.yieldItem)
         } else {
-          navigate(`/yields/${data.yieldItem.id}`)
+          navigate(`/yield/${data.yieldItem.id}`)
         }
       } else {
         const suffix = searchString ? `?${searchString}` : ''
         navigate(`/yields/asset/${encodeURIComponent(data.assetSymbol)}${suffix}`)
       }
     }, [data, isSingle, navigate, onEnter, searchString, stats.canEnter])
 
-    const iconElement = useMemo(() => {
+    const iconElement = (() => {
       if (isSingle) {
         const iconSource = resolveYieldInputAssetIcon(data.yieldItem)
         const size = variant === 'card' ? 'md' : 'sm'
@@ -148,7 +148,7 @@ export const YieldItem = memo(
         return <AssetIcon assetId={data.assetId} size={size} showNetworkIcon={false} />
       }
       return <AssetIcon src={data.assetIcon} size={size} />
-    }, [data, isSingle, variant])
+    })()
 
     const subtitle = isSingle
       ? data.providerName ?? data.yieldItem.providerId
@@ -197,7 +197,7 @@ export const YieldItem = memo(
 
     const showAvailable = isSingle && hasAvailable && !hasBalance
 
-    const cardStatElement = useMemo(() => {
+    const cardStatElement = (() => {
       if (hasBalance) {
         return (
           <>
@@ -232,24 +232,17 @@ export const YieldItem = memo(
           </StatNumber>
         </>
       )
-    }, [
-      hasBalance,
-      showAvailable,
-      userBalanceUserCurrency,
-      availableBalanceUserCurrency,
-      tvlUserCurrency,
-      translate,
-    ])
+    })()
 
     const showAvailableInRow = isSingle && hasAvailable
 
-    const mobileBalanceLabelKey = useMemo(() => {
+    const mobileBalanceLabelKey = (() => {
       if (hasBalance) return 'yieldXYZ.balance'
       if (showAvailable) return 'common.available'
       return 'yieldXYZ.balance'
-    }, [hasBalance, showAvailable])
+    })()
 
-    const mobileBalanceElement = useMemo(() => {
+    const mobileBalanceElement = (() => {
       if (hasBalance) {
         return (
           <Text fontWeight='medium' color='blue.400'>
@@ -269,9 +262,9 @@ export const YieldItem = memo(
           —
         </Text>
       )
-    }, [hasBalance, showAvailable, userBalanceUserCurrency, availableBalanceUserCurrency])
+    })()
 
-    const rowBalanceElement = useMemo(() => {
+    const rowBalanceElement = (() => {
       if (hasBalance && showAvailableInRow) {
         return (
           <Box>
@@ -318,13 +311,7 @@ export const YieldItem = memo(
           —
         </Text>
       )
-    }, [
-      hasBalance,
-      showAvailableInRow,
-      userBalanceUserCurrency,
-      availableBalanceUserCurrency,
-      translate,
-    ])
+    })()
 
     if (variant === 'mobile') {
       return (