feat: yield improvements following CR

[gomesalexandre]

Description

Addresses code review feedback from #11703 and improves yield UX:

• Show "My Position" card with zeros and "Connect Wallet" button when no wallet connected (instead of empty right column)
• Add "Get {TOKEN}" button when user has no balance for yield input token
• Only show "Available to Deposit" card when wallet connected (supports Ledger read-only mode)
• Route to /trade/{assetId} with buy asset pre-selected when clicking "Get {TOKEN}"

Issue (if applicable)

Tackles CR from #11703 (review)

Risk

Low - UI-only changes, no transaction logic modifications.

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

None.

Testing

Engineering

1. Without wallet connected:

   • Go to /yields, click any yield
   • Verify "My Position" card shows with $0 and "Connect Wallet" button
   • Verify "Available to Deposit" card is hidden
   • Click "Connect Wallet" → should open wallet modal

2. With wallet connected (no balance for yield token):

   • Find yield for token you don't have
   • Verify "Get {TOKEN}" button appears in "Available to Deposit" card
   • Click → should navigate to /trade/{assetId} with buy asset selected

3. With wallet connected (has balance):

   • Verify "Available to Deposit" shows your balance and potential earnings

4. Ledger read-only mode:

   • Connect Ledger, then unplug device
   • Verify "Available to Deposit" card still shows (read-only mode)

Operations

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

Same as above on preview environment.

Screenshots (if applicable)

https://jam.dev/c/07594f51-6916-4026-ad60-7e342f134c6e

Summary by CodeRabbit

• New Features

  • "Get Asset" button in Yields zero-state; wallet-aware cards prompt connect when no account.
  • Yield UI becomes yield-type aware: context-specific headings, action labels, loading and success texts.

• Bug Fixes / UX

  • Button/modal labels and progress states aligned to staking/depositing/withdrawing with pending variants.
  • Success confirmations expanded to staked/unstaked/deposited/withdrawn/restaked.

• Documentation

  • i18n guidance updated; standardized translation usage and key conventions.

• Tests

  • Coverage added for yield terminology and success/title mappings.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a typed YieldType and many yield-type-aware utilities; updates translation keys for yield flows; propagates yieldType through transaction/title/label logic across Yield components; adds wallet-connectivity gating and a zero-state "Get Asset" action that navigates to trade.

Changes

Cohort / File(s)	Summary
Translations & Docs CLAUDE.md, src/assets/translations/en/main.json	Added CLI/Git/i18n guidance to CLAUDE.md; renamed/removed/added numerous yieldXYZ translation keys (staking/deposit/withdraw variants, pending states, new success keys, and assets.pools.getAsset).
Yield types & core utils src/lib/yieldxyz/types.ts, src/lib/yieldxyz/utils.ts, src/lib/yieldxyz/utils.test.ts	Added exported YieldType union and narrowed YieldMechanics.type; refactored utils to be YieldType-aware, introduced TX patterns/labels per-yield-type, new public helpers (getYieldActionLabelKeys, getYieldLoadingStateKeys, getYieldHeadingKeys, getYieldPendingStatusKeys, getYieldMinAmountKey, getYieldSuccessMessageKey, isStakingYieldType), updated signatures (getTransactionButtonText, formatYieldTxTitle) and tests.
Yield UI — Modals & Form src/pages/Yields/components/YieldActionModal.tsx, .../YieldEnterModal.tsx, .../YieldForm.tsx, .../YieldSuccess.tsx	Propagate yieldItem.mechanics.type into headings/loading/button/min-amount/success logic; use yield-type helpers for dynamic labels; YieldSuccessProps.successMessageKey now uses exported YieldSuccessMessageKey.
Yield UI — Cards & Flow src/pages/Yields/components/YieldAvailableToDeposit.tsx, .../YieldPositionCard.tsx, src/pages/Yields/hooks/useYieldTransactionFlow.ts	Added wallet integration checks (useWallet, selectWalletType, KeyManager, ledger read-only handling) and connect-wallet flow (dispatch SET_WALLET_MODAL); render zero-state cards when wallet/precision/balance missing; "Get Asset" button navigates to trade; propagate yieldType into transaction flow and title formatting.
Other UI / small touches src/components/MultiHopTrade/components/Earn/EarnConfirm.tsx	Propagated yieldType into transaction button/title resolution and adjusted related imports and fallback label logic.
Build / manifest package.json	Manifest referenced in diffs (minor dependency/metadata updates implied).

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant YieldUI as YieldAvailableToDeposit / YieldPositionCard
  participant Wallet as useWallet / KeyManager
  participant Router as TradeNavigator
  participant YieldUtils as yieldxyz utils

  User->>YieldUI: open Yields page
  YieldUI->>Wallet: check isConnected, wallet type, ledger read-only
  alt wallet unavailable or precision missing
    YieldUI-->>User: render zero-state card (0 balance) with "Get Asset" / "Connect"
    User->>YieldUI: click "Get Asset"
    YieldUI->>Router: navigateToTrade(inputTokenAssetId)
    Router-->>User: open trade flow
  else wallet available
    YieldUI->>YieldUtils: request labels/keys using yieldType
    YieldUI-->>User: render balance card with actions
    User->>YieldUI: initiate action (Enter/Exit)
    YieldUI->>YieldUtils: format titles / determine success key using yieldType
    YieldUI->>Wallet: perform tx flow (connect/sign)
    YieldUI-->>User: show loading / success messages
  end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• feat: multi-account yield support #11665 — Modifies many of the same Yield UI components and utilities; strong overlap in yield-type propagation.
