feat(tokenselector): 7 - implement SelectTokenModal with enhanced token selection

apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/TokenColumnContent.tsx

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react'
+
+import { ChainInfo } from '@cowprotocol/cow-sdk'
+import { TokenListCategory } from '@cowprotocol/tokens'
+
+import { SelectTokenModalContent } from './SelectTokenModalContent'
+import * as styledEl from './styled'
+
+import { LpTokenListsWidget } from '../../containers/LpTokenListsWidget'
+import { ChainsToSelectState, TokenSelectionHandler } from '../../types'
+import { ChainsSelector } from '../ChainsSelector'
+
+type TokenListCategoryState = [TokenListCategory[] | null, (category: TokenListCategory[] | null) => void]
+
+export interface TokenColumnContentProps {
+  displayLpTokenLists?: boolean
+  account: string | undefined
+  inputValue: string
+  onSelectToken: TokenSelectionHandler
+  openPoolPage(poolAddress: string): void
+  disableErc20?: boolean
+  tokenListCategoryState: TokenListCategoryState
+  isRouteAvailable: boolean | undefined
+  chainsToSelect?: ChainsToSelectState
+  onSelectChain: (chain: ChainInfo) => void
+  children: ReactNode
+}
+
+export function TokenColumnContent({
+  displayLpTokenLists,
+  account,
+  inputValue,
+  onSelectToken,
+  openPoolPage,
+  disableErc20,
+  tokenListCategoryState,
+  isRouteAvailable,
+  chainsToSelect,
+  onSelectChain,
+  children,
+}: TokenColumnContentProps): ReactNode {
+  if (displayLpTokenLists) {
+    return (
+      <LpTokenListsWidget
+        account={account}
+        search={inputValue}
+        onSelectToken={onSelectToken}
+        openPoolPage={openPoolPage}
+        disableErc20={disableErc20}
+        tokenListCategoryState={tokenListCategoryState}
+      >
+        {children}
+      </LpTokenListsWidget>
+    )
+  }
+
+  return (
+    <>
+      <LegacyChainSelector chainsToSelect={chainsToSelect} onSelectChain={onSelectChain} />
+      <SelectTokenModalContent isRouteAvailable={isRouteAvailable}>{children}</SelectTokenModalContent>
+    </>
+  )
+}
+
+interface LegacyChainSelectorProps {
+  chainsToSelect: ChainsToSelectState | undefined
+  onSelectChain: (chain: ChainInfo) => void
+}
+
+function LegacyChainSelector({ chainsToSelect, onSelectChain }: LegacyChainSelectorProps): ReactNode {
+  if (!chainsToSelect?.chains?.length) {
+    return null
+  }
+
+  return (
+    <styledEl.LegacyChainsWrapper>
+      <ChainsSelector
+        isLoading={chainsToSelect.isLoading || false}
+        chains={chainsToSelect.chains}
+        defaultChainId={chainsToSelect.defaultChainId}
+        onSelectChain={onSelectChain}
+      />
+    </styledEl.LegacyChainsWrapper>
+  )
+}

apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/helpers.tsx

