@luxexchange/lx 1.0.0

package/src/components/lists/items/tokens/TokenOptionItem.tsx

@@ -0,0 +1,338 @@
+import { memo, useCallback, useState } from 'react'
+import { Flex, Text, TouchableArea } from '@luxfi/ui/src'
+import { Check } from '@luxfi/ui/src/components/icons/Check'
+import { TokenLogo } from '@luxexchange/lx/src/components/CurrencyLogo/TokenLogo'
+import { FocusedRowControl, OptionItem, OptionItemProps } from '@luxexchange/lx/src/components/lists/items/OptionItem'
+import {
+  TokenContextMenuAction,
+  TokenOptionItemContextMenu,
+} from '@luxexchange/lx/src/components/lists/items/tokens/TokenOptionItemContextMenu'
+import { TokenOption } from '@luxexchange/lx/src/components/lists/items/types'
+import { WarningSeverity } from '@luxexchange/lx/src/components/modals/WarningModal/types'
+import { getWarningIconColors } from '@luxexchange/lx/src/components/warnings/utils'
+import WarningIcon from '@luxexchange/lx/src/components/warnings/WarningIcon'
+import { useHapticFeedback } from '@luxexchange/lx/src/features/settings/useHapticFeedback/useHapticFeedback'
+import { getTokenWarningSeverity } from '@luxexchange/lx/src/features/tokens/warnings/safetyUtils'
+import TokenWarningModal from '@luxexchange/lx/src/features/tokens/warnings/TokenWarningModal'
+import { getSymbolDisplayText } from '@luxexchange/lx/src/utils/currency'
+import { shortenAddress } from '@luxfi/utilities/src/addresses'
+import { dismissNativeKeyboard } from '@luxfi/utilities/src/device/keyboard/dismissNativeKeyboard'
+import { isWebApp, isWebPlatform } from '@luxfi/utilities/src/platform'
+import { useBooleanState } from '@luxfi/utilities/src/react/useBooleanState'
+
+export enum TokenContextMenuVariant {
+  Search = 'search',
+  TokenSelector = 'tokenSelector',
+}
+
+const CONTEXT_MENU_ACTIONS: Record<TokenContextMenuVariant, TokenContextMenuAction[]> = {
+  [TokenContextMenuVariant.Search]: [
+    TokenContextMenuAction.CopyAddress,
+    ...(isWebPlatform ? [] : [TokenContextMenuAction.Favorite]),
+    TokenContextMenuAction.Swap,
+    TokenContextMenuAction.Send,
+    TokenContextMenuAction.Receive,
+    TokenContextMenuAction.Share,
+  ],
+  [TokenContextMenuVariant.TokenSelector]: [
+    TokenContextMenuAction.CopyAddress,
+    ...(isWebPlatform ? [] : [TokenContextMenuAction.Favorite]),
+    TokenContextMenuAction.ViewDetails,
+  ],
+}
+
+// @deprecated
+interface LegacyTokenOptionItemProps {
+  option: TokenOption
+  showWarnings: boolean
+  onPress: () => void
+  showTokenAddress?: boolean
+  tokenWarningDismissed: boolean
+  quantity: number | null
+  // TODO(WEB-4731): Remove isKeyboardOpen dependency
+  isKeyboardOpen?: boolean
+  // TODO(WEB-3643): Share localization context with WEB
+  // (balance, quantityFormatted)
+  balance: string
+  quantityFormatted?: string
+  isSelected?: boolean
+}
+
+const LegacyBaseTokenOptionItem = memo(function LegacyBaseTokenOptionItem({
+  option,
+  showTokenAddress,
+  balance,
+  quantity,
+  quantityFormatted,
+  isSelected,
+}: LegacyTokenOptionItemProps): JSX.Element {
+  const { currencyInfo } = option
+  const { currency } = currencyInfo
+
+  const severity = getTokenWarningSeverity(currencyInfo)
+  // in token selector, we only show the warning icon if token is >=Medium severity
+  const { colorSecondary: warningIconColor } = getWarningIconColors(severity)
+
+  return (
+    <Flex
+      row
+      alignItems="center"
+      gap="$spacing8"
+      justifyContent="space-between"
+      px="$spacing16"
+      py="$spacing12"
+      style={{
+        pointerEvents: 'auto',
+      }}
+      testID={`token-option-${currency.chainId}-${currency.symbol}`}
+    >
+      <Flex row shrink alignItems="center" gap="$spacing12">
+        <TokenLogo
+          chainId={currency.chainId}
+          name={currency.name}
+          symbol={currency.symbol}
+          url={currencyInfo.logoUrl ?? undefined}
+        />
+        <Flex shrink>
+          <Flex row alignItems="center" gap="$spacing8">
+            <Text color="$neutral1" numberOfLines={1} variant="body1">
+              {currency.name}
+            </Text>
+            {warningIconColor && (
+              <Flex>
+                <WarningIcon severity={severity} size="$icon.16" strokeColorOverride={warningIconColor} />
+              </Flex>
+            )}
+          </Flex>
+          <Flex row alignItems="center" gap="$spacing8">
+            <Text color="$neutral2" numberOfLines={1} variant="body3">
+              {getSymbolDisplayText(currency.symbol)}
+            </Text>
+            {!currency.isNative && showTokenAddress && (
+              <Flex shrink>
+                <Text color="$neutral3" numberOfLines={1} variant="body3">
+                  {shortenAddress({ address: currency.address })}
+                </Text>
+              </Flex>
+            )}
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {isSelected && (
+        <Flex grow alignItems="flex-end" justifyContent="center">
+          <Check color="$accent1" size="$icon.20" />
+        </Flex>
+      )}
+
+      {!isSelected && quantity && quantity !== 0 ? (
+        <Flex alignItems="flex-end">
+          <Text variant="body1">{balance}</Text>
+          {quantityFormatted && (
+            <Text color="$neutral2" variant="body3">
+              {quantityFormatted}
+            </Text>
+          )}
+        </Flex>
+      ) : null}
+    </Flex>
+  )
+})
+
+function _LegacyTokenOptionItem(props: LegacyTokenOptionItemProps): JSX.Element {
+  const { option, showWarnings, onPress, tokenWarningDismissed, isKeyboardOpen } = props
+  const { currencyInfo, isUnsupported } = option
+  const { currency } = currencyInfo
+  const [showWarningModal, setShowWarningModal] = useState(false)
+
+  const severity = getTokenWarningSeverity(currencyInfo)
+  const isBlocked = severity === WarningSeverity.Blocked
+
+  const shouldShowWarningModalOnPress = isBlocked || (severity !== WarningSeverity.None && !tokenWarningDismissed)
+
+  const handleShowWarningModal = useCallback((): void => {
+    dismissNativeKeyboard()
+    setShowWarningModal(true)
+  }, [])
+
+  const { value: isContextMenuOpen, setFalse: closeContextMenu, setTrue: openContextMenu } = useBooleanState(false)
+  const { hapticFeedback } = useHapticFeedback()
+
+  const onPressTokenOption = useCallback(() => {
+    if (showWarnings && shouldShowWarningModalOnPress) {
+      // On mobile web we need to wait for the keyboard to hide
+      // before showing the modal to avoid height issues
+      if (isKeyboardOpen && isWebApp) {
+        const activeElement = document.activeElement as HTMLElement | null
+        activeElement?.blur()
+        setTimeout(handleShowWarningModal, 700)
+      } else {
+        handleShowWarningModal()
+      }
+      return
+    }
+
+    onPress()
+  }, [showWarnings, shouldShowWarningModalOnPress, onPress, isKeyboardOpen, handleShowWarningModal])
+
+  const onAcceptTokenWarning = useCallback(() => {
+    setShowWarningModal(false)
+    onPress()
+  }, [onPress])
+
+  return (
+    <TokenOptionItemContextMenu
+      actions={CONTEXT_MENU_ACTIONS[TokenContextMenuVariant.TokenSelector]}
+      currency={currency}
+      isOpen={isContextMenuOpen}
+      closeMenu={closeContextMenu}
+    >
+      <TouchableArea
+        animation="300ms"
+        width="100%"
+        opacity={(showWarnings && severity === WarningSeverity.Blocked) || isUnsupported ? 0.5 : 1}
+        hoverStyle={{ backgroundColor: '$surface1Hovered' }}
+        onPress={onPressTokenOption}
+        onLongPress={async (): Promise<void> => {
+          await hapticFeedback.success()
+          dismissNativeKeyboard()
+          openContextMenu()
+        }}
+      >
+        {isWebPlatform ? (
+          // biome-ignore  lint/correctness/noRestrictedElements: needed here
+          <div onContextMenu={openContextMenu}>
+            <LegacyBaseTokenOptionItem {...props} />
+          </div>
+        ) : (
+          <LegacyBaseTokenOptionItem {...props} />
+        )}
+      </TouchableArea>
+
+      <TokenWarningModal
+        currencyInfo0={currencyInfo}
+        isVisible={showWarningModal}
+        closeModalOnly={(): void => setShowWarningModal(false)}
+        onAcknowledge={onAcceptTokenWarning}
+      />
+    </TokenOptionItemContextMenu>
+  )
+}
+
+export interface TokenOptionItemProps {
+  option: TokenOption
+  onPress: () => void
+  showTokenAddress?: boolean
+  rightElement?: JSX.Element
+  showDisabled?: boolean
+  modalInfo?: OptionItemProps['modalInfo']
+  focusedRowControl?: FocusedRowControl
+  contextMenuVariant: TokenContextMenuVariant
+}
+
+function isLegacyTokenOptionItemProps(
+  props: TokenOptionItemProps | LegacyTokenOptionItemProps,
+): props is LegacyTokenOptionItemProps {
+  return 'balance' in props
+}
+
+const BaseTokenOptionItem = memo(function _BaseTokenOptionItem(
+  props: TokenOptionItemProps & { openContextMenu?: () => void },
+): JSX.Element {
+  const {
+    option,
+    onPress,
+    showTokenAddress,
+    rightElement,
+    showDisabled,
+    modalInfo,
+    focusedRowControl,
+    openContextMenu,
+  } = props
+  const { currencyInfo } = option
+  const { currency } = currencyInfo
+
+  // in lists like token selector & search, we only show the warning icon if token is >=Medium severity
+  const severity = getTokenWarningSeverity(currencyInfo)
+  const { colorSecondary: warningIconColor } = getWarningIconColors(severity)
+
+  return (
+    <OptionItem
+      image={
+        <TokenLogo
+          chainId={currency.chainId}
+          name={currency.name}
+          symbol={currency.symbol}
+          url={currencyInfo.logoUrl ?? undefined}
+        />
+      }
+      title={currency.name ?? currency.symbol ?? ''}
+      subtitle={
+        <Flex row alignItems="center" gap="$spacing8">
+          <Text color="$neutral2" numberOfLines={1} variant="body3">
+            {getSymbolDisplayText(currency.symbol)}
+          </Text>
+          {!currency.isNative && showTokenAddress && (
+            <Flex shrink>
+              <Text color="$neutral3" numberOfLines={1} variant="body3">
+                {shortenAddress({ address: currency.address })}
+              </Text>
+            </Flex>
+          )}
+        </Flex>
+      }
+      badge={
+        warningIconColor ? (
+          <Flex>
+            <WarningIcon severity={severity} size="$icon.16" strokeColorOverride={warningIconColor} />
+          </Flex>
+        ) : undefined
+      }
+      rightElement={rightElement}
+      disabled={showDisabled}
+      testID={`token-option-${currency.chainId}-${currency.symbol}`}
+      modalInfo={modalInfo}
+      focusedRowControl={focusedRowControl}
+      onPress={onPress}
+      onLongPress={() => {
+        dismissNativeKeyboard()
+        openContextMenu?.()
+      }}
+    />
+  )
+})
+
+export const TokenOptionItem = memo(function _TokenOptionItem(
+  props: TokenOptionItemProps | LegacyTokenOptionItemProps,
+): JSX.Element {
+  const { value: isContextMenuOpen, setFalse: closeContextMenu, setTrue: openContextMenu } = useBooleanState(false)
+  const { hapticFeedback } = useHapticFeedback()
+
+  if (!isLegacyTokenOptionItemProps(props)) {
+    return (
+      <TokenOptionItemContextMenu
+        actions={CONTEXT_MENU_ACTIONS[props.contextMenuVariant]}
+        currency={props.option.currencyInfo.currency}
+        isOpen={isContextMenuOpen}
+        closeMenu={closeContextMenu}
+      >
+        {isWebPlatform ? (
+          // biome-ignore  lint/correctness/noRestrictedElements: needed here
+          <div onContextMenu={openContextMenu}>
+            <BaseTokenOptionItem {...props} />
+          </div>
+        ) : (
+          <BaseTokenOptionItem
+            {...props}
+            openContextMenu={async (): Promise<void> => {
+              await hapticFeedback.success()
+              openContextMenu()
+            }}
+          />
+        )}
+      </TokenOptionItemContextMenu>
+    )
+  }
+
+  return <_LegacyTokenOptionItem {...props} />
+})

