@lifi/widget 4.6.0 → 4.7.0

package/src/utils/recentTokens.ts

@@ -0,0 +1,187 @@
+import type { FormType } from '../stores/form/types.js'
+import type {
+  RecentToken,
+  RecentTokenId,
+} from '../stores/recentTokens/types.js'
+import { getTokenKey } from '../stores/recentTokens/utils.js'
+import type { TokenAmount } from '../types/token.js'
+import type { AllowDenySets, WidgetTokens } from '../types/widget.js'
+import { isFormItemAllowed } from './item.js'
+import { getChainTokenAllowSets } from './token.js'
+
+export const collapsedRecentCount = 4
+
+export interface ResolveRecentRowsParams {
+  recentTokens: RecentToken[]
+  availableChainIds: Set<number>
+  configTokens: WidgetTokens | undefined
+  formType: FormType
+  selectedChainId?: number
+  isAllNetworks?: boolean
+  nativeHoisted: boolean
+  disabled: boolean
+}
+
+export interface RecentRows {
+  /** Unsliced; empty when the band is inactive. */
+  rows: TokenAmount[]
+  /** Everything Clear removes, including toggled-away and displaced rows. */
+  bandEntries: RecentTokenId[]
+  recentStartIndex: number
+}
+
+export interface RecentTokensResult {
+  tokens: TokenAmount[]
+  recentCount: number
+  totalRecentCount: number
+}
+
+// Whitelisted fields; a flag is the one verdict kept, as stale it only over-warns.
+const toSnapshotRow = (recent: RecentToken): TokenAmount =>
+  ({
+    chainId: recent.chainId,
+    address: recent.address,
+    symbol: recent.symbol,
+    name: recent.name,
+    decimals: recent.decimals,
+    logoURI: recent.logoURI,
+    priceUSD: '',
+    verificationStatus: recent.flagged ? 'flagged' : undefined,
+  }) as TokenAmount
+
+const isFeaturedCopy = (token: TokenAmount): boolean =>
+  !!token.featured && !token.amount
+
+export const resolveRecentRows = (
+  tokens: TokenAmount[],
+  {
+    recentTokens,
+    availableChainIds,
+    configTokens,
+    formType,
+    selectedChainId,
+    isAllNetworks,
+    nativeHoisted,
+    disabled,
+  }: ResolveRecentRowsParams
+): RecentRows => {
+  let recentStartIndex = nativeHoisted ? 1 : 0
+  while (tokens[recentStartIndex]?.pinned) {
+    recentStartIndex++
+  }
+
+  const inactive: RecentRows = { rows: [], bandEntries: [], recentStartIndex }
+
+  if (disabled || !recentTokens.length || !tokens.length) {
+    return inactive
+  }
+
+  const candidates = recentTokens.filter(
+    (recent) =>
+      (isAllNetworks || recent.chainId === selectedChainId) &&
+      availableChainIds.has(recent.chainId)
+  )
+
+  if (!candidates.length) {
+    return inactive
+  }
+
+  const wanted = new Set(
+    candidates.map((recent) => getTokenKey(recent.chainId, recent.address))
+  )
+  // All-networks holds tens of thousands of rows: test the chain before the key.
+  const wantedChains = new Set(candidates.map((recent) => recent.chainId))
+  const fresh = new Map<string, TokenAmount>()
+  // A featured config copy has no balance and sits above the row with one.
+  let awaitingBalance = 0
+  for (const token of tokens) {
+    if (!wantedChains.has(token.chainId)) {
+      continue
+    }
+    const key = getTokenKey(token.chainId, token.address)
+    if (!wanted.has(key)) {
+      continue
+    }
+    const found = fresh.get(key)
+    if (!found) {
+      fresh.set(key, token)
+      if (isFeaturedCopy(token)) {
+        awaitingBalance++
+      }
+    } else if (token.amount && isFeaturedCopy(found)) {
+      fresh.set(key, {
+        ...found,
+        amount: token.amount,
+        priceUSD: token.priceUSD || found.priceUSD,
+      })
+      awaitingBalance--
+    }
+    if (fresh.size === wanted.size && !awaitingBalance) {
+      break
+    }
+  }
+
+  const allowedByChain = new Map<number, AllowDenySets | undefined>()
+  const allowedFor = (chainId: number) => {
+    if (!allowedByChain.has(chainId)) {
+      allowedByChain.set(
+        chainId,
+        getChainTokenAllowSets(configTokens, chainId, formType)
+      )
+    }
+    return allowedByChain.get(chainId)
+  }
+
+  const hoistedKey = nativeHoisted
+    ? getTokenKey(tokens[0].chainId, tokens[0].address)
+    : undefined
+
+  const rows: TokenAmount[] = []
+  const bandEntries: RecentTokenId[] = []
+  for (const recent of candidates) {
+    const key = getTokenKey(recent.chainId, recent.address)
+    const resolved = fresh.get(key) ?? toSnapshotRow(recent)
+    if (
+      !isFormItemAllowed(resolved, allowedFor(recent.chainId), formType, (t) =>
+        t.address.toLowerCase()
+      )
+    ) {
+      // Denied on this side only, so Clear must leave it for the other side.
+      continue
+    }
+    // Clear owns displaced entries too, or they reappear once unpinned.
+    bandEntries.push({ chainId: recent.chainId, address: recent.address })
+    if (key === hoistedKey || resolved.pinned) {
+      continue
+    }
+    rows.push({ ...resolved, recent: true })
+  }
+
+  if (!rows.length) {
+    return inactive
+  }
+
+  return { rows, bandEntries, recentStartIndex }
+}
+
+export const spliceRecentRows = (
+  tokens: TokenAmount[],
+  { rows, recentStartIndex }: RecentRows,
+  expanded: boolean
+): RecentTokensResult => {
+  if (!rows.length) {
+    return { tokens, recentCount: 0, totalRecentCount: 0 }
+  }
+
+  const visible = expanded ? rows : rows.slice(0, collapsedRecentCount)
+
+  return {
+    tokens: [
+      ...tokens.slice(0, recentStartIndex),
+      ...visible,
+      ...tokens.slice(recentStartIndex),
+    ],
+    recentCount: visible.length,
+    totalRecentCount: rows.length,
+  }
+}

