@luxexchange/lx 1.0.0

package/src/components/lists/OnchainItemList/processSectionsToRows.ts

@@ -0,0 +1,57 @@
+import { OnchainItemListOption } from '@luxexchange/lx/src/components/lists/items/types'
+import type { ItemRowInfo, SectionRowInfo } from '@luxexchange/lx/src/components/lists/OnchainItemList/OnchainItemList'
+import { type OnchainItemSection } from '@luxexchange/lx/src/components/lists/OnchainItemList/types'
+import type { SectionHeaderProps } from '@luxexchange/lx/src/components/lists/SectionHeader'
+
+export enum ProcessedRowType {
+  Header = 'header',
+  Item = 'item',
+}
+
+export type ProcessedRow =
+  | { type: ProcessedRowType.Header; data: SectionRowInfo }
+  | { type: ProcessedRowType.Item; data: ItemRowInfo<OnchainItemListOption> }
+
+export function processSectionsToRows(sections: OnchainItemSection<OnchainItemListOption>[]): ProcessedRow[] {
+  const result: ProcessedRow[] = []
+  let rowIndex = 0
+
+  for (const section of sections) {
+    // process header
+    const headerProps: SectionHeaderProps = {
+      sectionKey: section.sectionKey,
+      rightElement: section.rightElement,
+      endElement: section.endElement,
+      name: section.name,
+      sectionHeader: section.sectionHeader,
+    }
+
+    result.push({
+      type: ProcessedRowType.Header,
+      data: {
+        section: headerProps,
+      },
+    })
+    rowIndex++
+
+    // process items
+    const tokenData = section.data
+    let itemIndex = 0
+
+    for (const item of tokenData) {
+      result.push({
+        type: ProcessedRowType.Item,
+        data: {
+          item,
+          section,
+          index: itemIndex++,
+          rowIndex: rowIndex++,
+          // expanded is not used in native :thinking:
+          expanded: false,
+        },
+      })
+    }
+  }
+
+  return result
+}

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

@@ -0,0 +1,31 @@
+import { OnchainItemListOption } from '@luxexchange/lx/src/components/lists/items/types'
+
+export enum OnchainItemSectionName {
+  SearchResults = 'searchResults',
+  RecentSearches = 'recentSearches',
+
+  YourTokens = 'yourTokens',
+  HiddenTokens = 'hiddenTokens',
+  TrendingTokens = 'trendingTokens',
+  FavoriteTokens = 'favoriteTokens',
+  SuggestedTokens = 'suggestedTokens',
+  BridgingTokens = 'bridgingTokens',
+  OtherChainsTokens = 'otherNetworksTokens',
+
+  Tokens = 'tokens',
+  Pools = 'pools',
+  TrendingPools = 'trendingPools',
+  Wallets = 'wallets',
+  FavoriteWallets = 'favoriteWallets',
+  NFTCollections = 'nftCollections',
+  PopularNFTCollections = 'popularNFTCollections',
+}
+
+export type OnchainItemSection<T extends OnchainItemListOption> = {
+  data: T[]
+  sectionKey: OnchainItemSectionName
+  name?: string
+  rightElement?: JSX.Element
+  endElement?: JSX.Element
+  sectionHeader?: JSX.Element
+}

package/src/components/lists/SectionHeader.tsx

