@lifi/widget 4.6.0 → 4.7.0

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -4,7 +4,11 @@ import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
-import type { TokenAmount } from '../../types/token.js'
+import { getTokenKey } from '../../stores/recentTokens/utils.js'
+import { isHoistableNative } from '../../utils/tokenList.js'
+import { createBandResolver } from '../../utils/tokenListBands.js'
+import { RecentTokensHeader } from './RecentTokensHeader.js'
+import { RecentTokensToggle } from './RecentTokensToggle.js'
 import { TokenDetailsSheet } from './TokenDetailsSheet.js'
 import { List } from './TokenList.style.js'
 import { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'
@@ -26,6 +30,13 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   showPinnedTokens,
   onClick,
   isAllNetworks,
+  recentStartIndex = 0,
+  recentCount = 0,
+  hiddenRecentCount = 0,
+  recentExpanded = false,
+  onToggleRecent,
+  onClearRecent,
+  nativeHoisted,
 }) => {
   const { t } = useTranslation()
 
@@ -52,74 +63,65 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
     []
   )
 
+  // Rows below the band keep their key as it changes size, so none remount.
   const getItemKey = useCallback(
     (index: number) => {
       const token = tokens[index]
-      return `${token.chainId}-${token.address}-${index}`
+      if (token.recent) {
+        return `recent-${token.chainId}-${token.address}`
+      }
+      const shift = index >= recentStartIndex + recentCount ? recentCount : 0
+      return `${token.chainId}-${token.address}-${index - shift}`
     },
-    [tokens]
+    [tokens, recentStartIndex, recentCount]
   )
 
