@luxexchange/lx 1.0.0

package/src/components/CurrencyInputPanel/CurrencyInputPanelInput.tsx

@@ -0,0 +1,242 @@
+import { forwardRef, memo, useCallback, useImperativeHandle, useRef } from 'react'
+import type { NativeSyntheticEvent, TextInput, TextInputSelectionChangeEventData } from 'react-native'
+import { Flex, FlexProps, Text, TouchableArea, useSporeColors } from '@luxfi/ui/src'
+import type { ShakeAnimation } from '@luxfi/ui/src/animations/hooks/useShakeAnimation'
+import { AnimatedFlex } from '@luxfi/ui/src/components/layout/AnimatedFlex'
+import { FontSizeOptions } from '@luxfi/ui/src/hooks/useDynamicFontSizing'
+import { fonts, spacing } from '@luxfi/ui/src/theme'
+import { AmountInput } from '@luxexchange/lx/src/components/AmountInput/AmountInput'
+import { DefaultTokenOptions } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/DefaultTokenOptions'
+import {
+  MIN_INPUT_FONT_SIZE,
+  useCurrencyInputFontSize,
+} from '@luxexchange/lx/src/components/CurrencyInputPanel/hooks/useCurrencyInputFontSize'
+import type { PanelTextDisplay } from '@luxexchange/lx/src/components/CurrencyInputPanel/hooks/useIndicativeQuoteTextDisplay'
+import { useInputFocusSync } from '@luxexchange/lx/src/components/CurrencyInputPanel/hooks/useInputFocusSync/useInputFocusSync.native'
+import { useRefetchAnimationStyle } from '@luxexchange/lx/src/components/CurrencyInputPanel/hooks/useRefetchAnimationStyle'
+import { SelectTokenButton } from '@luxexchange/lx/src/components/CurrencyInputPanel/SelectTokenButton'
+import type { CurrencyInputPanelProps, CurrencyInputPanelRef } from '@luxexchange/lx/src/components/CurrencyInputPanel/types'
+import { MAX_FIAT_INPUT_DECIMALS } from '@luxexchange/lx/src/constants/transactions'
+import { useAppFiatCurrencyInfo } from '@luxexchange/lx/src/features/fiatCurrency/hooks'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+import { isWebAppDesktop, isWebPlatform } from '@luxfi/utilities/src/platform'
+
+type CurrencyInputPanelInputProps = {
+  shakeAnimation: ShakeAnimation
+  showInsufficientBalanceWarning: boolean
+  showDefaultTokenOptions: boolean
+  indicativeQuoteTextDisplay: PanelTextDisplay
+  onPressDisabledWithShakeAnimation: () => void
+  fontSizeOptions?: Partial<FontSizeOptions>
+  inputRowPaddingVertical?: FlexProps['py']
+  minHeight?: FlexProps['minHeight']
+} & Pick<
+  CurrencyInputPanelProps,
+  | 'autoFocus'
+  | 'currencyAmount'
+  | 'currencyBalance'
+  | 'currencyField'
+  | 'currencyInfo'
+  | 'focus'
+  | 'isLoading'
+  | 'isIndicativeLoading'
+  | 'valueIsIndicative'
+  | 'isFiatMode'
+  | 'onPressIn'
+  | 'onSelectionChange'
+  | 'onSetExactAmount'
+  | 'onShowTokenSelector'
+  | 'showSoftInputOnFocus'
+  | 'resetSelection'
+  | 'disabled'
+  | 'onPressDisabled'
+  | 'tokenColor'
+  | 'onBlur'
+  | 'inputSuffix'
+  | 'hidePresets'
+>
+
+export const CurrencyInputPanelInput = memo(
+  forwardRef<CurrencyInputPanelRef, CurrencyInputPanelInputProps>(
+    function _CurrencyInputPanel(props, forwardedRef): JSX.Element {
+      const {
+        autoFocus,
+        currencyField,
+        currencyInfo,
+        focus,
+        isFiatMode = false,
+        onPressIn,
+        onSelectionChange: selectionChange,
+        onSetExactAmount,
+        onShowTokenSelector,
+        showSoftInputOnFocus = false,
+        resetSelection,
+        disabled = false,
+        onPressDisabledWithShakeAnimation,
+        tokenColor,
+        shakeAnimation,
+        showInsufficientBalanceWarning,
+        showDefaultTokenOptions,
+        indicativeQuoteTextDisplay,
+        onBlur,
+        fontSizeOptions,
+        inputRowPaddingVertical = '$spacing8',
+        minHeight = MIN_INPUT_FONT_SIZE + spacing.spacing36,
+        inputSuffix,
+        hidePresets,
+      } = props
+
+      const colors = useSporeColors()
+      const { symbol: fiatCurrencySymbol } = useAppFiatCurrencyInfo()
+
+      const { value, color } = indicativeQuoteTextDisplay
+
+      const inputRef = useRef<TextInput | null>(null)
+
+      const { shakeStyle, triggerShakeAnimation } = shakeAnimation
+
+      useImperativeHandle(forwardedRef, () => ({
+        textInputRef: inputRef,
+        triggerShakeAnimation,
+      }))
+
+      const isOutput = currencyField === CurrencyField.OUTPUT
+
+      useInputFocusSync({
+        inputRef,
+        focus,
+        value,
+        currencyField,
+        resetSelection,
+      })
+
+      const inputFontSize = useCurrencyInputFontSize({ value, focus, options: fontSizeOptions })
+
+      const onSelectionChange = useCallback(
+        ({
+          nativeEvent: {
+            selection: { start, end },
+          },
+        }: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => selectionChange?.(start, end),
+        [selectionChange],
+      )
+
+      const refetchAnimationStyle = useRefetchAnimationStyle(props)
+
+      return (
+        <AnimatedFlex
+          row
+          alignItems="center"
+          justifyContent={!currencyInfo ? 'flex-end' : 'space-between'}
+          py={inputRowPaddingVertical}
+          minHeight={minHeight}
+          style={shakeStyle}
+        >
+          {isFiatMode && (
+            <Text
+              allowFontScaling
+              color={showInsufficientBalanceWarning ? '$statusCritical' : color}
+              fontSize={inputFontSize.fontSize}
+              lineHeight={inputFontSize.lineHeight}
+              mr={isWebPlatform ? '$spacing2' : undefined}
+            >
+              {fiatCurrencySymbol}
+            </Text>
+          )}
+          <AnimatedFlex
+            fill
+            grow
+            row
+            alignItems="center"
+            minHeight={MIN_INPUT_FONT_SIZE}
+            mr="$spacing8"
+            style={refetchAnimationStyle}
+            onLayout={inputFontSize.onLayout}
+          >
+            {currencyInfo ? (
+              <Flex row flexShrink={isWebPlatform ? 1 : 0}>
+                {disabled && (
+                  // Invisible TouchableArea overlay to capture onPress events and trigger the shake animation when the input is disabled
+                  <TouchableArea
+                    style={{ position: 'absolute', width: '100%', height: '100%', zIndex: 1 }}
+                    onPress={onPressDisabledWithShakeAnimation}
+                  />
+                )}
+                <AmountInput
+                  ref={inputRef}
+                  adjustWidthToContent={!!inputSuffix}
+                  autoFocus={autoFocus ?? focus}
+                  backgroundColor="$transparent"
+                  borderWidth="$none"
+                  color={showInsufficientBalanceWarning ? '$statusCritical' : color}
+                  disabled={disabled || !currencyInfo}
+                  flex={1}
+                  focusable={!disabled && Boolean(currencyInfo)}
+                  fontFamily="$heading"
+                  // This is a hacky workaround for Android to prevent text from being cut off
+                  // (the text input height is greater than the font size and the input is
+                  // centered vertically, so the caret is cut off but the text is not)
+                  fontSize={inputFontSize.fontSize}
+                  lineHeight={inputFontSize.lineHeight}
+                  fontWeight="$book"
+                  maxDecimals={isFiatMode ? MAX_FIAT_INPUT_DECIMALS : currencyInfo.currency.decimals}
+                  maxFontSizeMultiplier={fonts.heading2.maxFontSizeMultiplier}
+                  minHeight={inputFontSize.lineHeight}
+                  overflow="visible"
+                  placeholder="0"
+                  placeholderTextColor={colors.neutral3.val}
+                  borderRadius={0}
+                  px="$none"
+                  py="$none"
+                  returnKeyType={showSoftInputOnFocus ? 'done' : undefined}
+                  showSoftInputOnFocus={showSoftInputOnFocus}
+                  testID={isOutput ? TestID.AmountInputOut : TestID.AmountInputIn}
+                  value={value}
+                  onChangeText={onSetExactAmount}
+                  onPressIn={onPressIn}
+                  onSelectionChange={onSelectionChange}
+                  onBlur={onBlur}
+                />
+                {inputSuffix && (
+                  <Text
+                    allowFontScaling
+                    color="$neutral2"
+                    fontSize={inputFontSize.fontSize}
+                    lineHeight={inputFontSize.lineHeight}
+                    ml="$spacing4"
+                  >
+                    {inputSuffix}
+                  </Text>
+                )}
+              </Flex>
+            ) : showDefaultTokenOptions && !isWebAppDesktop ? (
+              <DefaultTokenOptions currencyField={CurrencyField.OUTPUT} />
+            ) : (
+              <TouchableArea onPress={onShowTokenSelector}>
+                <Text
+                  color="$neutral3"
+                  fontSize={inputFontSize.fontSize}
+                  variant="heading2"
+                  style={{ lineHeight: inputFontSize.fontSize }}
+                >
+                  0
+                </Text>
+              </TouchableArea>
+            )}
+          </AnimatedFlex>
+          {!hidePresets && (
+            <Flex row alignItems="center">
+              <SelectTokenButton
+                selectedCurrencyInfo={currencyInfo}
+                testID={currencyField === CurrencyField.INPUT ? TestID.ChooseInputToken : TestID.ChooseOutputToken}
+                tokenColor={tokenColor}
+                onPress={onShowTokenSelector}
+              />
+            </Flex>
+          )}
+        </AnimatedFlex>
+      )
+    },
+  ),
+)

package/src/components/CurrencyInputPanel/CurrencyInputPanelValue.tsx

@@ -0,0 +1,100 @@
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+import { memo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDispatch } from 'react-redux'
+import { Flex, Text, TextProps, TouchableArea } from '@luxfi/ui/src'
+import { useEnabledChains } from '@luxexchange/lx/src/features/chains/hooks/useEnabledChains'
+import { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { useAppFiatCurrencyInfo } from '@luxexchange/lx/src/features/fiatCurrency/hooks'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { pushNotification } from '@luxexchange/lx/src/features/notifications/slice/slice'
+import { AppNotificationType } from '@luxexchange/lx/src/features/notifications/slice/types'
+import { useTokenAndFiatDisplayAmounts } from '@luxexchange/lx/src/features/transactions/hooks/useTokenAndFiatDisplayAmounts'
+import { useUSDCPrice } from '@luxexchange/lx/src/features/transactions/hooks/useUSDCPriceWrapper'
+import { usePriceUXEnabled } from '@luxexchange/lx/src/features/transactions/swap/hooks/usePriceUXEnabled'
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+import { ONE_SECOND_MS } from '@luxfi/utilities/src/time/time'
+
+interface CurrencyInputPanelValueProps {
+  disabled: boolean
+  value: string | undefined
+  usdValue: Maybe<CurrencyAmount<Currency>>
+  priceDifferencePercentage?: number
+  onPressDisabledWithShakeAnimation: () => void
+  onToggleIsFiatMode: (currencyField: CurrencyField) => void
+  currencyField: CurrencyField
+  currencyInfo: Maybe<CurrencyInfo>
+  currencyAmount: Maybe<CurrencyAmount<Currency>>
+  isFiatMode: boolean
+  fiatValueVariant?: TextProps['variant']
+}
+
+export const CurrencyInputPanelValue = memo(function _CurrencyInputPanelValue({
+  disabled,
+  value,
+  usdValue,
+  priceDifferencePercentage,
+  onPressDisabledWithShakeAnimation,
+  onToggleIsFiatMode,
+  currencyField,
+  currencyInfo,
+  currencyAmount,
+  isFiatMode,
+  fiatValueVariant = 'body3',
+}: CurrencyInputPanelValueProps): JSX.Element {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+  const { formatPercent } = useLocalizationContext()
+  const { isTestnetModeEnabled } = useEnabledChains()
+  const priceUXEnabled = usePriceUXEnabled()
+  const isOutput = currencyField === CurrencyField.OUTPUT
+  const showPriceDifference = isOutput && !!currencyInfo && !!currencyAmount
+  const { price: usdPrice } = useUSDCPrice(currencyInfo?.currency)
+  const { code: fiatCurrencyCode } = useAppFiatCurrencyInfo()
+  const _onToggleIsFiatMode = useCallback(() => {
+    if (!usdPrice) {
+      dispatch(
+        pushNotification({
+          type: AppNotificationType.Error,
+          errorMessage: t('swap.error.fiatInputUnavailable', { fiatCurrencyCode }),
+          hideDelay: ONE_SECOND_MS * 3,
+        }),
+      )
+    } else {
+      onToggleIsFiatMode(currencyField)
+    }
+  }, [currencyField, dispatch, fiatCurrencyCode, onToggleIsFiatMode, t, usdPrice])
+  // In fiat mode, show equivalent token amount. In token mode, show equivalent fiat amount
+  const inputPanelFormattedValue = useTokenAndFiatDisplayAmounts({
+    value,
+    currencyInfo,
+    currencyAmount,
+    usdValue,
+    isFiatMode,
+  })
+  return (
+    <TouchableArea
+      group="item"
+      flexShrink={1}
+      onPress={disabled || isTestnetModeEnabled ? onPressDisabledWithShakeAnimation : _onToggleIsFiatMode}
+    >
+      {!isTestnetModeEnabled && (
+        <Flex centered row shrink gap="$spacing4" width="max-content">
+          <Text
+            color="$neutral2"
+            $group-item-hover={{ color: '$neutral2Hovered' }}
+            numberOfLines={1}
+            variant={fiatValueVariant}
+          >
+            {inputPanelFormattedValue}
+          </Text>
+          {priceUXEnabled && showPriceDifference && (
+            <Text color="$neutral3" variant={fiatValueVariant}>
+              ({formatPercent(priceDifferencePercentage)})
+            </Text>
+          )}
+        </Flex>
+      )}
+    </TouchableArea>
+  )
+})

package/src/components/CurrencyInputPanel/DefaultTokenOptions/DefaultTokenOptions.tsx

@@ -0,0 +1,34 @@
+// TODO: Move this to `packages/lx/src/components/CurrencyInputPanel/CurrencyInputPanel.tsx`
+
+import { memo } from 'react'
+import { Flex, ScrollView } from '@luxfi/ui/src'
+import { extraMarginForHoverAnimation } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/constants'
+import { TokenOptions } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptions'
+
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+import { isHoverable, isWebAppDesktop } from '@luxfi/utilities/src/platform'
+
+function _DefaultTokenOptions({ currencyField }: { currencyField: CurrencyField }): JSX.Element {
+  return (
+    <ScrollView horizontal showsVerticalScrollIndicator={false}>
+      <Flex
+        row
+        m={extraMarginForHoverAnimation}
+        gap={isWebAppDesktop ? '$gap4' : '$gap8'}
+        flex={1}
+        {...(isHoverable
+          ? {
+              opacity: 0,
+              transform: [{ translateY: -4 }],
+              '$group-hover': { opacity: 1, transform: [{ translateY: 0 }] },
+            }
+          : {})}
+        animation="100ms"
+      >
+        <TokenOptions currencyField={currencyField} />
+      </Flex>
+    </ScrollView>
+  )
+}
+
+export const DefaultTokenOptions = memo(_DefaultTokenOptions)

package/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenIcon.tsx

@@ -0,0 +1,94 @@
+import { memo, useMemo } from 'react'
+import type { GestureResponderEvent } from 'react-native'
+import { Flex, TouchableArea } from '@luxfi/ui/src'
+import { get200MsAnimationDelayFromIndex } from '@luxfi/ui/src/theme/animations/delay200ms'
+import { logoSize, WEB_HOVER_SCALE } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/constants'
+import { useSendSelectCurrencyEvent } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/useSendSelectCurrencyEvent'
+import { TokenLogo } from '@luxexchange/lx/src/components/CurrencyLogo/TokenLogo'
+import type { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { ElementName } from '@luxexchange/lx/src/features/telemetry/constants'
+import Trace from '@luxexchange/lx/src/features/telemetry/Trace'
+import { useOnSelectCurrency } from '@luxexchange/lx/src/features/transactions/swap/form/hooks/useOnSelectCurrency'
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+import { isHoverable } from '@luxfi/utilities/src/platform'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+
+const TRANSFORM = [{ translateY: -4 }, { scale: 0.95 }] as const
+const GROUP_HOVER_STYLE = {
+  opacity: 1,
+  transform: [{ translateY: 0 }],
+  scale: 1,
+} as const
+
+const TOUCHABLE_HOVER_STYLE = { backgroundColor: '$surface3Hovered', scale: WEB_HOVER_SCALE } as const
+
+export const TokenIcon = memo(
+  ({
+    currencyInfo,
+    index,
+    numOptions,
+    currencyField = CurrencyField.OUTPUT,
+  }: {
+    currencyInfo: CurrencyInfo
+    index: number
+    numOptions: number
+    currencyField?: CurrencyField
+  }): JSX.Element => {
+    const { logoUrl, currency } = currencyInfo
+    const onSelectCurrency = useOnSelectCurrency({})
+    const sendSelectCurrencyEvent = useSendSelectCurrencyEvent({ currencyField })
+    const animationIndex = numOptions - index - 1
+
+    const handleOnPress = useEvent((e: GestureResponderEvent) => {
+      e.stopPropagation()
+      onSelectCurrency({
+        currency: currencyInfo.currency,
+        field: currencyField,
+        allowCrossChainPair: false,
+        isPreselectedAsset: true,
+      })
+      sendSelectCurrencyEvent({
+        currencyInfo,
+        position: index + 1,
+        suggestion_count: numOptions || 0,
+      })
+    })
+
+    const animation = useMemo(() => {
+      if (!isHoverable) {
+        return undefined
+      }
+      return get200MsAnimationDelayFromIndex(animationIndex)
+    }, [animationIndex])
+
+    const traceProperties = useMemo(() => {
+      return {
+        chain_id: currency.chainId,
+        token_symbol: currency.symbol,
+      }
+    }, [currency.chainId, currency.symbol])
+
+    return (
+      <Flex
+        $group-hover={isHoverable ? GROUP_HOVER_STYLE : undefined}
+        opacity={isHoverable ? 0 : undefined}
+        transform={isHoverable ? TRANSFORM : undefined}
+        animation={animation}
+      >
+        <Trace logPress element={ElementName.PreselectAsset} properties={traceProperties}>
+          <TouchableArea
+            hoverable
+            p="$spacing4"
+            borderRadius="$roundedFull"
+            backgroundColor="$surface3"
+            hoverStyle={isHoverable ? TOUCHABLE_HOVER_STYLE : undefined}
+            animation={isHoverable ? 'simple' : undefined}
+            onPress={handleOnPress}
+          >
+            <TokenLogo url={logoUrl} symbol={currency.symbol} chainId={currency.chainId} size={logoSize} />
+          </TouchableArea>
+        </Trace>
+      </Flex>
+    )
+  },
+)

package/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptionItem/TokenOptionItem.native.tsx

@@ -0,0 +1,17 @@
+import { TokenIcon } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenIcon'
+import type { TokenOptionItemProps } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptionItem/types'
+
+export const TokenOptionItem = ({
+  currencyInfo,
+  index,
+  numOptions,
+  currencyField,
+}: TokenOptionItemProps): JSX.Element => (
+  <TokenIcon
+    key={index}
+    currencyInfo={currencyInfo}
+    index={index}
+    numOptions={numOptions}
+    currencyField={currencyField}
+  />
+)

package/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptionItem/TokenOptionItem.tsx

@@ -0,0 +1,6 @@
+import type { TokenOptionItemProps } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptionItem/types'
+import { PlatformSplitStubError } from '@luxfi/utilities/src/errors'
+
+export const TokenOptionItem = (_props: TokenOptionItemProps): JSX.Element => {
+  throw new PlatformSplitStubError('TokenOptionItem')
+}

package/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptionItem/TokenOptionItem.web.tsx

@@ -0,0 +1,35 @@
+import { Text, Tooltip } from '@luxfi/ui/src'
+import { zIndexes } from '@luxfi/ui/src/theme'
+import { TokenIcon } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenIcon'
+import type { TokenOptionItemProps } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptionItem/types'
+
+const delay = { close: 0, open: 0 }
+
+export const TokenOptionItem = ({
+  currencyInfo,
+  index,
+  numOptions,
+  currencyField,
+}: TokenOptionItemProps): JSX.Element => {
+  const {
+    currency: { symbol },
+  } = currencyInfo
+
+  return (
+    <Tooltip delay={delay} restMs={0} placement="top">
+      <Tooltip.Trigger>
+        <TokenIcon
+          key={index}
+          currencyInfo={currencyInfo}
+          index={index}
+          numOptions={numOptions}
+          currencyField={currencyField}
+        />
+      </Tooltip.Trigger>
+      <Tooltip.Content zIndex={zIndexes.overlay}>
+        <Text variant="body4">{symbol}</Text>
+        <Tooltip.Arrow />
+      </Tooltip.Content>
+    </Tooltip>
+  )
+}

package/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptionItem/types.ts

@@ -0,0 +1,9 @@
+import type { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import type { CurrencyField } from '@luxexchange/lx/src/types/currency'
+
+export type TokenOptionItemProps = {
+  currencyInfo: CurrencyInfo
+  index: number
+  numOptions: number
+  currencyField: CurrencyField
+}

package/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptions.tsx

@@ -0,0 +1,58 @@
+import { useMemo } from 'react'
+import { MAX_NUMBER_OF_TOKENS } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/constants'
+import { TokenOptionItem } from '@luxexchange/lx/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/TokenOptionItem/TokenOptionItem'
+import { useCommonTokensOptionsWithFallback } from '@luxexchange/lx/src/components/TokenSelector/hooks/useCommonTokensOptionsWithFallback'
+import { useActiveAddresses } from '@luxexchange/lx/src/features/accounts/store/hooks'
+import type { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { useSwapFormStoreDerivedSwapInfo } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import type { CurrencyField } from '@luxexchange/lx/src/types/currency'
+
+const createKey = (currency: CurrencyInfo['currency']): string =>
+  currency.isNative ? `${currency.chainId}-native` : `${currency.chainId}-${currency.address}`
+
+const useCommonTokensOptionsInfo = (): {
+  allCurrencyInfos: CurrencyInfo[]
+  numberOfCommonTokenOptions: number
+} => {
+  const addresses = useActiveAddresses()
+  const chainId = useSwapFormStoreDerivedSwapInfo((s) => s.chainId)
+
+  const { data: commonTokenOptions } = useCommonTokensOptionsWithFallback({
+    addresses,
+    chainFilter: chainId,
+  })
+
+  const numberOfCommonTokenOptions = commonTokenOptions?.length ?? 0
+
+  const allCurrencyInfos: CurrencyInfo[] = useMemo(() => {
+    return commonTokenOptions?.slice(0, MAX_NUMBER_OF_TOKENS).map(({ currencyInfo }) => currencyInfo) ?? []
+  }, [commonTokenOptions])
+
+  return {
+    allCurrencyInfos,
+    numberOfCommonTokenOptions,
+  }
+}
+
+export const TokenOptions = ({ currencyField }: { currencyField: CurrencyField }): JSX.Element => {
+  const { allCurrencyInfos, numberOfCommonTokenOptions } = useCommonTokensOptionsInfo()
+
+  return (
+    <>
+      {allCurrencyInfos.map((currencyInfo, index) => {
+        const { currency } = currencyInfo
+        const key = createKey(currency)
+
+        return (
+          <TokenOptionItem
+            key={key}
+            currencyField={currencyField}
+            currencyInfo={currencyInfo}
+            index={index}
+            numOptions={numberOfCommonTokenOptions}
+          />
+        )
+      })}
+    </>
+  )
+}

package/src/components/CurrencyInputPanel/DefaultTokenOptions/TokenOptions/useSendSelectCurrencyEvent.tsx

@@ -0,0 +1,37 @@
+import { useCallback } from 'react'
+import { DEFAULT_NATIVE_ADDRESS_LEGACY } from '@luxexchange/lx/src/features/chains/evm/rpc'
+import { type CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { LuxEventName } from '@luxexchange/lx/src/features/telemetry/constants'
+import { sendAnalyticsEvent } from '@luxexchange/lx/src/features/telemetry/send'
+import { type CurrencyField } from '@luxexchange/lx/src/types/currency'
+import { useTrace } from '@luxfi/utilities/src/telemetry/trace/TraceContext'
+
+type SelectCurrencyEventProperties = {
+  position: number
+  suggestion_count: number
+  currencyInfo: CurrencyInfo
+}
+
+export function useSendSelectCurrencyEvent({
+  currencyField,
+}: {
+  currencyField: CurrencyField
+}): (_: SelectCurrencyEventProperties) => void {
+  const { page } = useTrace()
+
+  return useCallback(
+    ({ position, suggestion_count, currencyInfo }: SelectCurrencyEventProperties): void => {
+      sendAnalyticsEvent(LuxEventName.TokenSelected, {
+        name: currencyInfo.currency.name,
+        address: currencyInfo.currency.isToken ? currencyInfo.currency.address : DEFAULT_NATIVE_ADDRESS_LEGACY,
+        chain: currencyInfo.currency.chainId,
+        page,
+        field: currencyField,
+        position,
+        suggestion_count,
+        preselect_asset: true,
+      })
+    },
+    [page, currencyField],
+  )
+}

package/src/components/CurrencyInputPanel/DefaultTokenOptions/constants.ts

@@ -0,0 +1,19 @@
+import { iconSizes } from '@luxfi/ui/src/theme'
+import { isHoverable, isWebAppDesktop } from '@luxfi/utilities/src/platform'
+
+/**
+ * If we show more than 6 tokens, we may need to add more animation delays
+ */
+export const MAX_NUMBER_OF_TOKENS = isWebAppDesktop ? 5 : 4
+
+/**
+ * The scale of the hover animation for the token icons
+ */
+export const WEB_HOVER_SCALE = 1.1
+
+// TODO: unsure of the implications of pulling this out of the scope of a React FC; potentially make this `getLogoSize` and use in the scope of a React FC
+export const logoSize = isWebAppDesktop ? iconSizes.icon20 : iconSizes.icon24
+
+export const extraMarginForHoverAnimation = isHoverable ? Math.ceil(logoSize * (WEB_HOVER_SCALE - 1)) : 0
+
+// number of times i've used this comment to restart a CI: 7