@lifi/widget 4.6.0 → 4.7.1

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
         )
 

package/src/hooks/useTokens.ts

@@ -12,6 +12,7 @@ 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'
@@ -32,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,
@@ -39,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({
@@ -82,13 +94,14 @@ 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,
@@ -111,32 +124,60 @@ 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
+              }
+            }
           }
         }
       }
 
       return tokensResponse.tokens as TokensByChain
     },
-    enabled: !!search,
+    enabled: !!trimmedSearch,
     refetchInterval,
     staleTime: refetchInterval,
   })
@@ -170,5 +211,6 @@ export const useTokens = (
     allTokens,
     isLoading,
     isSearchLoading,
+    isAddressSearch,
   }
 }

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -23,6 +23,7 @@ import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { defaultChainIdsByType } from '../../utils/chainType.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { openInNewTab } from '../../utils/url.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
 import { BookmarkButtonContainer } from './SendToWalletPage.style.js'
@@ -106,12 +107,11 @@ export const BookmarksPage = (): JSX.Element => {
                   icon: <OpenInNewRounded />,
                   label: t('button.viewOnExplorer'),
                   onClick: () =>
-                    window.open(
+                    openInNewTab(
                       getAddressLink(
                         bookmark.address,
                         defaultChainIdsByType[bookmark.chainType]
-                      ),
-                      '_blank'
+                      )
                     ),
                 },
                 {

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -20,6 +20,7 @@ import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.j
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { openInNewTab } from '../../utils/url.js'
 import { shortenAddress } from '../../utils/wallet.js'
 
 export const ConnectedWalletsPage = (): JSX.Element => {
@@ -81,9 +82,8 @@ export const ConnectedWalletsPage = (): JSX.Element => {
                     label: t('button.viewOnExplorer'),
                     onClick: () => {
                       if (account.address) {
-                        window.open(
-                          getAddressLink(account.address, account.chainId),
-                          '_blank'
+                        openInNewTab(
+                          getAddressLink(account.address, account.chainId)
                         )
                       }
                     },

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -24,6 +24,7 @@ import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { defaultChainIdsByType } from '../../utils/chainType.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { openInNewTab } from '../../utils/url.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
 
@@ -118,12 +119,11 @@ export const RecentWalletsPage = (): JSX.Element => {
                   icon: <OpenInNewRounded />,
                   label: t('button.viewOnExplorer'),
                   onClick: () =>
-                    window.open(
+                    openInNewTab(
                       getAddressLink(
                         recentWallet.address,
                         defaultChainIdsByType[recentWallet.chainType]
-                      ),
-                      '_blank'
+                      )
                     ),
                 },
                 {

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -18,6 +18,7 @@ import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import type { ToAddress } from '../../types/widget.js'
 import { defaultChainIdsByType } from '../../utils/chainType.js'
+import { openInNewTab } from '../../utils/url.js'
 import { shortenAddress } from '../../utils/wallet.js'
 
 export const SendToConfiguredWalletPage = (): JSX.Element => {
@@ -92,12 +93,11 @@ export const SendToConfiguredWalletPage = (): JSX.Element => {
                   icon: <OpenInNewRounded />,
                   label: t('button.viewOnExplorer'),
                   onClick: () =>
-                    window.open(
+                    openInNewTab(
                       getAddressLink(
                         toAddress.address,
                         defaultChainIdsByType[toAddress.chainType]
-                      ),
-                      '_blank'
+                      )
                     ),
                 },
               ]}

package/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -15,6 +15,7 @@ import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.
 import { getSourceTxHash } from '../../stores/routes/utils.js'
 import { buildRouteFromTxHistory } from '../../utils/converters.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { isHttpUrl } from '../../utils/url.js'
 import { ReceiptsCard } from './ReceiptsCard.js'
 import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'
 import { TransferIdCard } from './TransferIdCard.js'
@@ -70,11 +71,10 @@ export const TransactionDetailsPage: React.FC = () => {
     routeExecution?.route?.steps?.at(-1)?.execution?.externalTxLink
 
   const txLink =
-    (url
-      ? internalTxLink?.replace(internalExplorerUrl, url)
-      : internalTxLink) ||
-    externalTxLink ||
-    getTransactionLink({ txHash: supportId })
+    [
+      url ? internalTxLink?.replace(internalExplorerUrl, url) : internalTxLink,
+      externalTxLink,
+    ].find(isHttpUrl) ?? getTransactionLink({ txHash: supportId })
 
   if (process.env.NODE_ENV === 'development') {
     supportId += `_${routeExecution?.route.id}`

package/src/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -7,6 +7,7 @@ import { Card } from '../../components/Card/Card.js'
 import { CardIconButton } from '../../components/Card/CardIconButton.js'
 import { CardTitle } from '../../components/Card/CardTitle.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { openInNewTab } from '../../utils/url.js'
 import { ContactSupportButton } from './ContactSupportButton.js'
 
 interface TransferIdCardProps {
@@ -26,7 +27,7 @@ export const TransferIdCard = ({
   }
 
   const openTransferIdInExplorer = () => {
-    window.open(txLink, '_blank')
+    openInNewTab(txLink)
   }
 
   return (

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

@@ -31,8 +31,8 @@ export const TokenVerificationBottomSheet = ({
   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/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!}
         />