feat: yield.xyz POC

.env

@@ -306,3 +306,8 @@ VITE_HYPEREVM_NODE_URL=https://rpc.hyperliquid.xyz/evm
 VITE_FEATURE_HYPEREVM=true
 VITE_FEATURE_NEAR=false
 VITE_FEATURE_KATANA=false
+
+# Yield.xyz Feature Flag
+VITE_FEATURE_YIELD_XYZ=false
+VITE_YIELD_XYZ_API_KEY=06903960-e442-4870-81eb-03ff3ad4c035
+VITE_FEATURE_YIELD_MULTI_ACCOUNT=false

.env.development

@@ -96,3 +96,4 @@ VITE_FEATURE_CETUS_SWAP=true
 VITE_FEATURE_AVNU_SWAP=true
 VITE_FEATURE_NEAR=true
 VITE_FEATURE_KATANA=true
+VITE_FEATURE_YIELD_XYZ=true

headers/csps/index.ts

@@ -74,6 +74,7 @@ import { csp as metamask } from './wallets/metamask'
 import { csp as walletConnect } from './wallets/walletConnect'
 import { csp as walletMigration } from './wallets/walletMigration'
 import { csp as webflow } from './webflow'
+import { csp as yieldxyz } from './yieldxyz'
 
 export const csps = [
   base,
@@ -152,4 +153,5 @@ export const csps = [
   relay,
   railway,
   discord,
+  yieldxyz,
 ]

headers/csps/yieldxyz.ts

@@ -0,0 +1,6 @@
+import type { Csp } from '../types'
+
+export const csp: Csp = {
+  'connect-src': ['https://api.yield.xyz'],
+  'img-src': ['https://assets.stakek.it'],
+}

src/Routes/RoutesCommon.tsx

@@ -128,6 +128,16 @@ const MarketsPage = makeSuspenseful(
   true,
 )
 
+const YieldsPage = makeSuspenseful(
+  lazy(() =>
+    import('@/pages/Yields/Yields').then(({ Yields }) => ({
+      default: Yields,
+    })),
+  ),
+  {},
+  true,
+)
+
 const WalletConnectDeepLink = makeSuspenseful(
   lazy(() =>
     import('@/pages/WalletConnectDeepLink/WalletConnectDeepLink').then(
@@ -228,6 +238,16 @@ export const routes: Route[] = [
     mobileNav: false,
     disable: !getConfig().VITE_FEATURE_MARKETS,
   },
+  {
+    path: '/yields/*',
+    label: 'navBar.yields',
+    icon: <TbGraph />,
+    main: YieldsPage,
+    category: RouteCategory.Featured,
+    priority: 3,
+    mobileNav: false,
+    disable: !getConfig().VITE_FEATURE_YIELD_XYZ,
+  },
   {
     path: '/ramp/*',
     label: 'navBar.buyCrypto',

src/assets/translations/en/main.json

@@ -51,6 +51,7 @@
     "withdraw": "Withdraw",
     "withdrawal": "Withdrawal",
     "claim": "Claim",
+    "claiming": "Claiming...",
     "withdrawAndClaim": "Withdraw & Claim",
     "overview": "Overview",
     "connectWallet": "Connect Wallet",
@@ -345,6 +346,7 @@
     }
   },
   "defi": {
+    "yourBalance": "Your Balance",
     "modals": {
       "learnMore": {
         "next": "Next",
@@ -516,7 +518,8 @@
     "ecosystem": "Ecosystem",
     "markets": "Markets",
     "tokens": "Tokens",
-    "swap": "Swap"
+    "swap": "Swap",
+    "yields": "Yields"
   },
   "shapeShiftMenu": {
     "products": "Products",
@@ -2661,5 +2664,149 @@
         "description": "Your reward of %{amountAndSymbol} is complete."
       }
     }
+  },
+  "yieldXYZ": {
+    "pageTitle": "Yields",
+    "pageSubtitle": "Discover and manage yield opportunities across multiple chains",
+    "enter": "Enter",
+    "exit": "Exit",
+    "yield": "Yield",
+    "apy": "APY",
+    "apr": "APR",
+    "tvl": "TVL",
+    "asset": "Asset",
+    "provider": "Provider",
+    "balance": "Balance",
+    "yourBalance": "Your Balance",
+    "noYields": "No yield opportunities available",
+    "connectWallet": "Connect a wallet to view yields",
+    "stats": "Stats",
+    "minDeposit": "Min Deposit",
+    "mechanics": "Mechanics",
+    "rewardSchedule": "Reward Schedule",
+    "gasToken": "Gas Token",
+    "transactionSteps": "Transaction Steps",
+    "stepApprove": "Approve",
+    "stepApproveDesc": "Approve the token for deposit",
+    "stepDeposit": "Deposit",
+    "stepDepositDesc": "Deposit your assets into the strategy",
+    "stepComplete": "Complete",
+    "stepCompleteDesc": "Your deposit is complete and earning yield",
+    "gasFeeNote": "Gas fees are paid in the native token of the network",
+    "yourInfo": "Your Position",
+    "activeBalance": "Active Balance",
+    "entering": "Entering",
+    "withdrawable": "Withdrawable",
+    "locked": "Locked",
+    "enterDisabled": "Enter is currently disabled for this yield opportunity",
+    "exitDisabled": "Exit is currently disabled for this yield opportunity",
+    "type": "Type",
+    "inputToken": "Input Token",
+    "netApy": "Net APY",
+    "grossApy": "Gross APY",
+    "totalValue": "Total Value",
+    "myPosition": "My Position",
+    "myValidatorPosition": "My %{validator} Position",
+    "vault": "Vault",
+    "lending": "Lending",
+    "yourDeposits": "Your Deposits",
+    "positions": "Positions",
+    "opportunities": "Opportunities",
+    "yields": "Yields",
+    "earnUpTo": "You could earn up to %{apy}% on your balance",
+    "startEarning": "Start earning",
+    "maxApy": "Max APY",
+    "validator": "Validator",
+    "validatorBreakdown": "Validator Breakdown",
+    "staked": "Staked",
+    "exiting": "Exiting",
+    "claimable": "Claimable",
+    "loadingQuote": "Loading Quote...",
+    "depositing": "Depositing...",
+    "withdrawing": "Withdrawing...",
+    "selectValidator": "Select Validator",
+    "allValidators": "All Validators",
+    "myValidators": "My Validators",
+    "noValidatorsFound": "No validators found",
+    "preferred": "Preferred",
+    "pending": "Pending",
+    "ready": "Ready",
+    "highestApy": "Highest APY",
+    "lowestApy": "Lowest APY",
+    "highestTvl": "Highest TVL",
+    "lowestTvl": "Lowest TVL",
+    "nameAZ": "Name (A-Z)",
+    "nameZA": "Name (Z-A)",
+    "allNetworks": "All Networks",
+    "allProviders": "All Providers",
+    "showAll": "Show All",
+    "searchValidator": "Search for validator",
+    "depositYourToken": "Deposit your %{symbol} to start earning yield securely.",
+    "noActiveValidators": "You don't have any active validators yet.",
+    "confirming": "Confirming...",
+    "success": "Success!",
+    "transactions": "Transactions",
+    "currentApy": "Current APY",
+    "estYearlyEarnings": "Est. Yearly Earnings",
+    "allPositions": "All Positions",
+    "switch": "Switch",
+    "supplySymbol": "Supply %{symbol}",
+    "withdrawSymbol": "Withdraw %{symbol}",
+    "claimSymbol": "Claim %{symbol}",
+    "noActivePositions": "You do not have any active yield positions.",
+    "connectWalletPositions": "Connect a wallet to view your active yield positions.",
+    "view": "View",
+    "close": "Close",
+    "estEarnings": "Est. Earnings",
+    "network": "Network",
+    "market": "market",
+    "markets": "markets",
+    "protocol": "protocol",
+    "protocols": "protocols",
+    "chain": "chain",
+    "chains": "chains",
+    "reward": "Reward",
+    "assetYields": "%{asset} Yields",
+    "opportunitiesAvailable": "%{count} opportunities available",
+    "noYieldsMatchingFilters": "No yields found matching filters.",
+    "activeDeposits": "Active Deposits",
+    "acrossPositions": "Across %{count} positions",
+    "availableToEarn": "Available to Earn",
+    "idleAssetsEarning": "Idle assets that could be earning up to %{apy}% APY",
+    "potentialEarnings": "Potential Earnings",
+    "perYear": "/yr",
+    "earn": "Earn",
+    "myBalance": "My Balance",
+    "providers": "Providers",
+    "deposit": "Deposit",
+    "withdraw": "Withdraw",
+    "successDeposit": "You successfully deposited %{amount} %{symbol}",
+    "successWithdraw": "You successfully withdrew %{amount} %{symbol}",
+    "successClaim": "You successfully claimed %{amount} %{symbol}",
+    "loading": {
+      "signInWallet": "Sign in Wallet",
+      "signNow": "Sign now...",
+      "waiting": "Waiting",
+      "done": "Done",
+      "preparing": "Preparing...",
+      "preparingTransaction": "Preparing transaction..."
+    },
+    "errors": {
+      "walletNotConnected": "Wallet not connected",
+      "unsupportedYieldNetwork": "Unsupported yield network",
+      "broadcastFailed": "Failed to broadcast transaction",
+      "transactionFailedTitle": "Transaction failed",
+      "transactionFailedDescription": "Please try again.",
+      "unsupportedNetworkTitle": "Unsupported network",
+      "unsupportedNetworkDescription": "This yield network is not supported yet.",
+      "walletNotConnectedTitle": "Wallet not connected",
+      "walletNotConnectedDescription": "Connect a wallet that supports this network to continue.",
+      "enterAmountTitle": "Enter an amount",
+      "enterAmountDescription": "Amount must be greater than zero.",
+      "initiateFailedTitle": "Error",
+      "initiateFailedDescription": "Failed to initiate transaction sequence.",
+      "quoteFailedTitle": "Quote failed",
+      "quoteFailedDescription": "Unable to get a quote for this transaction. Please try again."
+    }
   }
-}
+}

src/components/AssetAccountDetails/AssetAccountDetails.tsx

@@ -18,7 +18,9 @@ import { SpamWarningBanner } from './components/SpamWarningBanner'
 
 import { AssetTransactionHistory } from '@/components/TransactionHistory/AssetTransactionHistory'
 import { getChainAdapterManager } from '@/context/PluginProvider/chainAdapterSingleton'
+import { useFeatureFlag } from '@/hooks/useFeatureFlag/useFeatureFlag'
 import { StandaloneTrade } from '@/pages/Trade/StandaloneTrade'
+import { YieldAssetSection } from '@/pages/Yields/components/YieldAssetSection'
 import { selectIsSpamMarkedByAssetId } from '@/state/slices/preferencesSlice/selectors'
 import { selectMarketDataByAssetIdUserCurrency } from '@/state/slices/selectors'
 import { useAppSelector } from '@/state/store'
@@ -34,6 +36,7 @@ const display = { base: 'none', md: 'block' }
 const contentPaddingY = { base: 0, md: 8 }
 
 export const AssetAccountDetails = ({ assetId, accountId }: AssetDetailsProps) => {
+  const isYieldXyzEnabled = useFeatureFlag('YieldXyz')
   const marketData = useAppSelector(state => selectMarketDataByAssetIdUserCurrency(state, assetId))
   const isSpamMarked = useAppSelector(state => selectIsSpamMarkedByAssetId(state, assetId))
   const assetIds = useMemo(() => [assetId], [assetId])
@@ -58,6 +61,7 @@ export const AssetAccountDetails = ({ assetId, accountId }: AssetDetailsProps) =
           <MaybeChartUnavailable assetIds={assetIds} />
           <Equity assetId={assetId} accountId={accountId} />
           {accountId && <AccountAssets assetId={assetId} accountId={accountId} />}
+          {isYieldXyzEnabled && <YieldAssetSection assetId={assetId} accountId={accountId} />}
           <RelatedAssets assetId={assetId} />
           <AssetTransactionHistory limit={10} assetId={assetId} accountId={accountId} />
         </Stack>

src/components/Layout/Header/Header.tsx

@@ -10,6 +10,7 @@ import {
   TbPool,
   TbRefresh,
   TbStack,
+  TbTrendingUp,
 } from 'react-icons/tb'
 import { useTranslate } from 'react-polyglot'
 import { useSelector } from 'react-redux'
@@ -67,16 +68,11 @@ const exploreSubMenuItems = [
   { label: 'navBar.markets', path: '/markets', icon: TbGraph },
 ]
 
-const earnSubMenuItems = [
-  { label: 'navBar.tcy', path: '/tcy', icon: TCYIcon },
-  { label: 'navBar.pools', path: '/pools', icon: TbPool },
-  { label: 'navBar.lending', path: '/lending', icon: TbBuildingBank },
-]
-
 export const Header = memo(() => {
   const isDegradedState = useSelector(selectPortfolioDegradedState)
   const translate = useTranslate()
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`)
+  const isYieldXyzEnabled = useFeatureFlag('YieldXyz')
 
   const navigate = useNavigate()
   const {
@@ -117,6 +113,17 @@ export const Header = memo(() => {
   const { degradedChainIds } = useDiscoverAccounts()
 
   const hasWallet = Boolean(walletInfo?.deviceId)
+  const earnSubMenuItems = useMemo(
+    () => [
+      { label: 'navBar.tcy', path: '/tcy', icon: TCYIcon },
+      { label: 'navBar.pools', path: '/pools', icon: TbPool },
+      { label: 'navBar.lending', path: '/lending', icon: TbBuildingBank },
+      ...(isYieldXyzEnabled
+        ? [{ label: 'navBar.yields', path: '/yields', icon: TbTrendingUp }]
+        : []),
+    ],
+    [isYieldXyzEnabled],
+  )
 
   /**
    * FOR DEVELOPERS:

src/config.ts

@@ -234,6 +234,10 @@ const validators = {
   VITE_NOTIFICATIONS_SERVER_URL: url({ default: '' }),
   VITE_FEATURE_ADDRESS_BOOK: bool({ default: false }),
   VITE_FEATURE_APP_RATING: bool({ default: false }),
+  VITE_FEATURE_YIELD_XYZ: bool({ default: false }),
+  VITE_YIELD_XYZ_API_KEY: str({ default: '' }),
+  VITE_YIELD_XYZ_BASE_URL: url({ default: 'https://api.yield.xyz/v1' }),
+  VITE_FEATURE_YIELD_MULTI_ACCOUNT: bool({ default: false }),
 }
 
 function reporter<T>({ errors }: envalid.ReporterOptions<T>) {

src/hooks/useActionCenterSubscribers/useGenericTransactionSubscriber.tsx

@@ -34,11 +34,13 @@ const displayTypeMessagesMap: Partial<Record<ActionType, DisplayTypeMessageMap>>
     [GenericTransactionDisplayType.RFOX]: 'RFOX.stakeSuccess',
     [GenericTransactionDisplayType.TCY]: 'actionCenter.tcy.stakeComplete',
     [GenericTransactionDisplayType.FoxFarm]: 'actionCenter.deposit.complete',
+    [GenericTransactionDisplayType.Yield]: 'actionCenter.deposit.complete',
   },
   [ActionType.Withdraw]: {
     [GenericTransactionDisplayType.RFOX]: 'RFOX.unstakeSuccess',
     [GenericTransactionDisplayType.TCY]: 'actionCenter.tcy.unstakeComplete',
     [GenericTransactionDisplayType.FoxFarm]: 'actionCenter.withdrawal.complete',
+    [GenericTransactionDisplayType.Yield]: 'actionCenter.withdrawal.complete',
   },
   [ActionType.Claim]: {
     [GenericTransactionDisplayType.FoxFarm]: 'actionCenter.claim.complete',
@@ -73,6 +75,7 @@ export const useGenericTransactionSubscriber = () => {
           GenericTransactionDisplayType.TCY,
           GenericTransactionDisplayType.FoxFarm,
           GenericTransactionDisplayType.Approve,
+          GenericTransactionDisplayType.Yield,
         ].includes(action.transactionMetadata.displayType)
       ) {
         return