@@ -0,0 +1,137 @@
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ElementAfterText, Flex } from '@luxfi/ui/src'
+import { Clock } from '@luxfi/ui/src/components/icons/Clock'
+import { Coins } from '@luxfi/ui/src/components/icons/Coins'
+import { Heart } from '@luxfi/ui/src/components/icons/Heart'
+import { Person } from '@luxfi/ui/src/components/icons/Person'
+import { PhotoStacked } from '@luxfi/ui/src/components/icons/PhotoStacked'
+import { Pools } from '@luxfi/ui/src/components/icons/Pools'
+import { Search } from '@luxfi/ui/src/components/icons/Search'
+import { Shuffle } from '@luxfi/ui/src/components/icons/Shuffle'
+import { TrendUp } from '@luxfi/ui/src/components/icons/TrendUp'
+import { OnchainItemSectionName } from '@luxexchange/lx/src/components/lists/OnchainItemList/types'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+import { isAndroid } from '@luxfi/utilities/src/platform'
+
+export type SectionHeaderProps = {
+  sectionKey: OnchainItemSectionName
+  rightElement?: JSX.Element
+  endElement?: JSX.Element
+  name?: string
+  sectionHeader?: JSX.Element
+}
+
+export const SectionHeader = memo(function _SectionHeader({
+  sectionKey,
+  rightElement,
+  endElement,
+  name,
+  sectionHeader,
+}: SectionHeaderProps): JSX.Element | null {
+  const title = useSectionTitle(sectionKey)
+  const icon = getSectionIcon(sectionKey)
+
+  if (sectionKey === OnchainItemSectionName.SuggestedTokens) {
+    return null
+  }
+
+  if (sectionHeader) {
+    return sectionHeader
+  }
+
+  return (
+    <Flex
+      row
+      backgroundColor="$surface1"
+      width="100%"
+      justifyContent="space-between"
+      pb="$spacing4"
+      pt="$spacing12"
+      px="$spacing20"
+      alignItems={isAndroid ? 'flex-end' : 'center'}
+      testID={`${TestID.SectionHeaderPrefix}${sectionKey}`}
+    >
+      <Flex row alignItems="center" gap="$spacing8" flex={1}>
+        {icon}
+        <ElementAfterText
+          text={name ?? title}
+          textProps={{ color: '$neutral2', variant: 'subheading2' }}
+          wrapperProps={{ flex: 1 }}
+          element={rightElement}
+        />
+      </Flex>
+      {endElement}
+    </Flex>
+  )
+})
+
+function useSectionTitle(section: OnchainItemSectionName): string {
+  const { t } = useTranslation()
+
+  switch (section) {
+    case OnchainItemSectionName.BridgingTokens:
+      return t('tokens.selector.section.bridging')
+    case OnchainItemSectionName.YourTokens:
+      return t('tokens.selector.section.yours')
+    case OnchainItemSectionName.OtherChainsTokens:
+      return t('tokens.selector.section.otherNetworksSearchResults')
+    case OnchainItemSectionName.TrendingTokens:
+      return t('tokens.selector.section.trending')
+    case OnchainItemSectionName.RecentSearches:
+      return t('tokens.selector.section.recent')
+    case OnchainItemSectionName.FavoriteTokens:
+      return t('tokens.selector.section.favorite')
+    case OnchainItemSectionName.SearchResults:
+      return t('tokens.selector.section.search')
+    case OnchainItemSectionName.Tokens:
+      return t('common.tokens')
+    case OnchainItemSectionName.Pools:
+      return t('common.pools')
+    case OnchainItemSectionName.TrendingPools:
+      return t('pool.top.volume')
+    case OnchainItemSectionName.Wallets:
+      return t('explore.search.section.wallets')
+    case OnchainItemSectionName.NFTCollections:
+      return t('explore.search.section.nft')
+    case OnchainItemSectionName.PopularNFTCollections:
+      return t('explore.search.section.popularNFT')
+    case OnchainItemSectionName.FavoriteWallets:
+      return t('explore.wallets.favorite.title.default')
+    case OnchainItemSectionName.SuggestedTokens: // no suggested tokens header
+      return ''
+    default:
+      return section
+  }
+}
+
+function getSectionIcon(section: OnchainItemSectionName): JSX.Element | null {
+  switch (section) {
+    case OnchainItemSectionName.BridgingTokens:
+      return <Shuffle color="$neutral2" size="$icon.16" />
+    case OnchainItemSectionName.Tokens:
+    case OnchainItemSectionName.YourTokens:
+    case OnchainItemSectionName.OtherChainsTokens:
+      return <Coins color="$neutral2" size="$icon.16" />
+    case OnchainItemSectionName.TrendingPools:
+    case OnchainItemSectionName.TrendingTokens:
+    case OnchainItemSectionName.PopularNFTCollections:
+      return <TrendUp color="$neutral2" size="$icon.16" />
+    case OnchainItemSectionName.RecentSearches:
+      return <Clock color="$neutral2" size="$icon.16" />
+    case OnchainItemSectionName.SearchResults:
+      return <Search color="$neutral2" size="$icon.16" />
+    case OnchainItemSectionName.FavoriteTokens:
+      return <Coins color="$neutral2" size="$icon.16" />
+    case OnchainItemSectionName.Pools:
+      return <Pools color="$neutral2" size="$icon.16" />
+    case OnchainItemSectionName.Wallets:
+      return <Person color="$neutral2" size="$icon.16" />
+    case OnchainItemSectionName.FavoriteWallets:
+      return <Heart color="$neutral2" size="$icon.16" />
+    case OnchainItemSectionName.NFTCollections:
+      return <PhotoStacked color="$neutral2" size="$icon.16" />
+    default:
+      return null
+  }
+}

package/src/components/lists/SelectorBaseList.tsx

