feat(yields): mini swapper modal

[gomesalexandre]

Description

Extracts swapper into a modal ("mini swapper") for the yield flow:

• Click "Get {TOKEN}" → opens swapper modal with buy asset pre-selected
• Desktop: minimal chrome, just the swapper
• Mobile: full drawer with header

Issue (if applicable)

Stacked on #11729

Risk

Low - new modal component, no changes to existing swapper logic.

Testing

Engineering

• Mini swapper performs well on both mobile and desktop

Operations

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

Screenshots (if applicable)

https://jam.dev/c/d9cc0662-6c6d-4997-95b0-4840e2f01aee

Summary by CodeRabbit

• New Features

  • Trade modal accessible directly from yields to start trades without leaving the page.
  • Modal passes success callbacks to the trade flow so actions can close or react to successful trades.
  • Added UI labels: potential earnings amount, Deposit Now, Strategy Info, and Overview.

• Style

  • Modal-specific card styling to match in-modal appearance.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a modal-based swap flow for depositing yield assets, new translation keys, and numerous modal-aware additions to the multi-hop trade components to support modal styling and an on-swap broadcast callback.

Changes

Cohort / File(s)	Summary
Translations src/assets/translations/en/main.json	Added assets.potentialEarningsAmount, assets.depositNow, assets.strategyInfo, assets.overview; added trailing comma on assets.getAsset.
Swapper modal components src/components/SwapperModal/SwapperModal.tsx, src/components/SwapperModal/SwapperModalContent.tsx	New SwapperModal (Dialog wrapper) and SwapperModalContent (form init, default asset wiring, routing into trade UI); exported SwapperModal and SwapperModalContentProps.
Yield UI src/pages/Yields/components/YieldAvailableToDeposit.tsx	Replaced navigation-to-trade with local state-managed SwapperModal; button opens modal and passes default asset id; modal cleared on close/success.
Standalone trade surface src/components/MultiHopTrade/StandaloneMultiHopTrade.tsx	Extended props/types to accept isModal?: boolean and onSuccess?: () => void and threaded these through route/confirm/input components.
Modal styling constant src/components/MultiHopTrade/const.ts	Added exported modalCardStyles for transparent/modal card styling.
Shared UI modal support src/components/MultiHopTrade/components/SharedConfirm/SharedConfirm.tsx, src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInput.tsx	Added optional isModal?: boolean prop and conditional application of modalCardStyles for modal rendering.
Trade input plumbing src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx	Added isModal?: boolean prop and forwarded to SharedTradeInput.
Confirm/footer/button plumbing src/components/MultiHopTrade/components/TradeConfirm/TradeConfirm.tsx, .../TradeConfirm/TradeConfirmFooter.tsx, .../TradeConfirm/TradeFooterButton.tsx	Added isModal?: boolean and onSuccess?: () => void to TradeConfirm props; added onSwapTxBroadcast?: () => void prop and forwarded it to footer/button.
Execution hook changes src/components/MultiHopTrade/components/TradeConfirm/hooks/useTradeButtonProps.tsx, .../useTradeExecution.tsx	Threaded new optional onSwapTxBroadcast?: () => void through useTradeButtonProps into useTradeExecution; useTradeExecution now accepts and invokes onSwapTxBroadcast after SellTxHash.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant YieldAvailableToDeposit
    participant SwapperModal
    participant SwapperModalContent
    participant StandaloneMultiHopTrade
    participant tradeInput as tradeInput State

    User->>YieldAvailableToDeposit: Click "Deposit Now"
    YieldAvailableToDeposit->>YieldAvailableToDeposit: set isSwapperModalOpen = true
    YieldAvailableToDeposit->>SwapperModal: open with defaultBuyAssetId
    SwapperModal->>SwapperModalContent: mount inside MemoryRouter
    SwapperModalContent->>tradeInput: dispatch clear()
    SwapperModalContent->>tradeInput: set default buy/sell assets (if provided)
    SwapperModalContent->>StandaloneMultiHopTrade: render trade UI (isModal=true, onSuccess)
    User->>StandaloneMultiHopTrade: perform swap -> executeTrade
    StandaloneMultiHopTrade->>useTradeExecution: broadcast SellTxHash
    useTradeExecution->>SwapperModalContent: call onSwapTxBroadcast (if provided)
    User->>SwapperModal: close modal (or onSuccess)
    SwapperModal->>tradeInput: dispatch clear()
    SwapperModal->>YieldAvailableToDeposit: onClose/onSuccess callback

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: yield improvements following CR #11729 — Modifies the same translation file and YieldAvailableToDeposit behavior; overlapping UI flow changes.
• feat: swapper remove status screen #10412 — Changes to useTradeExecution; both PRs modify execution hook behavior around SellTxHash handling.
• feat: complete swap action cards display approval Txs #10291 — Changes to useTradeButtonProps; both PRs thread extra swap-related callbacks through trade button props.

Suggested reviewers

• NeOMakinG
• premiumjibles

Poem

🐰 A little modal hopped into view,
Deposits and swaps now quick to do.
Default assets set with a gentle thump,
Trade, broadcast, close — a soft rabbit jump! 🥕✨

🚥 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 'feat(yields): mini swapper modal' clearly and concisely describes the main change: introducing a modal-based swapper component for the yield feature.
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_swapper_modal

---

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

[0xApotheosis]

This is so great. A few non-blocking suggestions:

• when a trade is completed by the swapper model we should auto-close the modal, because its unlikely they'll want to swap again in this context
• we have some double boarder radius shenanigans going on:

[gomesalexandre]

• when a trade is completed by the swapper model we should auto-close the modal, because its unlikely they'll want to swap again in this context
• we have some double boarder radius shenanigans going on:

Fixed on both counts!

Tested mini-swapper here on desktop/mobile:

https://jam.dev/c/244726b9-9182-4b10-ae0c-f768bcc86a5f

And regression tested trade page swapper:

https://jam.dev/c/1ba9eae5-54ce-4033-879e-79921a2b9472

And asset page:

https://jam.dev/c/cdd34fac-8a8b-4f03-94e7-ed4b120e4add