feat: more yield feats, fixes, and polishes #11627

gomesalexandre · 2026-01-12T15:08:09Z

Description

This PR:

improves mobile layouts
adds error-handling to execution flow
improves transaction execution flow for yield/exracts it for reuse in new enter modal
handles steps failures
handles USDT reset needed as an extra first step
makes the current enter/exit modals in yield page and the newly added CTA-y enter one dialogs for mobile goodness
adds a new one-click enter modal in account/asset pages in case you don't have a position yet
makes the CTA look and feel better
makes yield feature less ai-spewy and more consistent with design system
removes unused translations
fixes APY in a few places for Cosmos SDK staking re: Shapeshift DAO validator and cosmostation
removes fluff "Asset" cell in yield position rows in account/asset pages
unifies "Enter/Exit" terminology
adds a new flag for "Yield page" so we can soft toggle yield without the full yields page soonish

Issue (if applicable)

closes #11611

Risk

High Risk PRs Require 2 approvals

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

Testing

Engineering

ensure design is a lot more consistent with app now
ensure the newly added enter modal looks good (note: there's a hack to access it as many times as you want. Go to an account 0+. since we don't support multi-account yet, you will see the CTA, but, again because we don't support multi-account, it will route you to account 0 enter, so you can test this flow and enter as many times as you wish)
ensure the exist enter/exit flow in yield page looks (and works) good
ensure all Cosmos SDK validators (ShapeShift DAO/Cosmostation if you're active on it - if not probably a good idea to stake on it through e.g Keplr just to test/other yield.xyz provided ones all have APY for Cosmos SDK staking)
ensure ShapeShift DAO is still "preferred" for Cosmos SDK staking
ensure account/asset page CTA looks good
ensure position rows in account/asset pages when active looks good
ensure USDT deposits are gucci in both enter modal and enter/exit modal in yield page
- approval needed
- reset + approval needed
- no approval needed

Operations

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

Screenshots (if applicable)

One-click enter flow - Mobile

https://jam.dev/c/1ff8f48c-ca5e-4b79-992c-cc5bf9109ffb

One-click enter flow - Desktop

https://jam.dev/c/1f93ce52-a66f-410c-a0ae-c92eb47d3ba9

One-click enter-flow - USDT reset + approval / approval / no approval needed

https://jam.dev/c/2f4fe73b-095f-45f0-8e5d-7f11b654b9cf

Yield page - USDT reset + approval / approval / no approval needed

https://jam.dev/c/c8a11f4e-aabb-4485-bab9-63a9276193c9

- Create YieldEnterModal component with Trust Wallet-inspired design - Big centered input with fiat/crypto toggle - Asset icon, percent buttons (25%, 50%, 75%, Max) - Debounced quote fetching (500ms) for pre-loading transactions - Auto-select default validator (ShapeShift DAO for Cosmos) - Stats section with APY, validator/provider info, and min deposit - Modify YieldAssetSection to open modal instead of navigate - Add translation key for "Stake {asset}" Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add TransactionStepsList component for shared step display - Extract useConfetti hook to eliminate duplication - Export poll/waitForActionCompletion from useYieldTransactionFlow - Update YieldOpportunityCard with horizontal layout - Use Card variant='dashboard' in YieldAssetSection - Add tx hash links in success view Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…ld_polish_2

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

coderabbitai · 2026-01-12T15:08:17Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

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

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.}

…ventions, style fixes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- YieldFilters: Use MenuOptionGroup/MenuItemOption for proper theme styling (no more blue.500) - ValidatorBreakdown: Remove useColorModeValue, use direct color tokens - YieldEnterModal: Extract hover style constants outside component - YieldEnterExit: Extract style constants outside component, fix inline button handlers - YieldActionModal: Use STATUS_LABEL_KEYS map to avoid nested ternaries - useYieldTransactionFlow: Rename loadingMessage to statusLabel for consistency Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…a.50 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- YieldValidatorSelectModal: gray.300, gray.500 -> text.subtle - YieldActionModal: whiteAlpha.50 -> background.surface.raised.base Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add SHAPESHIFT_VALIDATOR constant with fallback APR data - normalizeCosmosValidators ensures ShapeShift is always first - Only ShapeShift is marked as preferred for Cosmos SDK - Add COSMOS_NETWORK_FALLBACK_APR (15%) for validators missing APR - Remove redundant sortValidators call in modal Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Remove redundant ASSET column from YieldActivePositions table - Remove "Your Balance" label (already obvious from context) - Move ensureValidatorApr to utils for reuse - Fix React key warning in ReactTable (destructure key from spread props) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

gomesalexandre · 2026-01-12T17:10:05Z

src/components/ReactTable/ReactTable.tsx

Whitespaces off - fixes annoying JSX warnings re: keys

gomesalexandre · 2026-01-12T17:10:31Z

src/lib/yieldxyz/utils.ts

 export const toUserCurrency = (usdAmount: string | number, rate: string | number): string =>
  bnOrZero(usdAmount).times(rate).toFixed()
+
+export const ensureValidatorApr = (validator: ValidatorDto): ValidatorDto =>


Does what it says on the name!

gomesalexandre · 2026-01-12T17:10:48Z

src/pages/Yields/components/TransactionStepsList.tsx

Extracted for reuse between the two modals

gomesalexandre · 2026-01-12T17:11:04Z

src/pages/Yields/components/ValidatorBreakdown.tsx

-            textColor={enteringTextColor}
-            dateColor={enteringDateColor}
-            valueColor={enteringValueColor}
+            bg='blue.900'


Can probably be cleaned up even more but meh at this point

…hide section without wallet - Extract TransactionStepStatus from anonymous IIFE in YieldActionModal - Reuse existing poll utility from lib/poll instead of custom implementation - Hide YieldAssetSection when wallet is not connected - Reorder TransactionStep type fields for cleaner grouping - Remove unnecessary curly braces in useYieldValidators Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…saction step - Reverted poll changes to use original inline implementation - Export waitForActionCompletion for YieldEnterModal usage - Fix enterButtonText to use getTransactionButtonText for proper labels (shows "Approve" instead of "Stake USDT" when approval is first step) - Add originalTitle and type to TransactionStep in YieldEnterModal - Ensure consistent use of loadingMessage property Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

… model - Replace for-loop auto-execution with click-per-step model matching useYieldTransactionFlow - Add activeStepIndex, rawTransactions, currentActionId state for multi-step tracking - Extract executeSingleTransaction callback for single transaction execution - Export filterExecutableTransactions from hook for code reuse - Fix button text and steps display between transaction steps [skip ci] Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…dals [skip ci] Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Adds waitForTransactionConfirmation helper to poll backend until the submitted transaction is confirmed, preventing nonce conflicts when users quickly transition between Approve and Deposit transactions. This resolves "replacement transaction underpriced" errors by ensuring the on-chain nonce counter has incremented before constructing the next transaction. [skip ci] Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…ld_polish_2

- Add responsive padding to Container components for breathing room on mobile - Fix YieldFilters to stack vertically on mobile with full-width controls - Fix ViewToggle to be full-width on mobile with equal flex buttons - Fix YieldAssetDetails filters layout for mobile responsiveness - Hide YieldOpportunityStats when wallet not connected (stale data bug) - Add isConnected guard to prevent showing stale portfolio balances - Add "myPositions" translation key for plural form in list tab Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

gomesalexandre · 2026-01-12T23:03:59Z

src/lib/yieldxyz/utils.ts

-  [/supply|deposit|enter/i, 'Deposit'],
-  [/withdraw|exit/i, 'Withdraw'],
+  [/supply|deposit|enter/i, 'Enter'],
+  [/withdraw|exit|unstake|undelegate/i, 'Exit'],


In the future we could probably make this better and really use the same verbiage as upstream but for now, things are unified

gomesalexandre · 2026-01-12T23:05:27Z

src/pages/Yields/components/YieldEnterModal.tsx

+const getInputFontSize = (length: number): string => {
+  if (length >= INPUT_LENGTH_BREAKPOINTS.FOR_XS_FONT) return '24px'
+  if (length >= INPUT_LENGTH_BREAKPOINTS.FOR_SM_FONT) return '30px'
+  if (length >= INPUT_LENGTH_BREAKPOINTS.FOR_MD_FONT) return '38px'
+  return '48px'
+}


Ugly but meh - more style passes to follow as we go!

gomesalexandre and others added 4 commits January 12, 2026 13:36

Merge remote-tracking branch 'origin/feat_yield_polish' into feat_yie…

7843007

…ld_polish_2

[skip ci] wip: more yield feats, fixes, and polishes

2e027cc

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

gomesalexandre and others added 8 commits January 12, 2026 16:26

[skip ci] wip: yield cleanup - remove unused translations, naming con…

83c7e35

…ventions, style fixes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

[skip ci] wip: fix remaining hardcoded colors, use semantic tokens

7bea932

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

[skip ci] chore: YieldsList extract tab style constant, fix whiteAlph…

14b7524

…a.50 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

[skip ci] chore: replace remaining gray/whiteAlpha with semantic tokens

8111b55

- YieldValidatorSelectModal: gray.300, gray.500 -> text.subtle - YieldActionModal: whiteAlpha.50 -> background.surface.raised.base Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

wip: yield tab styling cleanup, remove unused variables

5305b6f

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

gomesalexandre commented Jan 12, 2026

View reviewed changes

src/components/ReactTable/ReactTable.tsx

Copy link

Contributor Author

gomesalexandre Jan 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whitespaces off - fixes annoying JSX warnings re: keys

gomesalexandre commented Jan 12, 2026

View reviewed changes

src/pages/Yields/components/TransactionStepsList.tsx

Copy link

Contributor Author

gomesalexandre Jan 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extracted for reuse between the two modals

gomesalexandre commented Jan 12, 2026

View reviewed changes

gomesalexandre and others added 4 commits January 12, 2026 18:18

feat(yields): add provider/validator icon to success state in both mo…

89936b5

…dals [skip ci] Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

gomesalexandre changed the title ~~[skip ci] feat: more yield feats, fixes, and polishes~~ feat: more yield feats, fixes, and polishes Jan 12, 2026

gomesalexandre and others added 6 commits January 12, 2026 18:52

wip

4d132d8

wip

1452d11

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

wip

4326075

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/feat_yield_polish' into feat_yie…

52c6556

…ld_polish_2

gomesalexandre marked this pull request as ready for review January 12, 2026 23:02

gomesalexandre requested a review from a team as a code owner January 12, 2026 23:02

gomesalexandre commented Jan 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: more yield feats, fixes, and polishes #11627

feat: more yield feats, fixes, and polishes #11627

Uh oh!

gomesalexandre commented Jan 12, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 12, 2026 •

edited

Loading

Review skipped

Uh oh!

gomesalexandre Jan 12, 2026

Uh oh!

gomesalexandre Jan 12, 2026

Uh oh!

gomesalexandre Jan 12, 2026

Uh oh!

gomesalexandre Jan 12, 2026

Uh oh!

gomesalexandre Jan 12, 2026

Uh oh!

gomesalexandre Jan 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: more yield feats, fixes, and polishes #11627

Are you sure you want to change the base?

feat: more yield feats, fixes, and polishes #11627

Uh oh!

Conversation

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

Uh oh!

Description

Issue (if applicable)

Risk

Testing

Engineering

Operations

Screenshots (if applicable)

Uh oh!

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

Uh oh!

Review skipped

Uh oh!

gomesalexandre Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

gomesalexandre Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

gomesalexandre Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

gomesalexandre Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

gomesalexandre Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

gomesalexandre Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gomesalexandre commented Jan 12, 2026 •

edited

Loading

coderabbitai bot commented Jan 12, 2026 •

edited

Loading