@@ -0,0 +1,88 @@
+import { ReactNode, useMemo, useState } from 'react'
+
+import { BackButton } from '@cowprotocol/ui'
+
+import { SettingsIcon } from 'modules/trade/pure/Settings'
+
+import * as styledEl from './styled'
+
+import { SelectTokenContext } from '../../types'
+
+import type { SelectTokenModalProps } from './types'
+
+export function useSelectTokenContext(props: SelectTokenModalProps): SelectTokenContext {
+  const {
+    selectedToken,
+    balancesState,
+    unsupportedTokens,
+    permitCompatibleTokens,
+    onSelectToken,
+    onTokenListItemClick,
+    account,
+    tokenListTags,
+  } = props
+
+  return useMemo(
+    () => ({
+      balancesState,
+      selectedToken,
+      onSelectToken,
+      onTokenListItemClick,
+      unsupportedTokens,
+      permitCompatibleTokens,
+      tokenListTags,
+      isWalletConnected: !!account,
+    }),
+    [
+      balancesState,
+      selectedToken,
+      onSelectToken,
+      onTokenListItemClick,
+      unsupportedTokens,
+      permitCompatibleTokens,
+      tokenListTags,
+      account,
+    ],
+  )
+}
+
+export function useTokenSearchInput(defaultInputValue = ''): [string, (value: string) => void, string] {
+  const [inputValue, setInputValue] = useState<string>(defaultInputValue)
+
+  return [inputValue, setInputValue, inputValue.trim()]
+}
+
+interface TitleBarActionsProps {
+  showManageButton: boolean
+  onDismiss(): void
+  onOpenManageWidget(): void
+  title: string
+}
+
+export function TitleBarActions({
+  showManageButton,
+  onDismiss,
+  onOpenManageWidget,
+  title,
+}: TitleBarActionsProps): ReactNode {
+  return (
+    <styledEl.TitleBar>
+      <styledEl.TitleGroup>
+        <BackButton onClick={onDismiss} />
+        <styledEl.ModalTitle>{title}</styledEl.ModalTitle>
+      </styledEl.TitleGroup>
+      {showManageButton && (
+        <styledEl.TitleActions>
+          <styledEl.TitleActionButton
+            id="token-selector-title-manage-button"
+            onClick={onOpenManageWidget}
+            aria-label="Manage token lists"
+            title="Manage token lists"
+          >
+            <SettingsIcon />
+          </styledEl.TitleActionButton>
+        </styledEl.TitleActions>
+      )}
+    </styledEl.TitleBar>
+  )
+}

apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/index.cosmos.tsx

@@ -1,19 +1,21 @@
 import { BalancesState } from '@cowprotocol/balances-and-allowances'
+import { CHAIN_INFO } from '@cowprotocol/common-const'
 import { getRandomInt } from '@cowprotocol/common-utils'
 import { SupportedChainId, ChainInfo } from '@cowprotocol/cow-sdk'
 import { BigNumber } from '@ethersproject/bignumber'
 
 import styled from 'styled-components/macro'
 
 import { allTokensMock, favoriteTokensMock } from '../../mocks'
+import { mapChainInfo } from '../../utils/mapChainInfo'
 
 import { SelectTokenModal, SelectTokenModalProps } from './index'
 
 const Wrapper = styled.div`
   max-height: 90vh;
   margin: 20px auto;
   display: flex;
-  width: 450px;
+  width: 520px;
 `
 
 const unsupportedTokens = {}
@@ -26,6 +28,20 @@ const balances = allTokensMock.reduce<BalancesState['values']>((acc, token) => {
   return acc
 }, {})
 
+const chainsMock: ChainInfo[] = [
+  SupportedChainId.MAINNET,
+  SupportedChainId.BASE,
+  SupportedChainId.ARBITRUM_ONE,
+].reduce<ChainInfo[]>((acc, id) => {
+  const info = CHAIN_INFO[id]
+
+  if (info) {
+    acc.push(mapChainInfo(id, info))
+  }
+
+  return acc
+}, [])
+
 const defaultProps: SelectTokenModalProps = {
   tokenListTags: {},
   account: undefined,
@@ -35,7 +51,11 @@ const defaultProps: SelectTokenModalProps = {
   favoriteTokens: favoriteTokensMock,
   areTokensLoading: false,
   areTokensFromBridge: false,
-  chainsToSelect: undefined,
+  chainsToSelect: {
+    chains: chainsMock,
+    isLoading: false,
+    defaultChainId: SupportedChainId.MAINNET,
+  },
   onSelectChain(chain: ChainInfo) {
     console.log('onSelectChain', chain)
   },
@@ -48,6 +68,7 @@ const defaultProps: SelectTokenModalProps = {
   },
   selectedToken,
   isRouteAvailable: true,
+  modalTitle: 'Swap from',
   recentTokens: favoriteTokensMock.slice(0, 2),
   selectedTargetChainId: SupportedChainId.SEPOLIA,
   onSelectToken() {