package/src/components/lists/items/tokens/TokenOptionItemContextMenu.tsx

@@ -0,0 +1,274 @@
+import { SharedEventName } from '@uniswap/analytics-events'
+import { Currency } from '@uniswap/sdk-core'
+import React, { ReactNode, useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDispatch } from 'react-redux'
+import { CheckCircleFilled } from '@luxfi/ui/src/components/icons/CheckCircleFilled'
+import { CoinConvert } from '@luxfi/ui/src/components/icons/CoinConvert'
+import { CopyAlt } from '@luxfi/ui/src/components/icons/CopyAlt'
+import { Heart } from '@luxfi/ui/src/components/icons/Heart'
+import { HeartSlash } from '@luxfi/ui/src/components/icons/HeartSlash'
+import { InfoCircleFilled } from '@luxfi/ui/src/components/icons/InfoCircleFilled'
+import { ReceiveAlt } from '@luxfi/ui/src/components/icons/ReceiveAlt'
+import { SendAction } from '@luxfi/ui/src/components/icons/SendAction'
+import { ShareArrow } from '@luxfi/ui/src/components/icons/ShareArrow'
+import { ContextMenu, ContextMenuProps, MenuOptionItem } from '@luxexchange/lx/src/components/menus/ContextMenu'
+import { ContextMenuTriggerMode } from '@luxexchange/lx/src/components/menus/types'
+import { LUX_WEB_URL } from '@luxexchange/lx/src/constants/urls'
+import { useLuxContext } from '@luxexchange/lx/src/contexts/LuxContext'
+import { useActiveAddress } from '@luxexchange/lx/src/features/accounts/store/hooks'
+import { useEnabledChains } from '@luxexchange/lx/src/features/chains/hooks/useEnabledChains'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { useSelectHasTokenFavorited } from '@luxexchange/lx/src/features/favorites/useSelectHasTokenFavorited'
+import { useToggleFavoriteCallback } from '@luxexchange/lx/src/features/favorites/useToggleFavoriteCallback'
+import { pushNotification } from '@luxexchange/lx/src/features/notifications/slice/slice'
+import { AppNotificationType, CopyNotificationType } from '@luxexchange/lx/src/features/notifications/slice/types'
+import { Platform } from '@luxexchange/lx/src/features/platforms/types/Platform'
+import { ElementName } from '@luxexchange/lx/src/features/telemetry/constants'
+import { sendAnalyticsEvent } from '@luxexchange/lx/src/features/telemetry/send'
+import { currencyAddress, currencyId, currencyIdToAddress, currencyIdToChain } from '@luxexchange/lx/src/utils/currencyId'
+import { getTokenDetailsURL } from '@luxexchange/lx/src/utils/linking'
+import { setClipboard } from '@luxfi/utilities/src/clipboard/clipboard'
+import { isWebPlatform } from '@luxfi/utilities/src/platform'
+import { useTrace } from '@luxfi/utilities/src/telemetry/trace/TraceContext'
+
+const COPY_CLOSE_DELAY = 400
+
+export enum TokenContextMenuAction {
+  CopyAddress = 'copyAddress',
+  Favorite = 'favorite', // wallet-only
+  Swap = 'swap',
+  Send = 'send',
+  Receive = 'receive',
+  Share = 'share',
+  ViewDetails = 'viewDetails',
+  HideToken = 'hideToken', // TODO(WEB-7614): implement hide token from portfolio
+}
+
+interface TokenOptionItemContextMenuProps {
+  children: ReactNode
+  currency: Currency
+  isHiddenFromPortfolio?: boolean
+  isOpen: boolean
+  openMenu?: ContextMenuProps['openMenu']
+  closeMenu: ContextMenuProps['closeMenu']
+  triggerMode?: ContextMenuTriggerMode
+  actions: TokenContextMenuAction[]
+}
+
+function _TokenOptionItemContextMenu({
+  children,
+  currency,
+  isOpen,
+  openMenu,
+  closeMenu,
+  triggerMode = ContextMenuTriggerMode.Secondary,
+  actions,
+}: TokenOptionItemContextMenuProps): JSX.Element {
+  const { t } = useTranslation()
+  const evmAddress = useActiveAddress(Platform.EVM)
+  const { navigateToTokenDetails, navigateToSwapFlow, navigateToSendFlow, navigateToReceive, handleShareToken } =
+    useLuxContext()
+  const dispatch = useDispatch()
+  const { isTestnetModeEnabled } = useEnabledChains()
+  const [copiedAddress, setCopiedAddress] = useState(false)
+  const [copiedUrl, setCopiedUrl] = useState(false)
+  const trace = useTrace()
+
+  const id = currencyId(currency)
+
+  const onNavigateToTokenDetails = useCallback(() => {
+    if (isTestnetModeEnabled) {
+      return
+    }
+    closeMenu()
+    navigateToTokenDetails(id)
+    sendAnalyticsEvent(SharedEventName.ELEMENT_CLICKED, {
+      element: ElementName.TokenItem,
+      ...trace,
+    })
+  }, [isTestnetModeEnabled, closeMenu, navigateToTokenDetails, id, trace])
+
+  const onCopyAddress = useCallback(async (): Promise<void> => {
+    await setClipboard(currencyAddress(currency))
+    if (!isWebPlatform) {
+      dispatch(
+        pushNotification({
+          type: AppNotificationType.Copied,
+          copyType: CopyNotificationType.Address,
+        }),
+      )
+    }
+    setCopiedAddress(true)
+    setTimeout(() => {
+      setCopiedAddress(false)
+      closeMenu()
+    }, COPY_CLOSE_DELAY)
+  }, [dispatch, currency, closeMenu])
+
+  const isFavoriteToken = useSelectHasTokenFavorited(id)
+  const toggleFavorite = useToggleFavoriteCallback({ id, tokenName: currency.name, isFavoriteToken })
+  const onToggleFavorite = useCallback(() => {
+    toggleFavorite()
+    closeMenu()
+  }, [closeMenu, toggleFavorite])
+
+  const onNavigateToSwap = useCallback(() => {
+    closeMenu()
+    navigateToSwapFlow({ outputCurrencyId: id })
+    sendAnalyticsEvent(SharedEventName.ELEMENT_CLICKED, {
+      element: ElementName.Swap,
+      ...trace,
+    })
+  }, [closeMenu, navigateToSwapFlow, id, trace])
+
+  const onNavigateToSend = useCallback(() => {
+    closeMenu()
+    navigateToSendFlow({ chainId: currency.chainId, currencyAddress: currencyAddress(currency) })
+  }, [closeMenu, currency, navigateToSendFlow])
+
+  const onNavigateToReceive = useCallback(() => {
+    closeMenu()
+    navigateToReceive()
+  }, [closeMenu, navigateToReceive])
+
+  const onShare = useCallback(async () => {
+    if (isWebPlatform) {
+      const url =
+        LUX_WEB_URL +
+        getTokenDetailsURL({
+          address: currencyIdToAddress(id),
+          chain: currencyIdToChain(id) ?? undefined,
+        })
+      await setClipboard(url)
+      setCopiedUrl(true)
+      setTimeout(() => {
+        setCopiedUrl(false)
+        closeMenu()
+      }, COPY_CLOSE_DELAY)
+    } else {
+      handleShareToken({ currencyId: id })
+      closeMenu()
+    }
+  }, [closeMenu, handleShareToken, id])
+
+  const dropdownOptions: MenuOptionItem[] = useMemo(() => {
+    const options: MenuOptionItem[] = []
+
+    const isSolanaToken = currencyIdToChain(id) === UniverseChainId.Solana
+
+    if (actions.includes(TokenContextMenuAction.CopyAddress)) {
+      if (isWebPlatform) {
+        // onCopyAddress does not trigger a toast on web, so we display success in-line instead
+        options.push({
+          onPress: onCopyAddress,
+          disabled: currency.isNative,
+          label: copiedAddress ? t('notification.copied.address') : t('common.copy.address'),
+          Icon: copiedAddress ? CheckCircleFilled : CopyAlt,
+          closeDelay: COPY_CLOSE_DELAY,
+          iconColor: copiedAddress ? '$statusSuccess' : '$neutral2',
+        })
+      } else {
+        options.push({
+          onPress: onCopyAddress,
+          disabled: currency.isNative,
+          label: t('common.copy.address'),
+          Icon: CopyAlt,
+          iconColor: '$neutral2',
+        })
+      }
+    }
+
+    if (actions.includes(TokenContextMenuAction.Favorite)) {
+      options.push({
+        onPress: onToggleFavorite,
+        label: isFavoriteToken
+          ? t('explore.wallets.favorite.action.remove.short')
+          : t('explore.tokens.favorite.action.add'),
+        Icon: isFavoriteToken ? HeartSlash : Heart,
+        closeDelay: COPY_CLOSE_DELAY,
+        iconColor: isFavoriteToken ? '$accent1' : '$neutral2',
+      })
+    }
+
+    if (actions.includes(TokenContextMenuAction.Swap)) {
+      options.push({
+        onPress: onNavigateToSwap,
+        label: t('common.button.swap'),
+        Icon: CoinConvert,
+        iconColor: '$neutral2',
+      })
+    }
+
+    // Only add Send action for non-Solana tokens
+    if (actions.includes(TokenContextMenuAction.Send) && !isSolanaToken) {
+      options.push({
+        onPress: onNavigateToSend,
+        label: t('common.button.send'),
+        Icon: SendAction,
+        iconColor: '$neutral2',
+      })
+    }
+
+    if (evmAddress && actions.includes(TokenContextMenuAction.Receive)) {
+      options.push({
+        onPress: onNavigateToReceive,
+        label: t('common.button.receive'),
+        Icon: ReceiveAlt,
+        iconColor: '$neutral2',
+      })
+    }
+
+    if (actions.includes(TokenContextMenuAction.Share)) {
+      options.push({
+        onPress: onShare,
+        label: copiedUrl ? t('notification.copied.linkUrl') : t('common.button.share'),
+        Icon: copiedUrl ? CheckCircleFilled : ShareArrow,
+        closeDelay: COPY_CLOSE_DELAY,
+        iconColor: copiedUrl ? '$statusSuccess' : '$neutral2',
+      })
+    }
+
+    if (actions.includes(TokenContextMenuAction.ViewDetails)) {
+      options.push({
+        onPress: onNavigateToTokenDetails,
+        label: t('token.details'),
+        Icon: InfoCircleFilled,
+        iconColor: '$neutral2',
+      })
+    }
+
+    return options
+  }, [
+    id,
+    actions,
+    evmAddress,
+    onCopyAddress,
+    currency.isNative,
+    copiedAddress,
+    t,
+    onToggleFavorite,
+    isFavoriteToken,
+    onNavigateToSwap,
+    onNavigateToSend,
+    onNavigateToReceive,
+    onShare,
+    copiedUrl,
+    onNavigateToTokenDetails,
+  ])
+
+  return (
+    <ContextMenu
+      menuItems={dropdownOptions}
+      triggerMode={triggerMode}
+      isOpen={isOpen}
+      closeMenu={closeMenu}
+      openMenu={openMenu}
+      offsetY={4}
+    >
+      {children}
+    </ContextMenu>
+  )
+}
+
+export const TokenOptionItemContextMenu = React.memo(_TokenOptionItemContextMenu)

