@luxexchange/lx 1.0.0

package/src/components/lists/OnchainItemList/OnchainItemList.native.tsx

@@ -0,0 +1,102 @@
+import { FlashList } from '@shopify/flash-list'
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import { AnimatedBottomSheetFlashList } from '@luxfi/ui/src/components/AnimatedFlashList/AnimatedFlashList'
+import { OnchainItemListOption } from '@luxexchange/lx/src/components/lists/items/types'
+import { OnchainItemListProps } from '@luxexchange/lx/src/components/lists/OnchainItemList/OnchainItemList'
+import {
+  ProcessedRow,
+  ProcessedRowType,
+  processSectionsToRows,
+} from '@luxexchange/lx/src/components/lists/OnchainItemList/processSectionsToRows'
+import { useAppInsets } from '@luxexchange/lx/src/hooks/useAppInsets'
+
+const TOKEN_ITEM_SIZE = 64
+const AMOUNT_TO_DRAW = 18
+
+export const OnchainItemList = memo(function _OnchainItemList({
+  sectionListRef,
+  ListEmptyComponent,
+  keyExtractor,
+  renderItem,
+  renderSectionHeader,
+  sections,
+  renderedInModal,
+  contentContainerStyle,
+}: OnchainItemListProps<OnchainItemListOption>): JSX.Element {
+  const insets = useAppInsets()
+  const ref = useRef<FlashList<ProcessedRow>>(null)
+
+  useEffect(() => {
+    if (sectionListRef) {
+      sectionListRef.current = {
+        scrollToLocation: ({ itemIndex, sectionIndex, animated }): void => {
+          ref.current?.scrollToIndex({ index: itemIndex || sectionIndex, animated })
+        },
+      }
+    }
+  }, [sectionListRef])
+
+  const data = useMemo(() => {
+    return processSectionsToRows(sections)
+  }, [sections])
+
+  // TODO(WALL-5889): fix sticky header indices (prevent duplicates)
+  // const stickyHeaderIndices: number[] = useMemo(() => {
+  //   return data
+  //     .map((row, index) => (row.type === ProcessedRowType.Header ? index : null))
+  //     .filter((index) => index !== null) as number[]
+  // }, [data])
+
+  const renderFlashListItem = useCallback(
+    ({ item }: { item: ProcessedRow }) => {
+      switch (item.type) {
+        case ProcessedRowType.Header:
+          return renderSectionHeader?.(item.data) ?? null
+        case ProcessedRowType.Item:
+          return renderItem(item.data)
+        default:
+          return null
+      }
+    },
+    [renderItem, renderSectionHeader],
+  )
+
+  const getItemType = useCallback((item: ProcessedRow): string => item.type, [])
+
+  const makeKey = useCallback(
+    (item: ProcessedRow, index: number): string => {
+      if (!keyExtractor) {
+        return String(index)
+      }
+      switch (item.type) {
+        case ProcessedRowType.Header:
+          return `${item.data.section.sectionKey}-header-${index}`
+        case ProcessedRowType.Item:
+          return `${keyExtractor(item.data.item, index)}-${index}`
+        default:
+          return ''
+      }
+    },
+    [keyExtractor],
+  )
+  const ListComponent = renderedInModal ? AnimatedBottomSheetFlashList : FlashList
+
+  return (
+    <ListComponent
+      ref={ref}
+      data={data}
+      ListEmptyComponent={ListEmptyComponent}
+      estimatedItemSize={TOKEN_ITEM_SIZE}
+      contentContainerStyle={{ paddingBottom: insets.bottom, ...contentContainerStyle }}
+      keyboardShouldPersistTaps="always"
+      keyExtractor={makeKey}
+      keyboardDismissMode="on-drag"
+      renderItem={renderFlashListItem}
+      getItemType={getItemType}
+      showsVerticalScrollIndicator={false}
+      drawDistance={TOKEN_ITEM_SIZE * AMOUNT_TO_DRAW}
+      // TODO(WALL-5889): fix sticky header indices (prevent duplicates)
+      // stickyHeaderIndices={stickyHeaderIndices}
+    />
+  )
+})

package/src/components/lists/OnchainItemList/OnchainItemList.tsx