@@ -0,0 +1,131 @@
+import { ContentStyle } from '@shopify/flash-list'
+import { memo, useCallback, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AnimateTransition, Flex, Loader, Text } from '@luxfi/ui/src'
+import { fonts } from '@luxfi/ui/src/theme'
+import { BaseCard } from '@luxexchange/lx/src/components/BaseCard/BaseCard'
+import { FocusedRowControl } from '@luxexchange/lx/src/components/lists/items/OptionItem'
+import { OnchainItemListOption } from '@luxexchange/lx/src/components/lists/items/types'
+import {
+  ItemRowInfo,
+  OnchainItemList,
+  OnchainItemListRef,
+} from '@luxexchange/lx/src/components/lists/OnchainItemList/OnchainItemList'
+import type { OnchainItemSection } from '@luxexchange/lx/src/components/lists/OnchainItemList/types'
+import { SectionHeader, SectionHeaderProps } from '@luxexchange/lx/src/components/lists/SectionHeader'
+import { ITEM_SECTION_HEADER_ROW_HEIGHT } from '@luxexchange/lx/src/components/TokenSelector/constants'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+
+function EmptyResults(): JSX.Element {
+  const { t } = useTranslation()
+  return (
+    <Flex>
+      <Text color="$neutral3" mt="$spacing16" textAlign="center" variant="subheading2">
+        {t('common.noResults')}
+      </Text>
+    </Flex>
+  )
+}
+
+interface SelectorBaseListProps<T extends OnchainItemListOption> {
+  sections?: OnchainItemSection<T>[]
+  chainFilter?: UniverseChainId | null
+  refetch?: () => void
+  loading?: boolean
+  hasError?: boolean
+  emptyElement?: JSX.Element
+  errorText?: string
+  renderItem: (info: ItemRowInfo<T>) => JSX.Element
+  keyExtractor: (item: T, index: number) => string
+  expandedItems?: string[]
+  focusedRowControl?: Omit<FocusedRowControl, 'rowIndex'>
+  renderedInModal: boolean
+  contentContainerStyle?: ContentStyle
+}
+
+function _SelectorBaseList<T extends OnchainItemListOption>({
+  renderItem,
+  sections,
+  chainFilter,
+  refetch,
+  loading,
+  hasError,
+  emptyElement,
+  errorText,
+  keyExtractor,
+  expandedItems,
+  focusedRowControl,
+  renderedInModal,
+  contentContainerStyle,
+}: SelectorBaseListProps<T>): JSX.Element {
+  const { t } = useTranslation()
+  const sectionListRef = useRef<OnchainItemListRef>(undefined)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: +chainFilter
+  useEffect(() => {
+    if (sections?.length) {
+      sectionListRef.current?.scrollToLocation({
+        itemIndex: 0,
+        sectionIndex: 0,
+        animated: true,
+      })
+    }
+  }, [chainFilter, sections?.length])
+
+  const renderSectionHeader = useCallback(
+    ({ section }: { section: SectionHeaderProps }): JSX.Element => (
+      <SectionHeader
+        rightElement={section.rightElement}
+        endElement={section.endElement}
+        sectionKey={section.sectionKey}
+        name={section.name}
+        sectionHeader={section.sectionHeader}
+      />
+    ),
+    [],
+  )
+
+  if (hasError) {
+    return (
+      <>
+        <Flex grow justifyContent="center">
+          <BaseCard.ErrorState
+            retryButtonLabel={t('common.button.retry')}
+            title={errorText ?? t('tokens.selector.error.load')}
+            onRetry={refetch}
+          />
+        </Flex>
+        {/*
+          This is needed to position error message roughly in the center of
+          the sheet initially when modal is opened to 65% only
+        */}
+        <Flex grow />
+      </>
+    )
+  }
+
+  return (
+    <AnimateTransition animationType="fade" currentIndex={(!sections || !sections.length) && loading ? 0 : 1}>
+      <Flex grow px="$spacing20">
+        <Flex height={ITEM_SECTION_HEADER_ROW_HEIGHT} justifyContent="center" py="$spacing12" width={80}>
+          <Loader.Box height={fonts.subheading2.lineHeight} />
+        </Flex>
+        <Loader.Token gap="$none" repeat={15} />
+      </Flex>
+      <OnchainItemList<T>
+        ListEmptyComponent={emptyElement || <EmptyResults />}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        renderSectionHeader={renderSectionHeader}
+        sectionListRef={sectionListRef}
+        sections={sections ?? []}
+        expandedItems={expandedItems}
+        focusedRowControl={focusedRowControl}
+        renderedInModal={renderedInModal}
+        contentContainerStyle={contentContainerStyle}
+      />
+    </AnimateTransition>
+  )
+}
+
+export const SelectorBaseList = memo(_SelectorBaseList) as typeof _SelectorBaseList

