@lifi/widget 4.4.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "4.4.0",
+  "version": "4.6.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -52,22 +52,22 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^4.1.0",
-    "@mui/icons-material": "^9.2.0",
-    "@mui/material": "^9.2.0",
-    "@mui/system": "^9.2.0",
-    "@tanstack/react-router": "^1.170.17",
-    "@tanstack/react-virtual": "^3.14.5",
+    "@lifi/sdk": "^4.6.1",
+    "@lifi/wallet-management": "4.2.0",
+    "@lifi/widget-provider": "4.4.0",
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
+    "@mui/system": "^9.4.0",
+    "@tanstack/react-router": "^1.170.32",
+    "@tanstack/react-virtual": "^3.14.10",
     "eventemitter3": "^5.0.4",
-    "i18next": "^26.3.6",
-    "microdiff": "^1.5.0",
-    "motion": "^12.42.2",
-    "react-i18next": "^17.0.9",
-    "react-intersection-observer": "^10.1.0",
+    "i18next": "^26.4.1",
+    "microdiff": "^1.6.0",
+    "motion": "^13.2.0",
+    "react-i18next": "^17.0.13",
+    "react-intersection-observer": "^11.0.1",
     "react-transition-group": "^4.4.5",
-    "zustand": "^5.0.14",
-    "@lifi/wallet-management": "4.1.2",
-    "@lifi/widget-provider": "4.3.0"
+    "zustand": "^5.0.15"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.90.0",

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -4,7 +4,7 @@ import type React from 'react'
 import { type JSX, memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
-import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
+import { useMaxSendAmount } from '../../hooks/useMaxSendAmount.js'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
@@ -29,28 +29,10 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
     const chain = getChainById(chainId)
     const { account } = useAccount({ chainType: chain?.chainType })
 
-    // We get gas recommendations for the source chain to make sure that after pressing the Max button
-    // the user will have enough funds remaining to cover gas costs
-    const { data } = useGasRecommendation(chainId)
-
     const { token } = useTokenAddressBalance(chainId, tokenAddress)
-
-    const getMaxAmount = () => {
-      if (!token?.amount) {
-        return 0n
-      }
-      let maxAmount = token.amount
-      if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
-        const recommendedAmount = BigInt(data.recommended.amount)
-        if (token.amount > recommendedAmount) {
-          maxAmount = token.amount - recommendedAmount
-        }
-      }
-      return maxAmount
-    }
+    const maxAmount = useMaxSendAmount(chainId, tokenAddress)
 
     const handlePercentage = (percentage: number) => {
-      const maxAmount = getMaxAmount()
       if (maxAmount && token?.decimals) {
         const percentageAmount = (maxAmount * BigInt(percentage)) / 100n
         setFieldValue(
@@ -64,7 +46,6 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
     }
 
     const handleMax = () => {
-      const maxAmount = getMaxAmount()
       if (maxAmount && token?.decimals) {
         setFieldValue(
           FormKeyHelper.getAmountKey(formType),

package/src/components/AmountInputCard/PercentageChips.tsx

@@ -3,8 +3,8 @@ import { useAccount } from '@lifi/wallet-management'
 import { type JSX, memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
-import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
 import { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'
+import { useMaxSendAmount } from '../../hooks/useMaxSendAmount.js'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
@@ -33,22 +33,8 @@ export const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(
     const chain = getChainById(chainId)
     const { account } = useAccount({ chainType: chain?.chainType })
 
-    const { data } = useGasRecommendation(chainId)
     const { token } = useTokenAddressBalance(chainId, tokenAddress)
-
-    const getMaxAmount = (): bigint => {
-      if (!token?.amount) {
-        return 0n
-      }
-      let maxAmount = token.amount
-      if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
-        const recommendedAmount = BigInt(data.recommended.amount)
-        if (token.amount > recommendedAmount) {
-          maxAmount = token.amount - recommendedAmount
-        }
-      }
-      return maxAmount
-    }
+    const maxAmount = useMaxSendAmount(chainId, tokenAddress)
 
     // In limit mode the send amount must flow through the linked-field
     // derivation so the receive amount recomputes; otherwise it is a plain
@@ -62,7 +48,6 @@ export const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(
     }
 
     const handlePercentage = (percentage: number): void => {
-      const maxAmount = getMaxAmount()
       if (maxAmount && token?.decimals) {
         const percentageAmount = (maxAmount * BigInt(percentage)) / 100n
         applyAmount(formatUnits(percentageAmount, token.decimals))
@@ -70,7 +55,6 @@ export const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(
     }
 
     const handleMax = (): void => {
-      const maxAmount = getMaxAmount()
       if (maxAmount && token?.decimals) {
         applyAmount(formatUnits(maxAmount, token.decimals))
       }

package/src/components/Chains/AllChainsAvatar.tsx

@@ -44,6 +44,12 @@ const chainTypeIcons = [
     icon: 'https://lifinance.github.io/types/src/assets/icons/chains/tron.svg',
     defaultChainId: ChainId.TRN,
   },
+  {
+    name: 'Stellar',
+    chainType: ChainType.STL,
+    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/stellar.svg',
+    defaultChainId: ChainId.XLM,
+  },
 ]
 
 const maxChainAvatarsCount = 4
@@ -93,7 +99,7 @@ export const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =
         }
       )
 
-      if (existingChainTypeIcons.length === maxChainAvatarsCount) {
+      if (existingChainTypeIcons.length >= maxChainAvatarsCount) {
         return existingChainTypeIcons
       }
 

package/src/components/Messages/UnsupportedToAddressMessage.tsx

@@ -0,0 +1,24 @@
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import type { BoxProps } from '@mui/material'
+import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from './AlertMessage.js'
+
+export const UnsupportedToAddressMessage: React.FC<BoxProps> = ({
+  ...props
+}) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      title={
+        <Typography variant="body2" sx={{ px: 1, color: 'text.primary' }}>
+          {t('info.message.unsupportedToAddressMessage')}
+        </Typography>
+      }
+      icon={<WarningRounded />}
+      severity="warning"
+      multiline
+      {...props}
+    />
+  )
+}

package/src/components/Messages/WarningMessages.tsx

@@ -7,6 +7,7 @@ import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
 import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
 import { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'
 import { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'
+import { UnsupportedToAddressMessage } from './UnsupportedToAddressMessage.js'
 import { useMessageQueue } from './useMessageQueue.js'
 
 type WarningMessagesProps = BoxProps & {
@@ -51,6 +52,8 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
         return <AccountNotDeployedMessage {...props} />
       case 'ACCOUNT_DEPLOYED':
         return <AccountDeployedMessage {...props} />
+      case 'UNSUPPORTED_TO_ADDRESS':
+        return <UnsupportedToAddressMessage {...props} />
       default:
         return null
     }

package/src/components/Messages/useMessageQueue.ts

@@ -22,6 +22,7 @@ export const useMessageQueue = (
 } => {
   const {
     requiredToAddress,
+    unsupportedReceiverBlocking,
     accountNotDeployedAtDestination,
     accountDeployedAtDestination,
     isLoading: isToAddressRequirementsLoading,
@@ -37,6 +38,13 @@ export const useMessageQueue = (
   const messageQueue = useMemo(() => {
     const queue: QueuedMessage[] = []
 
+    if (unsupportedReceiverBlocking) {
+      queue.push({
+        id: 'UNSUPPORTED_TO_ADDRESS',
+        priority: 7,
+      })
+    }
+
     if (missingChain) {
       queue.push({
         id: 'MISSING_ROUTE_REQUIRED_ACCOUNT',
@@ -94,6 +102,7 @@ export const useMessageQueue = (
     accountDeployedAtDestination,
     accountNotDeployedAtDestination,
     requiredToAddress,
+    unsupportedReceiverBlocking,
     missingChain,
     missingAccountAddress,
     belowMinFromAmountUSD,

package/src/components/Routes/LimitOrderRoutes.tsx

@@ -17,7 +17,8 @@ export const LimitOrderRoutes: React.FC<CardProps> = (props) => {
     'selectedRouteId'
   )
   const { setFieldValue } = useFieldActions()
-  const { requiredToAddress } = useToAddressRequirements()
+  const { requiredToAddress, unsupportedReceiverBlocking } =
+    useToAddressRequirements()
 
   const currentRoute = routes?.[0]
 
@@ -25,7 +26,9 @@ export const LimitOrderRoutes: React.FC<CardProps> = (props) => {
     return null
   }
 
-  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+  const toAddressUnsatisfied =
+    currentRoute &&
+    (unsupportedReceiverBlocking || (requiredToAddress && !toAddress))
   const allowInteraction = !toAddressUnsatisfied
 
   const activeRouteId =

package/src/components/Routes/RoutesContent.tsx

@@ -43,12 +43,15 @@ export const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =
 
     const { account } = useAccount({ chainType: fromChain?.chainType })
     const [toAddress] = useFieldValues('toAddress')
-    const { requiredToAddress } = useToAddressRequirements()
+    const { requiredToAddress, unsupportedReceiverBlocking } =
+      useToAddressRequirements()
 
     const currentRoute = routes?.[0]
 
     const routeNotFound = !currentRoute && !isLoading && !isFetching
-    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+    const toAddressUnsatisfied =
+      currentRoute &&
+      (unsupportedReceiverBlocking || (requiredToAddress && !toAddress))
     const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
     const title =

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -16,12 +16,13 @@ export const SendToWalletExpandButton = (): JSX.Element => {
   const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()
   const hiddenToAddress = hiddenUI?.toAddress
   const disabledToAddress = disabledUI?.toAddress
-  const { requiredToAddress } = useToAddressRequirements()
+  const { requiredToAddress, unsupportedToAddress } = useToAddressRequirements()
   const [toAddressValue] = useFieldValues('toAddress')
 
   const visible =
     !hiddenToAddress &&
     !disabledToAddress &&
+    !unsupportedToAddress &&
     !toAddressValue &&
     !requiredToAddress
 

package/src/components/TokenList/TokenListItem.tsx

@@ -1,7 +1,8 @@
 import type { StaticToken } from '@lifi/sdk'
 import { ChainType } from '@lifi/sdk'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import ReportRoundedIcon from '@mui/icons-material/ReportRounded'
+import VerifiedIcon from '@mui/icons-material/Verified'
 import {
   Avatar,
   Box,
@@ -18,6 +19,7 @@ import { memo, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLongPress } from '../../hooks/useLongPress.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { getTokenVerificationProvider } from '../../utils/token.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
 import { ListItemButton } from '../ListItem/ListItemButton.js'
@@ -36,6 +38,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
     start,
     token,
     chain,
+    chainName,
     isBalanceLoading,
     startAdornment,
     endAdornment,
@@ -56,6 +59,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
           isBalanceLoading={isBalanceLoading}
           onClick={onClick}
           chain={chain}
+          chainName={chainName}
           selected={selected}
           onShowTokenDetails={onShowTokenDetails}
         />
@@ -121,6 +125,7 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
     onClick,
     token,
     chain,
+    chainName,
     isBalanceLoading,
     selected,
     onShowTokenDetails,
@@ -166,6 +171,64 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
       onShowTokenDetails(token.address, withoutContractAddress, token.chainId)
     )
 
+    // The native token is badged ahead of any verdict: the provider screens
+    // the native-address convention and calls it a scam on some chains.
+    // A token the main list or the integrator vouches for needs no warning;
+    // anything else without a clean verdict keeps the amber one.
+    let verificationBadge:
+      | { Icon: typeof VerifiedIcon; color: string; title: string }
+      | undefined
+    if (token.native) {
+      verificationBadge = {
+        Icon: VerifiedIcon,
+        color: 'info.main',
+        title: chainName
+          ? t('tooltip.tokenNativeOnChain', {
+              tokenSymbol: token.symbol,
+              chainName,
+            })
+          : t('tooltip.tokenNative', { tokenSymbol: token.symbol }),
+      }
+    } else if (token.verificationStatus === 'flagged') {
+      verificationBadge = {
+        Icon: ReportRoundedIcon,
+        color: 'error.main',
+        title: t('warning.message.tokenFlagged', {
+          tokenSymbol: token.symbol,
+        }),
+      }
+    } else if (token.verificationStatus === 'verified') {
+      const provider = getTokenVerificationProvider(token)
+      verificationBadge = {
+        Icon: VerifiedIcon,
+        color: 'success.main',
+        title: provider
+          ? t('tooltip.tokenVerifiedByProvider', {
+              tokenSymbol: token.symbol,
+              provider,
+            })
+          : t('tooltip.tokenVerified', { tokenSymbol: token.symbol }),
+      }
+    } else if (
+      token.verificationStatus === 'unverified' &&
+      !token.listed &&
+      !token.verified
+    ) {
+      verificationBadge = {
+        Icon: ReportRoundedIcon,
+        color: 'warning.main',
+        title: t('warning.message.tokenUnverifiedByProvider', {
+          tokenSymbol: token.symbol,
+        }),
+      }
+    } else if (!token.verificationStatus && !token.listed && !token.verified) {
+      verificationBadge = {
+        Icon: ReportRoundedIcon,
+        color: 'warning.main',
+        title: t('warning.message.tokenUnverified'),
+      }
+    }
+
     return (
       <ListItemButton
         onClick={handleClick}
@@ -195,17 +258,13 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
           primary={
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
               {token.symbol}
-              {!token.verified && (
-                <Tooltip
-                  title={t('warning.message.unverifiedToken')}
-                  placement="top"
-                  arrow
-                >
-                  <WarningRounded
+              {verificationBadge && (
+                <Tooltip title={verificationBadge.title} placement="top" arrow>
+                  <verificationBadge.Icon
                     sx={{
                       display: 'flex',
                       fontSize: 16,
-                      color: 'warning.main',
+                      color: verificationBadge.color,
                       cursor: 'help',
                     }}
                   />

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -60,6 +60,24 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
     [tokens]
   )
 
+  // 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 estimateSize = useCallback(
     (index: number) => {
       const currentToken = tokens[index]
@@ -67,7 +85,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
       let size = tokenItemHeight
 
       // Pinned tokens (always shown, even in all networks mode)
-      if (currentToken.pinned && index === 0) {
+      if (currentToken.pinned && isListStartIndex(index)) {
         size += 24
       }
       if (previousToken?.pinned && !currentToken.pinned) {
@@ -78,13 +96,19 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
         return size
       }
 
-      if (currentToken.featured && !currentToken.pinned && index === 0) {
+      if (
+        currentToken.featured &&
+        !currentToken.pinned &&
+        isListStartIndex(index)
+      ) {
         size += 24
       }
 
-      // Category transition (excluding pinned tokens)
+      // 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) ||
@@ -95,7 +119,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
 
       return size
     },
-    [tokens, showCategories]
+    [tokens, showCategories, isListStartIndex]
   )
 
   const virtualizerConfig = useMemo(
@@ -142,8 +166,9 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
           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 && item.index === 0
+          const isFirstPinnedToken = currentToken.pinned && isListStart
           const isTransitionFromPinned = previousToken?.pinned && isNotPinned
 
           // Category transitions (excluding pinned)
@@ -168,7 +193,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
 
             if (
               (isTransitionFromPinned && currentToken.featured) ||
-              (currentToken.featured && isNotPinned && item.index === 0)
+              (currentToken.featured && isNotPinned && isListStart)
             ) {
               return t('main.featuredTokens')
             }
@@ -211,6 +236,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
               start={item.start}
               token={currentToken}
               chain={isAllNetworks ? chain : undefined}
+              chainName={chain?.name}
               selected={isSelected}
               onShowTokenDetails={onShowTokenDetails}
               isBalanceLoading={isBalanceLoading}
@@ -224,9 +250,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
                       px: 1.5,
                       pt:
                         isFirstPinnedToken ||
-                        (currentToken.featured &&
-                          isNotPinned &&
-                          item.index === 0)
+                        (currentToken.featured && isNotPinned && isListStart)
                           ? 0
                           : 1,
                       pb: 1,

package/src/components/TokenList/types.ts

@@ -35,6 +35,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 +52,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.4.0'
+export const version = '4.6.0'

package/src/hooks/useAccountsBalancesData.ts

@@ -1,9 +1,8 @@
-import type { ChainType, TokenExtended } from '@lifi/sdk'
+import type { TokenExtended } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useMemo } from 'react'
 import type { FormType } from '../stores/form/types.js'
 import { useChains } from './useChains.js'
-import { useFilteredTokensByBalance } from './useFilteredByTokenBalances.js'
 
 export const useAccountsBalancesData = (
   selectedChainId?: number,
@@ -14,25 +13,6 @@ export const useAccountsBalancesData = (
   data: Record<string, Record<number, TokenExtended[]>> | undefined
   isLoading: boolean
 } => {
-  const { data: accountsWithTokens, isLoading: isAccountsLoading } =
-    useAccountsData(selectedChainId, formType, isAllNetworks, allTokens)
-
-  // Filter out EVM tokens that do not have balances
-  const { data: filteredTokens, isLoading: isCachedBalancesLoading } =
-    useFilteredTokensByBalance(accountsWithTokens, formType)
-
-  return {
-    data: filteredTokens,
-    isLoading: isAccountsLoading || isCachedBalancesLoading,
-  }
-}
-
-const useAccountsData = (
-  selectedChainId?: number,
-  formType?: FormType,
-  isAllNetworks?: boolean,
-  allTokens?: Record<number, TokenExtended[]>
-) => {
   const {
     chains: allChains,
     isLoading: isChainsLoading,
@@ -72,7 +52,7 @@ const useAccountsData = (
             )
             if (accountChains) {
               const chainIdSet = new Set(accountChains.map((chain) => chain.id))
-              const filteredTokens = Object.entries(allTokens).reduce(
+              acc[account.address] = Object.entries(allTokens).reduce(
                 (tokenAcc, [chainIdStr, tokens]) => {
                   const chainId = Number(chainIdStr)
                   if (chainIdSet.has(chainId)) {
@@ -80,20 +60,13 @@ const useAccountsData = (
                   }
                   return tokenAcc
                 },
-                {} as { [chainId: number]: TokenExtended[] }
+                {} as Record<number, TokenExtended[]>
               )
-              acc[account.address] = {
-                chainType: account.chainType,
-                tokens: filteredTokens,
-              }
             }
           }
           return acc
         },
-        {} as Record<
-          string,
-          { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
-        >
+        {} as Record<string, Record<number, TokenExtended[]>>
       )
   }, [accounts, chains, allTokens])
 

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/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 }
+}