feat: enhance token selector modal

apps/cowswap-frontend/src/common/pure/VirtualList/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useRef } from 'react'
+import { ReactNode, useCallback, useLayoutEffect, useRef } from 'react'
 
 import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual'
 import ms from 'ms.macro'
@@ -7,15 +7,72 @@ import { ListInner, ListScroller, ListWrapper, LoadingRows } from './styled'
 
 const scrollDelay = ms`400ms`
 
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-const threeDivs = () => (
-  <>
-    <div />
-    <div />
-    <div />
-  </>
-)
+const LoadingPlaceholder: () => ReactNode = () => {
+  return (
+    <>
+      <div />
+      <div />
+      <div />
+    </>
+  )
+}
+
+interface VirtualListRowProps<T> {
+  item: VirtualItem
+  loading?: boolean
+  items: T[]
+  getItemView(items: T[], item: VirtualItem): ReactNode
+  measureElement(element: Element | null): void
+}
+
+function VirtualListRow<T>({ item, loading, items, getItemView, measureElement }: VirtualListRowProps<T>): ReactNode {
+  if (loading) {
+    return (
+      <LoadingRows>
+        <LoadingPlaceholder />
+      </LoadingRows>
+    )
+  }
+
+  return (
+    <div data-index={item.index} ref={measureElement}>
+      {getItemView(items, item)}
+    </div>
+  )
+}
+
+interface VirtualListRowsProps<T> {
+  virtualItems: VirtualItem[]
+  loading?: boolean
+  items: T[]
+  getItemView(items: T[], item: VirtualItem): ReactNode
+  measureElement(element: Element | null): void
+}
+
+function renderVirtualListRows<T>({
+  virtualItems,
+  loading,
+  items,
+  getItemView,
+  measureElement,
+}: VirtualListRowsProps<T>): ReactNode[] {
+  const elements: ReactNode[] = []
+
+  for (const item of virtualItems) {
+    elements.push(
+      <VirtualListRow
+        key={item.key}
+        item={item}
+        loading={loading}
+        items={items}
+        getItemView={getItemView}
+        measureElement={measureElement}
+      />,
+    )
+  }
+
+  return elements
+}
 
 interface VirtualListProps<T> {
   id?: string
@@ -26,18 +83,18 @@ interface VirtualListProps<T> {
   loading?: boolean
   estimateSize?: () => number
   children?: ReactNode
+  scrollResetKey?: string | number | boolean
 }
 
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function VirtualList<T>({
   id,
   items,
   loading,
   getItemView,
   children,
   estimateSize = () => 56,
-}: VirtualListProps<T>) {
+  scrollResetKey,
+}: VirtualListProps<T>): ReactNode {
   const parentRef = useRef<HTMLDivElement>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
   const scrollTimeoutRef = useRef<NodeJS.Timeout>(undefined)
@@ -53,31 +110,48 @@ export function VirtualList<T>({
     }, scrollDelay)
   }, [])
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const virtualizer = useVirtualizer({
     getScrollElement: () => parentRef.current,
     count: items.length,
     estimateSize,
     overscan: 5,
   })
 
+  useLayoutEffect(() => {
+    if (scrollResetKey === undefined) {
+      return
+    }
+
+    const scrollContainer = parentRef.current
+
+    if (scrollContainer) {
+      scrollContainer.scrollTop = 0
+      scrollContainer.scrollLeft = 0
+
+      if (typeof scrollContainer.scrollTo === 'function') {
+        scrollContainer.scrollTo({ top: 0, left: 0, behavior: 'auto' })
+      }
+    }
+
+    virtualizer.scrollToOffset(0, { align: 'start' })
+  }, [scrollResetKey, virtualizer])
+
   const virtualItems = virtualizer.getVirtualItems()
