@lifi/widget 3.29.1 → 3.30.1

package/src/components/TokenList/types.ts

@@ -1,6 +1,5 @@
 import type { ExtendedChain } from '@lifi/sdk'
-import type { Account } from '@lifi/wallet-management'
-import type { MouseEventHandler, RefObject } from 'react'
+import type { RefObject } from 'react'
 import type { FormType } from '../../stores/form/types.js'
 import type { TokenAmount } from '../../types/token.js'
 
@@ -12,28 +11,30 @@ export interface TokenListProps {
 }
 
 export interface VirtualizedTokenListProps {
-  account: Account
   tokens: TokenAmount[]
   scrollElementRef: RefObject<HTMLElement | null>
   isLoading: boolean
   isBalanceLoading: boolean
   chainId?: number
-  chain?: ExtendedChain
   showCategories?: boolean
   onClick(tokenAddress: string, chainId?: number): void
   selectedTokenAddress?: string
+  isAllNetworks: boolean
 }
 
-export interface TokenListItemBaseProps {
+interface TokenListItemBaseProps {
   onClick?(tokenAddress: string, chainId?: number): void
   size: number
   start: number
 }
 
 export interface TokenListItemProps extends TokenListItemBaseProps {
-  accountAddress?: string
   token: TokenAmount
-  onShowTokenDetails: (tokenAddress: string, noContractAddress: boolean) => void
+  onShowTokenDetails: (
+    tokenAddress: string,
+    noContractAddress: boolean,
+    chainId: number
+  ) => void
   chain?: ExtendedChain
   isBalanceLoading?: boolean
   startAdornment?: React.ReactNode
@@ -42,9 +43,12 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
 }
 
 export interface TokenListItemButtonProps {
-  onShowTokenDetails: (tokenAddress: string, noContractAddress: boolean) => void
-  onClick?: MouseEventHandler<HTMLDivElement>
-  accountAddress?: string
+  onShowTokenDetails: (
+    tokenAddress: string,
+    noContractAddress: boolean,
+    chainId: number
+  ) => void
+  onClick?(tokenAddress: string, chainId?: number): void
   token: TokenAmount
   chain?: ExtendedChain
   isBalanceLoading?: boolean
@@ -57,6 +61,6 @@ export interface TokenListItemAvatarProps {
 
 export interface TokenDetailsSheetBase {
   isOpen(): void
-  open(address: string, noContractAddress: boolean): void
+  open(address: string, noContractAddress: boolean, chainId: number): void
   close(): void
 }

package/src/components/TokenList/useTokenSelect.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.js'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
 import type { FormType } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
@@ -10,18 +10,13 @@ import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvarian
 import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUI } from '../../types/widget.js'
 
-export type UseTokenSelectArgs = {
-  formType: FormType
-  onClick?: () => void
-}
-
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const { subvariant, disabledUI } = useWidgetConfig()
   const splitSubvariant = useSplitSubvariantStore((store) => store.state)
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
   const autoPopulateToAddress = useToAddressAutoPopulate()
-  const chainOrderStore = useChainOrderStoreContext()
+  const setChain = useChainOrderStore((state) => state.setChain)
 
   const tokenKey = FormKeyHelper.getTokenKey(formType)
 
@@ -71,7 +66,6 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       }
 
       // If no opposite token is selected, synchronize the opposite chain to match the currently selected chain
-      const { setChain } = chainOrderStore.getState()
       if (!selectedOppositeTokenAddress && selectedChainId) {
         setFieldValue(
           FormKeyHelper.getChainKey(oppositeFormType),
@@ -109,12 +103,12 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
     },
     [
       autoPopulateToAddress,
-      chainOrderStore,
       disabledUI,
       emitter,
       formType,
       getFieldValues,
       onClick,
+      setChain,
       setFieldValue,
       subvariant,
       splitSubvariant,

package/src/components/TokenRate/TokenRate.tsx

@@ -56,7 +56,6 @@ export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
     : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`
 
   return (
-    // biome-ignore lint/a11y/useSemanticElements: allowed in react
     <TokenRateTypography onClick={toggleRate} role="button">
       {rateText}
     </TokenRateTypography>

package/src/components/TransactionDetails.tsx

@@ -102,7 +102,6 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             feeCosts={feeCosts}
             relayerSupport={hasRelayerSupport}
           >
-            {/** biome-ignore lint/a11y/useSemanticElements: allowed in react */}
             <Box
               onClick={toggleCard}
               role="button"
@@ -125,7 +124,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   lineHeight: 1.429,
                 }}
               >
-                {hasRelayerSupport
+                {hasRelayerSupport || !combinedFeesUSD
                   ? t('main.fees.free')
                   : t('format.currency', { value: combinedFeesUSD })}
               </Typography>
@@ -163,7 +162,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 variant="body2"
                 sx={{ fontWeight: 600, cursor: 'help' }}
               >
-                {hasRelayerSupport
+                {hasRelayerSupport || !gasCostUSD
                   ? t('main.fees.free')
                   : t('format.currency', {
                       value: gasCostUSD,

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.29.1'
+export const version = '3.30.1'

package/src/hooks/timer/time.ts

@@ -8,16 +8,6 @@ export type TimeFromMillisecondsType = {
   days: number
 }
 
-export type AMPMType = '' | 'pm' | 'am'
-
-export type FormattedTimeFromMillisecondsType = {
-  milliseconds: number
-  seconds: number
-  minutes: number
-  hours: number
-  ampm?: AMPMType
-}
-
 export function getTimeFromMilliseconds(
   millisecs: number,
   isCountDown = true

package/src/hooks/timer/useTimer.ts

@@ -9,14 +9,14 @@ import { validateExpiryTimestamp, validateOnExpire } from './validate.js'
 
 const SECOND_INTERVAL = 1000
 
-export type useTimerSettingsType = {
+type useTimerSettingsType = {
   expiryTimestamp: Date
   onExpire?: () => void
   autoStart?: boolean
   interval?: number
 }
 
-export type useTimerResultType = TimeFromMillisecondsType & {
+type useTimerResultType = TimeFromMillisecondsType & {
   start: () => void
   pause: () => void
   resume: () => void

package/src/hooks/useAccountsBalancesData.ts

@@ -0,0 +1,101 @@
+import type { ChainType, 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,
+  formType?: FormType,
+  isAllNetworks?: boolean,
+  allTokens?: Record<number, TokenExtended[]>
+) => {
+  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,
+    getChainById,
+  } = useChains(formType)
+  const currentChain = useMemo(() => {
+    return selectedChainId
+      ? getChainById(selectedChainId, allChains)
+      : undefined
+  }, [selectedChainId, allChains, getChainById])
+  const chains = useMemo(() => {
+    return isAllNetworks ? allChains : currentChain ? [currentChain] : undefined
+  }, [allChains, isAllNetworks, currentChain])
+
+  const { accounts: allAccounts, account: currentAccount } = useAccount(
+    isAllNetworks ? undefined : { chainType: currentChain?.chainType }
+  )
+  const accounts = useMemo(() => {
+    return isAllNetworks
+      ? allAccounts
+      : currentAccount
+        ? [currentAccount]
+        : undefined
+  }, [allAccounts, currentAccount, isAllNetworks])
+
+  const accountsWithTokens = useMemo(() => {
+    if (!chains || !allTokens || !accounts?.length) {
+      return undefined
+    }
+    return accounts
+      ?.filter((account) => account.address)
+      .reduce(
+        (acc, account) => {
+          if (account.address) {
+            const accountChains = chains?.filter(
+              (chain) => account.chainType === chain?.chainType
+            )
+            if (accountChains) {
+              const chainIdSet = new Set(accountChains.map((chain) => chain.id))
+              const filteredTokens = Object.entries(allTokens).reduce(
+                (tokenAcc, [chainIdStr, tokens]) => {
+                  const chainId = Number(chainIdStr)
+                  if (chainIdSet.has(chainId)) {
+                    tokenAcc[chainId] = tokens
+                  }
+                  return tokenAcc
+                },
+                {} as { [chainId: number]: TokenExtended[] }
+              )
+              acc[account.address] = {
+                chainType: account.chainType,
+                tokens: filteredTokens,
+              }
+            }
+          }
+          return acc
+        },
+        {} as Record<
+          string,
+          { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
+        >
+      )
+  }, [accounts, chains, allTokens])
+
+  return {
+    data: accountsWithTokens,
+    isLoading: isChainsLoading,
+  }
+}

package/src/hooks/useAvailableChains.ts

@@ -6,7 +6,7 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
-export type GetChainById = (
+type GetChainById = (
   chainId?: number,
   chains?: ExtendedChain[]
 ) => ExtendedChain | undefined

package/src/hooks/useExplorer.ts

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
 const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
 
-export type TransactionLinkProps = { chain?: Chain | number } & (
+type TransactionLinkProps = { chain?: Chain | number } & (
   | {
       txHash: string
       txLink?: never

package/src/hooks/useFilteredByTokenBalances.ts

@@ -0,0 +1,130 @@
+import {
+  type BaseToken,
+  ChainType,
+  getWalletBalances,
+  type TokenExtended,
+  type WalletTokenExtended,
+} from '@lifi/sdk'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
+import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
+import { isSupportedToken } from '../utils/tokenList.js'
+
+export const useFilteredTokensByBalance = (
+  accountsWithTokens?: Record<
+    string,
+    { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
+  >,
+  formType?: FormType
+) => {
+  const { tokens: configTokens } = useWidgetConfig()
+
+  const evmAddress = useMemo(() => {
+    const evmAccount = Object.entries(accountsWithTokens ?? {}).find(
+      ([_, { chainType }]) => chainType === ChainType.EVM
+    )
+    return evmAccount?.[0]
+  }, [accountsWithTokens])
+
+  const { data: existingBalances, isLoading } = useQuery({
+    queryKey: ['existing-evm-balances', evmAddress],
+    queryFn: () => getWalletBalances(evmAddress ?? ''),
+    enabled: !!evmAddress,
+    refetchInterval: 30_000, // 30 seconds
+    staleTime: 30_000, // 30 seconds
+  })
+
+  const accountsWithFilteredTokens = useMemo(() => {
+    if (!accountsWithTokens) {
+      return undefined
+    }
+
+    // Early return if no existing balances - return all tokens
+    const result: Record<string, Record<number, TokenExtended[]>> = {}
+    if (!existingBalances) {
+      for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
+        result[address] = tokens
+      }
+      return result
+    }
+
+    for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
+      result[address] = {}
+
+      for (const [chainIdStr, chainTokens] of Object.entries(tokens)) {
+        const chainId = Number(chainIdStr)
+        // Get balances for this specific chain
+        const balances = existingBalances?.[chainId]
+        // If no balances, RPC all tokens of the chain
+        if (!balances?.length) {
+          if (chainTokens.length) {
+            result[address][chainId] = chainTokens
+          }
+          continue
+        }
+
+        // Optimize token matching with Set for O(1) lookup
+        const balanceSet = new Set(
+          balances.map((balance: WalletTokenExtended) =>
+            balance.address.toLowerCase()
+          )
+        )
+
+        // Get tokens that are in chainTokens and have balances
+        const filteredTokens = chainTokens.filter((token) => {
+          const tokenKey = token.address.toLowerCase()
+          return balanceSet.has(tokenKey)
+        })
+
+        // Get tokens that are in balances but not in chainTokens
+        const chainTokenSet = new Set(
+          chainTokens.map((token) => token.address.toLowerCase())
+        )
+
+        // Get allowed addresses from config tokens
+        const allowedAddressesConfig = getConfigItemSets(
+          configTokens,
+          (tokens: BaseToken[]) =>
+            new Set(
+              tokens
+                .filter((t) => Number(t.chainId) === chainId)
+                .map((t) => t.address.toLowerCase())
+            ),
+          formType
+        )
+
+        const additionalTokens = balances.filter(
+          (balance: WalletTokenExtended) => {
+            const balanceKey = balance.address.toLowerCase()
+            return (
+              !chainTokenSet.has(balanceKey) &&
+              isSupportedToken(balance) &&
+              isFormItemAllowed(
+                balance,
+                allowedAddressesConfig,
+                formType,
+                (t) => t.address.toLowerCase()
+              )
+            )
+          }
+        ) as TokenExtended[]
+
+        // Combine both sets of tokens - convert WalletTokenExtended to TokenAmount
+        const allTokens = [
+          ...filteredTokens,
+          ...additionalTokens,
+        ] as TokenExtended[]
+
+        if (allTokens.length) {
+          result[address][chainId] = allTokens
+        }
+      }
+    }
+
+    return result
+  }, [accountsWithTokens, existingBalances, configTokens, formType])
+
+  return { data: accountsWithFilteredTokens, isLoading }
+}

package/src/hooks/useListHeight.ts

@@ -51,8 +51,8 @@ interface UseContentHeightProps {
   headerRef?: RefObject<HTMLElement | null>
 }
 
-export const defaultMinListHeight = 360
-export const minMobileListHeight = 160
+const defaultMinListHeight = 360
+const minMobileListHeight = 160
 
 // NOTE: this hook is implicitly tied to the widget height functionality in the
 //   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
@@ -102,7 +102,6 @@ export const useListHeight = ({
   )
 
   return {
-    minListHeight,
     listHeight,
   }
 }

package/src/hooks/useRoutes.ts

@@ -5,6 +5,7 @@ import {
   getContractCallsQuote,
   getRelayerQuote,
   getRoutes,
+  isGaslessStep,
   isRelayerStep,
   LiFiErrorCode,
 } from '@lifi/sdk'
@@ -331,8 +332,9 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           return
         }
 
-        const isObservableRelayerRoute =
-          observableRoute?.steps?.some(isRelayerStep)
+        const isObservableRelayerRoute = observableRoute?.steps?.some(
+          (step) => isRelayerStep(step) && isGaslessStep(step, fromChain)
+        )
 
         const shouldUseMainRoutes =
           !observableRoute || !isObservableRelayerRoute

package/src/hooks/useToAddressAutoPopulate.ts

@@ -7,7 +7,7 @@ import { useSendToWalletActions } from '../stores/settings/useSendToWalletStore.
 import { getChainTypeFromAddress } from '../utils/chainType.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
-export type UpdateToAddressArgs = {
+type UpdateToAddressArgs = {
   formType: FormType
   selectedToAddress?: string
   selectedChainId?: number

package/src/hooks/useToken.ts

@@ -2,22 +2,40 @@ import { useMemo } from 'react'
 import { useTokenSearch } from './useTokenSearch.js'
 import { useTokens } from './useTokens.js'
 
-export const useToken = (chainId?: number, tokenAddress?: string) => {
-  const { tokens, isLoading } = useTokens(chainId)
+export const useToken = (
+  chainId?: number,
+  tokenAddress?: string,
+  latest?: boolean
+) => {
+  const { allTokens, isLoading: isTokensLoading } = useTokens()
 
-  const token = useMemo(() => {
-    const token = tokens?.find(
-      (token) => token.address === tokenAddress && token.chainId === chainId
-    )
-    return token
-  }, [chainId, tokenAddress, tokens])
+  const token = useMemo(
+    () =>
+      chainId && tokenAddress
+        ? allTokens?.[chainId]?.find(
+            (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
+          )
+        : undefined,
+    [allTokens, chainId, tokenAddress]
+  )
 
-  const tokenSearchEnabled = !isLoading && !token
-  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(chainId, tokenAddress, tokenSearchEnabled)
+  const tokenSearchEnabled =
+    !!chainId && !!tokenAddress && (latest || (!isTokensLoading && !token))
+
+  const { token: searchedToken, isLoading: isSearchLoading } = useTokenSearch(
+    chainId,
+    tokenAddress,
+    tokenSearchEnabled
+  )
+
+  const resolvedToken = latest
+    ? (searchedToken ?? token)
+    : (token ?? searchedToken)
 
   return {
-    token: token ?? searchedToken,
-    isLoading: isLoading || (tokenSearchEnabled && isSearchedTokenLoading),
+    token: resolvedToken,
+    isLoading:
+      !resolvedToken &&
+      (isTokensLoading || (tokenSearchEnabled && isSearchLoading)),
   }
 }

package/src/hooks/useTokenAddressBalance.ts

@@ -1,32 +1,27 @@
-import { useMemo } from 'react'
-import type { TokenAmount } from '../types/token.js'
-import { useTokenBalances } from './useTokenBalances.js'
+import type { TokenAmount } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { useChain } from './useChain.js'
+import { useToken } from './useToken.js'
+import { useTokenBalance } from './useTokenBalance.js'
 
 export const useTokenAddressBalance = (
   chainId?: number,
   tokenAddress?: string
 ) => {
-  const { tokens, tokensWithBalance, chain, isBalanceLoading, refetch } =
-    useTokenBalances(chainId)
+  const { chain, isLoading: isChainLoading } = useChain(chainId)
+  const { account } = useAccount({ chainType: chain?.chainType })
+  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)
 
-  const token = useMemo(() => {
-    if (tokenAddress && chainId) {
-      let token = tokensWithBalance?.find(
-        (token) => token.address === tokenAddress && token.chainId === chainId
-      )
-      if (!token) {
-        token = tokens?.find(
-          (token) => token.address === tokenAddress && token.chainId === chainId
-        )
-      }
-      return token as TokenAmount
-    }
-  }, [chainId, tokenAddress, tokens, tokensWithBalance])
+  const {
+    token: tokenBalance,
+    isLoading: isBalanceLoading,
+    refetch,
+  } = useTokenBalance(account?.address, token)
 
   return {
-    token,
+    token: tokenBalance ?? (token as TokenAmount),
     chain,
-    isLoading: isBalanceLoading,
+    isLoading: isBalanceLoading || isChainLoading || isTokenLoading,
     refetch,
   }
 }