@lifi/widget 4.8.0 → 4.10.0

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,
   })

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -9,6 +9,7 @@ import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { Input } from '../../components/Input.js'
 import { AlertMessage } from '../../components/Messages/AlertMessage.js'
+import { addressInputMaxLength } from '../../config/constants.js'
 import { useAddressValidation } from '../../hooks/useAddressValidation.js'
 import type { Bookmark } from '../../stores/bookmarks/types.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
@@ -63,6 +64,7 @@ export const BookmarkAddressSheet = ({
       name: nameValue,
       address: validationResult.address,
       chainType: validationResult.chainType,
+      chainId: validationResult.chainId,
     }
   }
 
@@ -74,6 +76,7 @@ export const BookmarkAddressSheet = ({
       name: nameValue,
       address: validatedWallet.address,
       chainType: validatedWallet.chainType,
+      chainId: validatedWallet.chainId,
     }
   }
 
@@ -119,6 +122,7 @@ export const BookmarkAddressSheet = ({
         name: validatedBookmark.name,
         address: validatedBookmark.address,
         chainType: validatedBookmark.chainType,
+        chainId: validatedBookmark.chainId,
       })
     }
   }
@@ -198,7 +202,7 @@ export const BookmarkAddressSheet = ({
                   context: 'long',
                 })}
                 maxRows={2}