+  const virtualRows = renderVirtualListRows({
+    virtualItems,
+    loading,
+    items,
+    getItemView,
+    measureElement: virtualizer.measureElement,
+  })
 
   return (
     <ListWrapper id={id} ref={parentRef} onScroll={onScroll}>
       <ListInner ref={wrapperRef} style={{ height: virtualizer.getTotalSize() }}>
         <ListScroller style={{ transform: `translateY(${virtualItems[0]?.start ?? 0}px)` }}>
           {children}
-          {virtualItems.map((item) => {
-            if (loading) {
-              return <LoadingRows key={item.key}>{threeDivs()}</LoadingRows>
-            }
-
-            return (
-              <div key={item.key} data-index={item.index} ref={virtualizer.measureElement}>
-                {getItemView(items, item)}
-              </div>
-            )
-          })}
+          {virtualRows}
         </ListScroller>
       </ListInner>
     </ListWrapper>

apps/cowswap-frontend/src/modules/tokensList/containers/LpTokenListsWidget/index.tsx

@@ -1,7 +1,6 @@
 import { ReactNode, useMemo } from 'react'
 
 import { useTokensBalances } from '@cowprotocol/balances-and-allowances'
-import { TokenWithLogo } from '@cowprotocol/common-const'
 import {
   getTokenSearchFilter,
   LP_TOKEN_LIST_CATEGORIES,
@@ -21,12 +20,14 @@ import { TabButton, TabsContainer } from './styled'
 import { LpTokenLists } from '../../pure/LpTokenLists'
 import { tokensListSorter } from '../../utils/tokensListSorter'
 
+import type { TokenSelectionHandler } from '../../types'
+
 interface LpTokenListsProps<T = TokenListCategory[] | null> {
   account: string | undefined
   children: ReactNode
   search: string
   disableErc20?: boolean
-  onSelectToken(token: TokenWithLogo): void
+  onSelectToken: TokenSelectionHandler
   openPoolPage(poolAddress: string): void
   tokenListCategoryState: [T, (category: T) => void]
 }

apps/cowswap-frontend/src/modules/tokensList/containers/LpTokenPage/index.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react'
 
-import { TokenWithLogo } from '@cowprotocol/common-const'
 import { ExplorerDataType, getExplorerLink, shortenAddress } from '@cowprotocol/common-utils'
 import { TokenLogo, useTokensByAddressMap } from '@cowprotocol/tokens'
 import { ExternalLink, ModalHeader, TokenSymbol } from '@cowprotocol/ui'
@@ -20,6 +19,8 @@ import {
   Wrapper,
 } from './styled'
 
+import type { TokenSelectionHandler } from '../../types'
+
 function renderValue<T>(value: T | undefined, template: (v: T) => string, defaultValue?: string): string | undefined {
   return value ? template(value) : defaultValue
 }
@@ -31,7 +32,7 @@ interface LpTokenPageProps {
 
   onDismiss(): void
 
-  onSelectToken(token: TokenWithLogo): void
+  onSelectToken: TokenSelectionHandler
 }
 
 // eslint-disable-next-line max-lines-per-function

apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/MobileChainPanelPortal.tsx

@@ -0,0 +1,45 @@
+import { MouseEvent, ReactNode } from 'react'
+
+import { createPortal } from 'react-dom'
+
+import { MobileChainPanelCard, MobileChainPanelOverlay } from './styled'
+
+import { ChainPanel } from '../../pure/ChainPanel'
+
+import type { SelectTokenWidgetViewProps } from './controllerProps'
+
+interface MobileChainPanelPortalProps {
+  chainsPanelTitle: string
+  chainsToSelect: SelectTokenWidgetViewProps['chainsToSelect']
+  onSelectChain: SelectTokenWidgetViewProps['onSelectChain']
+  onClose(): void
+}
+
+export function MobileChainPanelPortal({
+  chainsPanelTitle,
+  chainsToSelect,
+  onSelectChain,
+  onClose,
+}: MobileChainPanelPortalProps): ReactNode {
+  if (typeof document === 'undefined') {
+    return null
+  }
+
+  return createPortal(
+    <MobileChainPanelOverlay onClick={onClose}>
+      <MobileChainPanelCard onClick={(event: MouseEvent<HTMLDivElement>) => event.stopPropagation()}>
+        <ChainPanel
+          title={chainsPanelTitle}
+          chainsState={chainsToSelect}
+          onSelectChain={(chain) => {
+            onSelectChain(chain)
+            onClose()
+          }}
+          variant="fullscreen"
+          onClose={onClose}
+        />
+      </MobileChainPanelCard>
+    </MobileChainPanelOverlay>,
+    document.body,
+  )
+}

apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/controller.ts

@@ -0,0 +1,85 @@
+import { useIsBridgingEnabled } from '@cowprotocol/common-hooks'
+import { useWalletInfo } from '@cowprotocol/wallet'
+
+import { Field } from 'legacy/state/types'
+
+import { useLpTokensWithBalances } from 'modules/yield/shared'
+
+import { SelectTokenWidgetViewProps } from './controllerProps'
+import {
+  useManageWidgetVisibility,
+  useTokenAdminActions,
+  useTokenDataSources,
+  useWidgetMetadata,
+} from './controllerState'
+import { useSelectTokenWidgetViewState } from './controllerViewState'
+
+import { useChainsToSelect } from '../../hooks/useChainsToSelect'
+import { useCloseTokenSelectWidget } from '../../hooks/useCloseTokenSelectWidget'
+import { useOnSelectChain } from '../../hooks/useOnSelectChain'
+import { useOnTokenListAddingError } from '../../hooks/useOnTokenListAddingError'
+import { useSelectTokenWidgetState } from '../../hooks/useSelectTokenWidgetState'
+import { useUpdateSelectTokenWidgetState } from '../../hooks/useUpdateSelectTokenWidgetState'
+
+export interface SelectTokenWidgetProps {
+  displayLpTokenLists?: boolean
+  standalone?: boolean
+}
+
+export interface SelectTokenWidgetController {
+  shouldRender: boolean
+  hasChainPanel: boolean
+  viewProps: SelectTokenWidgetViewProps
+}
+
+export function useSelectTokenWidgetController({
+  displayLpTokenLists,
+  standalone,
+}: SelectTokenWidgetProps): SelectTokenWidgetController {
+  const widgetState = useSelectTokenWidgetState()
+  const { count: lpTokensWithBalancesCount } = useLpTokensWithBalances()
+  const resolvedField = widgetState.field ?? Field.INPUT
+  const chainsToSelect = useChainsToSelect()
+  const onSelectChain = useOnSelectChain()
+  const isBridgeFeatureEnabled = useIsBridgingEnabled()
+  const manageWidget = useManageWidgetVisibility()
+  const updateSelectTokenWidget = useUpdateSelectTokenWidgetState()
+  const { account, chainId: walletChainId } = useWalletInfo()
+  const closeTokenSelectWidget = useCloseTokenSelectWidget()
+  const tokenData = useTokenDataSources()
+  const onTokenListAddingError = useOnTokenListAddingError()
+  const tokenAdminActions = useTokenAdminActions()
+  const widgetMetadata = useWidgetMetadata(
+    resolvedField,
+    widgetState.tradeType,
+    displayLpTokenLists,
+    widgetState.oppositeToken,
+    lpTokensWithBalancesCount,
+  )
+
+  const { isChainPanelEnabled, viewProps } = useSelectTokenWidgetViewState({
+    displayLpTokenLists,
+    standalone,
+    widgetState,
+    chainsToSelect,
+    onSelectChain,
+    manageWidget,
+    updateSelectTokenWidget,
+    account,
+    closeTokenSelectWidget,
+    tokenData,
+    onTokenListAddingError,
+    tokenAdminActions,
+    widgetMetadata,
+    walletChainId,
+    isBridgeFeatureEnabled,
+  })
+
+  return {
+    shouldRender: Boolean(widgetState.onSelectToken && (widgetState.open || widgetState.forceOpen)),
+    hasChainPanel: isChainPanelEnabled,
+    viewProps,
+  }
+}
+
+export type { SelectTokenWidgetViewProps } from './controllerProps'