feat: yield.xyz earn tab

.env

@@ -312,3 +312,4 @@ VITE_FEATURE_YIELD_XYZ=false
 VITE_FEATURE_YIELDS_PAGE=false
 VITE_YIELD_XYZ_API_KEY=06903960-e442-4870-81eb-03ff3ad4c035
 VITE_FEATURE_YIELD_MULTI_ACCOUNT=false
+VITE_FEATURE_EARN_TAB=false

.env.development

@@ -98,3 +98,4 @@ VITE_FEATURE_NEAR=true
 VITE_FEATURE_KATANA=true
 VITE_FEATURE_YIELD_XYZ=true
 VITE_FEATURE_YIELDS_PAGE=true
+VITE_FEATURE_EARN_TAB=true

src/Routes/RoutesCommon.tsx

@@ -28,6 +28,7 @@ import { History } from '@/pages/History/History'
 import { RFOX } from '@/pages/RFOX/RFOX'
 import { TCYNavIndicator } from '@/pages/TCY/components/TCYNavIndicator'
 import { TCY } from '@/pages/TCY/tcy'
+import { EarnTab } from '@/pages/Trade/tabs/EarnTab'
 import { LimitTab } from '@/pages/Trade/tabs/LimitTab'
 import { RampTab } from '@/pages/Trade/tabs/RampTab'
 import { TradeTab } from '@/pages/Trade/tabs/TradeTab'
@@ -37,6 +38,8 @@ export const TRADE_ROUTE_ASSET_SPECIFIC =
   '/trade/:chainId/:assetSubId/:sellChainId/:sellAssetSubId/:sellAmountCryptoBaseUnit'
 export const LIMIT_ORDER_ROUTE_ASSET_SPECIFIC =
   '/limit/:chainId/:assetSubId/:sellChainId/:sellAssetSubId/:sellAmountCryptoBaseUnit/:limitPriceMode/:limitPriceDirection/:limitPrice'
+export const EARN_ROUTE_ASSET_SPECIFIC =
+  '/earn/:sellChainId/:sellAssetSubId/:yieldId/:sellAmountCryptoBaseUnit'
 
 const Dashboard = makeSuspenseful(
   lazy(() =>
@@ -426,4 +429,18 @@ export const routes: Route[] = [
       },
     ],
   },
+  {
+    path: '/earn/*',
+    label: '',
+    hideDesktop: true,
+    main: EarnTab,
+    disable: !getConfig().VITE_FEATURE_EARN_TAB,
+    routes: [
+      {
+        path: EARN_ROUTE_ASSET_SPECIFIC,
+        main: EarnTab,
+        hide: true,
+      },
+    ],
+  },
 ]

src/assets/translations/en/main.json

@@ -48,6 +48,7 @@
     "insufficientAmountForGas": "Not enough %{assetSymbol}.%{chainSymbol} to cover gas",
     "invalidAddress": "Invalid Address",
     "deposit": "Deposit",
+    "supply": "Supply",
     "withdraw": "Withdraw",
     "withdrawal": "Withdrawal",
     "claim": "Claim",
@@ -520,7 +521,8 @@
     "markets": "Markets",
     "tokens": "Tokens",
     "swap": "Swap",
-    "yields": "Yields"
+    "yields": "Yields",
+    "earn": "Earn"
   },
   "shapeShiftMenu": {
     "products": "Products",
@@ -2757,6 +2759,8 @@
     "successEnter": "You successfully entered %{amount} %{symbol}",
     "successExit": "You successfully exited %{amount} %{symbol}",
     "successClaim": "You successfully claimed %{amount} %{symbol}",
+    "viewPosition": "View Position",
+    "via": "via",
     "resetAllowance": "Reset Allowance",
     "transactionNumber": "Transaction %{number}",
     "loading": {
@@ -2782,5 +2786,30 @@
       "quoteFailedTitle": "Quote failed",
       "quoteFailedDescription": "Unable to get a quote for this transaction. Please try again."
     }
+  },
+  "earn": {
+    "stakeAmount": "Stake Amount",
+    "selectYieldOpportunity": "Select yield opportunity",
+    "selectYieldFor": "Select yield for %{asset}",
+    "noYieldsAvailable": "No yield opportunities available for %{asset}",
+    "estimatedYearlyEarnings": "Est. Yearly Earnings",
+    "yieldType": "Yield Type",
+    "confirmEarn": "Confirm Stake",
+    "earnWith": "Earn with",
+    "belowMinimum": "Below minimum deposit",
+    "minimumDeposit": "Minimum Deposit",
+    "explainers": {
+      "liquidStakingReceive": "You'll receive %{symbol} which you can trade at any time",
+      "liquidStakingTrade": "You can trade your liquid staking token at any time",
+      "liquidStakingWithdraw": "When withdrawing, your assets will be available immediately",
+      "rewardsSchedule": "Rewards are distributed %{schedule} and accrue automatically",
+      "stakingUnbonding": "When unstaking, there is a %{days} day unbonding period before tokens are available",
+      "restakingYield": "Restaking rewards accrue to your position automatically",
+      "restakingWithdraw": "When withdrawing, your assets may have an unbonding period",
+      "vaultYield": "Yield accrues to your position automatically",
+      "vaultWithdraw": "When withdrawing, your assets will be available immediately",
+      "lendingYield": "Interest accrues to your position automatically",
+      "lendingWithdraw": "When withdrawing, your assets will be available immediately"
+    }
   }
 }

src/components/Layout/Header/Header.tsx

@@ -56,7 +56,7 @@ const rightHStackSpacingSx = { base: 2, lg: 4 }
 const searchBoxMaxWSx = { base: 'auto', lg: '400px' }
 const searchBoxMinWSx = { base: 'auto', xl: '300px' }
 
-const tradeSubMenuItems = [
+const baseTradeSubMenuItems = [
   { label: 'navBar.swap', path: '/trade', icon: TbRefresh },
   { label: 'limitOrder.heading', path: '/limit', icon: TbLayersSelected },
   { label: 'fiatRamps.buy', path: '/ramp/buy', icon: TbCreditCard },
@@ -110,6 +110,15 @@ export const Header = memo(() => {
   const isActionCenterEnabled = useFeatureFlag('ActionCenter')
   const isNewWalletManagerEnabled = useFeatureFlag('NewWalletManager')
   const isRfoxFoxEcosystemPageEnabled = useFeatureFlag('RfoxFoxEcosystemPage')
+  const isEarnTabEnabled = useFeatureFlag('EarnTab')
+
+  const tradeSubMenuItems = useMemo(
+    () =>
+      isEarnTabEnabled
+        ? [...baseTradeSubMenuItems, { label: 'navBar.earn', path: '/earn', icon: TbTrendingUp }]
+        : baseTradeSubMenuItems,
+    [isEarnTabEnabled],
+  )
   const { degradedChainIds } = useDiscoverAccounts()
 
   const hasWallet = Boolean(walletInfo?.deviceId)

src/components/Layout/Header/NavBar/NavigationDropdown.tsx

@@ -70,7 +70,8 @@ export const NavigationDropdown = ({ label, items, defaultPath }: NavigationDrop
       return (
         currentPath.startsWith('/trade') ||
         currentPath.startsWith('/limit') ||
-        currentPath.startsWith('/ramp')
+        currentPath.startsWith('/ramp') ||
+        currentPath.startsWith('/earn')
       )
     }