@@ -0,0 +1,39 @@
+import { ContentStyle } from '@shopify/flash-list'
+import { EffectCallback, MutableRefObject } from 'react'
+import { FocusedRowControl } from '@luxexchange/lx/src/components/lists/items/OptionItem'
+import { OnchainItemListOption } from '@luxexchange/lx/src/components/lists/items/types'
+import type { OnchainItemSection } from '@luxexchange/lx/src/components/lists/OnchainItemList/types'
+import { SectionHeaderProps } from '@luxexchange/lx/src/components/lists/SectionHeader'
+import { PlatformSplitStubError } from '@luxfi/utilities/src/errors'
+
+export interface OnchainItemListRef {
+  scrollToLocation: (params: { itemIndex: number; sectionIndex: number; animated: boolean }) => void
+}
+
+export type SectionRowInfo = { section: SectionHeaderProps }
+
+export interface ItemRowInfo<T extends OnchainItemListOption> {
+  item: T
+  section: OnchainItemSection<T>
+  index: number
+  rowIndex: number
+  expanded?: boolean
+}
+
+export interface OnchainItemListProps<T extends OnchainItemListOption> {
+  sectionListRef?: MutableRefObject<OnchainItemListRef | undefined>
+  ListEmptyComponent?: JSX.Element
+  focusHook?: (callback: EffectCallback) => void
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (info: ItemRowInfo<T>) => JSX.Element | null
+  renderSectionHeader?: (info: SectionRowInfo) => JSX.Element
+  sections: OnchainItemSection<T>[]
+  expandedItems?: string[]
+  renderedInModal: boolean
+  focusedRowControl?: Omit<FocusedRowControl, 'rowIndex'>
+  contentContainerStyle?: ContentStyle
+}
+
+export function OnchainItemList<T extends OnchainItemListOption>(_props: OnchainItemListProps<T>): JSX.Element {
+  throw new PlatformSplitStubError('OnchainItemList')
+}

package/src/components/lists/OnchainItemList/OnchainItemList.web.tsx

