feat: big batch of yield improvements

.env

@@ -309,5 +309,7 @@ VITE_FEATURE_KATANA=true
 
 # Yield.xyz Feature Flag
 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

@@ -97,3 +97,5 @@ VITE_FEATURE_AVNU_SWAP=true
 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(() =>
@@ -246,7 +249,7 @@ export const routes: Route[] = [
     category: RouteCategory.Featured,
     priority: 3,
     mobileNav: false,
-    disable: !getConfig().VITE_FEATURE_YIELD_XYZ,
+    disable: !getConfig().VITE_FEATURE_YIELD_XYZ || !getConfig().VITE_FEATURE_YIELDS_PAGE,
   },
   {
     path: '/ramp/*',
@@ -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,10 +48,12 @@
     "insufficientAmountForGas": "Not enough %{assetSymbol}.%{chainSymbol} to cover gas",
     "invalidAddress": "Invalid Address",
     "deposit": "Deposit",
+    "supply": "Supply",
     "withdraw": "Withdraw",
     "withdrawal": "Withdrawal",
     "claim": "Claim",
     "claiming": "Claiming...",
+    "confirming": "Confirming...",
     "withdrawAndClaim": "Withdraw & Claim",
     "overview": "Overview",
     "connectWallet": "Connect Wallet",
@@ -519,7 +521,8 @@
     "markets": "Markets",
     "tokens": "Tokens",
     "swap": "Swap",
-    "yields": "Yields"
+    "yields": "Yields",
+    "earn": "Earn"
   },
   "shapeShiftMenu": {
     "products": "Products",
@@ -2670,6 +2673,7 @@
     "pageSubtitle": "Discover and manage yield opportunities across multiple chains",
     "enter": "Enter",
     "exit": "Exit",
+    "enterAsset": "Enter %{asset}",
     "yield": "Yield",
     "apy": "APY",
     "apr": "APR",
@@ -2681,49 +2685,27 @@
     "noYields": "No yield opportunities available",
     "connectWallet": "Connect a wallet to view yields",
     "stats": "Stats",
-    "minDeposit": "Min Deposit",
-    "mechanics": "Mechanics",
+    "minEnter": "Min Enter",
     "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",
+    "entering": "Entering...",
+    "exiting": "Exiting...",
+    "unstaking": "Unstaking",
+    "availableDate": "available %{date}",
     "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",
+    "myPositions": "My Positions",
     "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",
+    "earnUpToOnBalance": "You could earn up to %{apy} on your balance",
     "startEarning": "Start earning",
     "maxApy": "Max APY",
+    "nativeStaking": "Native Staking",
     "validator": "Validator",
-    "validatorBreakdown": "Validator Breakdown",
-    "staked": "Staked",
-    "exiting": "Exiting",
+    "entered": "Entered",
     "claimable": "Claimable",
     "loadingQuote": "Loading Quote...",
-    "depositing": "Depositing...",
-    "withdrawing": "Withdrawing...",
     "selectValidator": "Select Validator",
     "allValidators": "All Validators",
     "myValidators": "My Validators",
@@ -2739,20 +2721,25 @@
     "nameZA": "Name (Z-A)",
     "allNetworks": "All Networks",
     "allProviders": "All Providers",
+    "allTypes": "All Types",
     "showAll": "Show All",
     "searchValidator": "Search for validator",
-    "depositYourToken": "Deposit your %{symbol} to start earning yield securely.",
+    "enterYourToken": "Enter 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}",
+    "enterSymbol": "Enter %{symbol}",
+    "exitSymbol": "Exit %{symbol}",
     "claimSymbol": "Claim %{symbol}",
+    "stakeSymbol": "Stake %{symbol}",
+    "unstakeSymbol": "Unstake %{symbol}",
+    "depositSymbol": "Deposit %{symbol}",
+    "withdrawSymbol": "Withdraw %{symbol}",
+    "claimableRewards": "Claimable rewards",
     "noActivePositions": "You do not have any active yield positions.",
     "connectWalletPositions": "Connect a wallet to view your active yield positions.",
     "view": "View",
@@ -2769,31 +2756,36 @@
     "assetYields": "%{asset} Yields",
     "opportunitiesAvailable": "%{count} opportunities available",
     "noYieldsMatchingFilters": "No yields found matching filters.",
-    "activeDeposits": "Active Deposits",
+    "activePositions": "Active Positions",
     "acrossPositions": "Across %{count} positions",
     "availableToEarn": "Available to Earn",
     "idleAssetsEarning": "Idle assets that could be earning up to %{apy}% APY",
     "potentialEarnings": "Potential Earnings",
+    "potentialEarningsTooltip": "Estimated yearly earnings based on your idle balance × best available APY for each asset.",
+    "availableToEarnTooltip": "Total idle balance across assets that have yield opportunities available.",
+    "apyTooltip": "Annual percentage yield shown by the provider. Rates may fluctuate over time.",
     "perYear": "/yr",
+    "earningsPerYear": "%{amount} %{symbol} /yr",
+    "recommendedForYou": "Recommended for you",
     "earn": "Earn",
     "myBalance": "My Balance",
     "providers": "Providers",
-    "deposit": "Deposit",
-    "withdraw": "Withdraw",
-    "successDeposit": "You successfully deposited %{amount} %{symbol}",
-    "successWithdraw": "You successfully withdrew %{amount} %{symbol}",
+    "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": {
       "signInWallet": "Sign in Wallet",
-      "signNow": "Sign now...",
       "waiting": "Waiting",
       "done": "Done",
-      "preparing": "Preparing...",
+      "failed": "Failed",
       "preparingTransaction": "Preparing transaction..."
     },
     "errors": {
       "walletNotConnected": "Wallet not connected",
-      "unsupportedYieldNetwork": "Unsupported yield network",
       "broadcastFailed": "Failed to broadcast transaction",
       "transactionFailedTitle": "Transaction failed",
       "transactionFailedDescription": "Please try again.",
@@ -2808,5 +2800,40 @@
       "quoteFailedTitle": "Quote failed",
       "quoteFailedDescription": "Unable to get a quote for this transaction. Please try again."
     }
+  },
+  "earn": {
+    "enterFrom": "Enter from",
+    "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",
+    "yieldTypes": {
+      "native-staking": "Native Staking",
+      "pooled-staking": "Pooled Staking",
+      "liquid-staking": "Liquid Staking",
+      "staking": "Staking",
+      "lending": "Lending",
+      "vault": "Vault",
+      "restaking": "Restaking"
+    },
+    "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 every %{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')
       )
     }