-                inputProps={{ maxLength: 128 }}
+                inputProps={{ maxLength: addressInputMaxLength }}
                 multiline
               />
             </SendToWalletCard>

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -34,7 +34,7 @@ export const BookmarksPage = (): JSX.Element => {
   const listParentRef = useRef<HTMLUListElement | null>(null)
   const buttonRef = useRef<HTMLDivElement | null>(null)
   const { bookmarks } = useBookmarks()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
   const { addBookmark, removeBookmark, setSelectedBookmark } =
     useBookmarkActions()
   const navigate = useNavigate()
@@ -70,59 +70,49 @@ export const BookmarksPage = (): JSX.Element => {
         disablePadding
         sx={{ paddingTop: 1.5 }}
       >
-        {bookmarks.map((bookmark) => (
-          <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
-            <ListItemButton
-              onClick={() => handleBookmarkSelected(bookmark)}
-              disabled={
-                requiredToChainType &&
-                requiredToChainType !== bookmark.chainType
-              }
-            >
-              <ListItemAvatar>
-                <AccountAvatar
-                  chainId={defaultChainIdsByType[bookmark.chainType]}
+        {bookmarks.map((bookmark) => {
+          const disabled = !isValidReceiver(bookmark.address)
+          const chainId =
+            bookmark.chainId ?? defaultChainIdsByType[bookmark.chainType]
+          return (
+            <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                onClick={() => handleBookmarkSelected(bookmark)}
+                disabled={disabled}
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={chainId} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={bookmark.name}
+                  secondary={shortenAddress(bookmark.address)}
                 />
-              </ListItemAvatar>
-              <ListItemText
-                primary={bookmark.name}
-                secondary={shortenAddress(bookmark.address)}
+              </ListItemButton>
+              <ContextMenu
+                disabled={disabled}
+                items={[
+                  {
+                    icon: <ContentCopyRounded />,
+                    label: t('button.copyAddress'),
+                    onClick: () =>
+                      navigator.clipboard.writeText(bookmark.address),
+                  },
+                  {
+                    icon: <OpenInNewRounded />,
+                    label: t('button.viewOnExplorer'),
+                    onClick: () =>
+                      openInNewTab(getAddressLink(bookmark.address, chainId)),
+                  },
+                  {
+                    icon: <DeleteOutline />,
+                    label: t('button.delete'),
+                    onClick: () => removeBookmark(bookmark.address),
+                  },
+                ]}
               />
-            </ListItemButton>
-            <ContextMenu
-              disabled={
-                !!(
-                  requiredToChainType &&
-                  requiredToChainType !== bookmark.chainType
-                )
-              }
-              items={[
-                {
-                  icon: <ContentCopyRounded />,
-                  label: t('button.copyAddress'),
-                  onClick: () =>
-                    navigator.clipboard.writeText(bookmark.address),
-                },
-                {
-                  icon: <OpenInNewRounded />,
-                  label: t('button.viewOnExplorer'),
-                  onClick: () =>
-                    openInNewTab(
-                      getAddressLink(
-                        bookmark.address,
-                        defaultChainIdsByType[bookmark.chainType]
-                      )
-                    ),
-                },
-                {
-                  icon: <DeleteOutline />,
-                  label: t('button.delete'),
-                  onClick: () => removeBookmark(bookmark.address),
-                },
-              ]}
-            />
-          </ListItem>
-        ))}
+            </ListItem>
+          )
+        })}
         {!bookmarks.length && (
           <EmptyListIndicator
             icon={<TurnedIn />}

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -27,7 +27,7 @@ export const ConnectedWalletsPage = (): JSX.Element => {
   const { t } = useTranslation()
   const { accounts } = useAccount()
   const { setSelectedBookmark } = useBookmarkActions()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
   const navigate = useNavigate()
   const { setFieldValue } = useFieldActions()
   const { getAddressLink } = useExplorer()
@@ -91,15 +91,13 @@ export const ConnectedWalletsPage = (): JSX.Element => {
                 ]
               : []),
           ]
+          const disabled = !isValidReceiver(account.address)
 
           return (
             <ListItem key={account.address} sx={{ position: 'relative' }}>
               <ListItemButton
                 onClick={() => handleWalletSelected(account)}
-                disabled={
-                  requiredToChainType &&
-                  requiredToChainType !== account.chainType
-                }
+                disabled={disabled}
               >
                 <ListItemAvatar>
                   <AccountAvatar chainId={account.chainId} account={account} />
@@ -109,15 +107,7 @@ export const ConnectedWalletsPage = (): JSX.Element => {
                   secondary={walletAddress}
                 />
               </ListItemButton>
-              <ContextMenu
-                items={menuItems}
-                disabled={
-                  !!(
-                    requiredToChainType &&
-                    requiredToChainType !== account.chainType
-                  )
-                }
-              />
+              <ContextMenu items={menuItems} disabled={disabled} />
             </ListItem>
           )
         })}

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -35,7 +35,7 @@ export const RecentWalletsPage = (): JSX.Element => {
   const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
   const listParentRef = useRef<HTMLUListElement | null>(null)
   const { recentWallets } = useBookmarks()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
   const {
     removeRecentWallet,
     addBookmark,
@@ -76,73 +76,66 @@ export const RecentWalletsPage = (): JSX.Element => {
         disablePadding
         sx={{ paddingTop: 1.5 }}
       >
-        {recentWallets.map((recentWallet) => (
-          <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>
-            <ListItemButton
-              disabled={
-                requiredToChainType &&
-                requiredToChainType !== recentWallet.chainType
-              }
-              onClick={() => handleRecentSelected(recentWallet)}
-            >
-              <ListItemAvatar>
-                <AccountAvatar
-                  chainId={defaultChainIdsByType[recentWallet.chainType]}
+        {recentWallets.map((recentWallet) => {
+          const disabled = !isValidReceiver(recentWallet.address)
+          const chainId =
+            recentWallet.chainId ??
+            defaultChainIdsByType[recentWallet.chainType]
+          return (
+            <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                disabled={disabled}
+                onClick={() => handleRecentSelected(recentWallet)}
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={chainId} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={
+                    recentWallet.name || shortenAddress(recentWallet.address)
+                  }
+                  secondary={
+                    recentWallet.name
+                      ? shortenAddress(recentWallet.address)
+                      : undefined
+                  }
                 />
-              </ListItemAvatar>
-              <ListItemText
-                primary={
-                  recentWallet.name || shortenAddress(recentWallet.address)
-                }
-                secondary={
-                  recentWallet.name
-                    ? shortenAddress(recentWallet.address)
-                    : undefined
-                }
-              />
-            </ListItemButton>
-            <ContextMenu
-              disabled={
-                !!(
-                  requiredToChainType &&
-                  requiredToChainType !== recentWallet.chainType
-                )
-              }
-              items={[
-                {
-                  icon: <ContentCopyRounded />,
-                  label: t('button.copyAddress'),
-                  onClick: () =>
-                    navigator.clipboard.writeText(recentWallet.address),
-                },
-                {
-                  icon: <OpenInNewRounded />,
-                  label: t('button.viewOnExplorer'),
-                  onClick: () =>
-                    openInNewTab(
-                      getAddressLink(
-                        recentWallet.address,
-                        defaultChainIdsByType[recentWallet.chainType]
-                      )
-                    ),
-                },
-                {
-                  icon: <TurnedInNot />,
-                  label: t('button.bookmark'),
-                  onClick: () => {
-                    setBookmarkTarget(recentWallet)
-                    bookmarkAddressSheetRef.current?.open()
+              </ListItemButton>
+              <ContextMenu
+                disabled={disabled}
+                items={[
+                  {
+                    icon: <ContentCopyRounded />,
+                    label: t('button.copyAddress'),
+                    onClick: () =>
+                      navigator.clipboard.writeText(recentWallet.address),
+                  },
+                  {
+                    icon: <OpenInNewRounded />,
+                    label: t('button.viewOnExplorer'),
+                    onClick: () =>
+                      openInNewTab(
+                        getAddressLink(recentWallet.address, chainId)
+                      ),
+                  },
+                  {
+                    icon: <TurnedInNot />,
+                    label: t('button.bookmark'),
+                    onClick: () => {
+                      setBookmarkTarget(recentWallet)
+                      bookmarkAddressSheetRef.current?.open()
+                    },
                   },
-                },
-                {
-                  icon: <DeleteOutline />,
-                  label: t('button.delete'),
-                  onClick: () => removeRecentWallet(recentWallet.address),
-                },
-              ]}
-            />
-          </ListItem>
-        ))}
+                  {
+                    icon: <DeleteOutline />,
+                    label: t('button.delete'),
+                    onClick: () => removeRecentWallet(recentWallet.address),
+                  },
+                ]}
+              />
+            </ListItem>
+          )
+        })}
         {!recentWallets.length && (
           <EmptyListIndicator
             icon={<AccountBalanceWalletIcon />}