@lifi/widget 4.7.1 → 4.9.0

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.7.1'
+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/useAvailableChains.test.tsx

@@ -0,0 +1,170 @@
+/** @vitest-environment happy-dom */
+
+import type * as LifiSdk from '@lifi/sdk'
+import { ChainType, type ExtendedChain, type SDKClient } from '@lifi/sdk'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { WidgetConfig } from '../types/widget.js'
+
+/**
+ * The chains entry is shared with the host app through
+ * `getChainsQueryOptions`, keyed by the client's API base, the requested chain
+ * types and the widget's `queryScopeKey`. The widget's own SDK client still
+ * gets the chains, whoever filled the entry.
+ */
+
+const API_URL = 'https://api.example/v1'
+
+const mocks = vi.hoisted(() => ({
+  getChains: vi.fn(),
+  setChains: vi.fn(),
+}))
+
+vi.mock('@lifi/sdk', async (importOriginal) => ({
+  ...(await importOriginal<typeof LifiSdk>()),
+  getChains: mocks.getChains,
+}))
+
+let widgetConfig: Partial<WidgetConfig> = {}
+
+vi.mock('../providers/WidgetProvider/WidgetProvider.js', () => ({
+  useWidgetConfig: () => widgetConfig,
+}))
+
+const client = {
+  config: { apiUrl: API_URL },
+  setChains: mocks.setChains,
+} as unknown as SDKClient
+vi.mock('../providers/SDKClientProvider.js', () => ({
+  useSDKClient: () => client,
+}))
+
+import { getChainsQueryKey } from '../queries/getChains.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+const CHAINS = [{ id: 1, name: 'Ethereum' }] as ExtendedChain[]
+
+let root: Root
+let queryClient: QueryClient
+let externalConfig: WidgetConfig | undefined
+
+const Probe = () => {
+  useAvailableChains(undefined, externalConfig)
+  return null
+}
+
+const render = async () => {
+  await act(async () => {
+    root.render(
+      <QueryClientProvider client={queryClient}>
+        <Probe />
+      </QueryClientProvider>
+    )
+  })
+}
+
+const evmKey = getChainsQueryKey({
+  apiUrl: API_URL,
+  chainTypes: [ChainType.EVM],
+  scopeKey: 'host',
+})
+
+describe('useAvailableChains', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.getChains.mockResolvedValue(CHAINS)
+    widgetConfig = {
+      queryScopeKey: 'host',
+      chains: { types: { allow: [ChainType.EVM] } },
+    }
+    externalConfig = undefined
+    queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    })
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(async () => {
+    await act(async () => root.unmount())
+    queryClient.clear()
+  })
+
+  it('fetches the allowed chain types under the widget scope and hands them to the client', async () => {
+    await render()
+
+    await vi.waitFor(() => {
+      expect(mocks.setChains).toHaveBeenCalledWith(CHAINS)
+    })
+    expect(mocks.getChains).toHaveBeenCalledWith(client, {
+      chainTypes: [ChainType.EVM],
+    })
+    expect(queryClient.getQueryData(evmKey)).toBe(CHAINS)
+  })
+
+  it('reads an entry the host filled, and still hands the chains to the client', async () => {
+    queryClient.setQueryData(evmKey, CHAINS)
+
+    await render()
+
+    await vi.waitFor(() => {
+      expect(mocks.setChains).toHaveBeenCalledWith(CHAINS)
+    })
+    expect(mocks.getChains).not.toHaveBeenCalled()
+  })
+
+  it('hands the chains to the client again after a refetch with equal data', async () => {
+    // Structural sharing keeps the data reference on an equal refetch. The
+    // client's own chain storage expires, so every fetch must refresh it.
+    await render()
+    await vi.waitFor(() => {
+      expect(mocks.setChains).toHaveBeenCalledTimes(1)
+    })
+
+    await act(async () => {
+      await queryClient.refetchQueries({ queryKey: evmKey })
+    })
+
+    await vi.waitFor(() => {
+      expect(mocks.setChains).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  it('refreshes the chains every five minutes', async () => {
+    await render()
+    await vi.waitFor(() => {
+      expect(queryClient.getQueryData(evmKey)).toBe(CHAINS)
+    })
+
+    const [observer] = queryClient
+      .getQueryCache()
+      .find({ queryKey: evmKey })!.observers
+    expect(observer.options.refetchInterval).toBe(300_000)
+    expect(observer.options.staleTime).toBe(300_000)
+  })
+
+  it('uses the API base and scope of an external widget config', async () => {
+    externalConfig = {
+      integrator: 'partner',
+      keyPrefix: 'partner',
+      sdkConfig: { apiUrl: 'https://partner.example/v1' },
+      chains: { types: { allow: [ChainType.SVM] } },
+    }
+
+    await render()
+
+    const partnerKey = getChainsQueryKey({
+      apiUrl: 'https://partner.example/v1',
+      chainTypes: [ChainType.SVM],
+      scopeKey: 'partner',
+    })
+    await vi.waitFor(() => {
+      expect(queryClient.getQueryData(partnerKey)).toBe(CHAINS)
+    })
+    // The external config's own client, not the widget's.
+    expect(mocks.getChains.mock.calls[0][0]).not.toBe(client)
+  })
+})

package/src/hooks/useAvailableChains.ts

@@ -1,26 +1,23 @@
-import type { ExtendedChain } from '@lifi/sdk'
-import { ChainType, createClient, getChains } from '@lifi/sdk'
+import type { ChainType, ExtendedChain } from '@lifi/sdk'
+import { createClient } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import {
+  getChainsQueryOptions,
+  supportedChainTypes,
+} from '../queries/getChains.js'
 import type { WidgetConfig } from '../types/widget.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
-import { getQueryKey } from '../utils/queries.js'
+import { resolveQueryScopeKey } from '../utils/scopeKeys.js'
 
 type GetChainById = (
   chainId?: number,
   chains?: ExtendedChain[]
 ) => ExtendedChain | undefined
 
-const supportedChainTypes = [
-  ChainType.EVM,
-  ChainType.SVM,
-  ChainType.UTXO,
-  ChainType.MVM,
-  ChainType.TVM,
-  ChainType.STL,
-]
+const refetchInterval = 300_000
 
 export const useAvailableChains = (
   chainTypes?: ChainType[],
@@ -30,7 +27,7 @@ export const useAvailableChains = (
   getChainById: GetChainById
   isLoading: boolean
 } => {
-  const { chains: internalChains, keyPrefix: internalKeyPrefix } =
+  const { chains: internalChains, queryScopeKey: internalQueryScopeKey } =
     useWidgetConfig()
   const internalClient = useSDKClient()
 
@@ -46,46 +43,31 @@ export const useAvailableChains = (
   }, [widgetConfig])
 
   // Overwrite widget config if passed as param
-  const keyPrefix = widgetConfig?.keyPrefix ?? internalKeyPrefix
+  const client = externalClient ?? internalClient
   const chains = widgetConfig?.chains ?? internalChains
+  const queryScopeKey = widgetConfig
+    ? resolveQueryScopeKey(widgetConfig)
+    : internalQueryScopeKey
 
-  const { data, isLoading } = useQuery({
-    queryKey: [
-      getQueryKey('chains', keyPrefix),
-      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.filter((chainType) =>
-        isItemAllowedForSets(chainType, chainsConfigSets)
-      )
-      const client = externalClient ?? internalClient
-      const availableChains = await getChains(client, {
-        chainTypes: chainTypes || chainTypesRequest,
-      })
-      client.setChains(availableChains)
-      return availableChains
-    },
-    refetchInterval: 300_000,
-    staleTime: 300_000,
-  })
+  const typeSets = getConfigItemSets(chains?.types, (types) => new Set(types))
+  const requestedTypes =
+    chainTypes ??
+    supportedChainTypes.filter((type) => isItemAllowedForSets(type, typeSets))
+
+  const { data, dataUpdatedAt, isLoading } = useQuery(
+    getChainsQueryOptions(client, {
+      chainTypes: requestedTypes,
+      scopeKey: queryScopeKey,
+      query: { refetchInterval, staleTime: refetchInterval },
+    })
+  )
 
-  // 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)
+  // A host may fill the entry; key on dataUpdatedAt, as a refetch keeps data.
   useEffect(() => {
-    if (data && !externalClient) {
-      internalClient.setChains(data)
+    if (data && dataUpdatedAt) {
+      client.setChains(data)
     }
-  }, [data, externalClient, internalClient])
+  }, [data, dataUpdatedAt, client])
 
   const getChainById: GetChainById = useCallback(
     (chainId?: number, chains: ExtendedChain[] | undefined = data) => {

package/src/hooks/useFromTokenSufficiency.ts

@@ -22,7 +22,7 @@ export const useFromTokenSufficiency = (
     'fromToken',
     'fromAmount'
   )
-  const { keyPrefix } = useWidgetConfig()
+  const { storageScopeKey } = useWidgetConfig()
   const sdkClient = useSDKClient()
 
   let chainId = fromChainId
@@ -42,7 +42,7 @@ export const useFromTokenSufficiency = (
 
   const { data: insufficientFromToken, isLoading } = useQuery({
     queryKey: [
-      getQueryKey('from-token-sufficiency-check', keyPrefix),
+      getQueryKey('from-token-sufficiency-check', storageScopeKey),
       account.address,
       chainId,
       tokenAddress,

package/src/hooks/useGasRecommendation.ts

@@ -14,7 +14,7 @@ export const useGasRecommendation = (
   fromToken?: string
 ): UseQueryResult<Awaited<ReturnType<typeof getGasRecommendation>> | null> => {
   const { chains } = useAvailableChains()
-  const { keyPrefix, hiddenUI } = useWidgetConfig()
+  const { storageScopeKey, hiddenUI } = useWidgetConfig()
   const sdkClient = useSDKClient()
 
   const checkRecommendationLiFuel =
@@ -28,7 +28,7 @@ export const useGasRecommendation = (
 
   return useQuery({
     queryKey: [
-      getQueryKey('gas-recommendation', keyPrefix),
+      getQueryKey('gas-recommendation', storageScopeKey),
       toChainId,
       fromChain,
       fromToken,

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/useGasSufficiency.ts

@@ -32,7 +32,7 @@ export const useGasSufficiency = (
   const { account: EVMAccount, accounts } = useAccount({
     chainType: ChainType.EVM,
   })
-  const { keyPrefix, hiddenUI } = useWidgetConfig()
+  const { storageScopeKey, hiddenUI } = useWidgetConfig()
   const sdkClient = useSDKClient()
 
   const { relevantAccounts, relevantAccountsQueryKey } = useMemo(() => {
@@ -67,7 +67,7 @@ export const useGasSufficiency = (
 
   const { data: insufficientGas, isLoading } = useQuery<GasSufficiency[]>({
     queryKey: [
-      getQueryKey('gas-sufficiency-check', keyPrefix),
+      getQueryKey('gas-sufficiency-check', storageScopeKey),
       relevantAccountsQueryKey,
       route?.id,
       isContractAddress,

package/src/hooks/useIsBatchingSupported.ts

@@ -13,7 +13,7 @@ export function useIsBatchingSupported(
   isBatchingSupported: boolean | undefined
   isBatchingSupportedLoading: boolean
 } {
-  const { keyPrefix } = useWidgetConfig()
+  const { storageScopeKey } = useWidgetConfig()
   const sdkClient = useSDKClient()
   const { isBatchingSupported } = useEthereumContext()
 
@@ -22,7 +22,7 @@ export function useIsBatchingSupported(
   )
   const { data, isLoading } = useQuery({
     queryKey: [
-      getQueryKey('isBatchingSupported', keyPrefix),
+      getQueryKey('isBatchingSupported', storageScopeKey),
       chain?.id,
       address,
     ],