@lifi/widget 4.6.0 → 4.7.1

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.1'

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/useExplorer.test.tsx

@@ -0,0 +1,106 @@
+/** @vitest-environment happy-dom */
+
+import type { ExtendedChain } from '@lifi/sdk'
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { WidgetConfig } from '../types/widget.js'
+
+const txHash = `0x${'ab'.repeat(32)}`
+
+let explorerUrls: WidgetConfig['explorerUrls']
+let blockExplorerUrls: string[] = []
+
+const getChainById = (id: number) =>
+  ({
+    id,
+    chainType: 'EVM',
+    metamask: { blockExplorerUrls },
+  }) as unknown as ExtendedChain
+
+vi.mock('../providers/WidgetProvider/WidgetProvider.js', () => ({
+  useWidgetConfig: () => ({ explorerUrls }),
+}))
+
+vi.mock('./useAvailableChains.js', () => ({
+  useAvailableChains: () => ({ getChainById }),
+}))
+
+const { useExplorer } = await import('./useExplorer.js')
+
+let explorer: ReturnType<typeof useExplorer>
+
+const ExplorerHandle = (): null => {
+  explorer = useExplorer()
+  return null
+}
+
+let root: Root
+
+beforeEach(() => {
+  explorerUrls = undefined
+  blockExplorerUrls = ['https://etherscan.io/']
+  root = createRoot(document.createElement('div'))
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+})
+
+const render = () => {
+  act(() => {
+    root.render(<ExplorerHandle />)
+  })
+}
+
+describe('useExplorer', () => {
+  it('builds links from an https explorer base', () => {
+    render()
+    expect(explorer.getAddressLink('0xabc', 1)).toBe(
+      'https://etherscan.io/address/0xabc'
+    )
+    expect(explorer.getTransactionLink({ txHash, chain: 1 })).toBe(
+      `https://etherscan.io/tx/${txHash}`
+    )
+  })
+
+  it('returns no link when chain metadata carries a javascript: explorer base', () => {
+    blockExplorerUrls = ['javascript:alert(document.domain)//']
+    render()
+    expect(explorer.getAddressLink('0xabc', 1)).toBeUndefined()
+    expect(explorer.getTransactionLink({ txHash, chain: 1 })).toBeUndefined()
+  })
+
+  it('returns no link when the integrator config carries a javascript: explorer base', () => {
+    explorerUrls = {
+      1: ['javascript:alert(document.domain)'],
+      internal: ['javascript:alert(document.domain)'],
+    }
+    render()
+    expect(explorer.getAddressLink('0xabc', 1)).toBeUndefined()
+    expect(explorer.getTransactionLink({ txHash })).toBeUndefined()
+  })
+
+  it('falls back to an https txLink when the hash link is rejected', () => {
+    blockExplorerUrls = ['javascript:alert(document.domain)//']
+    render()
+    expect(
+      explorer.getTransactionLink({
+        txHash,
+        txLink: 'https://scan.li.fi/tx/0xabc',
+        chain: 1,
+      })
+    ).toBe('https://scan.li.fi/tx/0xabc')
+  })
+
+  it('rejects a javascript: txLink fallback', () => {
+    render()
+    expect(
+      explorer.getTransactionLink({
+        txLink: 'javascript:alert(document.domain)',
+      })
+    ).toBeUndefined()
+  })
+})

package/src/hooks/useExplorer.ts

@@ -4,6 +4,7 @@ import { useCallback } from 'react'
 import { internalExplorerUrl } from '../config/constants.js'
 import { useAvailableChains } from '../hooks/useAvailableChains.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { isHttpUrl } from '../utils/url.js'
 
 const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
 
@@ -25,7 +26,10 @@ type TransactionLinkProps = {
 
 export const useExplorer = (): {
   getTransactionLink: (props: TransactionLinkProps) => string | undefined
-  getAddressLink: (address: string, chain?: Chain | number) => string
+  getAddressLink: (
+    address: string,
+    chain?: Chain | number
+  ) => string | undefined
 } => {
   const { explorerUrls } = useWidgetConfig()
   const { getChainById } = useAvailableChains()
@@ -82,11 +86,12 @@ export const useExplorer = (): {
           config.resolvedChain?.chainType !== ChainType.EVM ||
           config.hasOverride ||
           isHex(txHash, { strict: true })
-        if (validForEvm) {
-          return `${config.url}/${config.txPath}/${txHash}`
+        const link = `${config.url}/${config.txPath}/${txHash}`
+        if (validForEvm && isHttpUrl(link)) {
+          return link
         }
       }
-      return txLink
+      return isHttpUrl(txLink) ? txLink : undefined
     },
     [getExplorerConfig]
   )
@@ -94,7 +99,8 @@ export const useExplorer = (): {
   const getAddressLink = useCallback(
     (address: string, chain?: Chain | number) => {
       const config = getExplorerConfig(chain)
-      return `${config.url}/${config.addressPath}/${address}`
+      const link = `${config.url}/${config.addressPath}/${address}`
+      return isHttpUrl(link) ? link : undefined
     },
     [getExplorerConfig]
   )

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 ||