@lifi/widget 4.8.0 → 4.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -57,19 +57,19 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^4.10.0",
-    "@lifi/wallet-management": "4.3.1",
-    "@lifi/widget-provider": "4.5.1",
+    "@lifi/sdk": "^4.11.0",
+    "@lifi/wallet-management": "4.3.2",
+    "@lifi/widget-provider": "4.6.0",
     "@mui/icons-material": "^9.4.0",
     "@mui/material": "^9.4.0",
     "@mui/system": "^9.4.0",
-    "@tanstack/react-router": "^1.170.38",
+    "@tanstack/react-router": "^1.170.41",
     "@tanstack/react-virtual": "^3.14.13",
     "eventemitter3": "^5.0.4",
     "i18next": "^26.4.2",
     "microdiff": "^1.6.0",
-    "motion": "^13.4.0",
-    "react-i18next": "^17.0.14",
+    "motion": "^14.0.0",
+    "react-i18next": "^17.0.16",
     "react-intersection-observer": "^11.0.1",
     "react-transition-group": "^4.4.5",
     "zustand": "^5.0.15"

package/src/components/AmountInputCard/AmountInputCardPair.tsx

@@ -2,6 +2,8 @@ import type { BoxProps } from '@mui/material'
 import type React from 'react'
 import type { JSX } from 'react'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { isDestinationAllowedAsSource } from '../../utils/chainType.js'
 import { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'
 import { SwapButton } from '../SwapButton/SwapButton.js'
 import { CardContainer } from './AmountInputCard.style.js'
@@ -11,8 +13,10 @@ import { SendAmountCard } from './SendAmountCard.js'
 export const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {
   // Refuel's destination is fixed to native gas, so reversing from/to is
   // meaningless — hide the swap button (and the notch mask it sits in).
-  const { mode } = useWidgetConfig()
-  const showSwapButton = mode !== 'refuel'
+  const { mode, chains } = useWidgetConfig()
+  const [toChainId] = useFieldValues('toChain')
+  const showSwapButton =
+    mode !== 'refuel' && isDestinationAllowedAsSource(toChainId, chains)
 
   return (
     <CardContainer {...props}>

package/src/components/SelectChainAndToken.tsx

@@ -3,13 +3,17 @@ import { Box } from '@mui/material'
 import { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'
 import { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { isDestinationAllowedAsSource } from '../utils/chainType.js'
 import { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'
 
 export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
-  const { disabledUI, hiddenUI, mode } = useWidgetConfig()
+  const { disabledUI, hiddenUI, mode, chains } = useWidgetConfig()
+  const [toChainId] = useFieldValues('toChain')
 
   const hiddenReverse =
     mode === 'refuel' ||
+    !isDestinationAllowedAsSource(toChainId, chains) ||
     disabledUI?.fromToken ||
     disabledUI?.toToken ||
     hiddenUI?.fromToken ||

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -50,7 +50,7 @@ export const SendToWalletButton: React.FC<
   const { selectedBookmark } = useBookmarks()
   const { setSelectedBookmark } = useBookmarkActions()
   const { accounts } = useAccount()
-  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const { getChainFromAddress } = useChainTypeFromAddress()
   const { requiredToAddress } = useToAddressRequirements()
   const disabledToAddress = disabledUI?.toAddress
   const hiddenToAddress = hiddenUI?.toAddress
@@ -65,11 +65,16 @@ export const SendToWalletButton: React.FC<
     (account) => account.address === toAddressFieldValue
   )
 
+  // A bookmark from the config or the URL may carry no chainId.
+  const detectedChain =
+    !matchingConnectedAccount &&
+    selectedBookmark?.chainId === undefined &&
+    toAddressFieldValue
+      ? getChainFromAddress(toAddressFieldValue)
+      : undefined
+
   const chainType = !matchingConnectedAccount
-    ? selectedBookmark?.chainType ||
-      (toAddressFieldValue
-        ? getChainTypeFromAddress(toAddressFieldValue)
-        : undefined)
+    ? selectedBookmark?.chainType || detectedChain?.chainType
     : undefined
 
   const chainId =
@@ -77,9 +82,9 @@ export const SendToWalletButton: React.FC<
       ? toChainId
       : matchingConnectedAccount
         ? matchingConnectedAccount.chainId
-        : chainType
-          ? defaultChainIdsByType[chainType]
-          : undefined
+        : (selectedBookmark?.chainId ??
+          detectedChain?.chainId ??
+          (chainType ? defaultChainIdsByType[chainType] : undefined))
 
   const isConnectedAccount =
     selectedBookmark?.isConnectedAccount &&

package/src/components/TokenList/useTokenSelect.ts

@@ -1,5 +1,7 @@
 import { useCallback } from 'react'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
+import { useToAddressReset } from '../../hooks/useToAddressReset.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
@@ -20,6 +22,8 @@ export const useTokenSelect = (
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
   const autoPopulateToAddress = useToAddressAutoPopulate()
+  const { tryResetToAddress } = useToAddressReset()
+  const { getChainById } = useAvailableChains()
   const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [
     state.setChain,
     state.setIsAllNetworks,
@@ -29,6 +33,7 @@ export const useTokenSelect = (
 
   return useCallback(
     (tokenAddress: string, chainId?: number) => {
+      const [toChainIdBefore] = getFieldValues('toChain')
       setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })
       const selectedChainId =
         chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]
@@ -93,6 +98,14 @@ export const useTokenSelect = (
         setChain(selectedChainId, oppositeFormType)
       }
 
+      // A token from "All networks" moves the destination without the chain select,
+      // which resets a receiver the new chain cannot take.
+      const [toChainId] = getFieldValues('toChain')
+      const toChain = getChainById(toChainId)
+      if (toChainId !== toChainIdBefore && toChain) {
+        tryResetToAddress(toChain)
+      }
+
       // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected
       autoPopulateToAddress({
         formType,
@@ -118,6 +131,8 @@ export const useTokenSelect = (
     },
     [
       autoPopulateToAddress,
+      tryResetToAddress,
+      getChainById,
       disabledUI,
       emitter,
       formType,

package/src/config/constants.ts

@@ -1,3 +1,6 @@
 export const defaultMaxHeight = 686
 
 export const internalExplorerUrl = 'https://scan.li.fi'
+
+// Fits the longest Zcash unified address in the official test vectors (509 characters).
+export const addressInputMaxLength = 512

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.8.0'
+export const version = '4.9.0'

package/src/hooks/useAccountsBalancesData.ts

@@ -1,5 +1,6 @@
 import type { TokenExtended } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
+import { useAddressForChain } from '@lifi/widget-provider'
 import { useMemo } from 'react'
 import type { FormType } from '../stores/form/types.js'
 import { useChains } from './useChains.js'
@@ -30,6 +31,7 @@ export const useAccountsBalancesData = (
   const { accounts: allAccounts, account: currentAccount } = useAccount(
     isAllNetworks ? undefined : { chainType: currentChain?.chainType }
   )
+  const { isAddressForChain } = useAddressForChain()
   const accounts = useMemo(() => {
     return isAllNetworks
       ? allAccounts
@@ -48,7 +50,9 @@ export const useAccountsBalancesData = (
         (acc, account) => {
           if (account.address) {
             const accountChains = chains?.filter(
-              (chain) => account.chainType === chain?.chainType
+              (chain) =>
+                account.chainType === chain?.chainType &&
+                isAddressForChain(account.address as string, chain)
             )
             if (accountChains) {
               const chainIdSet = new Set(accountChains.map((chain) => chain.id))
@@ -68,7 +72,7 @@ export const useAccountsBalancesData = (
         },
         {} as Record<string, Record<number, TokenExtended[]>>
       )
-  }, [accounts, chains, allTokens])
+  }, [accounts, chains, allTokens, isAddressForChain])
 
   return {
     data: accountsWithTokens,

package/src/hooks/useAddressValidation.ts

@@ -1,6 +1,9 @@
 import type { Chain, ChainType } from '@lifi/sdk'
-import { getNameServiceAddress } from '@lifi/sdk'
-import { useChainTypeFromAddress } from '@lifi/widget-provider'
+import { ChainId, getNameServiceAddress } from '@lifi/sdk'
+import {
+  useAddressForChain,
+  useChainTypeFromAddress,
+} from '@lifi/widget-provider'
 import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
@@ -12,7 +15,7 @@ export enum AddressType {
 
 type ValidationArgs = {
   value: string
-  chainType?: ChainType
+  /** Strict: the receiver must be valid on this chain. */
   chain?: Chain
 }
 
@@ -20,6 +23,7 @@ type ValidResponse = {
   address: string
   addressType: AddressType
   chainType: ChainType
+  chainId?: ChainId
   isValid: true
 }
 
@@ -35,49 +39,100 @@ export const useAddressValidation = (): {
   isValidating: boolean
 } => {
   const { t } = useTranslation()
-  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const { getChainFromAddress } = useChainTypeFromAddress()
+  const { isAddressForChain } = useAddressForChain()
   const sdkClient = useSDKClient()
 
+  const validFor = (
+    address: string,
+    addressType: AddressType,
+    chain: Chain
+  ): ValidResponse => ({
+    address,
+    addressType,
+    chainType: chain.chainType,
+    chainId: getChainFromAddress(address)?.chainId,
+    isValid: true,
+  })
+
+  const validateForChain = async (
+    value: string,
+    chain: Chain
+  ): Promise<ValidResponse | InvalidResponse> => {
+    if (isAddressForChain(value, chain)) {
+      return validFor(value, AddressType.Address, chain)
+    }
+    // A recognised address is no name to resolve.
+    if (getChainFromAddress(value)) {
+      return {
+        isValid: false,
+        error: t('error.title.walletChainTypeInvalid', {
+          chainName: chain.name,
+        }),
+      }
+    }
+    const resolved = await getNameServiceAddress(
+      sdkClient,
+      value,
+      chain.chainType
+    )
+    if (resolved && isAddressForChain(resolved, chain)) {
+      return validFor(resolved, AddressType.NameService, chain)
+    }
+    return {
+      isValid: false,
+      error:
+        chain.id === ChainId.ZEC
+          ? t('error.title.zcashAddressInvalid')
+          : t('error.title.walletAddressInvalid', {
+              context: 'chain',
+              chainName: chain.name,
+            }),
+    }
+  }
+
+  const validateWithoutChain = async (
+    value: string
+  ): Promise<ValidResponse | undefined> => {
+    const detected = getChainFromAddress(value)
+    if (detected) {
+      return {
+        address: value,
+        addressType: AddressType.Address,
+        ...detected,
+        isValid: true,
+      }
+    }
+    const address = await getNameServiceAddress(sdkClient, value)
+    const resolved = address ? getChainFromAddress(address) : undefined
+    if (address && resolved) {
+      return {
+        address,
+        addressType: AddressType.NameService,
+        ...resolved,
+        isValid: true,
+      }
+    }
+    return undefined
+  }
+
   const { mutateAsync: validateAddress, isPending: isValidating } = useMutation(
     {
       mutationFn: async ({
         value,
-        chainType,
         chain,
       }: ValidationArgs): Promise<ValidResponse | InvalidResponse> => {
         try {
           if (!value) {
             throw new Error()
           }
-
-          const _chainType = getChainTypeFromAddress(value)
-          if (_chainType) {
-            return {
-              address: value,
-              addressType: AddressType.Address,
-              chainType: _chainType,
-              isValid: true,
-            }
+          if (chain) {
+            return await validateForChain(value, chain)
           }
-
-          const address = await getNameServiceAddress(
-            sdkClient,
-            value,
-            chainType
-          )
-
-          if (address) {
-            const _chainType = getChainTypeFromAddress(address)
-            if (_chainType) {
-              return {
-                address: address,
-                addressType: AddressType.NameService,
-                chainType: _chainType,
-                isValid: true,
-              }
-            }
+          const result = await validateWithoutChain(value)
+          if (result) {
+            return result
           }
-
           throw new Error()
         } catch (_) {
           return {

package/src/hooks/useGasRefuel.ts

@@ -1,5 +1,6 @@
 import type { ExtendedChain } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
+import { useAddressForChain } from '@lifi/widget-provider'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
@@ -28,8 +29,17 @@ export const useGasRefuel = (): {
   const fromChain = getChainById(fromChainId)
 
   const { account: toAccount } = useAccount({ chainType: toChain?.chainType })
+  const { isAddressForChain } = useAddressForChain()
 
-  const effectiveToAddress = toAddress || toAccount?.address
+  // A shared chain type is not a shared format: a Bitcoin account cannot receive on ZEC.
+  const toAccountAddress =
+    toAccount?.address &&
+    toChain &&
+    isAddressForChain(toAccount.address, toChain)
+      ? toAccount.address
+      : undefined
+
+  const effectiveToAddress = toAddress || toAccountAddress
 
   const { isContractAddress: isToContractAddress } = useIsContractAddress(
     effectiveToAddress,

package/src/hooks/useRoutes.ts

@@ -9,10 +9,7 @@ import {
   parseUnits,
 } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
-import {
-  useChainTypeFromAddress,
-  useEthereumContext,
-} from '@lifi/widget-provider'
+import { useAddressForChain, useEthereumContext } from '@lifi/widget-provider'
 import {
   keepPreviousData,
   useQuery,
@@ -29,7 +26,11 @@ 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 { isCustomReceiverBlocked } from '../utils/customReceiver.js'
+import {
+  canQuoteWithToAddress,
+  isCustomReceiverBlocked,
+  isSignerInvalidReceiver,
+} from '../utils/customReceiver.js'
 import { getQueryKey } from '../utils/queries.js'
 import { updateTokenInCache } from '../utils/token.js'
 import { useChain } from './useChain.js'
@@ -138,7 +139,7 @@ export const useRoutes = ({
   const { chain: toChain } = useChain(toChainId)
   const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
     useGasRefuel()
-  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const { isAddressForChain } = useAddressForChain()
   const { isGaslessStep, disableMessageSigning } = useEthereumContext()
   const { account } = useAccount({ chainType: fromChain?.chainType })
   const { isBatchingSupported, isBatchingSupportedLoading } =
@@ -165,18 +166,22 @@ export const useRoutes = ({
     ? Boolean(account.address)
     : mode !== 'custom' || customType === 'deposit'
 
-  const effectiveFromAddress = account.address ?? quoteFromAddress
-
-  // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
-  // If toAddress is set, it must have the same chainType as toChain
-  const hasToAddressAndChainTypeSatisfied: boolean =
-    !!toChain &&
-    !!toAddress &&
-    getChainTypeFromAddress(toAddress) === toChain.chainType
-  // We need to check for toAddress only if it is set
-  const isToAddressSatisfied = toAddress
-    ? hasToAddressAndChainTypeSatisfied
-    : true
+  // Quote as if disconnected while the signer would be taken as the receiver.
+  const effectiveFromAddress = isSignerInvalidReceiver({
+    signerAddress: account.address,
+    toAddress,
+    fromChain,
+    toChain,
+    isAddressForChain,
+  })
+    ? quoteFromAddress
+    : (account.address ?? quoteFromAddress)
+
+  const isToAddressSatisfied = canQuoteWithToAddress(
+    toAddress,
+    toChain,
+    isAddressForChain
+  )
 
   // Not `effectiveFromAddress`: a quote placeholder must never match a receiver.
   const customReceiverBlocked = isCustomReceiverBlocked({

package/src/hooks/useToAddressAutoPopulate.ts

@@ -1,5 +1,5 @@
 import { useAccount } from '@lifi/wallet-management'
-import { useChainTypeFromAddress } from '@lifi/widget-provider'
+import { useAddressForChain } from '@lifi/widget-provider'
 import { useCallback } from 'react'
 import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
 import type { FormType } from '../stores/form/types.js'
@@ -24,7 +24,7 @@ export const useToAddressAutoPopulate = (): ((
   const { setSelectedBookmark } = useBookmarkActions()
   const { getChainById } = useAvailableChains()
   const { accounts } = useAccount()
-  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const { isAddressForChain } = useAddressForChain()
 
   return useCallback(
     ({
@@ -52,22 +52,18 @@ export const useToAddressAutoPopulate = (): ((
       ) {
         return
       }
-      // Identify the destination chain type based on the bridge direction ('from' or 'to')
-      const destinationChainType =
-        formType === 'from'
-          ? selectedOppositeChain.chainType
-          : selectedChain.chainType
-      // If toAddress is already selected, verify that it matches the destination chain type
-      if (selectedToAddress) {
-        const selectedToAddressChainType =
-          getChainTypeFromAddress(selectedToAddress)
-        if (destinationChainType === selectedToAddressChainType) {
-          return
-        }
+      const destinationChain =
+        formType === 'from' ? selectedOppositeChain : selectedChain
+      if (
+        selectedToAddress &&
+        isAddressForChain(selectedToAddress, destinationChain)
+      ) {
+        return
       }
-      // Find connected account compatible with the destination chain type
       const destinationAccount = accounts?.find(
-        (account) => account.chainType === destinationChainType
+        (account) =>
+          account.address &&
+          isAddressForChain(account.address, destinationChain)
       )
       // If a compatible destination account is found, set toAddress as if selecting it from the "Send to Wallet" connected wallets page
       if (destinationAccount?.address) {
@@ -89,7 +85,7 @@ export const useToAddressAutoPopulate = (): ((
       getChainById,
       setFieldValue,
       setSelectedBookmark,
-      getChainTypeFromAddress,
+      isAddressForChain,
     ]
   )
 }

package/src/hooks/useToAddressRequirements.ts

@@ -1,6 +1,6 @@
-import type { ChainType, RouteExtended } from '@lifi/sdk'
+import type { RouteExtended } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
-import { useEthereumContext } from '@lifi/widget-provider'
+import { useAddressForChain, 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'
@@ -16,7 +16,8 @@ export const useToAddressRequirements = (
   requiredToAddress: boolean
   unsupportedToAddress: boolean
   unsupportedReceiverBlocking: boolean
-  requiredToChainType: ChainType | undefined
+  /** Whether a saved or connected address can receive on the destination chain. */
+  isValidReceiver: (address?: string) => boolean
   accountNotDeployedAtDestination: boolean
   accountDeployedAtDestination: boolean
   toAddress: string | undefined
@@ -32,6 +33,7 @@ export const useToAddressRequirements = (
     'toAddress'
   )
   const { isDelegationDesignatorCode } = useEthereumContext()
+  const { isAddressForChain } = useAddressForChain()
 
   const fromChainId = route?.fromChainId ?? formFromChainId
   const toChainId = route?.toChainId ?? formToChainId
@@ -87,14 +89,27 @@ export const useToAddressRequirements = (
     receiverRequired: requiredUI?.toAddress,
   })
 
+  // A shared chain type is not a shared format: a Bitcoin signer cannot receive on ZEC.
+  const isSignerAddressInvalidAtDestination = Boolean(
+    fromAddress &&
+      fromChain &&
+      toChain &&
+      isAddressForChain(fromAddress, fromChain) &&
+      !isAddressForChain(fromAddress, toChain)
+  )
+
   const requiredToAddress = Boolean(
     (isDifferentChainType ||
       isCrossChainContractAddress ||
+      isSignerAddressInvalidAtDestination ||
       requiredUI?.toAddress) &&
       !hiddenUI?.toAddress &&
       !unsupportedToAddress
   )
 
+  const isValidReceiver = (address?: string): boolean =>
+    !toChain || (!!address && isAddressForChain(address, toChain))
+
   const accountNotDeployedAtDestination = Boolean(
     isFromContractAddress &&
       !fromContractCodeHasDelegationIndicator &&
@@ -113,7 +128,7 @@ export const useToAddressRequirements = (
     requiredToAddress,
     unsupportedToAddress,
     unsupportedReceiverBlocking,
-    requiredToChainType: toChain?.chainType,
+    isValidReceiver,
     accountNotDeployedAtDestination,
     accountDeployedAtDestination,
     toAddress,

package/src/hooks/useToAddressReset.ts

@@ -1,4 +1,5 @@
 import type { ExtendedChain } from '@lifi/sdk'
+import { useAddressForChain } from '@lifi/widget-provider'
 import { useCallback } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
@@ -12,16 +13,18 @@ export const useToAddressReset = (): {
   const { setFieldValue } = useFieldActions()
   const { selectedBookmark } = useBookmarks()
   const { setSelectedBookmark } = useBookmarkActions()
+  const { isAddressForChain } = useAddressForChain()
 
   const tryResetToAddress = useCallback(
     (toChain: ExtendedChain) => {
       const requiredToAddress = requiredUI?.toAddress
 
-      const bookmarkSatisfiesToChainType =
-        selectedBookmark?.chainType === toChain?.chainType
+      const bookmarkSatisfiesToChain = Boolean(
+        selectedBookmark && isAddressForChain(selectedBookmark.address, toChain)
+      )
 
       const shouldResetToAddress =
-        !requiredToAddress && !bookmarkSatisfiesToChainType
+        !requiredToAddress && !bookmarkSatisfiesToChain
 
       // We reset toAddress on each chain change if it's no longer required, ensuring that
       // switching chain types doesn't leave a stale toAddress from a different ecosystem.
@@ -30,7 +33,13 @@ export const useToAddressReset = (): {
         setSelectedBookmark()
       }
     },
-    [setFieldValue, setSelectedBookmark, requiredUI, selectedBookmark]
+    [
+      setFieldValue,
+      setSelectedBookmark,
+      requiredUI,
+      selectedBookmark,
+      isAddressForChain,
+    ]
   )
 
   return {

package/src/hooks/useTokenBalance.ts

@@ -8,6 +8,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useMemo } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { isDestinationOnlyChain } from '../utils/chainType.js'
 import { getQueryKey } from '../utils/queries.js'
 
 const defaultRefetchInterval = 30_000
@@ -93,7 +94,11 @@ export const useTokenBalance = (
       } as TokenAmount
     },
 
-    enabled: Boolean(accountAddress && token),
+    // No provider reads a balance on a destination-only chain, and a balance
+    // without a block number is retried until the backoff gives up.
+    enabled:
+      Boolean(accountAddress && token) &&
+      !isDestinationOnlyChain(token?.chainId),
     refetchInterval: defaultRefetchInterval,
     staleTime: defaultRefetchInterval,
   })