package/src/components/lists/items/OptionItem.tsx

@@ -0,0 +1,161 @@
+import { memo, useCallback } from 'react'
+import { Flex, FlexProps, Text, TextProps, TouchableArea } from '@luxfi/ui/src'
+import { dismissNativeKeyboard } from '@luxfi/utilities/src/device/keyboard/dismissNativeKeyboard'
+import { KeyAction } from '@luxfi/utilities/src/device/keyboard/types'
+import { useIsKeyboardOpen } from '@luxfi/utilities/src/device/keyboard/useIsKeyboardOpen'
+import { useKeyDown } from '@luxfi/utilities/src/device/keyboard/useKeyDown'
+import { isWebApp, isWebPlatform } from '@luxfi/utilities/src/platform'
+import { noop } from '@luxfi/utilities/src/react/noop'
+
+// Props for manually managing the focused row index of a list
+// i.e. via keyboard ArrowUp/ArrowDown navigation
+export interface FocusedRowControl {
+  rowIndex: number // this item's row index
+  focusedRowIndex: number | undefined // index of the list's focused row
+  setFocusedRowIndex: (index: number | undefined) => void
+}
+
+export interface OptionItemProps {
+  image: JSX.Element
+  title: string | JSX.Element
+  subtitle?: JSX.Element
+  rightElement?: JSX.Element
+  badge?: JSX.Element
+  titleProps?: TextProps
+  onPress: () => void
+  onLongPress?: () => void
+  disabled?: boolean
+  testID?: string
+  modalInfo?: {
+    modal: JSX.Element
+    modalShouldShow: boolean
+    modalSetIsOpen: (isOpen: boolean) => void
+  }
+  focusedRowControl?: FocusedRowControl
+}
+
+function _OptionItem({
+  image,
+  title,
+  subtitle,
+  rightElement,
+  badge,
+  titleProps,
+  onPress,
+  onLongPress,
+  disabled,
+  testID,
+  modalInfo,
+  focusedRowControl,
+}: OptionItemProps): JSX.Element {
+  const isKeyboardOpen = useIsKeyboardOpen()
+
+  const { modal, modalShouldShow, modalSetIsOpen } = modalInfo ?? {}
+
+  const onPressOption = useCallback(() => {
+    const handleShowModal = (): void => {
+      dismissNativeKeyboard()
+      modalSetIsOpen?.(true)
+    }
+
+    if (modalShouldShow && modal) {
+      // 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(handleShowModal, 700)
+      } else {
+        handleShowModal()
+      }
+      return
+    }
+
+    onPress()
+  }, [modalShouldShow, modal, isKeyboardOpen, modalSetIsOpen, onPress])
+
+  // Custom keyboard list nav behavior using arrow + enter keys
+  const { focusedRowIndex, rowIndex, setFocusedRowIndex } = focusedRowControl ?? {}
+  const keyboardNavEnabled = isWebPlatform && focusedRowControl && setFocusedRowIndex
+  const isFocused = focusedRowIndex !== undefined && focusedRowIndex === rowIndex
+  useKeyDown({
+    keys: ['Enter'],
+    keyAction: KeyAction.UP,
+    disabled: !keyboardNavEnabled,
+    callback: isFocused ? onPressOption : noop,
+    shouldTriggerInInput: true,
+  })
+  const focusedStyleProps: FlexProps = keyboardNavEnabled
+    ? {
+        backgroundColor: isFocused ? '$surface1Hovered' : undefined,
+        onMouseEnter: (): void => {
+          setFocusedRowIndex(rowIndex)
+        },
+        onMouseLeave: (): void => {
+          setFocusedRowIndex(undefined)
+        },
+      }
+    : { hoverStyle: { backgroundColor: '$surface1Hovered' } }
+
+  return (
+    <>
+      <TouchableArea
+        animation="300ms"
+        opacity={disabled ? 0.5 : 1}
+        width="100%"
+        px="$spacing12"
+        onPress={onPressOption}
+        onLongPress={onLongPress}
+      >
+        <Flex
+          row
+          alignItems="center"
+          gap="$spacing8"
+          justifyContent="space-between"
+          p="$spacing8"
+          style={{
+            pointerEvents: 'auto',
+          }}
+          borderRadius="$rounded16"
+          {...focusedStyleProps}
+          testID={testID}
+        >
+          <Flex row shrink alignItems="center" gap="$spacing12">
+            {image}
+            <Flex shrink>
+              <Flex row alignItems="center" gap="$spacing8">
+                {typeof title === 'string' ? (
+                  <Text
+                    color="$neutral1"
+                    variant="body1"
+                    whiteSpace="nowrap"
+                    overflow="hidden"
+                    textOverflow="ellipsis"
+                    numberOfLines={1}
+                    {...titleProps}
+                  >
+                    {title}
+                  </Text>
+                ) : (
+                  title
+                )}
+                {badge}
+              </Flex>
+              {subtitle}
+            </Flex>
+          </Flex>
+
+          {rightElement && (
+            <Flex grow alignItems="flex-end" justifyContent="center">
+              {rightElement}
+            </Flex>
+          )}
+        </Flex>
+      </TouchableArea>
+
+      {modal}
+    </>
+  )
+}
+
+export const OptionItem = memo(_OptionItem)

