refactor(tokenselector): 14 - atom-based architecture & prop drilling removal

[fairlighteth]

Summary

Major refactor of the Token Selector architecture to improve performance, maintainability, and user experience. This PR introduces a Jotai-based state management system, eliminates deep prop drilling, and implements a cleaner controller-view pattern.

🏗 Architecture & State Management

• Jotai Atom Integration: Introduced tokenListViewAtom to manage view state (tokens, loading, search, context).
• Controller-Level Hydration: Moved state hydration from SelectTokenModal to controllerAtomHydration hook.
  • Reduces SelectTokenModal props from ~35 to ~21 (UI/callbacks only, organized into logical interfaces).
  • Gates hydration with shouldRender to prevent unnecessary updates.
• Controller Splitting: Decomposed monolithic controllerState.ts into cohesive hooks:
  • tokenDataHooks.ts (Data sources)
  • tokenSelectionHooks.ts (Selection logic)
  • widgetUIState.ts (UI handlers)
• Flicker-Free Sync: Implemented useHydrateAtoms + useLayoutEffect pattern for seamless state synchronization.

⚡️ Performance & Cleanup

• Prop Drilling Removal: TokensContent, TokensVirtualList, and TokenSearchResults now read directly from atoms instead of receiving drilled props.
• Clean Teardown: Added useResetTokenListViewState to ensure state clears properly on widget close.
• Render Optimization: Extracted SelectTokenModalShell and TokenColumnContent to reduce re-renders and file size.
• Consistent Hydration: Ensures displayLpTokenLists and onClearRecentTokens are properly hydrated/passed to avoid state drift.

📱 UI/UX Improvements

• Mobile Chain Selector: Added MobileChainSelector and MobileChainPanelPortal for better mobile navigation.
• Chain Panel: Enhanced ChainPanel and ChainsSelector with improved styling and logic.
• Favorites & Recents: Improved handling of favorite/recent tokens in the virtual list.

Test Plan

• Manual Smoke Test:
  • Open/Close modal (state resets correctly)
  • Search tokens (input syncs to atom, list filters)
  • Favorites/Recent tokens display correctly
  • "Clear" recent tokens works
  • Chain selector panel works (desktop & mobile)
  • Bridge tokens filtering
  • LP Widget flow (gated by displayLpTokenLists)
• Static Analysis:
  • TypeScript check passed
  • ESLint passed
• Fixtures: Updated SelectTokenModal/index.cosmos.tsx to use CosmosAtomProvider.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
cowfi	Ready	Preview	Dec 15, 2025 10:36am
explorer-dev	Ready	Preview	Dec 15, 2025 10:36am
swap-dev	Ready	Preview	Dec 15, 2025 10:36am
widget-configurator	Ready	Preview	Dec 15, 2025 10:36am

2 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
cosmos	Ignored		Dec 15, 2025 10:36am
sdk-tools	Ignored	Preview	Dec 15, 2025 10:36am

[coderabbitai]

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

---

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