• feat: big batch of yield improvements #11656 — Touches src/lib/yieldxyz utils/types and yield-type-aware label logic; closely related.
• feat: yield.xyz POC #11578 — Introduces initial yield.xyz types/utils and related hooks/features referenced by this change set.

Suggested reviewers

• premiumjibles
• 0xApotheosis

Poem

🐇 I found a type, I named it "stake",
Labels hopped in—no more mistake.
Wallet wakes, the trade door swings,
Keys translate as yieldType sings.
Hop to trade, a carrot-laden fling!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The PR title 'feat: yield improvements following CR' is vague and generic, using non-descriptive terms that don't convey the specific changes made.	Consider a more specific title that highlights the main UI improvements, such as 'feat: add wallet connection and token purchase flow to Yields page' or 'feat: improve Yields UX with wallet state handling and asset purchase flow'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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_final_polish

---

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: 1

🤖 Fix all issues with AI agents

In `@src/pages/Yields/components/YieldSuccess.tsx`:
- Around line 27-32: The UI is missing translations for the new success message
keys so add entries for "successUnstaked" and "successWithdrawn" to the English
translations JSON used by the app, then ensure the component that accepts
successMessageKey (the union including 'successUnstaked' and 'successWithdrawn')
consumes them via translate('...') so the raw keys don't render; locate where
translate('successEnter'|'successExit'|'successClaim'...) is used and add
matching JSON values for the two new keys with appropriate copy.

[0xApotheosis]

All looks good! The comment from CodeRabbit below seems valid to address before merging.

Without wallet connected:

✅ Go to /yields, click any yield
✅ Verify "My Position" card shows with $0 and "Connect Wallet" button
✅ Verify "Available to Deposit" card is hidden
✅ Click "Connect Wallet" → should open wallet modal

With wallet connected (no balance for yield token):

✅ Find yield for token you don't have
✅ Verify "Get {TOKEN}" button appears in "Available to Deposit" card
✅ Click → should navigate to /trade/{assetId} with buy asset selected

With wallet connected (has balance):

✅ Verify "Available to Deposit" shows your balance and potential earnings

Ledger read-only mode:

✅ Connect Ledger, then unplug device
✅ Verify "Available to Deposit" card still shows (read-only mode)

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/MultiHopTrade/components/Earn/EarnConfirm.tsx (1)

149-178: Pass yieldType for active-step button text.

When a step is active, getTransactionButtonText is called without yieldType, so staking/restaking flows can render “Deposit/Withdraw” instead of “Stake/Unstake/Restake”.

🔧 Suggested fix

-  const confirmButtonText = useMemo(() => {
+  const confirmButtonText = useMemo(() => {
+    const yieldType = selectedYield?.mechanics.type
     if (activeStepIndex >= 0 && transactionSteps[activeStepIndex]) {
       const currentStep = transactionSteps[activeStepIndex]
-      return getTransactionButtonText(currentStep.type, currentStep.originalTitle)
+      return getTransactionButtonText(currentStep.type, currentStep.originalTitle, yieldType)
     }
     // USDT reset required before other transactions
     if (isUsdtResetRequired) {
       return translate('yieldXYZ.resetAllowance')
     }
     // Before execution starts, use the first CREATED transaction from quoteData
-    const yieldType = selectedYield?.mechanics.type
     const firstCreatedTx = quoteData?.transactions?.find(tx => tx.status === 'CREATED')
     if (firstCreatedTx) {
       return getTransactionButtonText(firstCreatedTx.type, firstCreatedTx.title, yieldType)
     }

🤖 Fix all issues with AI agents

In `@src/lib/yieldxyz/utils.ts`:
- Around line 16-114: Both getTransactionButtonText and formatYieldTxTitle treat
'restaking' the same as other staking types and thus show "Stake" instead of
"Restake"; fix by special-casing yieldType === 'restaking' in those functions
(before using labelKey/TX mappings) to return "Restake" (and "Restake
{assetSymbol}" in formatYieldTxTitle) or otherwise consult a restake-specific
mapping; update any relevant TX_TYPE_TO_LABELS/TX_TITLE_PATTERNS lookups only if
you want title/type-based "restake" detection, and ensure the change aligns with
the existing isStakingType behavior and getYieldActionLabelKeys naming.