@luxexchange/lx 1.0.0

package/src/components/TokenSelector/TokenSelector.tsx

@@ -0,0 +1,423 @@
+import type { BottomSheetView } from '@gorhom/bottom-sheet'
+import { Currency } from '@uniswap/sdk-core'
+import { hasStringAsync } from 'expo-clipboard'
+import { ComponentProps, memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Flex, ModalCloseIcon, Text, useMedia, useScrollbarStyles, useSporeColors } from '@luxfi/ui/src'
+import { InfoCircleFilled } from '@luxfi/ui/src/components/icons/InfoCircleFilled'
+import { spacing, zIndexes } from '@luxfi/ui/src/theme'
+import PasteButton from '@luxexchange/lx/src/components/buttons/PasteButton'
+import { TokenSelectorOption } from '@luxexchange/lx/src/components/lists/items/types'
+import { type OnchainItemSection, OnchainItemSectionName } from '@luxexchange/lx/src/components/lists/OnchainItemList/types'
+import { useBottomSheetContext } from '@luxexchange/lx/src/components/modals/BottomSheetContext'
+import { Modal } from '@luxexchange/lx/src/components/modals/Modal'
+import { NetworkFilter } from '@luxexchange/lx/src/components/network/NetworkFilter'
+import { CrosschainSwapsPromoBanner } from '@luxexchange/lx/src/components/TokenSelector/CrosschainSwapsPromoBanner'
+import { TokenSelectorEmptySearchList } from '@luxexchange/lx/src/components/TokenSelector/lists/TokenSelectorEmptySearchList'
+import { TokenSelectorSearchResultsList } from '@luxexchange/lx/src/components/TokenSelector/lists/TokenSelectorSearchResultsList'
+import { TokenSelectorSendList } from '@luxexchange/lx/src/components/TokenSelector/lists/TokenSelectorSendList'
+import { TokenSelectorSwapList } from '@luxexchange/lx/src/components/TokenSelector/lists/TokenSelectorSwapList'
+import { TokenSelectorFlow } from '@luxexchange/lx/src/components/TokenSelector/types'
+import { UnsupportedChainedActionsBanner } from '@luxexchange/lx/src/components/TokenSelector/UnsupportedChainedActionsBanner'
+import { flowToModalName } from '@luxexchange/lx/src/components/TokenSelector/utils'
+import { useLuxContext } from '@luxexchange/lx/src/contexts/LuxContext'
+import { TradeableAsset } from '@luxexchange/lx/src/entities/assets'
+import type { AddressGroup } from '@luxexchange/lx/src/features/accounts/store/types/AccountsState'
+import { useEnabledChains } from '@luxexchange/lx/src/features/chains/hooks/useEnabledChains'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { SearchContext } from '@luxexchange/lx/src/features/search/SearchModal/analytics/SearchContext'
+import { useFilterCallbacks } from '@luxexchange/lx/src/features/search/SearchModal/hooks/useFilterCallbacks'
+import { SearchTextInput } from '@luxexchange/lx/src/features/search/SearchTextInput'
+import {
+  ElementName,
+  InterfaceEventName,
+  ModalName,
+  SectionName,
+  LuxEventName,
+} from '@luxexchange/lx/src/features/telemetry/constants'
+import { sendAnalyticsEvent } from '@luxexchange/lx/src/features/telemetry/send'
+import Trace from '@luxexchange/lx/src/features/telemetry/Trace'
+import { isChainSupportedForChainedActions } from '@luxexchange/lx/src/features/transactions/swap/utils/chainedActions'
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+import { currencyAddress } from '@luxexchange/lx/src/utils/currencyId'
+import { getClipboard } from '@luxfi/utilities/src/clipboard/clipboard'
+import { dismissNativeKeyboard } from '@luxfi/utilities/src/device/keyboard/dismissNativeKeyboard'
+import { isExtensionApp, isMobileApp, isMobileWeb, isWebApp, isWebPlatform } from '@luxfi/utilities/src/platform'
+import { useTrace } from '@luxfi/utilities/src/telemetry/trace/TraceContext'
+import { useDebounce } from '@luxfi/utilities/src/time/timing'
+
+export const TOKEN_SELECTOR_WEB_MAX_WIDTH = 400
+export const TOKEN_SELECTOR_WEB_MAX_HEIGHT = 700
+
+export enum TokenSelectorVariation {
+  // used for Send flow, only show currencies with a balance
+  BalancesOnly = 'balances-only',
+
+  // Swap input and output sections specced in 'Multichain UX: Token Selector and Swap' doc on Notion
+  SwapInput = 'swap-input', // balances, recent searches, favorites, popular
+  SwapOutput = 'swap-output', // suggested bases, balances, recent searches, favorites, popular
+}
+
+export const SNAP_POINTS = ['65%', '100%']
+
+export interface TokenSelectorProps {
+  variation: TokenSelectorVariation
+  isModalOpen: boolean
+  currencyField: CurrencyField
+  flow: TokenSelectorFlow
+  addresses: AddressGroup
+  chainId?: UniverseChainId
+  chainIds?: UniverseChainId[]
+  input?: TradeableAsset
+  output?: TradeableAsset
+  isSurfaceReady?: boolean
+  isLimits?: boolean
+  onClose: () => void
+  focusHook?: ComponentProps<typeof BottomSheetView>['focusHook']
+  onSelectChain?: (chainId: UniverseChainId | null) => void
+  onSelectCurrency: ({
+    currency,
+    field,
+    allowCrossChainPair,
+    isPreselectedAsset,
+  }: {
+    currency: Currency
+    field: CurrencyField
+    allowCrossChainPair: boolean
+    isPreselectedAsset: boolean
+  }) => void
+}
+
+export function TokenSelectorContent({
+  currencyField,
+  flow,
+  variation,
+  input,
+  output,
+  addresses,
+  chainId,
+  chainIds,
+  isSurfaceReady = true,
+  isLimits,
+  onClose,
+  onSelectChain,
+  onSelectCurrency,
+  renderedInModal,
+}: Omit<TokenSelectorProps, 'isModalOpen'> & {
+  renderedInModal: boolean
+}): JSX.Element {
+  const { onChangeChainFilter, onChangeText, searchFilter, chainFilter, parsedChainFilter, parsedSearchFilter } =
+    useFilterCallbacks(chainId ?? null, flowToModalName(flow))
+  const debouncedSearchFilter = useDebounce(searchFilter)
+  const debouncedParsedSearchFilter = useDebounce(parsedSearchFilter)
+  const scrollbarStyles = useScrollbarStyles()
+  const { navigateToBuyOrReceiveWithEmptyWallet } = useLuxContext()
+
+  const oppositeToken = currencyField === CurrencyField.INPUT ? output : input
+
+  const media = useMedia()
+  const isSmallScreen = (media.sm && isWebApp) || isMobileApp || isMobileWeb
+
+  const [hasClipboardString, setHasClipboardString] = useState(false)
+
+  const { chains: enabledChains, isTestnetModeEnabled } = useEnabledChains()
+
+  // Check if user clipboard has any text to show paste button
+  useEffect(() => {
+    async function checkClipboard(): Promise<void> {
+      const result = await hasStringAsync()
+      setHasClipboardString(result)
+    }
+
+    // Browser doesn't have permissions to access clipboard by default
+    // so it will prompt the user to allow clipboard access which is
+    // quite jarring and unnecessary.
+    if (isWebApp) {
+      return
+    }
+    checkClipboard().catch(() => undefined)
+  }, [])
+
+  const { t } = useTranslation()
+  const { page } = useTrace()
+
+  // Log currency field only for swap as for send it's always input
+  const currencyFieldName =
+    flow === TokenSelectorFlow.Swap
+      ? currencyField === CurrencyField.INPUT
+        ? ElementName.TokenInputSelector
+        : ElementName.TokenOutputSelector
+      : undefined
+
+  const onSelectCurrencyCallback = useCallback(
+    // eslint-disable-next-line max-params
+    (currencyInfo: CurrencyInfo, section: OnchainItemSection<TokenSelectorOption>, index: number): void => {
+      const searchContext: SearchContext = {
+        category: section.sectionKey,
+        query: debouncedSearchFilter ?? undefined,
+        position: index + 1,
+        suggestionCount: section.data.length,
+        searchChainFilter: chainFilter,
+      }
+
+      // log event that a currency was selected
+      const tokenOption = section.data[index]
+      const balanceUSD = Array.isArray(tokenOption) ? undefined : (tokenOption?.balanceUSD ?? undefined)
+      sendAnalyticsEvent(LuxEventName.TokenSelected, {
+        name: currencyInfo.currency.name,
+        address: currencyAddress(currencyInfo.currency),
+        chain: currencyInfo.currency.chainId,
+        modal: flowToModalName(flow),
+        page,
+        field: currencyField,
+        token_balance_usd: balanceUSD,
+        category: searchContext.category,
+        position: searchContext.position,
+        suggestion_count: searchContext.suggestionCount,
+        query: searchContext.query,
+        tokenSection: section.sectionKey,
+        preselect_asset: false,
+      })
+
+      const oppositeChainId = oppositeToken?.chainId
+
+      const isUnsupportedCombo =
+        (oppositeChainId && !isChainSupportedForChainedActions(oppositeChainId)) ||
+        !isChainSupportedForChainedActions(currencyInfo.currency.chainId)
+
+      const allowCrossChainPair = !isUnsupportedCombo || section.sectionKey === OnchainItemSectionName.BridgingTokens
+
+      onSelectCurrency({
+        currency: currencyInfo.currency,
+        field: currencyField,
+        allowCrossChainPair,
+        isPreselectedAsset: false,
+      })
+    },
+    [debouncedSearchFilter, chainFilter, flow, page, currencyField, onSelectCurrency, oppositeToken?.chainId],
+  )
+
+  const handlePaste = async (): Promise<void> => {
+    const clipboardContent = await getClipboard()
+    if (clipboardContent) {
+      onChangeText(clipboardContent)
+    }
+  }
+
+  const [searchInFocus, setSearchInFocus] = useState(false)
+
+  const onSendEmptyActionPress = useCallback(() => {
+    onClose()
+    navigateToBuyOrReceiveWithEmptyWallet?.()
+  }, [navigateToBuyOrReceiveWithEmptyWallet, onClose])
+
+  function onCancel(): void {
+    setSearchInFocus(false)
+  }
+  function onFocus(): void {
+    if (!isWebPlatform) {
+      setSearchInFocus(true)
+    }
+  }
+
+  const shouldAutoFocusSearch = isWebPlatform && !media.sm
+
+  const shouldShowCrosschainPromoBanner = useMemo(
+    () => !isLimits && (!chainFilter || isChainSupportedForChainedActions(chainFilter)),
+    [isLimits, chainFilter],
+  )
+
+  const tokenSelector = useMemo(() => {
+    if (searchInFocus && !searchFilter && !isTestnetModeEnabled) {
+      return (
+        <TokenSelectorEmptySearchList
+          addresses={addresses}
+          chainFilter={chainFilter}
+          renderedInModal={renderedInModal}
+          onSelectCurrency={onSelectCurrencyCallback}
+        />
+      )
+    }
+
+    if (searchFilter) {
+      return (
+        <TokenSelectorSearchResultsList
+          addresses={addresses}
+          chainFilter={chainFilter}
+          debouncedParsedSearchFilter={debouncedParsedSearchFilter}
+          debouncedSearchFilter={debouncedSearchFilter}
+          isBalancesOnlySearch={variation === TokenSelectorVariation.BalancesOnly}
+          parsedChainFilter={parsedChainFilter}
+          searchFilter={searchFilter}
+          input={input}
+          renderedInModal={renderedInModal}
+          onSelectCurrency={onSelectCurrencyCallback}
+        />
+      )
+    }
+
+    switch (variation) {
+      case TokenSelectorVariation.BalancesOnly:
+        return (
+          <TokenSelectorSendList
+            addresses={addresses}
+            chainFilter={chainFilter}
+            renderedInModal={renderedInModal}
+            onEmptyActionPress={onSendEmptyActionPress}
+            onSelectCurrency={onSelectCurrencyCallback}
+          />
+        )
+      case TokenSelectorVariation.SwapInput:
+        return (
+          <TokenSelectorSwapList
+            oppositeSelectedToken={output}
+            addresses={addresses}
+            chainFilter={chainFilter}
+            renderedInModal={renderedInModal}
+            onSelectCurrency={onSelectCurrencyCallback}
+          />
+        )
+      case TokenSelectorVariation.SwapOutput:
+        return (
+          <TokenSelectorSwapList
+            oppositeSelectedToken={input}
+            addresses={addresses}
+            chainFilter={chainFilter}
+            renderedInModal={renderedInModal}
+            onSelectCurrency={onSelectCurrencyCallback}
+          />
+        )
+      default:
+        return undefined
+    }
+  }, [
+    searchInFocus,
+    searchFilter,
+    isTestnetModeEnabled,
+    variation,
+    addresses,
+    chainFilter,
+    onSelectCurrencyCallback,
+    debouncedParsedSearchFilter,
+    debouncedSearchFilter,
+    parsedChainFilter,
+    input,
+    onSendEmptyActionPress,
+    output,
+    renderedInModal,
+  ])
+
+  return (
+    <Trace
+      logImpression={isWebApp} // TODO(WEB-5161): Deduplicate shared vs interface-only trace event
+      eventOnTrigger={InterfaceEventName.TokenSelectorOpened}
+      modal={ModalName.TokenSelectorWeb}
+    >
+      <Trace logImpression element={currencyFieldName} section={SectionName.TokenSelector}>
+        <Flex grow gap="$spacing8" style={scrollbarStyles}>
+          {!isSmallScreen && (
+            <Flex row justifyContent="space-between" pt="$spacing16" px="$spacing16">
+              <Text variant="subheading1">{t('common.selectToken.label')}</Text>
+              <ModalCloseIcon onClose={onClose} />
+            </Flex>
+          )}
+          <SearchTextInput
+            autoFocus={shouldAutoFocusSearch}
+            backgroundColor="$surface2"
+            endAdornment={
+              <Flex row alignItems="center">
+                {hasClipboardString && <PasteButton inline textVariant="buttonLabel3" onPress={handlePaste} />}
+                <NetworkFilter
+                  includeAllNetworks={!isTestnetModeEnabled}
+                  chainIds={chainIds || enabledChains}
+                  selectedChain={chainFilter}
+                  styles={isExtensionApp || media.md ? { dropdownZIndex: zIndexes.overlay } : undefined}
+                  onPressChain={(newChainId) => {
+                    onChangeChainFilter(newChainId)
+                    onSelectChain?.(newChainId)
+                  }}
+                />
+              </Flex>
+            }
+            placeholder={t('tokens.selector.search.placeholder')}
+            px="$spacing16"
+            py="$none"
+            mx={spacing.spacing16}
+            my="$spacing4"
+            value={searchFilter ?? ''}
+            onCancel={isWebPlatform ? undefined : onCancel}
+            onChangeText={onChangeText}
+            onFocus={onFocus}
+          />
+          {isLimits && (
+            <Flex
+              row
+              backgroundColor="$surface2"
+              borderRadius="$rounded12"
+              gap="$spacing12"
+              mx="$spacing8"
+              p="$spacing12"
+            >
+              <InfoCircleFilled color="$neutral2" size="$icon.20" />
+              <Text variant="body3">{t('limits.form.disclaimer.mainnet.short')}</Text>
+            </Flex>
+          )}
+
+          {isSurfaceReady && (
+            <Flex grow>
+              {shouldShowCrosschainPromoBanner && <CrosschainSwapsPromoBanner />}
+              <UnsupportedChainedActionsBanner oppositeToken={oppositeToken} chainFilter={chainFilter ?? undefined} />
+              {tokenSelector}
+            </Flex>
+          )}
+        </Flex>
+      </Trace>
+    </Trace>
+  )
+}
+
+function TokenSelectorModalContent(props: TokenSelectorProps): JSX.Element {
+  const { isModalOpen } = props
+  const { isSheetReady } = useBottomSheetContext()
+
+  useEffect(() => {
+    if (isModalOpen) {
+      // Dismiss native keyboard when opening modal in case it was opened by the current screen.
+      dismissNativeKeyboard()
+    }
+  }, [isModalOpen])
+
+  return <TokenSelectorContent {...props} isSurfaceReady={isSheetReady} renderedInModal={true} />
+}
+
+function _TokenSelectorModal(props: TokenSelectorProps): JSX.Element {
+  const colors = useSporeColors()
+  const { isModalOpen, onClose, focusHook } = props
+
+  return (
+    <Modal
+      extendOnKeyboardVisible
+      fullScreen
+      hideKeyboardOnDismiss
+      hideKeyboardOnSwipeDown
+      renderBehindBottomInset
+      backgroundColor={colors.surface1.val}
+      isModalOpen={isModalOpen}
+      maxWidth={isWebPlatform ? TOKEN_SELECTOR_WEB_MAX_WIDTH : undefined}
+      maxHeight={isWebApp ? TOKEN_SELECTOR_WEB_MAX_HEIGHT : undefined}
+      name={ModalName.TokenSelector}
+      padding="$none"
+      snapPoints={SNAP_POINTS}
+      height={isWebApp ? '100vh' : undefined}
+      focusHook={focusHook}
+      onClose={onClose}
+    >
+      <Flex grow maxHeight="100%" overflow="hidden">
+        <TokenSelectorModalContent {...props} />
+      </Flex>
+    </Modal>
+  )
+}
+
+export const TokenSelectorModal = memo(_TokenSelectorModal)

