@lifi/widget 4.5.0 → 4.7.0

package/src/hooks/useTokenBalances.ts

@@ -4,7 +4,11 @@ import type { FormType } from '../stores/form/types.js'
 import { useSettings } from '../stores/settings/useSettings.js'
 import type { TokenAmount } from '../types/token.js'
 import { formatTokenPrice } from '../utils/format.js'
-import { isSearchMatch, processTokenList } from '../utils/tokenList.js'
+import {
+  hoistNativeToken,
+  isHoistableNative,
+  processTokenList,
+} from '../utils/tokenList.js'
 import { useAccountsBalancesData } from './useAccountsBalancesData.js'
 import { useDisplayedTokens } from './useDisplayedTokens.js'
 import { useTokenBalancesQueries } from './useTokenBalancesQueries.js'
@@ -21,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)
@@ -73,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
       }
 
@@ -107,33 +114,44 @@ export const useTokenBalances = (
   }, [
     allTokensWithBalances,
     displayedTokensList,
-    search,
+    matchesSearch,
     selectedChainId,
     isAllNetworks,
     smallBalanceThreshold,
     hiddenUI,
   ])
 
-  const { processedTokens, withCategories, withPinnedTokens } = useMemo(() => {
-    return 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
-    )
-  }, [
-    isBalanceLoading,
-    isAllNetworks,
-    configTokens,
-    selectedChainId,
-    displayedTokensList,
-    displayedTokensWithBalances,
-    search,
-    isPinnedToken,
-  ])
+      search,
+      isPinnedToken,
+    ])
 
   return {
     tokens: processedTokens ?? [],
@@ -142,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
         )
 
@@ -74,13 +65,9 @@ export const useTokenSearch = (
             ) {
               return data
             }
-            // Mark token from search as unverified
             return {
               ...data,
-              [chainId as number]: [
-                ...(chainTokens ?? []),
-                { ...token, verified: false },
-              ],
+              [chainId as number]: [...(chainTokens ?? []), token],
             }
           }
         )

package/src/hooks/useTokens.ts

