@lifi/widget 3.21.4-alpha.0 → 3.22.0

package/src/components/ChainSelect/ChainSelect.style.tsx

@@ -1,17 +1,33 @@
 import { Box, styled } from '@mui/material'
 import { Card } from '../../components/Card/Card.js'
+import { maxChainsToShow } from '../../stores/chains/createChainOrderStore.js'
+
+const chainCardWidthPx = 52
+const chainCardHeightPx = 56
+
+// Chain grid layout settings:
+// These should remain consistent with `maxChainsToShow` to ensure
+// proper row/column distribution in the grid layout logic.
+const maxRows = 2
+const maxChainsPerRow = Math.ceil(maxChainsToShow / maxRows)
 
 export const ChainCard = styled(Card)({
   display: 'grid',
   placeItems: 'center',
-  minWidth: 52,
-  height: 56,
+  minWidth: chainCardWidthPx,
+  height: chainCardHeightPx,
 })
 
-export const ChainContainer = styled(Box)(({ theme }) => ({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
-  gridAutoRows: '56px',
-  justifyContent: 'space-between',
-  gap: theme.spacing(1.5),
-}))
+export const ChainContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'itemCount',
+})<{ itemCount: number }>(({ theme, itemCount }) => {
+  const rowCount = Math.min(Math.ceil(itemCount / maxChainsPerRow), maxRows)
+  const columnsPerRow = Math.ceil(itemCount / rowCount)
+  return {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${rowCount > 1 ? columnsPerRow : 'auto-fit'}, minmax(${chainCardWidthPx}px, 1fr))`,
+    gridTemplateRows: `repeat(${rowCount}, ${chainCardHeightPx}px)`,
+    justifyContent: 'space-between',
+    gap: theme.spacing(1.5),
+  }
+})

package/src/components/ChainSelect/ChainSelect.tsx

@@ -50,8 +50,11 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
   // When there is less than 10 chains we don't care about the order
   const chainsToShow = chainsToHide > 0 ? getChains() : chains
 
+  // Number of tiles to show in the grid
+  const tilesCount = (chainsToShow?.length ?? 0) + (chainsToHide > 0 ? 1 : 0)
+
   return (
-    <ChainContainer>
+    <ChainContainer itemCount={tilesCount}>
       {isLoading
         ? Array.from({ length: maxChainsToOrder }).map((_, index) => (
             <Skeleton

package/src/components/Messages/MissingRouteRequiredAccountMessage.tsx

@@ -0,0 +1,44 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import Wallet from '@mui/icons-material/Wallet'
+import type { BoxProps } from '@mui/material'
+import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { shortenAddress } from '../../utils/wallet.js'
+import { AlertMessage } from './AlertMessage.js'
+
+interface MissingRouteRequiredAccountMessageProps extends BoxProps {
+  chain?: ExtendedChain
+  address?: string
+}
+
+export const MissingRouteRequiredAccountMessage: React.FC<
+  MissingRouteRequiredAccountMessageProps
+> = ({ chain, address, ...props }) => {
+  const { t } = useTranslation()
+
+  if (!chain) {
+    return null
+  }
+
+  return (
+    <AlertMessage
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            px: 1,
+            color: 'text.primary',
+          }}
+        >
+          {t('info.message.missingRouteRequiredAccount', {
+            chainName: chain.name,
+            address: address ? `(${shortenAddress(address)})` : '',
+          })}
+        </Typography>
+      }
+      icon={<Wallet />}
+      multiline
+      {...props}
+    />
+  )
+}

package/src/components/Messages/WarningMessages.tsx

@@ -4,6 +4,7 @@ import { Collapse } from '@mui/material'
 import { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
 import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
+import { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'
 import { ToAddressRequiredMessage } from './ToAddressRequiredMessage.js'
 import { useMessageQueue } from './useMessageQueue.js'
 
@@ -21,6 +22,14 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
 
   const getMessage = () => {
     switch (messages[0]?.id) {
+      case 'MISSING_ROUTE_REQUIRED_ACCOUNT':
+        return (
+          <MissingRouteRequiredAccountMessage
+            chain={messages[0].props?.chain}
+            address={messages[0].props?.address}
+            {...props}
+          />
+        )
       case 'INSUFFICIENT_FUNDS':
         return <FundsSufficiencyMessage {...props} />
       case 'INSUFFICIENT_GAS':

package/src/components/Messages/useMessageQueue.ts

@@ -2,6 +2,7 @@ import type { Route } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
 import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 
 interface QueuedMessage {
@@ -21,21 +22,31 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     useFromTokenSufficiency(route)
   const { insufficientGas, isLoading: isGasSufficiencyLoading } =
     useGasSufficiency(route)
+  const { missingChain, missingAccountAddress } =
+    useRouteRequiredAccountConnection(route)
 
   const messageQueue = useMemo(() => {
     const queue: QueuedMessage[] = []
 
+    if (missingChain) {
+      queue.push({
+        id: 'MISSING_ROUTE_REQUIRED_ACCOUNT',
+        priority: 1,
+        props: { chain: missingChain, address: missingAccountAddress },
+      })
+    }
+
     if (insufficientFromToken) {
       queue.push({
         id: 'INSUFFICIENT_FUNDS',
-        priority: 1,
+        priority: 2,
       })
     }
 
     if (insufficientGas?.length) {
       queue.push({
         id: 'INSUFFICIENT_GAS',
-        priority: 2,
+        priority: 3,
         props: { insufficientGas },
       })
     }
@@ -43,14 +54,14 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     if (accountNotDeployedAtDestination && !allowInteraction) {
       queue.push({
         id: 'ACCOUNT_NOT_DEPLOYED',
-        priority: 3,
+        priority: 4,
       })
     }
 
     if (requiredToAddress && !toAddress) {
       queue.push({
         id: 'TO_ADDRESS_REQUIRED',
-        priority: 4,
+        priority: 5,
       })
     }
 
@@ -62,6 +73,8 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     accountNotDeployedAtDestination,
     requiredToAddress,
     toAddress,
+    missingChain,
+    missingAccountAddress,
   ])
 
   return {

package/src/components/RouteCard/RouteCard.tsx

@@ -26,13 +26,13 @@ export const RouteCard: React.FC<
   route,
   active,
   variant = 'default',
-  expanded: defaulExpanded,
+  expanded: defaultExpanded,
   ...other
 }) => {
   const { t } = useTranslation()
   const { subvariant, subvariantOptions, routeLabels, hiddenUI } =
     useWidgetConfig()
-  const [cardExpanded, setCardExpanded] = useState(defaulExpanded)
+  const [cardExpanded, setCardExpanded] = useState(defaultExpanded)
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
     e.stopPropagation()
@@ -103,7 +103,7 @@ export const RouteCard: React.FC<
             HiddenUI.RouteTokenDescription
           )}
         />
-        {!defaulExpanded ? (
+        {!defaultExpanded ? (
           <CardIconButton onClick={handleExpand} size="small">
             {cardExpanded ? (
               <ExpandLess fontSize="inherit" />

package/src/components/TokenList/TokenListItem.tsx

@@ -85,7 +85,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   isBalanceLoading,
 }) => {
   const { t } = useTranslation()
-  const { getTokenAddressLink } = useExplorer()
+  const { getAddressLink } = useExplorer()
 
   const container = useRef(null)
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
@@ -184,7 +184,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
                 <IconButton
                   size="small"
                   LinkComponent={Link}
-                  href={getTokenAddressLink(tokenAddress!, chain)}
+                  href={getAddressLink(tokenAddress!, chain)}
                   target="_blank"
                   rel="nofollow noreferrer"
                   onClick={(e) => e.stopPropagation()}

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.21.4-alpha.0'
+export const version = '3.22.0'

package/src/hooks/useAvailableChains.ts

@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { isItemAllowed } from '../utils/item.js'
+import { getQueryKey } from '../utils/queries.js'
 
 export type GetChainById = (
   chainId?: number,
@@ -18,11 +19,12 @@ const supportedChainTypes = [
 ]
 
 export const useAvailableChains = (chainTypes?: ChainType[]) => {
-  const { chains } = useWidgetConfig()
+  const { chains, keyPrefix } = useWidgetConfig()
   // const { providers } = useHasExternalWalletProvider();
+
   const { data, isLoading } = useQuery({
     queryKey: [
-      'chains',
+      getQueryKey('chains', keyPrefix),
       // providers,
       chains?.types,
       chains?.allow,

package/src/hooks/useExplorer.ts

@@ -1,4 +1,4 @@
-import type { Chain, EVMChain } from '@lifi/sdk'
+import type { Chain } from '@lifi/sdk'
 import { ChainId } from '@lifi/sdk'
 import { lifiExplorerUrl } from '../config/constants.js'
 import { useAvailableChains } from '../hooks/useAvailableChains.js'
@@ -21,16 +21,37 @@ export const useExplorer = () => {
   const { explorerUrls } = useWidgetConfig()
   const { getChainById } = useAvailableChains()
 
-  const getBaseUrl = (chain: Chain) => {
-    const baseUrl = explorerUrls?.[chain.id]
-      ? explorerUrls[chain.id][0]
-      : chain.metamask.blockExplorerUrls[0]
+  const getExplorerConfig = (chain?: Chain | number) => {
+    const resolvedChain = Number.isFinite(chain)
+      ? getChainById(chain as number)
+      : (chain as Chain)
 
-    return sanitiseBaseUrl(baseUrl)
-  }
+    const explorerUrl =
+      (resolvedChain
+        ? (explorerUrls?.[resolvedChain.id]?.[0] ??
+          resolvedChain.metamask.blockExplorerUrls[0])
+        : explorerUrls?.internal?.[0]) || lifiExplorerUrl
+
+    const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
+
+    const defaultTxPath = resolvedChain?.id === ChainId.SUI ? 'txblock' : 'tx'
+    const defaultAddressPath =
+      resolvedChain?.id === ChainId.SUI ? 'coin' : 'address'
+    const txPath =
+      typeof explorerUrl === 'string'
+        ? defaultTxPath
+        : explorerUrl.txPath || defaultTxPath
+    const addressPath =
+      typeof explorerUrl === 'string'
+        ? defaultAddressPath
+        : explorerUrl.addressPath || defaultAddressPath
 
-  const resolveChain = (chain: Chain | number) =>
-    Number.isFinite(chain) ? getChainById(chain as number) : (chain as Chain)
+    return {
+      url: sanitiseBaseUrl(url),
+      txPath,
+      addressPath,
+    }
+  }
 
   const getTransactionLink = ({
     txHash,
@@ -40,40 +61,18 @@ export const useExplorer = () => {
     if (!txHash && txLink) {
       return txLink
     }
-    if (!chain) {
-      const baseUrl = explorerUrls?.internal?.[0]
-        ? sanitiseBaseUrl(explorerUrls?.internal[0])
-        : lifiExplorerUrl
-      return `${baseUrl}/tx/${txHash}`
-    }
-    const resolvedChain = resolveChain(chain)
-    const txPathSegment = resolvedChain?.id === ChainId.SUI ? 'txblock' : 'tx'
-    return `${resolvedChain ? getBaseUrl(resolvedChain) : lifiExplorerUrl}/${txPathSegment}/${txHash}`
-  }
-
-  const getAddressLink = (address: string, chain?: Chain | number) => {
-    if (!chain) {
-      const baseUrl = explorerUrls?.internal?.[0]
-        ? sanitiseBaseUrl(explorerUrls?.internal[0])
-        : lifiExplorerUrl
-      return `${baseUrl}/address/${address}`
-    }
 
-    const resolvedChain = resolveChain(chain)
-    return `${resolvedChain ? getBaseUrl(resolvedChain) : lifiExplorerUrl}/address/${address}`
+    const config = getExplorerConfig(chain)
+    return `${config.url}/${config.txPath}/${txHash}`
   }
 
-  const getTokenAddressLink = (address: string, chain?: Chain | number) => {
-    const link = getAddressLink(address, chain)
-    if (chain === ChainId.SUI || (chain as EVMChain)?.id === ChainId.SUI) {
-      return link.replace('address', 'coin')
-    }
-    return link
+  const getAddressLink = (address: string, chain?: Chain | number) => {
+    const config = getExplorerConfig(chain)
+    return `${config.url}/${config.addressPath}/${address}`
   }
 
   return {
     getTransactionLink,
     getAddressLink,
-    getTokenAddressLink,
   }
 }

package/src/hooks/useFromTokenSufficiency.ts

@@ -2,8 +2,10 @@ import type { RouteExtended } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
 import { parseUnits } from 'viem'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { isRouteDone } from '../stores/routes/utils.js'
+import { getQueryKey } from '../utils/queries.js'
 import { useTokenAddressBalance } from './useTokenAddressBalance.js'
 import { getTokenBalancesWithRetry } from './useTokenBalance.js'
 
@@ -15,6 +17,7 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
     'fromToken',
     'fromAmount'
   )
+  const { keyPrefix } = useWidgetConfig()
 
   let chainId = fromChainId
   let tokenAddress = fromTokenAddress
@@ -33,7 +36,7 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
 
   const { data: insufficientFromToken, isLoading } = useQuery({
     queryKey: [
-      'from-token-sufficiency-check',
+      getQueryKey('from-token-sufficiency-check', keyPrefix),
       account.address,
       chainId,
       tokenAddress,

package/src/hooks/useGasRecommendation.ts

@@ -1,5 +1,7 @@
 import { type ChainId, getGasRecommendation } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
 const refetchInterval = 60_000
@@ -10,6 +12,7 @@ export const useGasRecommendation = (
   fromToken?: string
 ) => {
   const { chains } = useAvailableChains()
+  const { keyPrefix } = useWidgetConfig()
 
   const checkRecommendationLiFuel =
     Boolean(toChainId) &&
@@ -21,7 +24,12 @@ export const useGasRecommendation = (
     Boolean(toChainId) && !fromChain && !fromToken && Boolean(chains?.length)
 
   return useQuery({
-    queryKey: ['gas-recommendation', toChainId, fromChain, fromToken],
+    queryKey: [
+      getQueryKey('gas-recommendation', keyPrefix),
+      toChainId,
+      fromChain,
+      fromToken,
+    ],
     queryFn: async ({
       queryKey: [_, toChainId, fromChain, fromToken],
       signal,

package/src/hooks/useGasSufficiency.ts

@@ -1,7 +1,10 @@
-import type { EVMChain, RouteExtended, Token } from '@lifi/sdk'
-import { isRelayerStep } from '@lifi/sdk'
+import type { EVMChain, RouteExtended, Token, TokenAmount } from '@lifi/sdk'
+import { ChainType, isRelayerStep } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
 import { useAvailableChains } from './useAvailableChains.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 import { getTokenBalancesWithRetry } from './useTokenBalance.js'
@@ -19,30 +22,64 @@ const refetchInterval = 30_000
 
 export const useGasSufficiency = (route?: RouteExtended) => {
   const { getChainById } = useAvailableChains()
-  const { account } = useAccount({
-    chainType: getChainById(route?.fromChainId)?.chainType,
+  const { account: EVMAccount, accounts } = useAccount({
+    chainType: ChainType.EVM,
   })
+  const { keyPrefix } = useWidgetConfig()
+
+  const { relevantAccounts, relevantAccountsQueryKey } = useMemo(() => {
+    const chainTypes = route?.steps.reduce((acc, step) => {
+      const chainType = getChainById(step.action.fromChainId)?.chainType
+      if (chainType) {
+        acc.add(chainType)
+      }
+      return acc
+    }, new Set<ChainType>())
+
+    const relevantAccounts = accounts.filter(
+      (account) =>
+        account.isConnected &&
+        account.address &&
+        chainTypes?.has(account.chainType)
+    )
+    return {
+      relevantAccounts,
+      relevantAccountsQueryKey: relevantAccounts
+        .map((account) => account.address)
+        .join(','),
+    }
+  }, [accounts, route?.steps, getChainById])
 
   const { isContractAddress, isLoading: isContractAddressLoading } =
-    useIsContractAddress(account.address, route?.fromChainId, account.chainType)
+    useIsContractAddress(
+      EVMAccount.address,
+      route?.fromChainId,
+      EVMAccount.chainType
+    )
 
   const { data: insufficientGas, isLoading } = useQuery({
     queryKey: [
-      'gas-sufficiency-check',
-      account.address,
+      getQueryKey('gas-sufficiency-check', keyPrefix),
+      relevantAccountsQueryKey,
       route?.id,
       isContractAddress,
     ] as const,
-    queryFn: async ({ queryKey: [, accountAddress] }) => {
+    queryFn: async () => {
       if (!route) {
         return
       }
 
-      // If we have a relayer step with a permit (EIP-2612) for the from token, we don't need to check for gas sufficiency
-      if (
-        isRelayerStep(route.steps[0]) &&
-        route.steps[0].typedData.some((t) => t.primaryType === 'Permit')
-      ) {
+      // Filter out steps that are relayer steps or have primaryType 'Permit' or 'Order'
+      const filteredSteps = route.steps.filter(
+        (step) =>
+          !isRelayerStep(step) &&
+          !step.typedData?.some(
+            (t) => t.primaryType === 'Permit' || t.primaryType === 'Order'
+          )
+      )
+
+      // If all steps are filtered out, we don't need to check for gas sufficiency
+      if (!filteredSteps.length) {
         return
       }
 
@@ -51,7 +88,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
         .flatMap((step) => step.includedSteps)
         .some((includedStep) => includedStep.tool === 'gasZip')
 
-      const gasCosts = route.steps
+      const gasCosts = filteredSteps
         .filter((step) => !step.execution || step.execution.status !== 'DONE')
         .reduce(
           (groupedGasCosts, step) => {
@@ -70,6 +107,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
                   ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount
                   : gasCostAmount,
                 token,
+                chain: getChainById(token.chainId),
               }
             }
             // Add fees paid in native tokens to gas sufficiency check (included: false)
@@ -88,11 +126,12 @@ export const useGasSufficiency = (route?: RouteExtended) => {
                   ? groupedGasCosts[token.chainId].gasAmount + feeCostAmount
                   : feeCostAmount,
                 token,
-              } as any
+                chain: getChainById(token.chainId),
+              }
             }
             return groupedGasCosts
           },
-          {} as Record<number, GasSufficiency>
+          {} as Record<string, GasSufficiency>
         )
 
       // Check whether we are sending a native token
@@ -104,15 +143,30 @@ export const useGasSufficiency = (route?: RouteExtended) => {
           gasCosts[route.fromChainId]?.gasAmount + BigInt(route.fromAmount)
       }
 
-      const tokenBalances = await getTokenBalancesWithRetry(
-        accountAddress!,
-        Object.values(gasCosts).map((item) => item.token)
+      const gasCostsValues = Object.values(gasCosts)
+
+      const balanceChecks = await Promise.allSettled(
+        relevantAccounts.map((account) => {
+          const relevantTokens = gasCostsValues
+            .filter((gasCost) => gasCost.chain?.chainType === account.chainType)
+            .map((item) => item.token)
+
+          return getTokenBalancesWithRetry(account.address!, relevantTokens)
+        })
       )
 
+      const tokenBalances = balanceChecks
+        .filter(
+          (result): result is PromiseFulfilledResult<TokenAmount[]> =>
+            result.status === 'fulfilled' && Boolean(result.value)
+        )
+        .flatMap((result) => result.value)
+
       if (!tokenBalances?.length) {
         return
       }
-      ;[route.fromChainId, route.toChainId].forEach((chainId) => {
+
+      Object.keys(gasCosts).forEach((chainId) => {
         if (gasCosts[chainId]) {
           const gasTokenBalance =
             tokenBalances?.find(
@@ -135,7 +189,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             ...gasCosts[chainId],
             insufficient,
             insufficientAmount,
-            chain: insufficient ? getChainById(chainId) : undefined,
+            chain: insufficient ? getChainById(Number(chainId)) : undefined,
           }
         }
       })
@@ -150,7 +204,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
     enabled: Boolean(
       !isContractAddress &&
         !isContractAddressLoading &&
-        account.address &&
+        relevantAccounts.length > 0 &&
         route
     ),
     refetchInterval,

package/src/hooks/useIsBatchingSupported.ts

@@ -1,16 +1,24 @@
 import { ChainType, isBatchingSupported } from '@lifi/sdk'
 import type { ExtendedChain } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
 
 export function useIsBatchingSupported(
   chain?: ExtendedChain,
   address?: string
 ) {
+  const { keyPrefix } = useWidgetConfig()
+
   const enabled = Boolean(
     chain && chain.chainType === ChainType.EVM && !!address
   )
   const { data, isLoading } = useQuery({
-    queryKey: ['isBatchingSupported', chain?.id, address],
+    queryKey: [
+      getQueryKey('isBatchingSupported', keyPrefix),
+      chain?.id,
+      address,
+    ],
     queryFn: () => {
       return isBatchingSupported({ chainId: chain!.id })
     },

package/src/hooks/useIsContractAddress.ts

@@ -22,7 +22,7 @@ export const useIsContractAddress = (
     query: {
       refetchInterval: 300_000,
       staleTime: 300_000,
-      enabled: Boolean(chainType === ChainType.EVM && chainId),
+      enabled: chainType === ChainType.EVM && !!chainId && !!address,
     },
   })