@lifi/widget 4.5.0 → 4.6.0

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.5.0'
+export const version = '4.6.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/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/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 { isCustomReceiverUnsupported } from '../utils/customReceiver.js'
 import { getQueryKey } from '../utils/queries.js'
 import { updateTokenInCache } from '../utils/token.js'
 import { useChain } from './useChain.js'
@@ -177,6 +178,11 @@ export const useRoutes = ({
     ? hasToAddressAndChainTypeSatisfied
     : true
 
+  // Stellar settles to the signer, so a set receiver makes the route unfulfillable.
+  const customReceiverBlocked =
+    isCustomReceiverUnsupported(fromChain?.chainType, toChain?.chainType) &&
+    Boolean(toAddress)
+
   // toAddress might be an empty string, but we need to pass undefined if there is no value
   const toWalletAddress = toAddress || undefined
 
@@ -197,6 +203,7 @@ export const useRoutes = ({
     !Number.isNaN(slippage) &&
     hasAmount &&
     isToAddressSatisfied &&
+    !customReceiverBlocked &&
     contractCallQuoteEnabled &&
     !isBatchingSupportedLoading
 

package/src/hooks/useToAddressRequirements.ts

@@ -4,12 +4,15 @@ import { useEthereumContext } from '@lifi/widget-provider'
 import { useChain } from '../hooks/useChain.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { isCustomReceiverUnsupported } from '../utils/customReceiver.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 
 export const useToAddressRequirements = (
   route?: RouteExtended
 ): {
   requiredToAddress: boolean
+  unsupportedToAddress: boolean
+  unsupportedReceiverBlocking: boolean
   requiredToChainType: ChainType | undefined
   accountNotDeployedAtDestination: boolean
   accountDeployedAtDestination: boolean
@@ -68,11 +71,22 @@ export const useToAddressRequirements = (
     fromChainId !== toChainId &&
     !fromContractCodeHasDelegationIndicator
 
+  const unsupportedToAddress = isCustomReceiverUnsupported(
+    fromChain?.chainType,
+    toChain?.chainType
+  )
+
+  // Stellar routes settle to the signer, so a required receiver is never honoured.
+  const unsupportedReceiverBlocking = Boolean(
+    unsupportedToAddress && (toAddress || requiredUI?.toAddress)
+  )
+
   const requiredToAddress = Boolean(
     (isDifferentChainType ||
       isCrossChainContractAddress ||
       requiredUI?.toAddress) &&
-      !hiddenUI?.toAddress
+      !hiddenUI?.toAddress &&
+      !unsupportedToAddress
   )
 
   const accountNotDeployedAtDestination = Boolean(
@@ -91,6 +105,8 @@ export const useToAddressRequirements = (
 
   return {
     requiredToAddress,
+    unsupportedToAddress,
+    unsupportedReceiverBlocking,
     requiredToChainType: toChain?.chainType,
     accountNotDeployedAtDestination,
     accountDeployedAtDestination,

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,
+  isSearchMatch,
+  processTokenList,
+} from '../utils/tokenList.js'
 import { useAccountsBalancesData } from './useAccountsBalancesData.js'
 import { useDisplayedTokens } from './useDisplayedTokens.js'
 import { useTokenBalancesQueries } from './useTokenBalancesQueries.js'
@@ -115,7 +119,7 @@ export const useTokenBalances = (
   ])
 
   const { processedTokens, withCategories, withPinnedTokens } = useMemo(() => {
-    return processTokenList(
+    const result = processTokenList(
       isBalanceLoading,
       isAllNetworks || !!search,
       configTokens,
@@ -124,6 +128,18 @@ export const useTokenBalances = (
       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,

package/src/hooks/useTokenSearch.ts

@@ -74,13 +74,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

@@ -17,8 +17,10 @@ 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
 
@@ -49,6 +51,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 +66,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 })),
         ])
       )
 
@@ -92,6 +95,7 @@ export const useTokens = (
         ChainType.UTXO,
         ChainType.MVM,
         ChainType.TVM,
+        ChainType.STL,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
@@ -130,26 +134,37 @@ export const useTokens = (
         }
       }
 
-      // 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,
     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,

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