feat: enhance token selector modal

[fairlighteth]

Summary

• Rebuilt the Select Token widget into a modern shell with a contextual title/search header, manage button, and a two-panel layout that adds a filterable chain sidebar on desktop plus a mobile-friendly chip selector/full-screen panel.
• Applied chain-aware styling across selectors: new solid accent CSS vars per network, checkmark icons that match brand hues, mobile chip visuals, and dedicated ChainPanel filtering/search states.
• Introduced persistent “recent tokens” (per chain) with inline favorite/recent sections, scroll-reset behavior, and fully virtualized rendering for both the base list and search results—including the import banners/sections and analytics IDs.
• Modularized supporting pieces (controller layers, LP token rows, VirtualList helpers), upgraded @tanstack/react-virtual to 3.13.12, tweaked trade-widget sizing when the sidebar is open, and polished shared UI elements like the search input placeholder behavior.
• Hardened the token-selection pipeline: added a shared async-friendly TokenSelectionHandler, keep the selector open-state consistent with issue Token selector is not closed when pick a token from another network #6251, and ensure SELL-side Limit/TWAP selections await wallet chain switches while still closing the modal afterward.
• Refactored useChainsToSelect into documented helpers (createSingleChainState, createInputChainsState, createOutputChainsState) so the sell-vs-bridge logic stays explicit and lint-friendly without changing behavior.

To Test

1. Select Token Modal — Desktop

   • Opening the selector shows the new title/search row with a Manage button that still opens the Manage Lists view.
   • The right-hand chain panel filters networks by name/id, shows empty/search states appropriately, and colors the active checkmark with the chain’s saturated color.
   • Choosing a different destination chain resets the token list scroll position and updates the inline “Recent” section for that chain.

2. Select Token Modal — Mobile

   • Modal renders full-screen with stacked header/search rows and no sidebar.
   • Chain chips appear beneath the search; tapping “+N more” opens the full-screen chain panel, which can be dismissed via the back button.
   • Selecting a chain from the panel closes it and updates the token list immediately.

3. Token List Content

   • Favorite chips render horizontally with tooltips/help copy; selecting the active token disables its chip.
   • Recently picked tokens (excluding favorites) populate the “Recent” section, capped per chain; the “Clear” action removes them.
   • The Manage button is hidden when the widget runs in standalone contexts (e.g., Cosmos stories).

4. Token Search Results

   • Typing a query shows the guide banner, exact matches pinned first, then active-list tokens, plus blockchain/inactive/external sections with their headers/tooltips.
   • Import rows retain their IDs (currency-import on the first blockchain match) and auto-select when only one match exists.

5. LP Token Lists

   • Both desktop rows and mobile cards still display logos, balances/APR, and the “Pool details” tooltip button that opens the pool page without selecting the token.

6. Trade Widget Width

   • Opening the selector expands the trade widget; when the chain sidebar is present it uses the wider tokenSelectSidebar max width, otherwise the standard token-select width.

7. Theme / UI Regression

   • Chain accent backgrounds/borders/icons adapt in light/dark mode.
   • Search inputs fade placeholder text on focus across the app.
   • No console errors after the @tanstack/[email protected] upgrade.

8. Token Selection Behavior

   • Selecting any token (including cross-network picks) closes the selector immediately, matching the Token selector is not closed when pick a token from another network #6251 expectation.
   • SELL-side Limit/TWAP selections chosen from another network prompt the wallet to switch chains, await the result, and then call the supplied onSelectToken without double-closing or re-opening the modal.

9. Chain Availability Logic

   • When bridging is disabled or the source chain isn’t supported by the provider, the selector falls back to a single-chain list.
   • Sell-side (Field.INPUT) selectors always show only wallet-supported chains, while buy-side selectors respect the bridge destinations list when available.

Background

• Controller logic was split into dedicated files (state, dependencies, modal-prop builders) so the widget can orchestrate mobile/desktop variants cleanly.
• Virtualization changes required the @tanstack/react-virtual upgrade and the new scrollResetKey prop, which is reused by search results and the main token list.
• The async token-selection handler and chain-state helpers keep Limit/TWAP UX aligned with wallet capabilities while preserving the chain sidebar behaviors.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
cowfi	Ready	Preview	Nov 13, 2025 6:00pm
explorer-dev	Ready	Preview	Nov 13, 2025 6:00pm
swap-dev	Ready	Preview	Nov 13, 2025 6:00pm
widget-configurator	Ready	Preview	Nov 13, 2025 6:00pm

2 Skipped Deployments

Project	Deployment	Preview	Updated (UTC)
cosmos	Ignored		Nov 13, 2025 6:00pm
sdk-tools	Ignored	Preview	Nov 13, 2025 6:00pm

[coderabbitai]

Important

Review skipped

Draft detected.

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/cross-token-selector

---

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

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​babel/​preset-react@​7.27.1
	@​commitlint/​cli@​20.1.0
	@​cowprotocol/​sdk-subgraph@​0.2.0
	@​lingui/​macro@​5.5.1
	@​metamask/​jazzicon@​2.0.0
	@​lingui/​vite-plugin@​5.5.1
	@​cowprotocol/​sdk-cow-shed@​0.1.10
	@​cowprotocol/​sdk-ethers-v5-adapter@​0.2.0
	@​1inch/​permit-signed-approvals-utils@​1.4.10
	@​material-ui/​core@​4.12.4
	@​cowprotocol/​cow-sdk@​7.1.0
	@​lingui/​react@​5.5.1
	@​ethersproject/​experimental@​5.8.0
	@​cowprotocol/​sdk-composable@​0.1.10
	@​cowprotocol/​cow-runner-game@​0.2.9
	@​babel/​runtime@​7.27.0
	@​lingui/​core@​5.5.1
	@​cowprotocol/​sdk-bridging@​0.6.0
	@​lingui/​cli@​5.5.1
	@​cowprotocol/​cms@​0.11.0
	@​emotion/​styled@​10.3.0 ⏵ 11.14.0			+3
	@​eslint/​eslintrc@​3.3.1
	@​fortawesome/​fontawesome-svg-core@​6.7.2
	@​fortawesome/​free-regular-svg-icons@​6.7.1
	@​gnosis.pm/​dex-js@​0.10.0
	@​emotion/​react@​11.14.0
	@​metamask/​eth-sig-util@​5.1.0
	@​fortawesome/​free-solid-svg-icons@​6.7.1
	@​coinbase/​wallet-sdk@​3.9.3
	@​mui/​icons-material@​5.17.1
	@​commitlint/​config-conventional@​20.0.0
	@​apollo/​client@​3.8.8
	@​metamask/​sdk@​0.31.4
See 3 more rows in the dashboard

View full report