@@ -12,13 +12,16 @@ 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 { isAddressQuery } from '../utils/address.js'
 import { defaultChainIdsByType } from '../utils/chainType.js'
 import { isItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 import {
   filterAllowedTokens,
+  getNativeTokenAddresses,
   mergeVerifiedWithSearchTokens,
 } from '../utils/token.js'
+import { useAvailableChains } from './useAvailableChains.js'
 
 const refetchInterval = 300_000
 
@@ -30,6 +33,8 @@ export const useTokens = (
   allTokens: Record<number, TokenExtended[]> | undefined
   isLoading: boolean
   isSearchLoading: boolean
+  /** The search is a contract address, so only the token at that address matches. */
+  isAddressSearch: boolean
 } => {
   const {
     tokens: configTokens,
@@ -37,7 +42,16 @@ export const useTokens = (
     keyPrefix,
   } = useWidgetConfig()
   const sdkClient = useSDKClient()
-  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const { getChainTypeFromTokenAddress } = useChainTypeFromAddress()
+  // A pasted address often carries a trailing space or newline, which the
+  // API rejects. Trim once so the key, the requests and the checks agree.
+  const trimmedSearch = search?.trim()
+  // Keep this memoized, and out of any per-token loop: a provider validates by
+  // parsing, which costs microseconds per call rather than nanoseconds.
+  const isAddressSearch = useMemo(
+    () => isAddressQuery(trimmedSearch, getChainTypeFromTokenAddress),
+    [trimmedSearch, getChainTypeFromTokenAddress]
+  )
 
   // Main tokens cache - verified tokens from API
   const { data: verifiedTokens, isLoading } = useQuery({
@@ -49,6 +63,7 @@ export const useTokens = (
         ChainType.UTXO,
         ChainType.MVM,
         ChainType.TVM,
+        ChainType.STL,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
@@ -63,11 +78,11 @@ export const useTokens = (
         { signal }
       )
 
-      // Mark all tokens as verified
+      // `listed` tells a main-list token from a searched one
       const tokens: TokensByChain = Object.fromEntries(
         Object.entries(tokensResponse.tokens).map(([chainId, tokens]) => [
           chainId,
-          tokens.map((token) => ({ ...token, verified: true })),
+          tokens.map((token) => ({ ...token, listed: true })),
         ])
       )
 
@@ -79,19 +94,21 @@ export const useTokens = (
 
   // Search tokens cache - unverified tokens from search
   const { data: searchTokens, isLoading: isSearchLoading } = useQuery({
-    queryKey: [getQueryKey('tokens-search', keyPrefix), search, chainId],
+    queryKey: [
+      getQueryKey('tokens-search', keyPrefix),
+      trimmedSearch,
+      chainId,
+      isAddressSearch,
+    ] as const,
     queryFn: async ({ queryKey, signal }) => {
-      const [, searchQuery, searchChainId] = queryKey as [
-        string,
-        string,
-        number,
-      ]
+      const [, searchQuery, searchChainId, addressSearch] = queryKey
       const chainTypes = [
         ChainType.EVM,
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
         ChainType.TVM,
+        ChainType.STL,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
@@ -107,53 +124,93 @@ export const useTokens = (
         { signal }
       )
 
-      // If the chainId is not provided, try to get it from the search query
-      let _chainId = searchChainId
-      if (!_chainId) {
-        const chainType = getChainTypeFromAddress(searchQuery)
-        if (chainType && chainType in defaultChainIdsByType) {
-          _chainId = defaultChainIdsByType[chainType]
-        }
-      }
-
-      // Fallback: If the main search returned no tokens for the specific chainId,
-      // fetch a single token using the /token endpoint
-      if (_chainId && searchQuery) {
-        const existingTokens = tokensResponse.tokens[_chainId] || []
-        if (!existingTokens.length) {
-          const token = await getToken(sdkClient, _chainId, searchQuery, {
-            signal,
-          })
-          if (token) {
-            tokensResponse.tokens[_chainId] = [token]
+      // Fallback: fetch a single token from the /token endpoint when the
+      // search did not deliver one. Look it up on the selected chain, or
+      // without one on the default chain of the address format.
+      if (searchQuery) {
+        const chainType = getChainTypeFromTokenAddress(searchQuery)
+        const lookupChainId =
+          searchChainId ??
+          (chainType ? defaultChainIdsByType[chainType] : undefined)
+        if (lookupChainId) {
+          const existingTokens = tokensResponse.tokens[lookupChainId] ?? []
+          // The search index also matches names, so for an address query
+          // impersonators that embed the address can fill the list while the
+          // token at that address is missing. Without a selected chain the
+          // token can sit on any chain of the response.
+          const hasTokenAtAddress = () => {
+            const address = searchQuery.toLowerCase()
+            const candidates = searchChainId
+              ? [existingTokens]
+              : Object.values(tokensResponse.tokens)
+            return candidates.some((tokens) =>
+              tokens.some((token) => token.address?.toLowerCase() === address)
+            )
+          }
+          const isTokenMissing = addressSearch
+            ? !hasTokenAtAddress()
+            : !existingTokens.length
+          if (isTokenMissing) {
+            try {
+              const token = await getToken(
+                sdkClient,
+                lookupChainId,
+                searchQuery,
+                { signal }
+              )
+              if (token) {
+                tokensResponse.tokens[lookupChainId] = [
+                  ...existingTokens,
+                  token,
+                ]
+              }
+            } catch (error) {
+              // A guessed chain may not hold the token (HTTP 400). Keep the
+              // search results instead of failing the whole query.
+              if (signal.aborted) {
+                throw error
+              }
+            }
           }
         }
       }
 
-      // Mark all search tokens as unverified
-      const tokens: TokensByChain = Object.fromEntries(
-        Object.entries(tokensResponse.tokens).map(([chainId, tokens]) => [
-          chainId,
-          tokens.map((token) => ({ ...token, verified: false })),
-        ])
-      )
-
-      return tokens
+      return tokensResponse.tokens as TokensByChain
     },
-    enabled: !!search,
+    enabled: !!trimmedSearch,
     refetchInterval,
     staleTime: refetchInterval,
   })
 
+  const { chains } = useAvailableChains()
+  const nativeTokenAddresses = useMemo(
+    () => getNativeTokenAddresses(chains),
+    [chains]
+  )
+
   // Merge tokens at read time - single place where caches are combined
   const allTokens = useMemo(() => {
     const merged = mergeVerifiedWithSearchTokens(verifiedTokens, searchTokens)
-    return filterAllowedTokens(merged, configTokens, chainsConfig, formType)
-  }, [verifiedTokens, searchTokens, configTokens, chainsConfig, formType])
+    return filterAllowedTokens(
+      merged,
+      configTokens,
+      chainsConfig,
+      formType,
+      nativeTokenAddresses
+    )
+  }, [
+    verifiedTokens,
+    searchTokens,
+    configTokens,
+    chainsConfig,
+    formType,
+    nativeTokenAddresses,
+  ])
 
   return {
     allTokens,
     isLoading,
     isSearchLoading,
+    isAddressSearch,
   }
 }

package/src/pages/MainPage/ReviewButton.tsx

@@ -16,7 +16,8 @@ export const ReviewButton: React.FC = () => {
   const emitter = useWidgetEvents()
   const { mode, modeOptions } = useWidgetConfig()
   const splitState = useSplitMode()
-  const { toAddress, requiredToAddress } = useToAddressRequirements()
+  const { toAddress, requiredToAddress, unsupportedReceiverBlocking } =
+    useToAddressRequirements()
   const { routes, setReviewableRoute } = useRoutes()
   const [selectedRouteId] = useFieldValues('selectedRouteId')
 
@@ -85,7 +86,10 @@ export const ReviewButton: React.FC = () => {
     <BaseTransactionButton
       text={getButtonText()}
       onClick={handleClick}
-      disabled={currentRoute && requiredToAddress && !toAddress}
+      disabled={
+        currentRoute &&
+        (unsupportedReceiverBlocking || (requiredToAddress && !toAddress))
+      }
       route={currentRoute}
       sx={{ flex: 1 }}
     />

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -36,7 +36,8 @@ export const RoutesPage = (): JSX.Element => {
   } = useRoutes()
   const { account } = useAccount({ chainType: fromChain?.chainType })
   const [toAddress] = useFieldValues('toAddress')
-  const { requiredToAddress } = useToAddressRequirements()
+  const { requiredToAddress, unsupportedReceiverBlocking } =
+    useToAddressRequirements()
 
   const headerAction = useMemo(
     () => (
@@ -72,7 +73,9 @@ export const RoutesPage = (): JSX.Element => {
 
   const routeNotFound = !routes?.length && !isLoading && !isFetching
 
-  const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress
+  const toAddressUnsatisfied =
+    routes?.[0] &&
+    (unsupportedReceiverBlocking || (requiredToAddress && !toAddress))
 
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -36,8 +36,8 @@ export const TokenValueBottomSheet = ({
   ref?: Ref<BottomSheetBase>
 }): JSX.Element => {
   const handleCancel = () => {
+    // close() reaches onClose, which is onCancel
     ;(ref as RefObject<BottomSheetBase>).current?.close()
-    onCancel?.()
   }
 
   return (

package/src/pages/TransactionPage/TokenVerificationBottomSheet.tsx

@@ -0,0 +1,93 @@
+import type { Token } from '@lifi/sdk'
+import { Button, Checkbox, FormControlLabel } from '@mui/material'
+import type { JSX, Ref, RefObject } from 'react'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { IconCircle } from '../../components/IconCircle/IconCircle.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
+import {
+  ButtonRow,
+  CenterContainer,
+  ContentContainer,
+  WarningMessage,
+  WarningTitle,
+} from './TokenValueBottomSheet.style.js'
+
+interface TokenVerificationBottomSheetProps {
+  /** Source and/or destination tokens the screening provider flagged. */
+  tokens: Token[]
+  onContinue(): void
+  onCancel?(): void
+}
+
+export const TokenVerificationBottomSheet = ({
+  tokens,
+  onContinue,
+  onCancel,
+  ref,
+}: TokenVerificationBottomSheetProps & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
+  const handleCancel = () => {
+    // close() reaches onClose, which is onCancel
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
+  }
+
+  return (
+    <BottomSheet ref={ref} onClose={onCancel}>
+      <TokenVerificationBottomSheetContent
+        tokens={tokens}
+        onContinue={onContinue}
+        onCancel={handleCancel}
+      />
+    </BottomSheet>
+  )
+}
+
+const TokenVerificationBottomSheetContent: React.FC<
+  TokenVerificationBottomSheetProps
+> = ({ tokens, onCancel, onContinue }) => {
+  const [accepted, setAccepted] = useState(false)
+  const { t } = useTranslation()
+  const ref = useRef<HTMLElement>(null)
+  useSetContentHeight(ref)
+
+  return (
+    <ContentContainer ref={ref}>
+      <CenterContainer>
+        <IconCircle status="error" sx={{ mb: 2.5 }} />
+        <WarningTitle>{t('warning.title.tokenFlagged')}</WarningTitle>
+      </CenterContainer>
+      {tokens.map((token) => (
+        <WarningMessage key={`${token.chainId}-${token.address}`}>
+          {t('warning.message.tokenFlagged', { tokenSymbol: token.symbol })}
+        </WarningMessage>
+      ))}
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={accepted}
+            onChange={(_, checked) => setAccepted(checked)}
+          />
+        }
+        label={t('warning.checkbox.tokenFlagged')}
+        sx={{ mt: 1 }}
+      />
+      <ButtonRow>
+        <Button variant="text" onClick={onCancel} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onContinue}
+          disabled={!accepted}
+          fullWidth
+        >
+          {t('button.continue')}
+        </Button>
+      </ButtonRow>
+    </ContentContainer>
+  )
+}

package/src/pages/TransactionPage/TransactionFailedButtons.tsx

@@ -5,12 +5,20 @@ import { useTranslation } from 'react-i18next'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { useAddressActivity } from '../../hooks/useAddressActivity.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { WidgetEvent } from '../../types/events.js'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
 import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
 import { StartTransactionButton } from './StartTransactionButton.js'
 import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
-import { getTokenValueLossThreshold } from './utils.js'
+import type { RetryGate } from './utils.js'
+import {
+  calculateValueLossPercentage,
+  getRetryGates,
+  getTokenValueLossThreshold,
+  openNextGate,
+} from './utils.js'
 
 interface TransactionFailedButtonsProps {
   route: RouteExtended
@@ -22,6 +30,7 @@ export const TransactionFailedButtons: React.FC<
   TransactionFailedButtonsProps
 > = ({ route, restartRoute, deleteRoute }) => {
   const { t } = useTranslation()
+  const emitter = useWidgetEvents()
   const navigateBack = useNavigateBack()
   const { mode, hiddenUI } = useWidgetConfig()
 
@@ -40,34 +49,61 @@ export const TransactionFailedButtons: React.FC<
     deleteRoute()
   }
 
-  const handleRetryClick = () => {
-    if (
-      toAddress &&
-      !hasActivity &&
-      !isLoadingAddressActivity &&
-      isActivityAddressFetched &&
-      !hiddenUI?.lowAddressActivityConfirmation
-    ) {
-      confirmToAddressSheetRef.current?.open()
-      return
-    }
-
+  const retryGates = (() => {
     const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
-    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
-    const toAmountUSD = Number.parseFloat(route.toAmountUSD)
-    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(
-      fromAmountUSD,
-      toAmountUSD,
-      gasCostUSD,
-      feeCostUSD
+    return getRetryGates({
+      toAddress,
+      hasActivity,
+      isLoadingAddressActivity,
+      isActivityAddressFetched,
+      confirmationHidden: Boolean(hiddenUI?.lowAddressActivityConfirmation),
+      valueLossExceeded: getTokenValueLossThreshold(
+        Number.parseFloat(route.fromAmountUSD),
+        Number.parseFloat(route.toAmountUSD),
+        gasCostUSD,
+        feeCostUSD
+      ),
+      isCustomMode: mode === 'custom',
+    })
+  })()
+
+  const openGate = (after?: RetryGate) =>
+    openNextGate(
+      retryGates,
+      {
+        address: () => confirmToAddressSheetRef.current?.open(),
+        value: () => tokenValueBottomSheetRef.current?.open(),
+      },
+      handleRestartRoute,
+      after
     )
-    if (tokenValueLossThresholdExceeded && mode !== 'custom') {
-      tokenValueBottomSheetRef.current?.open()
-    } else {
-      restartRoute()
+
+  const handleRestartRoute = () => {
+    if (tokenValueBottomSheetRef.current?.isOpen()) {
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
+      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+      const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+      emitter.emit(WidgetEvent.RouteHighValueLoss, {
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD,
+        valueLoss: calculateValueLossPercentage(
+          fromAmountUSD,
+          toAmountUSD,
+          gasCostUSD,
+          feeCostUSD
+        ),
+      })
     }
+    tokenValueBottomSheetRef.current?.close()
+    restartRoute()
   }
 
+  const handleRetryClick = () => openGate()
+
+  const handleConfirmToAddressContinue = () => openGate('address')
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
       <Box sx={{ display: 'flex', gap: 1.5 }}>
@@ -89,13 +125,13 @@ export const TransactionFailedButtons: React.FC<
         <TokenValueBottomSheet
           route={route}
           ref={tokenValueBottomSheetRef}
-          onContinue={restartRoute}
+          onContinue={handleRestartRoute}
         />
       ) : null}
       {!hiddenUI?.lowAddressActivityConfirmation ? (
         <ConfirmToAddressSheet
           ref={confirmToAddressSheetRef}
-          onContinue={restartRoute}
+          onContinue={handleConfirmToAddressContinue}
           toAddress={toAddress!}
           toChainId={route.toChainId!}
         />