feat: partial yield.xyz toggle by gomesalexandre · Pull Request #11704 · shapeshift/web

gomesalexandre · 2026-01-16T17:35:22Z

Description

⚠️ Get #11743 in first before we toggle Yield!

Enables a partial subset of the yield.xyz feature in production by setting VITE_FEATURE_YIELD_XYZ=true and VITE_FEATURE_YIELD_MULTI_ACCOUNT=true in .env.production while keeping discovery surfaces disabled.

What This ENABLES in Production

✅ Yield detail page (/yield/:yieldId) - accessible via direct link or CTA
✅ Yield CTA section on asset pages (e.g., /assets/eip155:1/slip44:60)
✅ Yield opportunities fetching in DeFi drawer
✅ Yield balances auto-fetch for asset pages
✅ Multi-account yield selection (account picker when multiple accounts available)

What This KEEPS DISABLED in Production

❌ /yields list page - not accessible
❌ /yields/asset/:assetId page - not accessible
❌ "Yields" navigation link in header Earn submenu - hidden
❌ Earn tab in trade widget - hidden

Technical Changes

Added separate /yield/:yieldId/* route that only requires YIELD_XYZ flag (not YIELDS_PAGE)
Created YieldDetailPage wrapper component for standalone yield detail access
Updated Header nav to check YieldsPage flag (not YieldXyz) for yields link visibility
Updated all yield detail navigation links to use /yield/ (singular) pattern
Conditional back navigation: uses /yields when YieldsPage enabled, history.back() otherwise
Enabled VITE_FEATURE_YIELD_XYZ=true in .env.production
Enabled VITE_FEATURE_YIELD_MULTI_ACCOUNT=true in .env.production

Issue (if applicable)

closes #

Risk

Low risk. Feature flag change with route restructuring. No changes to transaction logic. Yield functionality was already working behind flags.

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

Yield.xyz integrations (staking, vaults, lending across multiple chains). No changes to actual transaction flows.

Testing

Engineering

Test with yarn dev (all flags enabled):

Navigate to /yields - should show full yields list page
"Yields" link visible in header Earn submenu
Click on a yield opportunity - navigates to /yield/:yieldId detail page
Back button on yield detail page navigates to /yields
Navigate to an asset page (e.g., ETH) - yield section visible with opportunities
Click yield CTA on asset page - opens modal, can complete flow
Earn tab visible in trade widget
Open DeFi drawer - yield opportunities load
Account selector shows on yield pages when multiple accounts available

Test with yarn preview:prod (partial flags - production config):

Navigate to /yields - should 404 or not load (route disabled)
"Yields" link NOT visible in header Earn submenu
Navigate directly to /yield/:yieldId (e.g., /yield/ethereum-eth-lido-staking) - should load detail page
Back button on yield detail page navigates back in history (not to /yields)
Navigate to an asset page (e.g., ETH) - yield section visible with opportunities
Click yield CTA on asset page - opens modal, can navigate to detail page
Earn tab NOT visible in trade widget
Open DeFi drawer - yield opportunities still load
Account selector shows on yield pages when multiple accounts available

Operations

🏁 My feature is behind a flag and doesn't require operations testing (yet)

Test on release branch / preview-prod (same flags as yarn preview:prod):

/yields page should NOT be accessible
"Yields" should NOT appear in navigation
Navigate to asset page (e.g., search for ETH, click into it) - should see "Yield" section
Click on yield opportunity from asset page - should open modal and allow proceeding
Back button goes back in history, not to dead /yields page
Direct URL /yield/ethereum-eth-lido-staking should load yield detail page
Earn tab should NOT appear in trade widget
DeFi drawer should show yield opportunities when opened
Account selector works when user has multiple accounts for the asset

Screenshots (if applicable)

https://jam.dev/c/9d613bd5-848e-472a-9a08-1aba377f085f

Summary by CodeRabbit

New Features
- Added dedicated yield detail page for viewing individual yield opportunities
- Introduced provider descriptions for supported protocols (Morpho, Lido, Aave, Compound, Kamino, Fluid, Venus, Gearbox)
- Enhanced multi-account yield management capabilities with improved routing
Improvements
- Optimized component performance through memoization refinements

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Remove titleOverride props so single yields show their metadata.name (e.g., "Aave v3 USDC Lending") instead of just the asset symbol. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Display warning badges on yield cards and alerts on detail pages when yields are marked as underMaintenance or deprecated in the API. Co-Authored-By: Claude Opus 4.5 <[email protected]>

…badges Co-Authored-By: Claude Opus 4.5 <[email protected]>

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Create reusable YieldExplainers component that shows reward schedule, unbonding periods, and other yield-specific info based on mechanics type. Add it to YieldEnterModal and EarnConfirm for consistent user education across all enter flows. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Show a "Learn more" link with external icon when a yield has metadata.documentation available. Appears below the description text on the yield detail page. Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Add YieldExplainers component to YieldForm.tsx (yield page enter modal) - Update ProviderDto to include website and references fields - Use provider.references[0] for documentation link (protocol website) - Fix docs link styling: inline icon next to description - Prefer provider documentation over yield metadata documentation Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Add 3-tab structure: All | Available to Earn | My Positions - Auto-navigate to "Available to Earn" tab when wallet connects - Each tab has explicit URL param for proper navigation - Keep recommended strip visible in all tabs - Add YieldTab enum for type safety - Rename Earn button action to navigate to Available tab Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Fix filters not working on My Positions tab (use unfiltered data) - Fix filters affecting Recommended For You (should be independent) - Fix "Show all" button navigating to All tab when on Available tab - Show full metadata.name on yield detail page below provider pill - Hide Withdraw button when user has no balance (instead of disabled) - Add YieldProviderInfo component with provider descriptions - Add YieldRelatedMarkets component showing other yields for same token - Make Yields first tab in Earn menu when feature flag enabled - Code simplification: remove unnecessary useMemo wrappers Co-Authored-By: Claude Opus 4.5 <[email protected]>

Show fiat value as primary (large text) and crypto as secondary. This matches user expectations where fiat is the more relevant metric. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add a professional two-column layout for desktop screens with info on the left and actions on the right. Create YieldInfoCard and YieldAvailableToDeposit components. Mobile layout remains unchanged. Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Fix validator mismatch on yield detail page by passing selectedValidatorAddress from YieldDetail to YieldPositionCard (ensures Cosmos uses ShapeShift DAO) - Add "New" badge support to NavigationDropdown component - Mark Yields menu item with New badge - Apply react-best-practices cleanup to yield components Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Create getYieldDisplayName that returns curator name for Morpho/Yearn vaults (e.g., "Steakhouse High Yield") and symbol for simple yields - Integrate into YieldItem, YieldDetail, YieldInfoCard, YieldHero - Remove useless secondary row on mobile showing ugly metadata name - Fix Visit Website alignment in YieldProviderInfo - Fix Lending badge from UPPERCASE to Capitalize - Simplify components by removing unnecessary useMemo calls Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Replace cramped pill with clean icon + label pairs - Show Asset (icon + symbol), Chain (icon + name), Protocol (icon + name) - Apply same pattern to both desktop (YieldInfoCard) and mobile (YieldHero) - Remove redundant subtitle section - Clean up unused code Co-Authored-By: Claude Opus 4.5 <[email protected]>

Co-Authored-By: Claude Opus 4.5 <[email protected]>

… skill - Prefer arrow functions over function keyword in memo components - Prefer useMemo over IIFE in TSX - Prefer implicit returns in useMemo/useCallback - Document avoidance of nested ternaries Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Fix dangerous fallback to 18 decimals in YieldAvailableToDeposit - Remove unnecessary Box wrapper in YieldEnterModal - Simplify nested ternary in YieldDetail using useMemo - Refactor YieldExplainers with memoized translations - Convert function keywords to arrow functions in memo components - Use implicit returns in useMemo/useCallback - Simplify enum mappings in YieldsList using array pattern - Remove NEAR_IMPROVEMENTS.md Co-Authored-By: Claude Opus 4.5 <[email protected]>

Fixes potential runtime error when allBalances[id] is undefined, which would cause .minus() to throw or produce NaN. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Check aggregatedAmount > 0 for hasClaimable, consistent with hasWithdrawable check, to avoid showing empty claimable UI. Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Add separate /yield/:yieldId route requiring only YIELD_XYZ flag - Create YieldDetailPage wrapper for standalone yield detail access - Update Header nav to check YieldsPage flag for yields link visibility - Update all yield detail navigation links to use /yield/ (singular) - Enable VITE_FEATURE_YIELD_XYZ in production This allows yield functionality on asset pages and defi drawer while keeping the /yields list page, yields nav link, and earn tab disabled. Co-Authored-By: Claude Opus 4.5 <[email protected]>

coderabbitai · 2026-01-16T17:35:30Z

📝 Walkthrough

Walkthrough

This PR restructures yield routing by introducing a singular /yield/:id/* route path, adding YieldDetailPage and YieldDetailRouter components, and integrating feature flags for conditional navigation behavior. Navigation paths transition from /yields to /yield, and memoization patterns are simplified across multiple yield components.

Changes

Cohort / File(s)	Summary
Configuration & Feature Flags `.env.production`	Added two feature flags: `VITE_FEATURE_YIELD_XYZ` and `VITE_FEATURE_YIELD_MULTI_ACCOUNT` for controlling yield feature availability.
Routing & Route Registration `src/Routes/RoutesCommon.tsx`	Registered new lazy-loaded route `/yield/:yieldId/*` with YieldDetailPage component, gated behind `VITE_FEATURE_YIELD_XYZ` feature flag.
Header Navigation `src/components/Layout/Header/Header.tsx`	Integrated `YieldsPage` feature flag to conditionally show yields menu item and dynamically set default earnings dropdown path based on both `isYieldXyzEnabled` and `isYieldsPageEnabled`.
Yield Page Components `src/pages/Yields/YieldDetailPage.tsx`, `src/pages/Yields/Yields.tsx`	Added new `YieldDetailPage` wrapper component with `YieldAccountProvider` and new `YieldDetailRouter` component defining routes for enter, exit, and index paths.
Yield Detail Page Logic `src/pages/Yields/YieldDetail.tsx`	Integrated `YieldsPage` feature flag for conditional back navigation; refactored memoization patterns from `useMemo` to immediate-invoked function expressions; updated error routing based on feature flag state.
Navigation Path Updates `src/pages/Yields/components/YieldActivePositions.tsx`, `src/pages/Yields/components/YieldItem.tsx`, `src/pages/Yields/components/YieldSuccess.tsx`, `src/components/EarnDashboard/components/PositionDetails/StakingPositionsByProvider.tsx`	Changed navigation targets from `/yields/{id}` to `/yield/{id}` for yield detail pages across multiple components.
Memoization Refactoring `src/pages/Yields/components/YieldOpportunityStats.tsx`, `src/pages/Yields/components/YieldStats.tsx`	Replaced `useMemo` wrappers with immediate-invoked function expressions for `idleValueUsd` and `tvl` calculations, removing memoization dependency tracking.
Yield Provider Data `src/lib/yieldxyz/providerDescriptions.ts`	Added new data structure exporting `PROVIDER_DESCRIPTIONS` mapping provider slugs to description objects for ten protocols (morpho, lido, aave, compound, kamino, fluid, venus, gearbox, etc.).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

fix: yield improvements - validator handling, disabled states, UI consistency #11743: Modifies yield pages and components including YieldDetail.tsx and yield-specific provider information structures.
feat: big batch of yield improvements #11656: Modifies yield routing, feature-flag gating in RoutesCommon, Header, and YieldDetailPage with related navigation path changes.
fix: yields polish one #11742: Modifies the same Yields component files including YieldStats.tsx and other yield-related components with memoization pattern changes.

Suggested labels

capy

Suggested reviewers

NeOMakinG

Poem

🐰 A yield field shifts from /yields to /yield,
With routers aligned and feature flags sealed,
Detail pages wrapped, memos removed with delight,
Provider descriptions bloom—the refactor feels right! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: enabling a partial subset of the yield.xyz feature in production through feature flags, which is the core objective of the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat_yield_flag_on

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

- Back button uses history.back() when YieldsPage disabled, /yields when enabled - Enable VITE_FEATURE_YIELD_MULTI_ACCOUNT in production Co-Authored-By: Claude Opus 4.5 <[email protected]>

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Resolve merge conflicts from yield improvements p2 (#11703): - Adopt useMemo pattern for computed values - Use getYieldActionLabelKeys helper - Add showAvailableOnly prop to YieldItem - Preserve YieldsPage feature flag conditional logic Co-Authored-By: Claude Opus 4.5 <[email protected]>

Resolve conflicts in Yields pages adopting develop's validator handling improvements: - Use getDefaultValidatorForYield() utility instead of highest balance logic - Add requiresValidatorSelection check before setting validators - Update URL paths from /yield/ to /yields/ Co-Authored-By: Claude Opus 4.5 <[email protected]>

premiumjibles

With yarn dev https://jam.dev/c/8d007969-7a0a-42f1-abd7-a70547b990c6 👍

With preview prd https://jam.dev/c/6a303e76-c6f0-4d2e-ab43-725ed0544ed9 👍

All works as expected

gomesalexandre and others added 21 commits January 16, 2026 12:41

feat: display strategy names instead of asset symbols in yield cards

f8fc2f6

Remove titleOverride props so single yields show their metadata.name (e.g., "Aave v3 USDC Lending") instead of just the asset symbol. Co-Authored-By: Claude Opus 4.5 <[email protected]>

feat: add maintenance and deprecated warnings for yield opportunities

fca42a0

Display warning badges on yield cards and alerts on detail pages when yields are marked as underMaintenance or deprecated in the API. Co-Authored-By: Claude Opus 4.5 <[email protected]>

chore: add temporary monkey patch for testing maintenance/deprecated …

e7b34e7

…badges Co-Authored-By: Claude Opus 4.5 <[email protected]>

chore: remove temporary monkey patch for maintenance/deprecated badges

ea4338b

Co-Authored-By: Claude Opus 4.5 <[email protected]>

feat: add documentation link to yield detail page

1555437

Show a "Learn more" link with external icon when a yield has metadata.documentation available. Appears below the description text on the yield detail page. Co-Authored-By: Claude Opus 4.5 <[email protected]>

feat: swap fiat/crypto display on yield detail page

f90fac7

Show fiat value as primary (large text) and crypto as secondary. This matches user expectations where fiat is the more relevant metric. Co-Authored-By: Claude Opus 4.5 <[email protected]>

refactor: use named functions in memo() for better debugging

6abea3f

Co-Authored-By: Claude Opus 4.5 <[email protected]>

feat: commit best practices skill

b24cbd9

fix: add null coalescing to prevent runtime error in sort comparator

fa85b17

Fixes potential runtime error when allBalances[id] is undefined, which would cause .minus() to throw or produce NaN. Co-Authored-By: Claude Opus 4.5 <[email protected]>

fix: guard claimable section against zero-amount balances

e872c09

Check aggregatedAmount > 0 for hasClaimable, consistent with hasWithdrawable check, to avoid showing empty claimable UI. Co-Authored-By: Claude Opus 4.5 <[email protected]>

gomesalexandre and others added 2 commits January 16, 2026 18:47

fix: conditional back navigation based on YieldsPage flag

3a36943

- Back button uses history.back() when YieldsPage disabled, /yields when enabled - Enable VITE_FEATURE_YIELD_MULTI_ACCOUNT in production Co-Authored-By: Claude Opus 4.5 <[email protected]>

fix: Earn dropdown defaults to /tcy when YieldsPage disabled

1897e82

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Base automatically changed from feat_yield_improve_more to develop January 19, 2026 16:35

gomesalexandre changed the title ~~[skip ci] feat: partial yield.xyz toggle~~ feat: partial yield.xyz toggle Jan 19, 2026

gomesalexandre added 3 commits January 20, 2026 13:17

Merge branch 'develop' into feat_yield_flag_on

5fa8965

Merge branch 'develop' into feat_yield_flag_on

a47b059

Merge branch 'develop' into feat_yield_flag_on

33f0aeb

gomesalexandre marked this pull request as ready for review January 21, 2026 10:57

gomesalexandre requested a review from a team as a code owner January 21, 2026 10:57

premiumjibles approved these changes Jan 23, 2026

View reviewed changes

Merge branch 'develop' into feat_yield_flag_on

3046588

premiumjibles enabled auto-merge (squash) January 23, 2026 11:09

premiumjibles merged commit f6fceb3 into develop Jan 23, 2026
4 checks passed

premiumjibles deleted the feat_yield_flag_on branch January 23, 2026 11:19

kaladinlight mentioned this pull request Jan 26, 2026

chore: release v1.1003.0 #11776

Merged

This was referenced Jan 27, 2026

fix: yield fixes and improvements #11778

Merged

feat: yield liquid staking fixes and improvements #11782

Merged

feat: enable /yields route #11781

Merged

coderabbitai bot mentioned this pull request Feb 10, 2026

fix: yield withdraw polishes #11784

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: partial yield.xyz toggle#11704

feat: partial yield.xyz toggle#11704
premiumjibles merged 29 commits intodevelopfrom
feat_yield_flag_on

gomesalexandre commented Jan 16, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 16, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

premiumjibles left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

gomesalexandre commented Jan 16, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

What This ENABLES in Production

What This KEEPS DISABLED in Production

Technical Changes

Issue (if applicable)

Risk

Testing

Engineering

Operations

Screenshots (if applicable)

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

premiumjibles left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gomesalexandre commented Jan 16, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 16, 2026 •

edited

Loading