@@ -0,0 +1,348 @@
+import isArray from 'lodash/isArray'
+import isEqual from 'lodash/isEqual'
+import React, { CSSProperties, Fragment, Key, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { LayoutChangeEvent } from 'react-native'
+import AutoSizer from 'react-virtualized-auto-sizer'
+import { VariableSizeList as List } from 'react-window'
+import { Flex, useWindowDimensions } from '@luxfi/ui/src'
+import { zIndexes } from '@luxfi/ui/src/theme'
+import { OnchainItemListOption } from '@luxexchange/lx/src/components/lists/items/types'
+import {
+  ItemRowInfo,
+  OnchainItemListProps,
+  SectionRowInfo,
+} from '@luxexchange/lx/src/components/lists/OnchainItemList/OnchainItemList'
+import { OnchainItemSectionName } from '@luxexchange/lx/src/components/lists/OnchainItemList/types'
+import { ITEM_SECTION_HEADER_ROW_HEIGHT } from '@luxexchange/lx/src/components/TokenSelector/constants'
+import { KeyAction } from '@luxfi/utilities/src/device/keyboard/types'
+import { useKeyDown } from '@luxfi/utilities/src/device/keyboard/useKeyDown'
+
+const ITEM_ROW_HEIGHT = 64
+
+type OnchainItemListRowInfo = {
+  key: Key | undefined
+}
+type ListSectionRowInfo<T extends OnchainItemListOption> = SectionRowInfo &
+  OnchainItemListRowInfo &
+  Pick<OnchainItemListProps<T>, 'renderSectionHeader'>
+type ListItemRowInfo<T extends OnchainItemListOption> = ItemRowInfo<T> &
+  OnchainItemListRowInfo &
+  Pick<OnchainItemListProps<T>, 'renderItem'>
+
+type OnchainItemListData<T extends OnchainItemListOption> = ListItemRowInfo<T> | ListSectionRowInfo<T>
+
+function isSectionHeader<T extends OnchainItemListOption>(
+  rowInfo: OnchainItemListData<T>,
+): rowInfo is ListSectionRowInfo<T> {
+  return !('renderItem' in rowInfo)
+}
+
+function isHorizontalTokenRowInfo<T extends OnchainItemListOption>(rowInfo: OnchainItemListData<T>): boolean {
+  const isHeader = isSectionHeader(rowInfo)
+  return !isHeader && isArray(rowInfo.item)
+}
+
+export function OnchainItemList<T extends OnchainItemListOption>({
+  ListEmptyComponent,
+  keyExtractor,
+  renderItem,
+  renderSectionHeader,
+  sections,
+  sectionListRef,
+  expandedItems,
+  focusedRowControl,
+}: OnchainItemListProps<T>): JSX.Element {
+  const ref = useRef<List>(null)
+  const listOuterRef = useRef<HTMLDivElement>(null)
+
+  const rowHeightMap = useRef<{ [key: number]: number }>({})
+  const [firstVisibleIndex, setFirstVisibleIndex] = useState(-1)
+  const { width: windowWidth } = useWindowDimensions()
+
+  useEffect(() => {
+    if (sectionListRef) {
+      sectionListRef.current = {
+        scrollToLocation: ({ itemIndex, sectionIndex }): void => {
+          let listIndex = 0
+          for (let i = 0; i < sectionIndex; i++) {
+            const section = sections[i]
+            listIndex += section?.data.length ?? 0
+          }
+          listIndex += itemIndex
+
+          ref.current?.scrollToItem(listIndex)
+        },
+      }
+    }
+  }, [sectionListRef, sections])
+
+  const items = useMemo(() => {
+    let rowIndex = 0
+    return sections.reduce((acc: OnchainItemListData<T>[], section) => {
+      if (section.sectionKey !== OnchainItemSectionName.SuggestedTokens) {
+        const sectionInfo: ListSectionRowInfo<T> = {
+          section: {
+            sectionKey: section.sectionKey,
+            rightElement: section.rightElement,
+            endElement: section.endElement,
+            sectionHeader: section.sectionHeader,
+          },
+          key: section.sectionKey,
+          renderSectionHeader,
+        }
+        rowIndex += 1
+        acc.push(sectionInfo)
+      }
+
+      const rows = acc.concat(
+        section.data.map((item, index) => {
+          const itemInfo: ListItemRowInfo<T> = {
+            item,
+            rowIndex,
+            section,
+            index,
+            key: keyExtractor?.(item, index),
+            renderItem,
+            expanded: expandedItems?.includes(keyExtractor?.(item, index) ?? '') ?? false,
+          }
+          rowIndex += 1
+          return itemInfo
+        }),
+      )
+
+      return rows
+    }, [])
+  }, [sections, renderSectionHeader, keyExtractor, renderItem, expandedItems])
+
+  // Used for rendering the sticky header
+  const activeSessionIndex = useMemo(() => {
+    // eslint-disable-next-line max-params
+    return items.slice(0, firstVisibleIndex + 1).reduceRight((acc, item, index) => {
+      return acc === -1 && isSectionHeader(item) ? index : acc
+    }, -1)
+  }, [firstVisibleIndex, items])
+
+  const updateRowHeight = useCallback((index: number, height: number) => {
+    if (rowHeightMap.current[index] !== height) {
+      rowHeightMap.current[index] = height
+      ref.current?.resetAfterIndex(index)
+    }
+  }, [])
+
+  const getRowHeight = useCallback(
+    (index: number): number => {
+      const item = items[index]
+
+      if (!item) {
+        return 0
+      }
+
+      if (isHorizontalTokenRowInfo(item)) {
+        if (!isSectionHeader(item)) {
+          if (isArray(item.item) && !item.item.length) {
+            return 0
+          }
+        }
+
+        const measuredHeight = rowHeightMap.current[index]
+        if (measuredHeight) {
+          return measuredHeight
+        }
+      }
+
+      return isSectionHeader(item) ? ITEM_SECTION_HEADER_ROW_HEIGHT : ITEM_ROW_HEIGHT
+    },
+    [items],
+  )
+
+  const ListContent = useCallback(
+    ({ data, index, style }: { data: OnchainItemListData<T>[]; index: number; style: CSSProperties }) => {
+      if (activeSessionIndex === index) {
+        return null
+      }
+
+      return (
+        <OnchainItemListRow
+          data={data}
+          index={index}
+          style={style}
+          updateRowHeight={updateRowHeight}
+          windowWidth={windowWidth}
+        />
+      )
+    },
+    [updateRowHeight, windowWidth, activeSessionIndex],
+  )
+
+  const handleArrowKeyListScrolling = useCallback(
+    (event: KeyboardEvent) => {
+      if (!focusedRowControl) {
+        return
+      }
+      const { focusedRowIndex, setFocusedRowIndex } = focusedRowControl
+
+      if (listOuterRef.current) {
+        listOuterRef.current.tabIndex = 0
+      }
+
+      event.preventDefault()
+
+      const firstItemRowIndex = items.length && items[0] && isSectionHeader(items[0]) ? 1 : 0 // if first row is a header, skip to the next row
+      if (focusedRowIndex === undefined) {
+        setFocusedRowIndex(firstItemRowIndex)
+        return
+      }
+
+      if (event.key === 'ArrowDown') {
+        const newFocusedIndex = Math.min(items.length - 1, focusedRowIndex + 1)
+        const itemAtNewFocusedIndex = items[newFocusedIndex]
+        if (itemAtNewFocusedIndex && isSectionHeader(itemAtNewFocusedIndex)) {
+          // skip focusing on section header
+          setFocusedRowIndex(Math.min(items.length - 1, focusedRowIndex + 2))
+        } else {
+          setFocusedRowIndex(newFocusedIndex)
+        }
+      }
+
+      if (event.key === 'ArrowUp') {
+        const newFocusedIndex = Math.max(firstItemRowIndex, focusedRowIndex - 1)
+        const itemAtNewFocusedIndex = items[newFocusedIndex]
+        if (itemAtNewFocusedIndex && isSectionHeader(itemAtNewFocusedIndex)) {
+          // skip focusing on section header
+          setFocusedRowIndex(Math.max(firstItemRowIndex, focusedRowIndex - 2))
+        } else {
+          setFocusedRowIndex(newFocusedIndex)
+        }
+      }
+    },
+    [focusedRowControl, items],
+  )
+
+  useKeyDown({
+    callback: handleArrowKeyListScrolling,
+    keys: ['ArrowDown', 'ArrowUp'],
+    disabled: !sections.length || !focusedRowControl,
+    keyAction: KeyAction.UP,
+    preventDefault: true,
+    shouldTriggerInInput: true,
+  })
+
+  useEffect(() => {
+    const list = ref.current
+    const { focusedRowIndex } = focusedRowControl ?? {}
+    if (!list || focusedRowIndex === undefined) {
+      return
+    }
+
+    list.scrollToItem(focusedRowIndex)
+  }, [focusedRowControl])
+
+  return (
+    <Flex grow maxHeight="100dvh">
+      {!sections.length && ListEmptyComponent}
+      <AutoSizer disableWidth>
+        {({ height }: { height: number }): JSX.Element => {
+          if (!sections.length) {
+            return <Fragment />
+          }
+
+          // Prevent overfitting the list, resulting in showing double scroll bar
+          const correctedHeight = height - 1
+          return (
+            <Flex position="relative">
+              <Flex position="absolute" top={0} width="100%" zIndex={zIndexes.sticky}>
+                {activeSessionIndex >= 0 && (
+                  <OnchainItemListRow data={items} index={activeSessionIndex} windowWidth={windowWidth} />
+                )}
+              </Flex>
+              <List
+                ref={ref}
+                outerRef={listOuterRef}
+                height={correctedHeight}
+                itemCount={items.length}
+                itemData={items}
+                itemSize={getRowHeight}
+                width="100%"
+                onItemsRendered={({ visibleStartIndex }): void => {
+                  setFirstVisibleIndex(visibleStartIndex)
+                }}
+              >
+                {ListContent}
+              </List>
+            </Flex>
+          )
+        }}
+      </AutoSizer>
+    </Flex>
+  )
+}
+
+function OnchainItemListRow<T extends OnchainItemListOption>({
+  index,
+  data,
+  style,
+  windowWidth,
+  updateRowHeight,
+}: {
+  index: number
+  data: OnchainItemListData<T>[]
+  style?: CSSProperties
+  windowWidth: number
+  updateRowHeight?: (index: number, height: number) => void
+}): JSX.Element {
+  const itemData = data[index]
+
+  return (
+    <>
+      {itemData && (
+        <Row
+          index={index}
+          itemData={itemData}
+          style={style}
+          updateRowHeight={updateRowHeight}
+          windowWidth={windowWidth}
+        />
+      )}
+    </>
+  )
+}
+
+type RowProps<T extends OnchainItemListOption> = {
+  index: number
+  itemData: ListItemRowInfo<T> | ListSectionRowInfo<T>
+  style?: CSSProperties
+  windowWidth: number
+  updateRowHeight?: (index: number, height: number) => void
+}
+function _Row<T extends OnchainItemListOption>({ index, itemData, style, updateRowHeight }: RowProps<T>): JSX.Element {
+  const rowRef = useRef<HTMLElement>(null)
+
+  const handleLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      const height = e.nativeEvent.layout.height
+      if (height && updateRowHeight) {
+        updateRowHeight(index, height)
+      }
+    },
+    [updateRowHeight, index],
+  )
+
+  const item = useMemo((): JSX.Element | null => {
+    if (isSectionHeader(itemData)) {
+      return itemData.renderSectionHeader?.(itemData) ?? null
+    }
+
+    return itemData.renderItem(itemData)
+  }, [itemData])
+
+  return (
+    <Flex key={itemData.key ?? index} grow alignItems="center" justifyContent="center" style={style}>
+      <Flex ref={rowRef} width="100%" onLayout={handleLayout}>
+        {item}
+      </Flex>
+    </Flex>
+  )
+}
+
+const Row = React.memo(_Row, isEqual)