package/src/utils/token.ts

@@ -5,13 +5,35 @@ import type {
   StaticToken,
   Token,
   TokenAmount,
+  TokenExtended,
 } from '@lifi/sdk'
 import { ChainId } from '@lifi/sdk'
 import type { FormType } from '../stores/form/types.js'
 import type { TokensByChain, TokenWithFlags } from '../types/token.js'
-import type { WidgetChains, WidgetTokens } from '../types/widget.js'
+import type {
+  AllowDenySets,
+  WidgetChains,
+  WidgetTokens,
+} from '../types/widget.js'
 import { getConfigItemSets, isFormItemAllowed } from './item.js'
 
+// Number(): plain-JS integrators may pass chainId as a string.
+export const getChainTokenAllowSets = (
+  configTokens: WidgetTokens | undefined,
+  chainId: number,
+  formType?: FormType
+): AllowDenySets | undefined =>
+  getConfigItemSets(
+    configTokens,
+    (tokens: BaseToken[]) =>
+      new Set(
+        tokens
+          .filter((t) => Number(t.chainId) === chainId)
+          .map((t) => t.address.toLowerCase())
+      ),
+    formType
+  )
+
 /**
  * Builds per-chain sets of lowercase token addresses from the
  * `tokens.verified` config allowlist.
@@ -71,9 +93,39 @@ export const mergeVerifiedWithSearchTokens = (
   return result
 }
 
+/**
+ * `priceUSD` is a required string, so an unknown price arrives as `'0'` or `''`
+ * rather than as an absent key — the same reading as in `useLimitMarketRate`. A
+ * known price must never lose to one, or a route that cannot price its output
+ * blanks a value the cache already knew.
+ */
+export const knownPriceUSD = (fresher: string, cached: string): string =>
+  Number(fresher) ? fresher : cached
+
+/**
+ * Merges a cached token into a route token for display. The route wins on every
+ * field it carries; the cache only fills gaps. Letting the cache win instead
+ * swaps the quoted price for a stale feed price.
+ */
+export const mergeFallbackToken = (
+  routeToken: TokenAmount,
+  cachedToken: TokenExtended | undefined
+): TokenAmount =>
+  cachedToken
+    ? {
+        ...cachedToken,
+        ...routeToken,
+        priceUSD: knownPriceUSD(routeToken.priceUSD, cachedToken.priceUSD),
+        logoURI: routeToken.logoURI || cachedToken.logoURI,
+      }
+    : routeToken
+
 /**
  * Updates a token in the cache by chainId and address.
  * Returns a new cache object with the token updated, or the original if not found.
+ * Addresses are compared case-insensitively: the token list and the route can
+ * spell the same address differently. The incoming token only overwrites what it
+ * actually knows, so an unpriced or logo-less route cannot blank the cache.
  */
 export const updateTokenInCache = (
   data: TokensByChain | undefined,
@@ -86,14 +138,26 @@ export const updateTokenInCache = (
   if (!chainTokens) {
     return data
   }
-  const index = chainTokens.findIndex((t) => t.address === token.address)
+  const address = token.address.toLowerCase()
+  const index = chainTokens.findIndex(
+    (t) => t.address.toLowerCase() === address
+  )
   if (index < 0) {
     return data
   }
   return {
     ...data,
     [token.chainId]: chainTokens.map((t, i) =>
-      i === index ? { ...t, ...token } : t
+      i === index
+        ? {
+            ...t,
+            ...token,
+            // Keep the cached address: other readers hold it as the identity.
+            address: t.address,
+            priceUSD: knownPriceUSD(token.priceUSD, t.priceUSD),
+            logoURI: token.logoURI || t.logoURI,
+          }
+        : t
     ),
   }
 }
@@ -140,14 +204,9 @@ export const filterAllowedTokens = (
       chainIncludedTokens.map((t) => t.address.toLowerCase())
     )
 
-    const allowedAddresses = getConfigItemSets(
+    const allowedAddresses = getChainTokenAllowSets(
       configTokens,
-      (tokens: BaseToken[]) =>
-        new Set(
-          tokens
-            .filter((t) => Number(t.chainId) === chainId)
-            .map((t) => t.address.toLowerCase())
-        ),
+      chainId,
       formType
     )
 

package/src/utils/tokenList.ts

@@ -256,25 +256,49 @@ 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
   }
 
-  const searchLowerCase = search.toLowerCase()
-  return (
-    token.name?.toLowerCase().includes(searchLowerCase) ||
-    token.symbol
-      ?.replaceAll('₮', 'T')
-      .toLowerCase()
-      .includes(searchLowerCase) ||
-    token.address?.toLowerCase().includes(searchLowerCase)
-  )
+  if (isAddressSearch) {
+    return (token) => token.address?.toLowerCase() === searchTerm
+  }
+
+  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
@@ -287,14 +311,8 @@ export const hoistNativeToken = (
   if (!selectedChainId) {
     return tokens
   }
-  const index = tokens.findIndex(
-    (token) =>
-      token.native &&
-      token.chainId === selectedChainId &&
-      !token.featured &&
-      !token.popular &&
-      !token.pinned &&
-      !token.verified
+  const index = tokens.findIndex((token) =>
+    isHoistableNative(token, selectedChainId)
   )
   // -1 is no native token, 0 is already first
   if (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 }
+}