@lifi/widget 4.5.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,50 +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]
   )
 
-  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 && index === 0) {
-        size += 24
-      }
-      if (previousToken?.pinned && !currentToken.pinned) {
-        size += 32
-      }
-
-      if (!showCategories) {
-        return size
-      }
+  const resolvedNativeHoisted = useMemo(
+    () => nativeHoisted ?? isHoistableNative(tokens[0]),
+    [nativeHoisted, tokens]
+  )
 
-      if (currentToken.featured && !currentToken.pinned && index === 0) {
-        size += 24
-      }
+  const showRecentToggle = recentCount > 0 && !!onToggleRecent
 
-      // Category transition (excluding pinned tokens)
-      const isNotPinned = !currentToken.pinned && !previousToken?.pinned
-      if (
-        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]
+  const estimateSize = useCallback(
+    (index: number) => tokenItemHeight + bands.getRowExtraHeight(index),
+    [bands]
   )
 
   const virtualizerConfig = useMemo(
@@ -139,69 +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 isNotPinned = !currentToken.pinned
-          const isFirstPinnedToken = currentToken.pinned && item.index === 0
-          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 && item.index === 0)
-            ) {
-              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
@@ -211,31 +184,41 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
               start={item.start}
               token={currentToken}
               chain={isAllNetworks ? chain : undefined}
+              chainName={chain?.name}
               selected={isSelected}
               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 &&
-                          item.index === 0)
-                          ? 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 {
@@ -35,6 +44,8 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
     chainId: number
   ) => void
   chain?: ExtendedChain
+  /** Resolved for every row, unlike `chain`, which the list passes only in all-networks mode. */
+  chainName?: string
   isBalanceLoading?: boolean
   startAdornment?: React.ReactNode
   endAdornment?: React.ReactNode
@@ -50,6 +61,8 @@ export interface TokenListItemButtonProps {
   onClick?(tokenAddress: string, chainId?: number): void
   token: TokenAmount
   chain?: ExtendedChain
+  /** Resolved for every row, unlike `chain`, which the list passes only in all-networks mode. */
+  chainName?: string
   isBalanceLoading?: boolean
   selected?: boolean
 }

package/src/config/version.ts

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

package/src/hooks/useAvailableChains.ts

@@ -19,6 +19,7 @@ const supportedChainTypes = [
   ChainType.UTXO,
   ChainType.MVM,
   ChainType.TVM,
+  ChainType.STL,
 ]
 
 export const useAvailableChains = (

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

@@ -13,6 +13,8 @@ const explorerPathOverrides: Partial<
   [ChainId.SUI]: { txPath: 'txblock', addressPath: 'coin' },
   [ChainId.LTR]: { txPath: 'logs', addressPath: 'accounts' },
   [ChainType.TVM]: { txPath: '#/transaction', addressPath: '#/address' },
+  // StellarExpert and steexp both route accounts at /account, never /address.
+  [ChainType.STL]: { txPath: 'tx', addressPath: 'account' },
 }
 
 type TransactionLinkProps = {

package/src/hooks/useFlaggedTokenGuard.ts

@@ -0,0 +1,33 @@
+import type { RouteExtended, Token } from '@lifi/sdk'
+import type { RefObject } from 'react'
+import { useMemo, useRef } from 'react'
+import type { BottomSheetBase } from '../components/BottomSheet/types.js'
+import { getNativeTokenAddresses } from '../utils/token.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+/**
+ * Route tokens the screening provider flagged, and the sheet that warns about
+ * them before the transaction starts. A native token is exempt: the provider
+ * screens the native-address convention and calls it a scam on some chains.
+ */
+export const useFlaggedTokenGuard = (
+  route: RouteExtended
+): {
+  flaggedTokens: Token[]
+  flaggedTokenSheetRef: RefObject<BottomSheetBase | null>
+} => {
+  const { chains } = useAvailableChains()
+  const flaggedTokenSheetRef = useRef<BottomSheetBase>(null)
+
+  const flaggedTokens = useMemo(() => {
+    const nativeTokenAddresses = getNativeTokenAddresses(chains)
+    return [route.fromToken, route.toToken].filter(
+      (token) =>
+        token.verificationStatus === 'flagged' &&
+        nativeTokenAddresses.get(token.chainId)?.toLowerCase() !==
+          token.address.toLowerCase()
+    )
+  }, [chains, route.fromToken, route.toToken])
+
+  return { flaggedTokens, flaggedTokenSheetRef }
+}

package/src/hooks/useGasSufficiency.ts

@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getSelfFundedGasAmount } from '../utils/gas.js'
 import { getQueryKey } from '../utils/queries.js'
 import { useAvailableChains } from './useAvailableChains.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