package/src/components/lists/items/nfts/NFTCollectionOptionItem.tsx

@@ -0,0 +1,38 @@
+import { Text, UniversalImage } from '@luxfi/ui/src'
+import { Verified } from '@luxfi/ui/src/components/icons/Verified'
+import { borderRadii, iconSizes } from '@luxfi/ui/src/theme'
+import { OptionItem, OptionItemProps } from '@luxexchange/lx/src/components/lists/items/OptionItem'
+import { NFTCollectionOption } from '@luxexchange/lx/src/components/lists/items/types'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+import { uriToHttpUrls } from '@luxfi/utilities/src/format/urls'
+
+type NFTCollectionOptionItemProps = {
+  collectionOption: NFTCollectionOption
+  onPress: OptionItemProps['onPress']
+}
+
+export function NFTCollectionOptionItem({ collectionOption, onPress }: NFTCollectionOptionItemProps): JSX.Element {
+  const { name, isVerified, imageUrl } = collectionOption
+
+  return (
+    <OptionItem
+      image={
+        <UniversalImage
+          fallback={
+            <Text color="$neutral1" numberOfLines={1} textAlign="center">
+              {name.slice(0, 1)}
+            </Text>
+          }
+          uri={imageUrl ? uriToHttpUrls(imageUrl)[0] : undefined}
+          autoplay={false}
+          size={{ width: iconSizes.icon40, height: iconSizes.icon40 }}
+          style={{ image: { borderRadius: borderRadii.roundedFull } }}
+        />
+      }
+      title={name}
+      badge={isVerified ? <Verified color="$accent1" size="$icon.16" /> : undefined}
+      testID={TestID.SearchNFTCollectionItem}
+      onPress={onPress}
+    />
+  )
+}

package/src/components/lists/items/nfts/useNftSearchResultsToNftCollectionOptions.tsx

@@ -0,0 +1,43 @@
+import { GraphQLApi } from '@luxfi/api'
+import { useMemo } from 'react'
+import { NFTCollectionOption, OnchainItemListOptionType } from '@luxexchange/lx/src/components/lists/items/types'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { fromGraphQLChain } from '@luxexchange/lx/src/features/chains/utils'
+
+function gqlNFTToNFTCollectionOption(
+  node: NonNullable<
+    NonNullable<NonNullable<NonNullable<GraphQLApi.CollectionSearchQuery>['nftCollections']>['edges']>[0]
+  >['node'],
+): NFTCollectionOption | null {
+  const contract = node.nftContracts?.[0]
+  // Only show NFT results that have fully populated results
+  const chainId = fromGraphQLChain(contract?.chain ?? GraphQLApi.Chain.Ethereum)
+  if (node.name && contract?.address && chainId) {
+    return {
+      type: OnchainItemListOptionType.NFTCollection,
+      chainId,
+      address: contract.address,
+      name: node.name,
+      imageUrl: node.image?.url ?? null,
+      isVerified: Boolean(node.isVerified),
+    }
+  }
+  return null
+}
+
+export function useNftSearchResultsToNftCollectionOptions(
+  nftSearchResultsData: GraphQLApi.CollectionSearchQuery | undefined,
+  chainFilter: UniverseChainId | null,
+): NFTCollectionOption[] {
+  return useMemo(() => {
+    const edges = nftSearchResultsData?.nftCollections?.edges ?? []
+    return edges.reduce<NFTCollectionOption[]>((acc, { node }) => {
+      const option: NFTCollectionOption | null = gqlNFTToNFTCollectionOption(node)
+
+      if (option && (chainFilter === null || option.chainId === chainFilter)) {
+        acc.push(option)
+      }
+      return acc
+    }, [])
+  }, [nftSearchResultsData, chainFilter])
+}