@lifi/widget 4.5.0 → 4.7.0

package/src/utils/tokenList.ts

@@ -256,21 +256,67 @@ const processedTypedTokens = (
   }
 }
 
-export const isSearchMatch = (
-  token: TokenExtended | TokenAmountExtended,
-  search?: string
-): boolean => {
-  if (!search) {
-    return true
+/**
+ * Builds the filter for one search, so the query is normalized once instead of
+ * once per token: an all-networks list holds tens of thousands of rows, where
+ * normalizing per row costs more than the matching itself. Binding the mode
+ * here also keeps every call site of one search on the same rule.
+ *
+ * An address search matches the token at that address only. Impersonators
+ * embed a real address in their name or symbol, so a substring match on
+ * those fields would surface them for the very query meant to avoid them.
+ */
+export const createSearchMatcher = (
+  search: string | undefined,
+  isAddressSearch: boolean
+): ((token: TokenExtended | TokenAmountExtended) => boolean) => {
+  const searchTerm = search?.trim().toLowerCase()
+
+  if (!searchTerm) {
+    return () => true
+  }
+
+  if (isAddressSearch) {
+    return (token) => token.address?.toLowerCase() === searchTerm
   }
 
-  const searchLowerCase = search.toLowerCase()
-  return (
-    token.name?.toLowerCase().includes(searchLowerCase) ||
-    token.symbol
-      ?.replaceAll('₮', 'T')
-      .toLowerCase()
-      .includes(searchLowerCase) ||
-    token.address?.toLowerCase().includes(searchLowerCase)
+  return (token) =>
+    Boolean(
+      token.name?.toLowerCase().includes(searchTerm) ||
+        token.symbol?.replaceAll('₮', 'T').toLowerCase().includes(searchTerm) ||
+        token.address?.toLowerCase().includes(searchTerm)
+    )
+}
+
+export const isHoistableNative = (
+  token: TokenAmount | undefined,
+  selectedChainId?: number
+): boolean =>
+  !!token?.native &&
+  !token.pinned &&
+  !token.featured &&
+  !token.popular &&
+  !token.verified &&
+  (selectedChainId === undefined || token.chainId === selectedChainId)
+
+/**
+ * Moves the chain's native token to the top of its own chain's list, unless an
+ * external list already places it. Returns the array unchanged when nothing
+ * moves, so a memo downstream keeps its reference.
+ */
+export const hoistNativeToken = (
+  tokens: TokenAmount[],
+  selectedChainId?: number
+): TokenAmount[] => {
+  if (!selectedChainId) {
+    return tokens
+  }
+  const index = tokens.findIndex((token) =>
+    isHoistableNative(token, selectedChainId)
   )
+  // -1 is no native token, 0 is already first
+  if (index < 1) {
+    return tokens
+  }
+  return [tokens[index], ...tokens.slice(0, index), ...tokens.slice(index + 1)]
 }

package/src/utils/tokenListBands.ts

@@ -0,0 +1,181 @@
+import type { TokenAmount } from '../types/token.js'
+
+const bandHeaderAtListStart = 24
+const bandHeaderAfterBand = 32
+const toggleRowHeight = 26
+
+type BandLabelKey =
+  | 'main.pinnedTokens'
+  | 'main.featuredTokens'
+  | 'main.myTokens'
+  | 'main.popularTokens'
+  | 'main.allTokens'
+
+export type BandLabel =
+  | { kind: 'text'; key: BandLabelKey; atListStart: boolean }
+  | { kind: 'recent'; atListStart: boolean }
+
+export interface BandResolverOptions {
+  showCategories: boolean
+  showPinnedTokens: boolean
+  nativeHoisted: boolean
+  /** Ignored while `recentCount` is 0. */
+  recentStartIndex: number
+  recentCount: number
+  showRecentToggle: boolean
+}
+
+export interface BandResolver {
+  /** Called for every index by the virtualizer, so it allocates nothing. */
+  getRowExtraHeight: (index: number) => number
+  /** Called for visible rows only, so the label may be resolved lazily. */
+  getRowBandLabel: (index: number) => BandLabel | undefined
+  /** The row the toggle hangs below. Shares one definition with the height. */
+  isToggleRow: (index: number) => boolean
+}
+
+// Pinned and recent rows sit above the categories; transitions ignore both.
+const isPromoted = (token: TokenAmount | undefined): boolean =>
+  !!token?.pinned || !!token?.recent
+
+export const createBandResolver = (
+  tokens: TokenAmount[],
+  {
+    showCategories,
+    showPinnedTokens,
+    nativeHoisted,
+    recentStartIndex,
+    recentCount,
+    showRecentToggle,
+  }: BandResolverOptions
+): BandResolver => {
+  const listStartIndex = nativeHoisted ? 1 : 0
+  const recentEndIndex = recentStartIndex + recentCount - 1
+
+  const isFirstPinned = (index: number) =>
+    !!tokens[index]?.pinned && index === listStartIndex
+  const isFirstRecent = (index: number) =>
+    recentCount > 0 && index === recentStartIndex && !!tokens[index]?.recent
+  const isLastRecent = (index: number) =>
+    recentCount > 0 && index === recentEndIndex && !!tokens[index]?.recent
+  // The hoisted native sits above every band, so the list-start row follows none.
+  const previousOf = (index: number) =>
+    index === listStartIndex ? undefined : tokens[index - 1]
+  const isTransitionFromPromoted = (index: number) =>
+    isPromoted(tokens[index - 1]) && !isPromoted(tokens[index])
+  // Only the top row has no card above it; below the hoisted native one does.
+  const isTopRow = (index: number) => index === 0
+  const headerHeight = (index: number) =>
+    isTopRow(index) ? bandHeaderAtListStart : bandHeaderAfterBand
+
+  const getRowExtraHeight = (index: number): number => {
+    const current = tokens[index]
+    const previous = previousOf(index)
+    let extra = 0
+
+    if (showPinnedTokens && isFirstPinned(index)) {
+      extra += headerHeight(index)
+    }
+
+    if (isFirstRecent(index)) {
+      extra += headerHeight(index)
+    }
+
+    if (showRecentToggle && isLastRecent(index)) {
+      extra += toggleRowHeight
+    }
+
+    // The recent band needs its own term: all-networks has no categories.
+    if (
+      (showPinnedTokens || showCategories || recentCount > 0) &&
+      isTransitionFromPromoted(index)
+    ) {
+      extra += bandHeaderAfterBand
+    }
+
+    if (!showCategories) {
+      return extra
+    }
+
+    if (current?.featured && !isPromoted(current) && index === listStartIndex) {
+      extra += headerHeight(index)
+    }
+
+    const isNotPromoted = !isPromoted(current) && !isPromoted(previous)
+    if (
+      index !== listStartIndex &&
+      isNotPromoted &&
+      ((previous?.amount && !current?.amount) ||
+        (previous?.featured && !current?.featured) ||
+        (previous?.popular && !current?.popular))
+    ) {
+      extra += bandHeaderAfterBand
+    }
+
+    return extra
+  }
+
+  const getRowBandLabel = (index: number): BandLabel | undefined => {
+    const current = tokens[index]
+    const previous = previousOf(index)
+    const isListStart = index === listStartIndex
+    const notPromoted = !isPromoted(current)
+    const fromPromoted = isPromoted(previous) && notPromoted
+
+    if (showPinnedTokens && isFirstPinned(index)) {
+      return {
+        kind: 'text',
+        key: 'main.pinnedTokens',
+        atListStart: isTopRow(index),
+      }
+    }
+    if (isFirstRecent(index)) {
+      return { kind: 'recent', atListStart: isTopRow(index) }
+    }
+    if (
+      (showPinnedTokens || recentCount > 0) &&
+      !showCategories &&
+      fromPromoted
+    ) {
+      return { kind: 'text', key: 'main.allTokens', atListStart: false }
+    }
+    if (!showCategories) {
+      return undefined
+    }
+
+    const fromFeatured =
+      !!previous?.featured && !current?.featured && notPromoted
+    const fromMyTokens = !!previous?.amount && !current?.amount && notPromoted
+    const fromPopular = !!previous?.popular && !current?.popular && notPromoted
+
+    if (
+      (fromPromoted && current?.featured) ||
+      (current?.featured && notPromoted && isListStart)
+    ) {
+      return {
+        kind: 'text',
+        key: 'main.featuredTokens',
+        atListStart: isTopRow(index),
+      }
+    }
+    if ((fromFeatured || fromPromoted) && current?.amount && notPromoted) {
+      return { kind: 'text', key: 'main.myTokens', atListStart: false }
+    }
+    if (
+      (fromFeatured || fromMyTokens || fromPromoted) &&
+      current?.popular &&
+      notPromoted
+    ) {
+      return { kind: 'text', key: 'main.popularTokens', atListStart: false }
+    }
+    if (fromMyTokens || fromFeatured || fromPromoted || fromPopular) {
+      return { kind: 'text', key: 'main.allTokens', atListStart: false }
+    }
+    return undefined
+  }
+
+  const isToggleRow = (index: number): boolean =>
+    showRecentToggle && isLastRecent(index)
+
+  return { getRowExtraHeight, getRowBandLabel, isToggleRow }
+}