@@ -108,7 +109,14 @@ export const useGasSufficiency = (
                   amount + BigInt(Number(gasCost.amount).toFixed(0)),
                 0n
               )
-              if (gasCostAmount > 0n) {
+              // A previous step can deliver this step's gas token (XLM bridged to
+              // Stellar), so the user does not have to hold it up front
+              const selfFundedGasAmount = getSelfFundedGasAmount(
+                route,
+                step,
+                getChainById(token.chainId)?.chainType
+              )
+              if (gasCostAmount > 0n && gasCostAmount > selfFundedGasAmount) {
                 groupedGasCosts[token.chainId] = {
                   gasAmount: groupedGasCosts[token.chainId]
                     ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount

package/src/hooks/useMaxSendAmount.ts

@@ -0,0 +1,21 @@
+import { useGasRecommendation } from './useGasRecommendation.js'
+import { useTokenAddressBalance } from './useTokenAddressBalance.js'
+
+// Largest amount of the token the wallet can send: for the native token that is
+// the balance less the gas the chain recommends keeping back.
+export const useMaxSendAmount = (
+  chainId?: number,
+  tokenAddress?: string
+): bigint => {
+  const { token, chain } = useTokenAddressBalance(chainId, tokenAddress)
+  const { data } = useGasRecommendation(chainId)
+
+  if (!token?.amount) {
+    return 0n
+  }
+  if (chain?.nativeToken.address !== tokenAddress) {
+    return token.amount
+  }
+  const reserved = BigInt(data?.recommended?.amount ?? 0)
+  return token.amount > reserved ? token.amount - reserved : token.amount
+}

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,6 +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 { isCustomReceiverBlocked } from '../utils/customReceiver.js'
 import { getQueryKey } from '../utils/queries.js'
 import { updateTokenInCache } from '../utils/token.js'
 import { useChain } from './useChain.js'
@@ -177,6 +178,14 @@ export const useRoutes = ({
     ? hasToAddressAndChainTypeSatisfied
     : true
 
+  // 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
 
@@ -197,6 +206,7 @@ export const useRoutes = ({
     !Number.isNaN(slippage) &&
     hasAmount &&
     isToAddressSatisfied &&
+    !customReceiverBlocked &&
     contractCallQuoteEnabled &&
     !isBatchingSupportedLoading
 

package/src/hooks/useToAddressRequirements.ts

@@ -4,12 +4,18 @@ 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 {
+  isCustomReceiverBlocked,
+  isCustomReceiverUnsupported,
+} from '../utils/customReceiver.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 
 export const useToAddressRequirements = (
   route?: RouteExtended
 ): {
   requiredToAddress: boolean
+  unsupportedToAddress: boolean
+  unsupportedReceiverBlocking: boolean
   requiredToChainType: ChainType | undefined
   accountNotDeployedAtDestination: boolean
   accountDeployedAtDestination: boolean
@@ -68,11 +74,25 @@ export const useToAddressRequirements = (
     fromChainId !== toChainId &&
     !fromContractCodeHasDelegationIndicator
 
+  const unsupportedToAddress = isCustomReceiverUnsupported(
+    fromChain?.chainType,
+    toChain?.chainType
+  )
+
+  const unsupportedReceiverBlocking = isCustomReceiverBlocked({
+    fromChainType: fromChain?.chainType,
+    toChainType: toChain?.chainType,
+    toAddress,
+    signerAddress: fromAddress,
+    receiverRequired: requiredUI?.toAddress,
+  })
+
   const requiredToAddress = Boolean(
     (isDifferentChainType ||
       isCrossChainContractAddress ||
       requiredUI?.toAddress) &&
-      !hiddenUI?.toAddress
+      !hiddenUI?.toAddress &&
+      !unsupportedToAddress
   )
 
   const accountNotDeployedAtDestination = Boolean(
@@ -91,6 +111,8 @@ export const useToAddressRequirements = (
 
   return {
     requiredToAddress,
+    unsupportedToAddress,
+    unsupportedReceiverBlocking,
     requiredToChainType: toChain?.chainType,
     accountNotDeployedAtDestination,
     accountDeployedAtDestination,