@lifi/widget 3.40.11 → 4.0.0-alpha.2

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -23,6 +23,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   isLoading,
   isBalanceLoading,
   showCategories,
+  showPinnedTokens,
   onClick,
   isAllNetworks,
 }) => {
@@ -62,29 +63,33 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   const estimateSize = useCallback(
     (index: number) => {
       const currentToken = tokens[index]
-
-      // Base size for TokenListItem
+      const previousToken = tokens[index - 1]
       let size = tokenItemHeight
 
-      // Early return if categories are not shown
+      // Pinned tokens (always shown, even in all networks mode)
+      if (currentToken.pinned && index === 0) {
+        size += 24
+      }
+      if (previousToken?.pinned && !currentToken.pinned) {
+        size += 32
+      }
+
       if (!showCategories) {
         return size
       }
 
-      const previousToken = tokens[index - 1]
-
-      // Adjust size for the first featured token
-      if (currentToken.featured && index === 0) {
+      if (currentToken.featured && !currentToken.pinned && index === 0) {
         size += 24
       }
 
-      // Adjust size based on changes between the current and previous tokens
-      const isCategoryChanged =
-        (previousToken?.amount && !currentToken.amount) ||
-        (previousToken?.featured && !currentToken.featured) ||
-        (previousToken?.popular && !currentToken.popular)
-
-      if (isCategoryChanged) {
+      // Category transition (excluding pinned tokens)
+      const isNotPinned = !currentToken.pinned && !previousToken?.pinned
+      if (
+        isNotPinned &&
+        ((previousToken?.amount && !currentToken.amount) ||
+          (previousToken?.featured && !currentToken.featured) ||
+          (previousToken?.popular && !currentToken.popular))
+      ) {
         size += 32
       }
 
@@ -93,7 +98,6 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
     [tokens, showCategories]
   )
 
-  // Chunk the tokens for infinite loading simulation
   const virtualizerConfig = useMemo(
     () => ({
       count: tokens.length,
@@ -135,47 +139,64 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
         {getVirtualItems().map((item) => {
           const currentToken = tokens[item.index]
           const previousToken: TokenAmount | undefined = tokens[item.index - 1]
-
           const chain = chainsSet?.get(currentToken.chainId)
 
-          const isFirstFeaturedToken = currentToken.featured && item.index === 0
-
-          const isTransitionFromFeaturedTokens =
-            previousToken?.featured && !currentToken.featured
+          const isNotPinned = !currentToken.pinned
+          const isFirstPinnedToken = currentToken.pinned && item.index === 0
+          const isTransitionFromPinned = previousToken?.pinned && isNotPinned
 
+          // Category transitions (excluding pinned)
+          const isTransitionFromFeatured =
+            previousToken?.featured && !currentToken.featured && isNotPinned
           const isTransitionFromMyTokens =
-            previousToken?.amount && !currentToken.amount
-
-          const isTransitionToMyTokens =
-            isTransitionFromFeaturedTokens && currentToken.amount
-
-          const isTransitionToPopularTokens =
-            (isTransitionFromFeaturedTokens || isTransitionFromMyTokens) &&
-            currentToken.popular
-
-          const shouldShowAllTokensCategory =
-            isTransitionFromMyTokens ||
-            isTransitionFromFeaturedTokens ||
-            (previousToken?.popular && !currentToken.popular)
-
-          const startAdornmentLabel =
-            !isAllNetworks && showCategories
-              ? (() => {
-                  if (isFirstFeaturedToken) {
-                    return t('main.featuredTokens')
-                  }
-                  if (isTransitionToMyTokens) {
-                    return t('main.myTokens')
-                  }
-                  if (isTransitionToPopularTokens) {
-                    return t('main.popularTokens')
-                  }
-                  if (shouldShowAllTokensCategory) {
-                    return t('main.allTokens')
-                  }
-                  return null
-                })()
-              : null
+            previousToken?.amount && !currentToken.amount && isNotPinned
+          const isTransitionFromPopular =
+            previousToken?.popular && !currentToken.popular && isNotPinned
+
+          // Determine which category label to show
+          const startAdornmentLabel = (() => {
+            if (showPinnedTokens && isFirstPinnedToken) {
+              return t('main.pinnedTokens')
+            }
+            if (showPinnedTokens && !showCategories && isTransitionFromPinned) {
+              return t('main.allTokens')
+            }
+            if (!showCategories) {
+              return null
+            }
+
+            if (
+              (isTransitionFromPinned && currentToken.featured) ||
+              (currentToken.featured && isNotPinned && item.index === 0)
+            ) {
+              return t('main.featuredTokens')
+            }
+            if (
+              (isTransitionFromFeatured || isTransitionFromPinned) &&
+              currentToken.amount &&
+              isNotPinned
+            ) {
+              return t('main.myTokens')
+            }
+            if (
+              (isTransitionFromFeatured ||
+                isTransitionFromMyTokens ||
+                isTransitionFromPinned) &&
+              currentToken.popular &&
+              isNotPinned
+            ) {
+              return t('main.popularTokens')
+            }
+            if (
+              isTransitionFromMyTokens ||
+              isTransitionFromFeatured ||
+              isTransitionFromPinned ||
+              isTransitionFromPopular
+            ) {
+              return t('main.allTokens')
+            }
+            return null
+          })()
 
           const isSelected =
             selectedTokenAddress === currentToken.address &&
@@ -200,7 +221,13 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
                       fontWeight: 600,
                       lineHeight: '16px',
                       px: 1.5,
-                      pt: isFirstFeaturedToken ? 0 : 1,
+                      pt:
+                        isFirstPinnedToken ||
+                        (currentToken.featured &&
+                          isNotPinned &&
+                          item.index === 0)
+                          ? 0
+                          : 1,
                       pb: 1,
                     }}
                   >

package/src/components/TokenList/types.ts

@@ -4,10 +4,8 @@ import type { FormType } from '../../stores/form/types.js'
 import type { TokenAmount } from '../../types/token.js'
 
 export interface TokenListProps {
-  parentRef: RefObject<HTMLElement | null>
   formType: FormType
-  height: number
-  onClick?(): void
+  headerRef: RefObject<HTMLElement | null>
 }
 
 export interface VirtualizedTokenListProps {
@@ -17,6 +15,7 @@ export interface VirtualizedTokenListProps {
   isBalanceLoading: boolean
   chainId?: number
   showCategories?: boolean
+  showPinnedTokens?: boolean
   onClick(tokenAddress: string, chainId?: number): void
   selectedTokenAddress?: string
   isAllNetworks: boolean

package/src/components/TokenList/useTokenSelect.ts

@@ -12,12 +12,7 @@ import type { DisabledUI } from '../../types/widget.js'
 import { isItemAllowed } from '../../utils/item.js'
 
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
-  const {
-    subvariant,
-    disabledUI,
-    chains: chainsConfig,
-    subvariantOptions,
-  } = useWidgetConfig()
+  const { subvariant, disabledUI, chains: chainsConfig } = useWidgetConfig()
   const splitSubvariant = useSplitSubvariantStore((store) => store.state)
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
@@ -63,7 +58,7 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
 
       if (
         (isSameTokenTransfer || isBridgeToSameChain) &&
-        (subvariant !== 'custom' || subvariantOptions?.custom === 'fund')
+        subvariant !== 'custom'
       ) {
         setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
           isDirty: true,
@@ -125,7 +120,6 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       splitSubvariant,
       tokenKey,
       chainsConfig,
-      subvariantOptions,
     ]
   )
 }

package/src/components/TokenRate/TokenRate.tsx

@@ -1,8 +1,7 @@
-import type { RouteExtended } from '@lifi/sdk'
+import { formatUnits, type RouteExtended } from '@lifi/sdk'
 import type { TypographyProps } from '@mui/material'
 import type { MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import { create } from 'zustand'
 import { TokenRateTypography } from './TokenRate.style.js'
 

package/src/components/TransactionDetails.tsx

@@ -1,5 +1,5 @@
 import type { RouteExtended } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
@@ -31,6 +31,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   const [cardExpanded, setCardExpanded] = useState(
     defaultUI?.transactionDetailsExpanded ?? false
   )
+  const { isGaslessStep } = useEthereumContext()
 
   const toggleCard = () => {
     setCardExpanded((cardExpanded) => !cardExpanded)
@@ -71,7 +72,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       ) ?? 0
   }
 
-  const hasGaslessSupport = route.steps.every((step) => isGaslessStep(step))
+  const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))
 
   const showIntegratorFeeCollectionDetails =
     (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.40.11'
+export const version = '4.0.0-alpha.2'

package/src/hooks/useActionMessage.ts

@@ -0,0 +1,33 @@
+import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'
+import { useTranslation } from 'react-i18next'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getActionMessage } from '../utils/getActionMessage.js'
+import { getErrorMessage } from '../utils/getErrorMessage.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+export const useActionMessage = (
+  step?: LiFiStepExtended,
+  action?: ExecutionAction
+) => {
+  const { subvariant, subvariantOptions } = useWidgetConfig()
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+
+  if (!step || !action) {
+    return {}
+  }
+
+  if (action.status === 'FAILED') {
+    return getErrorMessage(t, getChainById, step, action)
+  }
+
+  return getActionMessage(
+    t,
+    step,
+    action.type,
+    action.status,
+    action.substatus,
+    subvariant,
+    subvariantOptions
+  )
+}

package/src/hooks/useAddressActivity.ts

@@ -1,7 +1,8 @@
-import type { Address } from 'viem'
-import { isAddress } from 'viem'
-import { useTransactionCount } from 'wagmi'
+import { ChainType } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
+import { useQuery } from '@tanstack/react-query'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useAvailableChains } from './useAvailableChains.js'
 
 interface AddressActivity {
   hasActivity: boolean
@@ -9,25 +10,32 @@ interface AddressActivity {
   isFetched: boolean
   toAddress: string | undefined
 }
-
 export const useAddressActivity = (chainId?: number): AddressActivity => {
+  const { getChainById } = useAvailableChains()
   const [toAddress, toChainId] = useFieldValues('toAddress', 'toChain')
+  const { getTransactionCount } = useEthereumContext()
 
   const destinationChainId = chainId ?? toChainId
+  const toChain = getChainById(destinationChainId)
 
   const {
     data: transactionCount,
     isLoading,
     isFetched,
     error,
-  } = useTransactionCount({
-    address: toAddress as Address,
-    chainId: destinationChainId,
-    query: {
-      enabled: Boolean(toAddress && destinationChainId && isAddress(toAddress)),
-      refetchInterval: 300_000,
-      staleTime: 300_000,
+  } = useQuery({
+    queryKey: ['getTransactionCount', toAddress, destinationChainId],
+    queryFn: async () => {
+      const count = await getTransactionCount?.(destinationChainId!, toAddress!)
+      return count ?? null
     },
+    refetchInterval: 300_000,
+    staleTime: 300_000,
+    enabled:
+      toChain?.chainType === ChainType.EVM &&
+      !!destinationChainId &&
+      !!toAddress &&
+      !!getTransactionCount,
   })
 
   return {

package/src/hooks/useAddressValidation.ts

@@ -1,8 +1,9 @@
 import type { Chain, ChainType } from '@lifi/sdk'
 import { getNameServiceAddress } from '@lifi/sdk'
+import { useChainTypeFromAddress } from '@lifi/widget-provider'
 import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { getChainTypeFromAddress } from '../utils/chainType.js'
+import { useSDKClient } from '../providers/SDKClientProvider'
 
 export enum AddressType {
   Address = 0,
@@ -29,6 +30,8 @@ type InvalidResponse = {
 
 export const useAddressValidation = () => {
   const { t } = useTranslation()
+  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const sdkClient = useSDKClient()
 
   const { mutateAsync: validateAddress, isPending: isValidating } = useMutation(
     {
@@ -52,7 +55,11 @@ export const useAddressValidation = () => {
             }
           }
 
-          const address = await getNameServiceAddress(value, chainType)
+          const address = await getNameServiceAddress(
+            sdkClient,
+            value,
+            chainType
+          )
 
           if (address) {
             const _chainType = getChainTypeFromAddress(address)

package/src/hooks/useAvailableChains.ts

@@ -1,8 +1,10 @@
 import type { ExtendedChain } from '@lifi/sdk'
-import { ChainType, config, getChains } from '@lifi/sdk'
+import { ChainType, createClient, getChains } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
-import { useCallback } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { WidgetConfig } from '../types/widget.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
@@ -18,41 +20,67 @@ const supportedChainTypes = [
   ChainType.MVM,
 ]
 
-export const useAvailableChains = (chainTypes?: ChainType[]) => {
-  const { chains, keyPrefix } = useWidgetConfig()
-  // const { providers } = useHasExternalWalletProvider();
+export const useAvailableChains = (
+  chainTypes?: ChainType[],
+  widgetConfig?: WidgetConfig
+) => {
+  const { chains: internalChains, keyPrefix: internalKeyPrefix } =
+    useWidgetConfig()
+  const internalClient = useSDKClient()
+
+  const externalClient = useMemo(() => {
+    if (!widgetConfig) {
+      return undefined
+    }
+    return createClient({
+      ...widgetConfig.sdkConfig,
+      apiKey: widgetConfig.apiKey,
+      integrator: widgetConfig.integrator ?? window?.location.hostname,
+    })
+  }, [widgetConfig])
+
+  // Overwrite widget config if passed as param
+  const keyPrefix = widgetConfig?.keyPrefix ?? internalKeyPrefix
+  const chains = widgetConfig?.chains ?? internalChains
 
   const { data, isLoading } = useQuery({
     queryKey: [
       getQueryKey('chains', keyPrefix),
-      // providers,
       chains?.types,
       chains?.allow,
       chains?.deny,
       chains?.from,
       chains?.to,
+      !!externalClient,
     ] as const,
     queryFn: async ({ queryKey: [, chainTypesConfig] }) => {
       const chainsConfigSets = getConfigItemSets(
         chainTypesConfig,
         (chains) => new Set(chains)
       )
-      const chainTypesRequest = supportedChainTypes
-        // providers.length > 0 ? providers : supportedChainTypes
-        .filter((chainType) =>
-          isItemAllowedForSets(chainType, chainsConfigSets)
-        )
-
-      const availableChains = await getChains({
+      const chainTypesRequest = supportedChainTypes.filter((chainType) =>
+        isItemAllowedForSets(chainType, chainsConfigSets)
+      )
+      const client = externalClient ?? internalClient
+      const availableChains = await getChains(client, {
         chainTypes: chainTypes || chainTypesRequest,
       })
-      config.setChains(availableChains)
+      client.setChains(availableChains)
       return availableChains
     },
     refetchInterval: 300_000,
     staleTime: 300_000,
   })
 
+  // Ensure the current internal client always has chains, even when:
+  // - the query result came from cache (external call populated it first)
+  // - the client was recreated due to config changes (stale closure in queryFn)
+  useEffect(() => {
+    if (data && !externalClient) {
+      internalClient.setChains(data)
+    }
+  }, [data, externalClient, internalClient])
+
   const getChainById: GetChainById = useCallback(
     (chainId?: number, chains: ExtendedChain[] | undefined = data) => {
       if (!chainId) {

package/src/hooks/useExplorer.ts

@@ -1,6 +1,5 @@
 import type { Chain } from '@lifi/sdk'
-import { ChainId, ChainType } from '@lifi/sdk'
-import { isHex } from 'viem'
+import { ChainId, ChainType, isHex } from '@lifi/sdk'
 import { internalExplorerUrl } from '../config/constants.js'
 import { useAvailableChains } from '../hooks/useAvailableChains.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'

package/src/hooks/useFilteredByTokenBalances.ts

@@ -7,6 +7,7 @@ import {
 } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
@@ -20,6 +21,7 @@ export const useFilteredTokensByBalance = (
   formType?: FormType
 ) => {
   const { tokens: configTokens } = useWidgetConfig()
+  const sdkClient = useSDKClient()
 
   const evmAddress = useMemo(() => {
     const evmAccount = Object.entries(accountsWithTokens ?? {}).find(
@@ -30,7 +32,7 @@ export const useFilteredTokensByBalance = (
 
   const { data: existingBalances, isLoading } = useQuery({
     queryKey: ['existing-evm-balances', evmAddress],
-    queryFn: () => getWalletBalances(evmAddress ?? ''),
+    queryFn: () => getWalletBalances(sdkClient, evmAddress ?? ''),
     enabled: !!evmAddress,
     refetchInterval: 30_000, // 30 seconds
     staleTime: 30_000, // 30 seconds

package/src/hooks/useFromTokenSufficiency.ts

@@ -1,7 +1,7 @@
-import type { RouteExtended } from '@lifi/sdk'
+import { parseUnits, type RouteExtended } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
-import { parseUnits } from 'viem'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { isRouteDone } from '../stores/routes/utils.js'
@@ -18,6 +18,7 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
     'fromAmount'
   )
   const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
 
   let chainId = fromChainId
   let tokenAddress = fromTokenAddress
@@ -67,9 +68,11 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
         return insufficientFunds
       }
 
-      const tokenBalances = await getTokenBalancesWithRetry(accountAddress, [
-        currentAction.fromToken,
-      ])
+      const tokenBalances = await getTokenBalancesWithRetry(
+        sdkClient,
+        accountAddress,
+        [currentAction.fromToken]
+      )
 
       currentTokenBalance = tokenBalances?.[0]?.amount ?? 0n
       const insufficientFunds =

package/src/hooks/useGasRecommendation.ts

@@ -1,5 +1,6 @@
 import { type ChainId, getGasRecommendation } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { HiddenUI } from '../types/widget.js'
 import { getQueryKey } from '../utils/queries.js'
@@ -14,6 +15,7 @@ export const useGasRecommendation = (
 ) => {
   const { chains } = useAvailableChains()
   const { keyPrefix, hiddenUI } = useWidgetConfig()
+  const sdkClient = useSDKClient()
 
   const checkRecommendationLiFuel =
     Boolean(toChainId) &&
@@ -39,6 +41,7 @@ export const useGasRecommendation = (
         return null
       }
       const gasRecommendation = await getGasRecommendation(
+        sdkClient,
         {
           chainId: toChainId as ChainId,
           fromChain: fromChain as ChainId,

package/src/hooks/useGasSufficiency.ts

@@ -3,6 +3,7 @@ import { ChainType } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { HiddenUI } from '../types/widget.js'
 import { getQueryKey } from '../utils/queries.js'
@@ -27,6 +28,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
     chainType: ChainType.EVM,
   })
   const { keyPrefix, hiddenUI } = useWidgetConfig()
+  const sdkClient = useSDKClient()
 
   const { relevantAccounts, relevantAccountsQueryKey } = useMemo(() => {
     const chainTypes = route?.steps.reduce((acc, step) => {
@@ -102,12 +104,14 @@ export const useGasSufficiency = (route?: RouteExtended) => {
                   amount + BigInt(Number(gasCost.amount).toFixed(0)),
                 0n
               )
-              groupedGasCosts[token.chainId] = {
-                gasAmount: groupedGasCosts[token.chainId]
-                  ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount
-                  : gasCostAmount,
-                token,
-                chain: getChainById(token.chainId),
+              if (gasCostAmount > 0n) {
+                groupedGasCosts[token.chainId] = {
+                  gasAmount: groupedGasCosts[token.chainId]
+                    ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount
+                    : gasCostAmount,
+                  token,
+                  chain: getChainById(token.chainId),
+                }
               }
             }
             // Add fees paid in native tokens to gas sufficiency check (included: false)
@@ -121,12 +125,14 @@ export const useGasSufficiency = (route?: RouteExtended) => {
                   amount + BigInt(Number(feeCost.amount).toFixed(0)),
                 0n
               )
-              groupedGasCosts[token.chainId] = {
-                gasAmount: groupedGasCosts[token.chainId]
-                  ? groupedGasCosts[token.chainId].gasAmount + feeCostAmount
-                  : feeCostAmount,
-                token,
-                chain: getChainById(token.chainId),
+              if (feeCostAmount > 0n) {
+                groupedGasCosts[token.chainId] = {
+                  gasAmount: groupedGasCosts[token.chainId]
+                    ? groupedGasCosts[token.chainId].gasAmount + feeCostAmount
+                    : feeCostAmount,
+                  token,
+                  chain: getChainById(token.chainId),
+                }
               }
             }
             return groupedGasCosts
@@ -151,7 +157,11 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             .filter((gasCost) => gasCost.chain?.chainType === account.chainType)
             .map((item) => item.token)
 
-          return getTokenBalancesWithRetry(account.address!, relevantTokens)
+          return getTokenBalancesWithRetry(
+            sdkClient,
+            account.address!,
+            relevantTokens
+          )
         })
       )