package/src/components/lists/items/types.ts

@@ -0,0 +1,74 @@
+import { ProtocolVersion } from '@uniswap/client-data-api/dist/data/v1/poolTypes_pb'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+
+/* Types of list item options */
+export enum OnchainItemListOptionType {
+  Token = 'Token',
+  Pool = 'Pool',
+  WalletByAddress = 'WalletByAddress',
+  ENSAddress = 'ENSAddress',
+  Unitag = 'Unitag',
+  NFTCollection = 'NFTCollection',
+}
+
+export interface BaseOption {
+  type: OnchainItemListOptionType
+}
+
+export interface TokenOption extends BaseOption {
+  type: OnchainItemListOptionType.Token
+  currencyInfo: CurrencyInfo
+  quantity: number | null // float representation of balance, returned by data-api
+  balanceUSD: Maybe<number>
+  isUnsupported?: boolean
+}
+
+export interface PoolOption extends BaseOption {
+  type: OnchainItemListOptionType.Pool
+  poolId: string
+  chainId: UniverseChainId
+  token0CurrencyInfo: CurrencyInfo
+  token1CurrencyInfo: CurrencyInfo
+  protocolVersion: ProtocolVersion
+  hookAddress?: string
+  feeTier: number
+}
+
+export type WalletOption = WalletByAddressOption | ENSAddressOption | UnitagOption
+
+export interface WalletByAddressOption extends BaseOption {
+  type: OnchainItemListOptionType.WalletByAddress
+  address: Address
+}
+export interface ENSAddressOption extends BaseOption {
+  type: OnchainItemListOptionType.ENSAddress
+  address: Address
+  isRawName?: boolean
+  ensName: string
+  primaryENSName?: string
+}
+
+export interface UnitagOption extends BaseOption {
+  type: OnchainItemListOptionType.Unitag
+  address: Address
+  unitag: string
+}
+
+export interface NFTCollectionOption extends BaseOption {
+  type: OnchainItemListOptionType.NFTCollection
+  chainId: UniverseChainId
+  address: Address
+  name: string
+  imageUrl: string | null
+  isVerified: boolean
+}
+// Union of item types for different list use cases
+export type MobileExploreSearchModalOption = TokenOption | WalletOption | NFTCollectionOption
+export type WebSearchModalOption = TokenOption | PoolOption | WalletOption
+export type SearchModalOption = MobileExploreSearchModalOption | WebSearchModalOption
+
+export type TokenSelectorOption = TokenOption | TokenOption[]
+
+// All item types combined
+export type OnchainItemListOption = TokenSelectorOption | SearchModalOption