feat: yield liquid staking fixes and improvements

[gomesalexandre]

Description

• Fix deposit-related displays — use inputToken symbol instead of staking token for deposit amounts, available balance, and success screens (e.g. show "ETH" not "stETH" for Lido deposits)
• Claim withdrawable balances — adds Claim button for completed unstakes (e.g. Lido CLAIM_UNSTAKED) that previously had no action button despite showing a "READY" badge. Fixes untranslated "Claim_unstaked" button text and incorrect "Unstake ETH" step title (now "Claim ETH")

Issue (if applicable)

Risk

Medium risk. Changes touch yield transaction flows (claim for withdrawable balances) and display logic for deposit-related screens.

Yield claim flow (CLAIM_UNSTAKED), yield enter/exit modal display

Testing

Engineering

1. Withdrawable claim flow: Navigate to /yield/ethereum-eth-lido-staking with an address that has a completed unstake (withdrawable balance). Verify:
   • Withdrawable section shows "READY" badge AND a green "Claim" button
   • Clicking "Claim" opens the yield modal with correct amount and "Ready to claim" label (not "Claimable rewards")
   • Transaction step shows "Claim ETH" (not "Unstake ETH" or "Claim_unstaked")
   • Claim flow completes successfully
2. Cosmos staking claim: Verify claiming staking rewards still works — should show "Claimable rewards" label and purple Claim button
3. Deposit flow: Verify enter/exit modals show the correct input token symbol (e.g. "ETH" not "stETH" for Lido)

Operations

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

Verify yield positions display correctly and enter/exit/claim flows work end-to-end in a preview environment.

Screenshots (if applicable)

• develop vs. this diff for stETH - note correct ETH as underlying asset, and "Claim" button for "Withdrawable" row

• Unstake Claim simulation

Summary by CodeRabbit

• New Features

  • Claim flow extended to consider withdrawable balances and show a "Ready to claim" state.
  • Transaction titles now better handle unstaked-claim actions for clearer activity labels.

• Bug Fixes

  • Token symbol display now prefers input token symbols where available.
  • Claimable amounts and display logic refined to consider multiple balance sources for accuracy.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds support for claiming rewards from withdrawable balances, prefers input token symbols for display across Yields UI, extends transaction label mapping and title formatting to handle new tx types, and adds a new translation key readyToClaim.

Changes

Cohort / File(s)	Summary
Translations src/assets/translations/en/main.json	Added assets.otherYields.readyToClaim string ("Ready to claim").
Core utils src/lib/yieldxyz/utils.ts	Added CLAIM_UNSTAKED to TX_TYPE_TO_LABELS; formatYieldTxTitle now accepts optional txType?: string and returns label via TX_TYPE_TO_LABELS when available, falling back to existing title-based logic.
Transaction flow hook src/pages/Yields/hooks/useYieldTransactionFlow.ts	Passes tx.type into formatYieldTxTitle, includes type on generated TransactionStep objects, and updates dispatch metadata to use the extended title format.
Claim logic & UI src/pages/Yields/components/YieldForm.tsx, src/pages/Yields/components/YieldPositionCard.tsx	Added withdrawableBalance as a fallback claim source; introduced isWithdrawableClaim, withdrawableClaimAction; updated claim button rendering and claimability checks to consider withdrawable balances and pending actions.
Available / Deposit UI src/pages/Yields/components/YieldAvailableToDeposit.tsx	Centralized inputTokenSymbol (fallback to primary token symbol) for tooltips, fiat/crypto displays, asset lookups, and translations.
Display & sorting updates src/pages/Yields/YieldDetail.tsx, src/pages/Yields/components/YieldHero.tsx, src/pages/Yields/YieldsList.tsx	Prefer yieldItem.inputTokens[0]?.symbol over yieldItem.token.symbol for rendered symbols, sorting, and pool column accessor with fallback to primary token symbol.

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant UI as Yield UI (Form/Card)
  participant Hook as useYieldTransactionFlow
  participant Utils as formatYieldTxTitle
  participant Dispatcher as Dispatch / Transaction Builder
  participant Chain as Blockchain / Wallet

  User->>UI: Click "Claim" (withdrawable or claimable)
  UI->>Hook: build transaction steps (includes tx.type)
  Hook->>Utils: formatYieldTxTitle(title, assetSymbol, labelKey, tx.type)
  Utils-->>Hook: resolved title/label
  Hook->>Dispatcher: dispatch transaction steps (with type metadata)
  Dispatcher->>Chain: submit transaction
  Chain-->>Dispatcher: tx result
  Dispatcher-->>UI: update status
  UI-->>User: show confirmation/status

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: yield improvements following CR #11729: modifies TX_TYPE_TO_LABELS and formatYieldTxTitle—directly related to core utility and labeling changes.
• feat: partial yield.xyz toggle #11704: touches Yields feature components (YieldDetail, related UI)—related to display and UI behavior changes.

Suggested reviewers

• premiumjibles
• 0xApotheosis

Poem

🐇 I nibble code and hop with glee,
Withdrawable rewards now call to me.
Input symbols shine, transactions align,
Ready to claim — a carrot-shaped sign! 🥕

🚥 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 summarizes the main changes: fixes and improvements to yield liquid staking functionality, including deposit display corrections and a new claim flow for withdrawable balances.
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_full_toggle_3

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/pages/Yields/components/YieldAvailableToDeposit.tsx`:
- Around line 50-54: The current extraction of inputToken fields loses previous
fallbacks: ensure inputTokenSymbol, inputTokenAssetId and inputTokenPrecision
fall back to yieldItem.token values when inputToken is missing or lacks
decimals; specifically update the logic around inputToken (used in this
component) so inputTokenSymbol = inputToken?.symbol ?? yieldItem.token.symbol,
inputTokenAssetId = inputToken?.assetId ?? yieldItem.token.assetId (not an empty
string), and inputTokenPrecision = inputToken?.decimals ??
yieldItem.token.decimals so the card does not return null or query with an empty
assetId when inputTokens[0] is absent.

In `@src/pages/Yields/components/YieldForm.tsx`:
- Around line 118-141: claimableAmount/claimableToken are always taken from
claimableBalance even when the actual claim action (claimAction) comes from
withdrawableBalance; update the logic so when isWithdrawableClaim is true you
pick token and aggregatedAmount from withdrawableBalance instead of
claimableBalance. Specifically modify the definitions of claimableToken and
claimableAmount to conditionally select from withdrawableBalance when
isWithdrawableClaim is true, and ensure any related useMemo dependencies include
isWithdrawableClaim and claimAction (or
claimableClaimAction/withdrawableBalance) so values update correctly; reference
claimableToken, claimableAmount, isWithdrawableClaim, claimableBalance,
withdrawableBalance, claimAction and claimableClaimAction when making the
change.