feat: new token selector

apps/cowswap-frontend/src/entities/bridgeProvider/index.ts

@@ -1,4 +1,5 @@
 export { useBridgeSupportedNetworks, useBridgeSupportedNetwork } from './useBridgeSupportedNetworks'
 export { useBridgeSupportedTokens } from './useBridgeSupportedTokens'
+export { useRoutesAvailability } from './useRoutesAvailability'
 export { useHasHookBridgeProvidersEnabled } from './useHasHookBridgeProvidersEnabled'
 export { BridgeProvidersUpdater } from './BridgeProvidersUpdater'

apps/cowswap-frontend/src/entities/bridgeProvider/routesAvailabilityUtils.ts

@@ -0,0 +1,107 @@
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
+
+import { bridgingSdk } from 'tradingSdk/bridgingSdk'
+
+export interface RoutesAvailabilityResult {
+  unavailableChainIds: Set<number>
+  loadingChainIds: Set<number>
+  isLoading: boolean
+}
+
+export interface RouteCheckResult {
+  chainId: number
+  isAvailable: boolean
+}
+
+export const EMPTY_ROUTES_RESULT: RoutesAvailabilityResult = {
+  unavailableChainIds: new Set(),
+  loadingChainIds: new Set(),
+  isLoading: false,
+}
+
+export function filterDestinationChains(destinationChainIds: number[], sourceChainId: number | undefined): number[] {
+  return destinationChainIds.filter((id) => id !== sourceChainId)
+}
+
+export type RoutesAvailabilityKey = [SupportedChainId, string, string, string]
+
+export interface RoutesAvailabilityKeyParams {
+  isBridgingEnabled: boolean
+  sourceChainId: SupportedChainId | undefined
+  chainsToCheck: number[]
+  providersKey: string
+}
+
+export function createAvailabilitySwrKey(params: RoutesAvailabilityKeyParams): RoutesAvailabilityKey | null {
+  const { isBridgingEnabled, sourceChainId, chainsToCheck, providersKey } = params
+
+  if (!isBridgingEnabled || !sourceChainId || chainsToCheck.length === 0) {
+    return null
+  }
+
+  return [
+    sourceChainId,
+    chainsToCheck
+      .slice()
+      .sort((a, b) => a - b)
+      .join(','),
+    providersKey,
+    'routesAvailability',
+  ]
+}
+
+export async function fetchRoutesAvailability(key: RoutesAvailabilityKey): Promise<RouteCheckResult[]> {
+  const [sellChainId, chainIdsString] = key
+  const chainIds = chainIdsString.split(',').map(Number)
+
+  return Promise.all(chainIds.map((buyChainId) => checkSingleRouteAvailability(sellChainId, buyChainId)))
+}
+
+async function checkSingleRouteAvailability(
+  sellChainId: SupportedChainId,
+  buyChainId: number,
+): Promise<RouteCheckResult> {
+  try {
+    const result = await bridgingSdk.getBuyTokens({ sellChainId, buyChainId })
+    const isAvailable = result.tokens.length > 0 && result.isRouteAvailable
+
+    return { chainId: buyChainId, isAvailable }
+  } catch (error) {
+    console.warn(`[routesAvailability] Failed to check route ${sellChainId} -> ${buyChainId}`, error)
+
+    return { chainId: buyChainId, isAvailable: false }
+  }
+}
+
+export interface BuildResultParams {
+  swrKey: RoutesAvailabilityKey | null
+  isLoading: boolean
+  data: RouteCheckResult[] | undefined
+  chainsToCheck: number[]
+}
+
+export function buildRoutesAvailabilityResult(params: BuildResultParams): RoutesAvailabilityResult {
+  const { swrKey, isLoading, data, chainsToCheck } = params
+
+  if (!swrKey) {
+    return EMPTY_ROUTES_RESULT
+  }
+
+  if (isLoading || !data) {
+    return {
+      unavailableChainIds: new Set(),
+      loadingChainIds: new Set(chainsToCheck),
+      isLoading: true,
+    }
+  }
+
+  const unavailableChainIds = new Set<number>(
+    data.filter((result) => !result.isAvailable).map((result) => result.chainId),
+  )
+
+  return {
+    unavailableChainIds,
+    loadingChainIds: new Set(),
+    isLoading: false,
+  }
+}

apps/cowswap-frontend/src/entities/bridgeProvider/useRoutesAvailability.test.ts