-  // The hoisted native token sits above every category, so the row after it
-  // opens the first one. Only a row the hoist could have moved counts.
-  const nativeTokenHoisted = useMemo(() => {
-    const first = tokens[0]
-    return (
-      !!first?.native &&
-      !first.pinned &&
-      !first.featured &&
-      !first.popular &&
-      !first.verified
-    )
-  }, [tokens])
-
-  const isListStartIndex = useCallback(
-    (index: number) => index === 0 || (index === 1 && nativeTokenHoisted),
-    [nativeTokenHoisted]
+  const resolvedNativeHoisted = useMemo(
+    () => nativeHoisted ?? isHoistableNative(tokens[0]),
+    [nativeHoisted, tokens]
   )
 
-  const estimateSize = useCallback(
-    (index: number) => {
-      const currentToken = tokens[index]
-      const previousToken = tokens[index - 1]
-      let size = tokenItemHeight
-
-      // Pinned tokens (always shown, even in all networks mode)
-      if (currentToken.pinned && isListStartIndex(index)) {
-        size += 24
-      }
-      if (previousToken?.pinned && !currentToken.pinned) {
-        size += 32
-      }
-
-      if (!showCategories) {
-        return size
-      }
-
-      if (
-        currentToken.featured &&
-        !currentToken.pinned &&
-        isListStartIndex(index)
-      ) {
-        size += 24
-      }
+  const showRecentToggle = recentCount > 0 && !!onToggleRecent
 
-      // Category transition (excluding pinned tokens). The hoisted native row
-      // sits above every band, so the row after it ends nothing.
-      const isNotPinned = !currentToken.pinned && !previousToken?.pinned
-      if (
-        !isListStartIndex(index) &&
-        isNotPinned &&
-        ((previousToken?.amount && !currentToken.amount) ||
-          (previousToken?.featured && !currentToken.featured) ||
-          (previousToken?.popular && !currentToken.popular))
-      ) {
-        size += 32
+  // The band copy is on screen; its list row may be far below the fold.
+  const bandKeys = useMemo(() => {
+    if (!recentCount) {
+      return undefined
+    }
+    const keys = new Set<string>()
+    for (let i = recentStartIndex; i < recentStartIndex + recentCount; i++) {
+      const token = tokens[i]
+      if (token) {
+        keys.add(getTokenKey(token.chainId, token.address))
       }
+    }
+    return keys
+  }, [tokens, recentStartIndex, recentCount])
+
+  const bands = useMemo(
+    () =>
+      createBandResolver(tokens, {
+        showCategories: !!showCategories,
+        showPinnedTokens: !!showPinnedTokens,
+        nativeHoisted: resolvedNativeHoisted,
+        recentStartIndex,
+        recentCount,
+        showRecentToggle,
+      }),
+    [
+      tokens,
+      showCategories,
+      showPinnedTokens,
+      resolvedNativeHoisted,
+      recentStartIndex,
+      recentCount,
+      showRecentToggle,
+    ]
+  )
 
-      return size
-    },
-    [tokens, showCategories, isListStartIndex]
+  const estimateSize = useCallback(
+    (index: number) => tokenItemHeight + bands.getRowExtraHeight(index),
+    [bands]
   )
 
   const virtualizerConfig = useMemo(
@@ -163,70 +165,16 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
       >
         {getVirtualItems().map((item) => {
           const currentToken = tokens[item.index]
-          const previousToken: TokenAmount | undefined = tokens[item.index - 1]
           const chain = chainsSet?.get(currentToken.chainId)
-
-          const isListStart = isListStartIndex(item.index)
-          const isNotPinned = !currentToken.pinned
-          const isFirstPinnedToken = currentToken.pinned && isListStart
-          const isTransitionFromPinned = previousToken?.pinned && isNotPinned
-
-          // Category transitions (excluding pinned)
-          const isTransitionFromFeatured =
-            previousToken?.featured && !currentToken.featured && isNotPinned
-          const isTransitionFromMyTokens =
-            previousToken?.amount && !currentToken.amount && isNotPinned
-          const isTransitionFromPopular =
-            previousToken?.popular && !currentToken.popular && isNotPinned
-
-          // Determine which category label to show
-          const startAdornmentLabel = (() => {
-            if (showPinnedTokens && isFirstPinnedToken) {
-              return t('main.pinnedTokens')
-            }
-            if (showPinnedTokens && !showCategories && isTransitionFromPinned) {
-              return t('main.allTokens')
-            }
-            if (!showCategories) {
-              return null
-            }
-
-            if (
-              (isTransitionFromPinned && currentToken.featured) ||
-              (currentToken.featured && isNotPinned && isListStart)
-            ) {
-              return t('main.featuredTokens')
-            }
-            if (
-              (isTransitionFromFeatured || isTransitionFromPinned) &&
-              currentToken.amount &&
-              isNotPinned
-            ) {
-              return t('main.myTokens')
-            }
-            if (
-              (isTransitionFromFeatured ||
-                isTransitionFromMyTokens ||
-                isTransitionFromPinned) &&
-              currentToken.popular &&
-              isNotPinned
-            ) {
-              return t('main.popularTokens')
-            }
-            if (
-              isTransitionFromMyTokens ||
-              isTransitionFromFeatured ||
-              isTransitionFromPinned ||
-              isTransitionFromPopular
-            ) {
-              return t('main.allTokens')
-            }
-            return null
-          })()
+          const band = bands.getRowBandLabel(item.index)
 
           const isSelected =
             selectedTokenAddress === currentToken.address &&
-            chainId === currentToken.chainId
+            chainId === currentToken.chainId &&
+            (!!currentToken.recent ||
+              !bandKeys?.has(
+                getTokenKey(currentToken.chainId, currentToken.address)
+              ))
 
           return (
             <TokenListItem
@@ -241,25 +189,36 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
               onShowTokenDetails={onShowTokenDetails}
               isBalanceLoading={isBalanceLoading}
               startAdornment={
-                startAdornmentLabel ? (
+                band?.kind === 'recent' ? (
+                  // Unconditional: the resolver always reserves this height.
+                  <RecentTokensHeader
+                    atListStart={band.atListStart}
+                    onClear={onClearRecent}
+                  />
+                ) : band?.kind === 'text' ? (
                   <Typography
                     sx={{
                       fontSize: 14,
                       fontWeight: 600,
                       lineHeight: '16px',
                       px: 1.5,
-                      pt:
-                        isFirstPinnedToken ||
-                        (currentToken.featured && isNotPinned && isListStart)
-                          ? 0
-                          : 1,
+                      pt: band.atListStart ? 0 : 1,
                       pb: 1,
                     }}
                   >
-                    {startAdornmentLabel}
+                    {t(band.key)}
                   </Typography>
                 ) : null
               }
+              endAdornment={
+                onToggleRecent && bands.isToggleRow(item.index) ? (
+                  <RecentTokensToggle
+                    expanded={recentExpanded}
+                    hiddenCount={hiddenRecentCount}
+                    onToggle={onToggleRecent}
+                  />
+                ) : null
+              }
             />
           )
         })}

package/src/components/TokenList/types.ts

@@ -19,6 +19,15 @@ export interface VirtualizedTokenListProps {
   onClick(tokenAddress: string, chainId?: number): void
   selectedTokenAddress?: string
   isAllNetworks: boolean
+  // Optional: public via shared.ts, and widget-checkout passes none of these.
+  recentStartIndex?: number
+  recentCount?: number
+  hiddenRecentCount?: number
+  recentExpanded?: boolean
+  onToggleRecent?: () => void
+  onClearRecent?: () => void
+  /** Defaults to this component's own `isHoistableNative(tokens[0])`. */
+  nativeHoisted?: boolean
 }
 
 interface TokenListItemBaseProps {

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.6.0'
+export const version = '4.7.0'

package/src/hooks/useDisplayedTokens.ts

@@ -2,11 +2,13 @@ import type { TokenExtended } from '@lifi/sdk'
 import { useMemo } from 'react'
 import type { FormType } from '../stores/form/types.js'
 import { usePinnedTokensStore } from '../stores/pinnedTokens/PinnedTokensStore.js'
-import { isSearchMatch } from '../utils/tokenList.js'
+import { createSearchMatcher } from '../utils/tokenList.js'
 import { useTokens } from './useTokens.js'
 
 export type IsPinnedToken = (chainId: number, tokenAddress: string) => boolean
 
+export type MatchesSearch = ReturnType<typeof createSearchMatcher>
+
 // Balance-free core shared by useTokenList and useTokenBalances.
 export const useDisplayedTokens = (
   selectedChainId?: number,
@@ -17,6 +19,11 @@ export const useDisplayedTokens = (
   allTokens: Record<number, TokenExtended[]> | undefined
   displayedTokensList: TokenExtended[]
   isPinnedToken: IsPinnedToken | undefined
+  /**
+   * The filter this search applies, built once here so every list that shows
+   * the same search — with balances or without — cannot disagree with it.
+   */
+  matchesSearch: MatchesSearch
   isTokensLoading: boolean
   isSearchLoading: boolean
 } => {
@@ -24,6 +31,7 @@ export const useDisplayedTokens = (
     allTokens,
     isLoading: isTokensLoading,
     isSearchLoading,
+    isAddressSearch,
   } = useTokens(formType, search, isAllNetworks ? undefined : selectedChainId)
 
   const pinnedTokens = usePinnedTokensStore((state) => state.pinnedTokens)
@@ -51,19 +59,25 @@ export const useDisplayedTokens = (
     return undefined
   }, [isAllNetworks, selectedChainId, pinnedTokens])
 
+  const matchesSearch = useMemo<MatchesSearch>(
+    () => createSearchMatcher(search, isAddressSearch),
+    [search, isAddressSearch]
+  )
+
   const displayedTokensList = useMemo(() => {
     const tokensByChain = isAllNetworks
       ? Object.values(allTokens ?? {}).flat()
       : selectedChainId
         ? allTokens?.[selectedChainId]
         : undefined
-    return tokensByChain?.filter((t) => isSearchMatch(t, search)) ?? []
-  }, [allTokens, isAllNetworks, selectedChainId, search])
+    return tokensByChain?.filter(matchesSearch) ?? []
+  }, [allTokens, isAllNetworks, selectedChainId, matchesSearch])
 
   return {
     allTokens,
     displayedTokensList,
     isPinnedToken,
+    matchesSearch,
     isTokensLoading,
     isSearchLoading,
   }

package/src/hooks/useRecentTokens.ts

@@ -0,0 +1,88 @@
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
+import { useRecentTokensStore } from '../stores/recentTokens/RecentTokensStore.js'
+import type { RecentTokenId } from '../stores/recentTokens/types.js'
+import type { TokenAmount } from '../types/token.js'
+import type { RecentTokensResult } from '../utils/recentTokens.js'
+import { resolveRecentRows, spliceRecentRows } from '../utils/recentTokens.js'
+import { useChains } from './useChains.js'
+
+export interface UseRecentTokensOptions {
+  selectedChainId?: number
+  isAllNetworks?: boolean
+  search?: string
+  expanded: boolean
+  formType: FormType
+  isTokensLoading: boolean
+  nativeHoisted: boolean
+}
+
+export interface UseRecentTokensResult extends RecentTokensResult {
+  bandEntries: RecentTokenId[]
+  recentStartIndex: number
+}
+
+export const useRecentTokens = (
+  tokens: TokenAmount[],
+  {
+    selectedChainId,
+    isAllNetworks,
+    search,
+    expanded,
+    formType,
+    isTokensLoading,
+    nativeHoisted,
+  }: UseRecentTokensOptions
+): UseRecentTokensResult => {
+  const { hiddenUI, tokens: configTokens } = useWidgetConfig()
+  // useChains, not useAvailableChains: only it applies chains.allow/deny.
+  const { chains } = useChains(formType)
+  const recentTokens = useRecentTokensStore((state) => state.recentTokens)
+
+  const availableChainIds = useMemo(
+    () => new Set(chains?.map((chain) => chain.id)),
+    [chains]
+  )
+
+  // Untrimmed, like the list layout; wait for tokens (no amber flash) and chains.
+  const disabled =
+    !!search || !!hiddenUI?.recentSearches || isTokensLoading || !chains
+
+  const resolved = useMemo(
+    () =>
+      resolveRecentRows(tokens, {
+        recentTokens,
+        availableChainIds,
+        configTokens,
+        formType,
+        selectedChainId,
+        isAllNetworks,
+        nativeHoisted,
+        disabled,
+      }),
+    [
+      tokens,
+      recentTokens,
+      availableChainIds,
+      configTokens,
+      formType,
+      selectedChainId,
+      isAllNetworks,
+      nativeHoisted,
+      disabled,
+    ]
+  )
+
+  // Separate, so a Show more/less click redoes the slice but not the scan.
+  const spliced = useMemo(
+    () => spliceRecentRows(tokens, resolved, expanded),
+    [tokens, resolved, expanded]
+  )
+
+  return {
+    ...spliced,
+    bandEntries: resolved.bandEntries,
+    recentStartIndex: resolved.recentStartIndex,
+  }
+}

package/src/hooks/useRoutes.ts

@@ -29,7 +29,7 @@ import { defaultSlippage } from '../stores/settings/createSettingsStore.js'
 import { useSettings } from '../stores/settings/useSettings.js'
 import { WidgetEvent } from '../types/events.js'
 import type { TokensByChain } from '../types/token.js'
-import { isCustomReceiverUnsupported } from '../utils/customReceiver.js'
+import { isCustomReceiverBlocked } from '../utils/customReceiver.js'
 import { getQueryKey } from '../utils/queries.js'
 import { updateTokenInCache } from '../utils/token.js'
 import { useChain } from './useChain.js'
@@ -178,10 +178,13 @@ export const useRoutes = ({
     ? hasToAddressAndChainTypeSatisfied
     : true
 
-  // Stellar settles to the signer, so a set receiver makes the route unfulfillable.
-  const customReceiverBlocked =
-    isCustomReceiverUnsupported(fromChain?.chainType, toChain?.chainType) &&
-    Boolean(toAddress)
+  // Not `effectiveFromAddress`: a quote placeholder must never match a receiver.
+  const customReceiverBlocked = isCustomReceiverBlocked({
+    fromChainType: fromChain?.chainType,
+    toChainType: toChain?.chainType,
+    toAddress,
+    signerAddress: account.address,
+  })
 
   // toAddress might be an empty string, but we need to pass undefined if there is no value
   const toWalletAddress = toAddress || undefined

package/src/hooks/useToAddressRequirements.ts

@@ -4,7 +4,10 @@ import { useEthereumContext } from '@lifi/widget-provider'
 import { useChain } from '../hooks/useChain.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
-import { isCustomReceiverUnsupported } from '../utils/customReceiver.js'
+import {
+  isCustomReceiverBlocked,
+  isCustomReceiverUnsupported,
+} from '../utils/customReceiver.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 
 export const useToAddressRequirements = (
@@ -76,10 +79,13 @@ export const useToAddressRequirements = (
     toChain?.chainType
   )
 
-  // Stellar routes settle to the signer, so a required receiver is never honoured.
-  const unsupportedReceiverBlocking = Boolean(
-    unsupportedToAddress && (toAddress || requiredUI?.toAddress)
-  )
+  const unsupportedReceiverBlocking = isCustomReceiverBlocked({
+    fromChainType: fromChain?.chainType,
+    toChainType: toChain?.chainType,
+    toAddress,
+    signerAddress: fromAddress,
+    receiverRequired: requiredUI?.toAddress,
+  })
 
   const requiredToAddress = Boolean(
     (isDifferentChainType ||

package/src/hooks/useTokenBalances.ts

@@ -6,7 +6,7 @@ import type { TokenAmount } from '../types/token.js'
 import { formatTokenPrice } from '../utils/format.js'
 import {
   hoistNativeToken,
-  isSearchMatch,
+  isHoistableNative,
   processTokenList,
 } from '../utils/tokenList.js'
 import { useAccountsBalancesData } from './useAccountsBalancesData.js'
@@ -25,12 +25,15 @@ export const useTokenBalances = (
   isTokensLoading: boolean
   isSearchLoading: boolean
   isBalanceLoading: boolean
+  /** Always set; optional so hand-built results of this public shape stay valid. */
+  nativeHoisted?: boolean
 } => {
   const { hiddenUI, tokens: configTokens } = useWidgetConfig()
   const {
     allTokens,
     displayedTokensList,
     isPinnedToken,
+    matchesSearch,
     isTokensLoading,
     isSearchLoading,
   } = useDisplayedTokens(selectedChainId, formType, isAllNetworks, search)
@@ -77,10 +80,10 @@ export const useTokenBalances = (
       // Check if token is in displayed list and has amount
       const isInDisplayedList = displayedTokensSet.has(tokenKey) && token.amount
       // Check if it matches search (for cached appended tokens)
-      const matchesSearch = isSearchMatch(token, search)
+      const matchesTheSearch = matchesSearch(token)
 
       // Filter: only include tokens that match our criteria
-      if (!isInDisplayedList && !matchesSearch) {
+      if (!isInDisplayedList && !matchesTheSearch) {
         return acc
       }
 
@@ -111,45 +114,44 @@ export const useTokenBalances = (
   }, [
     allTokensWithBalances,
     displayedTokensList,
-    search,
+    matchesSearch,
     selectedChainId,
     isAllNetworks,
     smallBalanceThreshold,
     hiddenUI,
   ])
 
-  const { processedTokens, withCategories, withPinnedTokens } = useMemo(() => {
-    const result = processTokenList(
+  const { processedTokens, withCategories, withPinnedTokens, nativeHoisted } =
+    useMemo(() => {
+      const result = processTokenList(
+        isBalanceLoading,
+        isAllNetworks || !!search,
+        configTokens,
+        selectedChainId,
+        displayedTokensList,
+        displayedTokensWithBalances,
+        isPinnedToken
+      )
+      // Search results stay ranked, and All networks has no single native.
+      if (isAllNetworks || search) {
+        return { ...result, nativeHoisted: false }
+      }
+      const hoisted = hoistNativeToken(result.processedTokens, selectedChainId)
+      return {
+        ...result,
+        processedTokens: hoisted,
+        nativeHoisted: isHoistableNative(hoisted[0], selectedChainId),
+      }
+    }, [
       isBalanceLoading,
-      isAllNetworks || !!search,
+      isAllNetworks,
       configTokens,
       selectedChainId,
       displayedTokensList,
       displayedTokensWithBalances,
-      isPinnedToken
-    )
-    // A search keeps its results ranked by match, and "All networks" has no
-    // single native token to lead with.
-    if (isAllNetworks || search) {
-      return result
-    }
-    return {
-      ...result,
-      processedTokens: hoistNativeToken(
-        result.processedTokens,
-        selectedChainId
-      ),
-    }
-  }, [
-    isBalanceLoading,
-    isAllNetworks,
-    configTokens,
-    selectedChainId,
-    displayedTokensList,
-    displayedTokensWithBalances,
-    search,
-    isPinnedToken,
-  ])
+      search,
+      isPinnedToken,
+    ])
 
   return {
     tokens: processedTokens ?? [],
@@ -158,5 +160,6 @@ export const useTokenBalances = (
     isTokensLoading,
     isSearchLoading,
     isBalanceLoading,
+    nativeHoisted,
   }
 }

package/src/hooks/useTokenSearch.ts

@@ -1,16 +1,12 @@
-import {
-  type BaseToken,
-  type ChainId,
-  getToken,
-  type TokenExtended,
-} from '@lifi/sdk'
+import { type ChainId, getToken, type TokenExtended } from '@lifi/sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import type { TokensByChain } from '../types/token.js'
-import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
+import { isFormItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
+import { getChainTokenAllowSets } from '../utils/token.js'
 
 export const useTokenSearch = (
   chainId?: number,
@@ -39,14 +35,9 @@ export const useTokenSearch = (
 
       if (token) {
         // Filter config tokens by chain before checking if token is allowed
-        const filteredConfigTokens = getConfigItemSets(
+        const filteredConfigTokens = getChainTokenAllowSets(
           configTokens,
-          (tokens: BaseToken[]) =>
-            new Set(
-              tokens
-                .filter((t) => t.chainId === token.chainId)
-                .map((t) => t.address.toLowerCase())
-            ),
+          token.chainId,
           formType
         )