package/src/components/lists/OnchainItemList/processSectionsToRows.test.tsx

@@ -0,0 +1,181 @@
+import { Token } from '@luxfi/amm-core'
+import { OnchainItemListOptionType, type TokenOption } from '@luxexchange/lx/src/components/lists/items/types'
+import {
+  ProcessedRow,
+  ProcessedRowType,
+  processSectionsToRows,
+} from '@luxexchange/lx/src/components/lists/OnchainItemList/processSectionsToRows'
+import { type OnchainItemSection, OnchainItemSectionName } from '@luxexchange/lx/src/components/lists/OnchainItemList/types'
+import type { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { benignSafetyInfo } from '@luxexchange/lx/src/test/fixtures'
+
+describe('processSectionsToRows', () => {
+  const mockToken = new Token(
+    1, // chainId
+    '0x1234567890123456789012345678901234567890', // address
+    18, // decimals
+    'TEST', // symbol
+    'Test Token', // name
+  )
+
+  const mockCurrencyInfo: CurrencyInfo = {
+    currency: mockToken,
+    currencyId: 'test-id',
+    logoUrl: null,
+    safetyInfo: benignSafetyInfo,
+    isSpam: false,
+  }
+
+  const mockTokenOption: TokenOption = {
+    type: OnchainItemListOptionType.Token,
+    currencyInfo: mockCurrencyInfo,
+    quantity: null,
+    balanceUSD: null,
+  }
+
+  const createMockTokenSection = (
+    sectionKey: OnchainItemSectionName,
+    data: OnchainItemSection<TokenOption>['data'] = [mockTokenOption],
+    name?: string,
+    // eslint-disable-next-line max-params
+  ): OnchainItemSection<TokenOption> => ({
+    sectionKey,
+    data,
+    name,
+  })
+
+  // Type guard functions
+  const isHeaderRow = (row: ProcessedRow): row is Extract<ProcessedRow, { type: ProcessedRowType.Header }> =>
+    row.type === ProcessedRowType.Header
+
+  const isItemRow = (row: ProcessedRow): row is Extract<ProcessedRow, { type: ProcessedRowType.Item }> =>
+    row.type === ProcessedRowType.Item
+
+  it('processes an empty array of sections', () => {
+    const result = processSectionsToRows([])
+    expect(result).toEqual([])
+  })
+
+  it('processes a single section with one item', () => {
+    const section = createMockTokenSection(OnchainItemSectionName.YourTokens, [mockTokenOption], 'Your Tokens')
+    const result = processSectionsToRows([section])
+
+    expect(result).toHaveLength(2) // Header + 1 Item
+
+    const [header, item] = result
+
+    if (!header || !item) {
+      throw new Error('Expected header and item to be defined')
+    }
+
+    expect(isHeaderRow(header)).toBe(true)
+    if (isHeaderRow(header)) {
+      expect(header.data.section.name).toBe('Your Tokens')
+    }
+
+    expect(isItemRow(item)).toBe(true)
+    if (isItemRow(item)) {
+      expect(item.data.item).toBe(mockTokenOption)
+    }
+  })
+
+  it('processes multiple sections with multiple items', () => {
+    const sections = [
+      createMockTokenSection(OnchainItemSectionName.YourTokens, [mockTokenOption, mockTokenOption], 'Your Tokens'),
+      createMockTokenSection(OnchainItemSectionName.TrendingTokens, [mockTokenOption], 'Trending Tokens'),
+    ]
+
+    const result = processSectionsToRows(sections)
+
+    expect(result).toHaveLength(5) // (Header + 2 Items) + (Header + 1 Item)
+
+    const [header1, item1a, item1b, header2, item2] = result
+
+    if (!header1 || !item1a || !item1b || !header2 || !item2) {
+      throw new Error('Expected all rows to be defined')
+    }
+
+    // First section
+    expect(isHeaderRow(header1)).toBe(true)
+    if (isHeaderRow(header1)) {
+      expect(header1.data.section.name).toBe('Your Tokens')
+    }
+
+    expect(isItemRow(item1a)).toBe(true)
+    expect(isItemRow(item1b)).toBe(true)
+
+    // Second section
+    expect(isHeaderRow(header2)).toBe(true)
+    if (isHeaderRow(header2)) {
+      expect(header2.data.section.name).toBe('Trending Tokens')
+    }
+
+    expect(isItemRow(item2)).toBe(true)
+
+    // Check items
+    if (isItemRow(item1a) && isItemRow(item1b) && isItemRow(item2)) {
+      expect(item1a.data.item).toBe(mockTokenOption)
+      expect(item1b.data.item).toBe(mockTokenOption)
+      expect(item2.data.item).toBe(mockTokenOption)
+    }
+  })
+
+  it('preserves section metadata in processed items', () => {
+    const rightElement = <>Right</>
+    const endElement = <>End</>
+    const section: OnchainItemSection<TokenOption> = {
+      sectionKey: OnchainItemSectionName.YourTokens,
+      data: [mockTokenOption],
+      name: 'Your Tokens',
+      rightElement,
+      endElement,
+    }
+
+    const result = processSectionsToRows([section])
+    const [header] = result
+
+    if (!header || !isHeaderRow(header)) {
+      throw new Error('Expected header to be defined and of type Header')
+    }
+
+    expect(header.data.section.rightElement).toBe(rightElement)
+    expect(header.data.section.endElement).toBe(endElement)
+    expect(header.data.section.sectionKey).toBe(OnchainItemSectionName.YourTokens)
+  })
+
+  it('correctly sets token item indices within sections', () => {
+    const tokens = Array.from({ length: 3 }, (_, i) => ({
+      ...mockTokenOption,
+      currencyInfo: {
+        ...mockCurrencyInfo,
+        currencyId: String(i + 1),
+      },
+    }))
+
+    const section = createMockTokenSection(OnchainItemSectionName.YourTokens, tokens)
+    const result = processSectionsToRows([section])
+    const items = result.filter(isItemRow)
+
+    items.forEach((item, index) => {
+      expect(item.data.index).toBe(index)
+      if (!Array.isArray(item.data.item) && item.data.item.type === OnchainItemListOptionType.Token) {
+        expect(item.data.item.currencyInfo.currencyId).toBe(String(index + 1))
+      }
+    })
+  })
+
+  it('handles sections without names', () => {
+    const section = createMockTokenSection(OnchainItemSectionName.YourTokens, [mockTokenOption])
+    delete section.name // Remove the name property
+
+    const result = processSectionsToRows([section])
+    const [header] = result
+
+    if (!header || !isHeaderRow(header)) {
+      throw new Error('Expected header to be defined and of type Header')
+    }
+
+    expect(header.data.section.name).toBeUndefined()
+    expect(result).toHaveLength(2) // Should still process header + item
+  })
+})