@@ -0,0 +1,164 @@
+import { useIsBridgingEnabled } from '@cowprotocol/common-hooks'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
+
+import { renderHook, waitFor } from '@testing-library/react'
+import { bridgingSdk } from 'tradingSdk/bridgingSdk'
+
+import { useBridgeProvidersIds } from './useBridgeProvidersIds'
+import { useRoutesAvailability } from './useRoutesAvailability'
+
+// Mock dependencies
+jest.mock('@cowprotocol/common-hooks', () => ({
+  useIsBridgingEnabled: jest.fn(),
+}))
+
+jest.mock('./useBridgeProvidersIds', () => ({
+  useBridgeProvidersIds: jest.fn(),
+}))
+
+jest.mock('tradingSdk/bridgingSdk', () => ({
+  bridgingSdk: {
+    getBuyTokens: jest.fn(),
+  },
+}))
+
+const mockUseIsBridgingEnabled = useIsBridgingEnabled as jest.Mock
+const mockUseBridgeProvidersIds = useBridgeProvidersIds as jest.Mock
+const mockGetBuyTokens = bridgingSdk.getBuyTokens as jest.Mock
+
+let testId = 0
+
+describe('useRoutesAvailability', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseIsBridgingEnabled.mockReturnValue(true)
+    // Use unique provider IDs per test to avoid SWR cache conflicts
+    testId++
+    mockUseBridgeProvidersIds.mockReturnValue([`provider-${testId}`])
+  })
+
+  it('returns empty result when bridging is disabled', () => {
+    mockUseIsBridgingEnabled.mockReturnValue(false)
+
+    const { result } = renderHook(() =>
+      useRoutesAvailability(SupportedChainId.MAINNET, [SupportedChainId.GNOSIS_CHAIN]),
+    )
+
+    expect(result.current).toEqual({
+      unavailableChainIds: new Set(),
+      loadingChainIds: new Set(),
+      isLoading: false,
+    })
+  })
+
+  it('returns empty result when sourceChainId is undefined', () => {
+    const { result } = renderHook(() => useRoutesAvailability(undefined, [SupportedChainId.GNOSIS_CHAIN]))
+
+    expect(result.current).toEqual({
+      unavailableChainIds: new Set(),
+      loadingChainIds: new Set(),
+      isLoading: false,
+    })
+  })
+
+  it('returns empty result when destinationChainIds is empty', () => {
+    const { result } = renderHook(() => useRoutesAvailability(SupportedChainId.MAINNET, []))
+
+    expect(result.current).toEqual({
+      unavailableChainIds: new Set(),
+      loadingChainIds: new Set(),
+      isLoading: false,
+    })
+  })
+
+  it('excludes source chain from chains to check', async () => {
+    mockGetBuyTokens.mockResolvedValue({ tokens: ['token1'], isRouteAvailable: true })
+
+    renderHook(() =>
+      useRoutesAvailability(SupportedChainId.MAINNET, [
+        SupportedChainId.MAINNET, // same as source, should be excluded
+        SupportedChainId.GNOSIS_CHAIN,
+      ]),
+    )
+
+    await waitFor(() => {
+      expect(mockGetBuyTokens).toHaveBeenCalledTimes(1)
+      expect(mockGetBuyTokens).toHaveBeenCalledWith({
+        sellChainId: SupportedChainId.MAINNET,
+        buyChainId: SupportedChainId.GNOSIS_CHAIN,
+      })
+    })
+  })
+
+  it('marks chains as unavailable when route check fails', async () => {
+    mockGetBuyTokens.mockRejectedValue(new Error('Network error'))
+
+    const { result } = renderHook(() =>
+      useRoutesAvailability(SupportedChainId.MAINNET, [SupportedChainId.GNOSIS_CHAIN]),
+    )
+
+    await waitFor(() => {
+      expect(result.current.unavailableChainIds.has(SupportedChainId.GNOSIS_CHAIN)).toBe(true)
+      expect(result.current.isLoading).toBe(false)
+    })
+  })
+
+  it('marks chains as unavailable when no tokens available', async () => {
+    mockGetBuyTokens.mockResolvedValue({ tokens: [], isRouteAvailable: true })
+
+    const { result } = renderHook(() =>
+      useRoutesAvailability(SupportedChainId.MAINNET, [SupportedChainId.GNOSIS_CHAIN]),
+    )
+
+    await waitFor(() => {
+      expect(result.current.unavailableChainIds.has(SupportedChainId.GNOSIS_CHAIN)).toBe(true)
+      expect(result.current.isLoading).toBe(false)
+    })
+  })
+
+  it('marks chains as unavailable when route is not available', async () => {
+    mockGetBuyTokens.mockResolvedValue({ tokens: ['token1'], isRouteAvailable: false })
+
+    const { result } = renderHook(() =>
+      useRoutesAvailability(SupportedChainId.MAINNET, [SupportedChainId.GNOSIS_CHAIN]),
+    )
+
+    await waitFor(() => {
+      expect(result.current.unavailableChainIds.has(SupportedChainId.GNOSIS_CHAIN)).toBe(true)
+      expect(result.current.isLoading).toBe(false)
+    })
+  })
+
+  it('marks chains as available when route exists', async () => {
+    mockGetBuyTokens.mockResolvedValue({ tokens: ['token1'], isRouteAvailable: true })
+
+    const { result } = renderHook(() =>
+      useRoutesAvailability(SupportedChainId.MAINNET, [SupportedChainId.GNOSIS_CHAIN]),
+    )
+
+    await waitFor(() => {
+      expect(result.current.unavailableChainIds.has(SupportedChainId.GNOSIS_CHAIN)).toBe(false)
+      expect(result.current.isLoading).toBe(false)
+    })
+  })
+
+  it('checks multiple destination chains in parallel', async () => {
+    // Mock based on buyChainId parameter
+    mockGetBuyTokens.mockImplementation(({ buyChainId }) => {
+      if (buyChainId === SupportedChainId.GNOSIS_CHAIN) {
+        return Promise.resolve({ tokens: ['token1'], isRouteAvailable: true })
+      }
+      return Promise.resolve({ tokens: [], isRouteAvailable: false })
+    })
+
+    const { result } = renderHook(() =>
+      useRoutesAvailability(SupportedChainId.MAINNET, [SupportedChainId.GNOSIS_CHAIN, SupportedChainId.ARBITRUM_ONE]),
+    )
+
+    await waitFor(() => {
+      expect(mockGetBuyTokens).toHaveBeenCalledTimes(2)
+      expect(result.current.unavailableChainIds.has(SupportedChainId.ARBITRUM_ONE)).toBe(true)
+      expect(result.current.unavailableChainIds.has(SupportedChainId.GNOSIS_CHAIN)).toBe(false)
+    })
+  })
+})