package/src/components/TokenSelector/TokenSelectorList.tsx

@@ -0,0 +1,267 @@
+import { memo, useCallback, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { Text } from '@luxfi/ui/src'
+import { BridgedAssetModal } from '@luxexchange/lx/src/components/BridgedAsset/BridgedAssetModal'
+import {
+  TokenOptionItem as BaseTokenOptionItem,
+  TokenContextMenuVariant,
+} from '@luxexchange/lx/src/components/lists/items/tokens/TokenOptionItem'
+import { TokenOption, TokenSelectorOption } from '@luxexchange/lx/src/components/lists/items/types'
+import { ItemRowInfo } from '@luxexchange/lx/src/components/lists/OnchainItemList/OnchainItemList'
+import type { OnchainItemSection } from '@luxexchange/lx/src/components/lists/OnchainItemList/types'
+import { SelectorBaseList } from '@luxexchange/lx/src/components/lists/SelectorBaseList'
+import { WarningSeverity } from '@luxexchange/lx/src/components/modals/WarningModal/types'
+import { HorizontalTokenList } from '@luxexchange/lx/src/components/TokenSelector/lists/HorizontalTokenList/HorizontalTokenList'
+import { OnSelectCurrency } from '@luxexchange/lx/src/components/TokenSelector/types'
+import { setHasSeenBridgingTooltip } from '@luxexchange/lx/src/features/behaviorHistory/slice'
+import { useEnabledChains } from '@luxexchange/lx/src/features/chains/hooks/useEnabledChains'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { getTokenProtectionWarning, getTokenWarningSeverity } from '@luxexchange/lx/src/features/tokens/warnings/safetyUtils'
+import {
+  useDismissedBridgedAssetWarnings,
+  useDismissedTokenWarnings,
+} from '@luxexchange/lx/src/features/tokens/warnings/slice/hooks'
+import TokenWarningModal from '@luxexchange/lx/src/features/tokens/warnings/TokenWarningModal'
+import { CurrencyId } from '@luxexchange/lx/src/types/currency'
+import { NumberType } from '@luxfi/utilities/src/format/types'
+import { DDRumManualTiming } from '@luxfi/utilities/src/logger/datadog/datadogEvents'
+import { usePerformanceLogger } from '@luxfi/utilities/src/logger/usePerformanceLogger'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+
+function isHorizontalListTokenItem(data: TokenSelectorOption): data is TokenOption[] {
+  return Array.isArray(data)
+}
+
+const TokenOptionItem = memo(function _TokenOptionItem({
+  tokenOption,
+  onSelectCurrency,
+  section,
+  index,
+  showWarnings,
+  showTokenAddress,
+}: {
+  tokenOption: TokenOption
+  section: OnchainItemSection<TokenOption>
+  index: number
+  showWarnings: boolean
+  showTokenAddress?: boolean
+  onSelectCurrency: OnSelectCurrency
+}): JSX.Element {
+  const { currencyInfo } = tokenOption
+
+  const onPress = useCallback(
+    () => onSelectCurrency(currencyInfo, section, index),
+    [index, onSelectCurrency, section, currencyInfo],
+  )
+
+  const dispatch = useDispatch()
+  const onPressTokenOption = useCallback(() => {
+    dispatch(setHasSeenBridgingTooltip(true))
+    onPress()
+  }, [dispatch, onPress])
+
+  // Balance & quantity formatting
+  const { convertFiatAmountFormatted, formatNumberOrString } = useLocalizationContext()
+
+  const tokenBalance = formatNumberOrString({
+    value: tokenOption.quantity,
+    type: NumberType.TokenTx,
+  })
+  const fiatBalance = convertFiatAmountFormatted(tokenOption.balanceUSD, NumberType.FiatTokenQuantity)
+
+  const { isTestnetModeEnabled } = useEnabledChains()
+  const balanceText = isTestnetModeEnabled ? tokenBalance : fiatBalance
+  const quantityText = isTestnetModeEnabled ? undefined : tokenBalance
+
+  // Token protection modal
+  const severity = getTokenWarningSeverity(currencyInfo)
+  const [showWarningModal, setShowWarningModal] = useState(false)
+  const tokenProtectionWarning = getTokenProtectionWarning(currencyInfo)
+  const { tokenWarningDismissed } = useDismissedTokenWarnings(currencyInfo.currency, tokenProtectionWarning)
+  const isBlocked = severity === WarningSeverity.Blocked
+  const shouldShowWarningModalOnPress =
+    showWarnings && (isBlocked || (severity !== WarningSeverity.None && !tokenWarningDismissed))
+
+  const isBridgedAsset = Boolean(currencyInfo.isBridged)
+  const [showBridgedAssetWarningModal, setShowBridgedAssetWarningModal] = useState(false)
+  const { tokenWarningDismissed: bridgedAssetTokenWarningDismissed } = useDismissedBridgedAssetWarnings(
+    currencyInfo.currency,
+  )
+  const shouldShowBridgedAssetWarningModalOnPress = showWarnings && isBridgedAsset && !bridgedAssetTokenWarningDismissed
+  const hasWarningModals = shouldShowWarningModalOnPress || shouldShowBridgedAssetWarningModalOnPress
+
+  const setWarningModalVisible = useCallback(
+    (visible: boolean) => {
+      // Handle token warning modal visibility as first priority
+      if (shouldShowWarningModalOnPress) {
+        setShowWarningModal(visible)
+        return
+      }
+
+      // Handle bridged asset warning modal visibility
+      setShowBridgedAssetWarningModal(visible)
+    },
+    [shouldShowWarningModalOnPress],
+  )
+
+  const onAcceptTokenWarning = useCallback(() => {
+    // Handle token warning modal dismissal
+    if (showWarningModal) {
+      setShowWarningModal(false)
+
+      // If the bridged asset warning modal should not be shown, proceed to the next step
+      if (!shouldShowBridgedAssetWarningModalOnPress) {
+        onPress()
+      } else {
+        setShowBridgedAssetWarningModal(true)
+      }
+
+      return
+    }
+
+    // Handle bridged asset warning modal dismissal
+    if (showBridgedAssetWarningModal) {
+      setShowBridgedAssetWarningModal(false)
+      onPress()
+
+      return
+    }
+
+    // No modals showing - proceed with action
+    onPress()
+  }, [onPress, showWarningModal, showBridgedAssetWarningModal, shouldShowBridgedAssetWarningModalOnPress])
+
+  return (
+    <BaseTokenOptionItem
+      option={tokenOption}
+      showTokenAddress={showTokenAddress}
+      contextMenuVariant={TokenContextMenuVariant.TokenSelector}
+      rightElement={
+        tokenOption.quantity && tokenOption.quantity !== 0 ? (
+          <>
+            <Text variant="body1">{balanceText}</Text>
+            {quantityText && (
+              <Text color="$neutral2" variant="body3">
+                {quantityText}
+              </Text>
+            )}
+          </>
+        ) : undefined
+      }
+      showDisabled={Boolean((showWarnings && isBlocked) || tokenOption.isUnsupported)}
+      modalInfo={{
+        modal: showBridgedAssetWarningModal ? (
+          <BridgedAssetModal
+            currencyInfo0={currencyInfo}
+            isOpen={showBridgedAssetWarningModal}
+            onClose={(): void => setShowBridgedAssetWarningModal(false)}
+            onContinue={onAcceptTokenWarning}
+          />
+        ) : (
+          <TokenWarningModal
+            currencyInfo0={currencyInfo}
+            isVisible={showWarningModal}
+            closeModalOnly={(): void => setShowWarningModal(false)}
+            onAcknowledge={onAcceptTokenWarning}
+          />
+        ),
+        modalShouldShow: hasWarningModals,
+        modalSetIsOpen: setWarningModalVisible,
+      }}
+      onPress={onPressTokenOption}
+    />
+  )
+})
+
+interface TokenSelectorListProps {
+  onSelectCurrency: OnSelectCurrency
+  sections?: OnchainItemSection<TokenSelectorOption>[]
+  chainFilter?: UniverseChainId | null
+  showTokenWarnings: boolean
+  refetch?: () => void
+  loading?: boolean
+  hasError?: boolean
+  emptyElement?: JSX.Element
+  errorText?: string
+  showTokenAddress?: boolean
+  isKeyboardOpen?: boolean
+  renderedInModal: boolean
+}
+
+function _TokenSelectorList({
+  onSelectCurrency,
+  sections,
+  chainFilter,
+  showTokenWarnings,
+  refetch,
+  loading,
+  hasError,
+  emptyElement,
+  errorText,
+  showTokenAddress,
+  renderedInModal,
+}: TokenSelectorListProps): JSX.Element {
+  const [expandedItems, setExpandedItems] = useState<string[]>([])
+
+  usePerformanceLogger(DDRumManualTiming.TokenSelectorListRender, [chainFilter])
+
+  const handleExpand = useEvent((item: TokenSelectorOption) => {
+    setExpandedItems((prev) => [...prev, key(item)])
+  })
+
+  const isExpandedItem = useEvent((item: TokenOption[]) => {
+    return expandedItems.includes(key(item))
+  })
+
+  const renderItem = useEvent(({ item, section, index }: ItemRowInfo<TokenSelectorOption>): JSX.Element => {
+    if (isHorizontalListTokenItem(item)) {
+      return (
+        <HorizontalTokenList
+          tokens={item}
+          section={section as OnchainItemSection<TokenOption[]>}
+          index={index}
+          expanded={isExpandedItem(item)}
+          onSelectCurrency={onSelectCurrency}
+          onExpand={handleExpand}
+        />
+      )
+    }
+    return (
+      <TokenOptionItem
+        index={index}
+        section={section as OnchainItemSection<TokenOption>}
+        showTokenAddress={showTokenAddress}
+        showWarnings={showTokenWarnings}
+        tokenOption={item}
+        onSelectCurrency={onSelectCurrency}
+      />
+    )
+  })
+
+  return (
+    <SelectorBaseList
+      renderItem={renderItem}
+      sections={sections}
+      chainFilter={chainFilter}
+      refetch={refetch}
+      loading={loading}
+      hasError={hasError}
+      emptyElement={emptyElement}
+      errorText={errorText}
+      keyExtractor={key}
+      expandedItems={expandedItems}
+      renderedInModal={renderedInModal}
+    />
+  )
+}
+
+function key(item: TokenSelectorOption): CurrencyId {
+  if (isHorizontalListTokenItem(item)) {
+    return item.map((token) => token.currencyInfo.currencyId).join('-')
+  }
+
+  return item.currencyInfo.currencyId
+}
+
+export const TokenSelectorList = memo(_TokenSelectorList)