apps/cowswap-frontend/src/entities/bridgeProvider/useRoutesAvailability.ts

@@ -0,0 +1,54 @@
+import { useMemo } from 'react'
+
+import { SWR_NO_REFRESH_OPTIONS } from '@cowprotocol/common-const'
+import { useIsBridgingEnabled } from '@cowprotocol/common-hooks'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
+
+import useSWR from 'swr'
+
+import {
+  buildRoutesAvailabilityResult,
+  createAvailabilitySwrKey,
+  fetchRoutesAvailability,
+  filterDestinationChains,
+  RouteCheckResult,
+  RoutesAvailabilityKey,
+  RoutesAvailabilityResult,
+} from './routesAvailabilityUtils'
+import { useBridgeProvidersIds } from './useBridgeProvidersIds'
+
+export type { RoutesAvailabilityResult } from './routesAvailabilityUtils'
+
+/**
+ * Pre-checks route availability for multiple destination chains from a source chain.
+ * Returns which chains have unavailable routes and which are still loading.
+ */
+export function useRoutesAvailability(
+  sourceChainId: SupportedChainId | undefined,
+  destinationChainIds: number[],
+): RoutesAvailabilityResult {
+  const isBridgingEnabled = useIsBridgingEnabled()
+  const providerIds = useBridgeProvidersIds()
+  const providersKey = providerIds.join('|')
+
+  const chainsToCheck = useMemo(
+    () => filterDestinationChains(destinationChainIds, sourceChainId),
+    [destinationChainIds, sourceChainId],
+  )
+
+  const swrKey = useMemo(
+    () => createAvailabilitySwrKey({ isBridgingEnabled, sourceChainId, chainsToCheck, providersKey }),
+    [isBridgingEnabled, sourceChainId, chainsToCheck, providersKey],
+  )
+
+  const { data, isLoading } = useSWR<RouteCheckResult[], Error, RoutesAvailabilityKey | null>(
+    swrKey,
+    fetchRoutesAvailability,
+    SWR_NO_REFRESH_OPTIONS,
+  )
+
+  return useMemo(
+    () => buildRoutesAvailabilityResult({ swrKey, isLoading, data, chainsToCheck }),
+    [swrKey, isLoading, data, chainsToCheck],
+  )
+}