@lifi/widget 4.7.1 → 4.9.0

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -12,13 +12,13 @@ import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ButtonTertiary } from '../../components/ButtonTertiary.js'
 import { CardButton } from '../../components/Card/CardButton.js'
 import { AccountDeployedMessage } from '../../components/Messages/AccountDeployedMessage.js'
+import { addressInputMaxLength } from '../../config/constants.js'
 import {
   AddressType,
   useAddressValidation,
 } from '../../hooks/useAddressValidation.js'
 import { useChain } from '../../hooks/useChain.js'
 import { useHeader } from '../../hooks/useHeader.js'
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { Bookmark } from '../../stores/bookmarks/types.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
@@ -57,7 +57,6 @@ export const SendToWalletPage: React.FC = () => {
   const [validatedWallet, setValidatedWallet] = useState<Bookmark>()
   const [errorMessage, setErrorMessage] = useState('')
   const { validateAddress, isValidating } = useAddressValidation()
-  const { requiredToChainType } = useToAddressRequirements()
   const [toChainId] = useFieldValues('toChain')
   const { chain: toChain } = useChain(toChainId)
   const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false)
@@ -91,7 +90,6 @@ export const SendToWalletPage: React.FC = () => {
     setIsDoneButtonLoading(true)
     const validationResult = await validateAddress({
       value: inputAddressValue,
-      chainType: requiredToChainType,
       chain: toChain,
     })
     setIsDoneButtonLoading(false)
@@ -100,18 +98,6 @@ export const SendToWalletPage: React.FC = () => {
       return
     }
 
-    if (
-      requiredToChainType &&
-      requiredToChainType !== validationResult.chainType
-    ) {
-      setErrorMessage(
-        t('error.title.walletChainTypeInvalid', {
-          chainName: toChain?.name,
-        })
-      )
-      return
-    }
-
     setValidatedWallet({
       name:
         validationResult.addressType === AddressType.NameService
@@ -119,6 +105,7 @@ export const SendToWalletPage: React.FC = () => {
           : undefined,
       address: validationResult.address,
       chainType: validationResult.chainType,
+      chainId: validationResult.chainId,
     })
     confirmAddressSheetRef.current?.open()
   }
@@ -155,6 +142,7 @@ export const SendToWalletPage: React.FC = () => {
             : undefined,
         address: validationResult.address,
         chainType: validationResult.chainType,
+        chainId: validationResult.chainId,
       })
       bookmarkAddressSheetRef.current?.open()
     } else {
@@ -213,7 +201,7 @@ export const SendToWalletPage: React.FC = () => {
             placeholder={placeholder}
             aria-label={placeholder}
             maxRows={2}
-            inputProps={{ maxLength: 128 }}
+            inputProps={{ maxLength: addressInputMaxLength }}
             multiline
           />
           {errorMessage ? (

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -1,5 +1,8 @@
 import { WalletManagementProviders } from '@lifi/wallet-management'
-import type { WidgetProviderProps } from '@lifi/widget-provider'
+import {
+  useSDKProviders,
+  type WidgetProviderProps,
+} from '@lifi/widget-provider'
 import {
   type FC,
   type JSX,
@@ -10,8 +13,15 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useInitializeSDKProviders } from '../../hooks/useInitializeSDKProviders.js'
+import {
+  withoutUnservedToChain,
+  withServedDestinationChains,
+} from '../../utils/chainType.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
-import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import {
+  useWidgetConfig,
+  WidgetContext,
+} from '../WidgetProvider/WidgetProvider.js'
 import { useExternalWalletProvider } from './useExternalWalletProvider.js'
 
 interface WalletProviderProps extends PropsWithChildren {
@@ -78,5 +88,20 @@ export const WalletProvider = ({
 
 const SDKProviderInitializer: FC<PropsWithChildren> = ({ children }) => {
   useInitializeSDKProviders()
-  return children
+  const config = useWidgetConfig()
+  const sdkProviders = useSDKProviders()
+  // Only below the provider components is it known which chains are served.
+  // Keyed on `config.chains`: the config object is new on every render.
+  const chains = useMemo(
+    () => withServedDestinationChains(config.chains, sdkProviders),
+    [config.chains, sdkProviders]
+  )
+  const value = useMemo(
+    () =>
+      withoutUnservedToChain(
+        chains === config.chains ? config : { ...config, chains }
+      ),
+    [config, chains]
+  )
+  return <WidgetContext value={value}>{children}</WidgetContext>
 }

package/src/providers/WidgetProvider/WidgetProvider.test.tsx

@@ -0,0 +1,73 @@
+/** @vitest-environment happy-dom */
+
+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'
+import type { WidgetContextProps } from './types.js'
+
+const settingsActions = { setDefaultSettings: vi.fn() }
+vi.mock('../../stores/settings/useSettingsActions.js', () => ({
+  useSettingsActions: () => settingsActions,
+}))
+
+import { useWidgetConfig, WidgetProvider } from './WidgetProvider.js'
+
+let root: Root
+let seen: WidgetContextProps | undefined
+
+const Probe = () => {
+  seen = useWidgetConfig()
+  return null
+}
+
+const render = async (config: WidgetConfig) => {
+  await act(async () => {
+    root.render(
+      <WidgetProvider config={config}>
+        <Probe />
+      </WidgetProvider>
+    )
+  })
+}
+
+describe('WidgetProvider scope keys', () => {
+  beforeEach(() => {
+    seen = undefined
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(async () => {
+    await act(async () => root.unmount())
+  })
+
+  // An integration that only ever set the deprecated keyPrefix keeps its
+  // isolation: everything below reads the resolved keys, never keyPrefix.
+  it('resolves both scopes from keyPrefix alone', async () => {
+    await render({ integrator: 'test', keyPrefix: 'legacy' })
+
+    expect(seen?.storageScopeKey).toBe('legacy')
+    expect(seen?.queryScopeKey).toBe('legacy')
+  })
+
+  it('prefers the explicit scopes over keyPrefix', async () => {
+    await render({
+      integrator: 'test',
+      keyPrefix: 'legacy',
+      storageScopeKey: 'store',
+      queryScopeKey: 'query',
+    })
+
+    expect(seen?.storageScopeKey).toBe('store')
+    expect(seen?.queryScopeKey).toBe('query')
+  })
+
+  it('keeps the historical storage names and the default query scope when nothing is set', async () => {
+    await render({ integrator: 'test' })
+
+    expect(seen?.storageScopeKey).toBeUndefined()
+    expect(seen?.queryScopeKey).toBe('li.fi')
+  })
+})

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -1,11 +1,21 @@
 import type { Context } from 'react'
 import { createContext, use, useId, useMemo } from 'react'
 import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import {
+  isDestinationOnlyChain,
+  withDestinationOnlyChains,
+} from '../../utils/chainType.js'
+import {
+  defaultQueryScopeKey,
+  resolveQueryScopeKey,
+  resolveStorageScopeKey,
+} from '../../utils/scopeKeys.js'
 import type { WidgetContextProps, WidgetProviderProps } from './types.js'
 
 const initialContext: WidgetContextProps = {
   elementId: '',
   integrator: '',
+  queryScopeKey: defaultQueryScopeKey,
 }
 
 export const WidgetContext: Context<WidgetContextProps> =
@@ -23,26 +33,30 @@ export const WidgetProvider: React.FC<
     throw new Error('Required property "integrator" is missing.')
   }
 
+  // Keyed on the integrator's `chains`: the config object is new on every render.
+  const chains = useMemo(
+    () => withDestinationOnlyChains(widgetConfig.chains),
+    [widgetConfig.chains]
+  )
+
   const value = useMemo((): WidgetContextProps => {
+    // Omitted, not undefined: an own undefined key resets the form field.
+    const { fromChain, fromToken, ...config } = widgetConfig
+    const value = {
+      ...(isDestinationOnlyChain(fromChain) ? config : widgetConfig),
+      chains,
+      // Resolved once, so nothing below reads the deprecated keyPrefix.
+      storageScopeKey: resolveStorageScopeKey(widgetConfig),
+      queryScopeKey: resolveQueryScopeKey(widgetConfig),
+      elementId,
+    } as WidgetContextProps
     try {
-      // Create widget configuration object
-      const value = {
-        ...widgetConfig,
-        elementId,
-      } as WidgetContextProps
-
       // Set default settings for widget settings store
       setDefaultSettings(value)
-
-      return value
     } catch (e) {
       console.warn(e)
-      return {
-        ...widgetConfig,
-        elementId,
-        integrator: widgetConfig.integrator,
-      }
     }
-  }, [elementId, widgetConfig, setDefaultSettings])
+    return value
+  }, [elementId, widgetConfig, chains, setDefaultSettings])
   return <WidgetContext value={value}>{children}</WidgetContext>
 }

package/src/providers/WidgetProvider/types.ts

@@ -2,6 +2,8 @@ import type { WidgetConfig } from '../../types/widget.js'
 
 export type WidgetContextProps = WidgetConfig & {
   elementId: string
+  /** Always resolved by `WidgetProvider` — see `resolveQueryScopeKey`. */
+  queryScopeKey: string
 }
 
 export interface WidgetProviderProps {

package/src/queries/getChains.ts

@@ -0,0 +1,93 @@
+import type { ExtendedChain, SDKClient } from '@lifi/sdk'
+import { ChainType, getChains } from '@lifi/sdk'
+import type {
+  FactoryQueryOptions,
+  QueryParameter,
+  ScopeKeyParameter,
+} from './types.js'
+
+/** Every chain type the widget supports, in the order keys are built in. */
+export const supportedChainTypes: readonly ChainType[] = [
+  ChainType.EVM,
+  ChainType.SVM,
+  ChainType.UTXO,
+  ChainType.MVM,
+  ChainType.TVM,
+  ChainType.STL,
+]
+
+export type GetChainsQueryFnData = ExtendedChain[]
+
+export type GetChainsQueryKeyParameters = {
+  /** API base the client talks to. Different bases return different chains. */
+  apiUrl: string
+  chainTypes: readonly ChainType[]
+} & ScopeKeyParameter
+
+export type GetChainsQueryKey = readonly [
+  'chains',
+  { apiUrl: string; chainTypes: ChainType[]; scopeKey?: string },
+]
+
+const rank = (type: ChainType): number => {
+  const index = supportedChainTypes.indexOf(type)
+  return index === -1 ? supportedChainTypes.length : index
+}
+
+/** The key alone — to read, set or invalidate the entry. */
+export function getChainsQueryKey(
+  parameters: GetChainsQueryKeyParameters
+): GetChainsQueryKey {
+  // Array order is part of the query hash, so sort into one canonical order.
+  const chainTypes = [...new Set(parameters.chainTypes)].sort(
+    (a, b) => rank(a) - rank(b) || a.localeCompare(b)
+  )
+  return [
+    'chains',
+    {
+      apiUrl: parameters.apiUrl,
+      chainTypes,
+      ...(parameters.scopeKey === undefined
+        ? {}
+        : { scopeKey: parameters.scopeKey }),
+    },
+  ]
+}
+
+export type GetChainsOptions<selectData = GetChainsQueryFnData> = {
+  /** Chain types to request, in any order. Defaults to every supported type. */
+  chainTypes?: readonly ChainType[] | undefined
+} & ScopeKeyParameter &
+  QueryParameter<GetChainsQueryFnData, selectData, GetChainsQueryKey>
+
+export type GetChainsQueryOptions<selectData = GetChainsQueryFnData> =
+  FactoryQueryOptions<GetChainsQueryFnData, selectData, GetChainsQueryKey>
+
+/**
+ * Query options for the chain list of one API base.
+ *
+ * The key is `['chains', { apiUrl, chainTypes, scopeKey }]`: the API base and
+ * the requested types decide the response, the scope isolates integrations.
+ * The widget and a host app that build their options here, with the same
+ * scope, therefore share one cache entry and one request.
+ *
+ * The query has no side effects. A caller that needs the chains in its SDK
+ * client's storage calls `client.setChains` on the data — the entry may have
+ * been filled by another caller, so a `queryFn` cannot be relied on to run.
+ */
+export function getChainsQueryOptions<selectData = GetChainsQueryFnData>(
+  client: SDKClient,
+  options: GetChainsOptions<selectData> = {}
+): GetChainsQueryOptions<selectData> {
+  return {
+    ...options.query,
+    queryKey: getChainsQueryKey({
+      apiUrl: client.config.apiUrl,
+      chainTypes: options.chainTypes ?? supportedChainTypes,
+      scopeKey: options.scopeKey,
+    }),
+    // No signal: the data still fills the cache if all observers leave.
+    queryFn: ({ queryKey: [, { chainTypes }] }) =>
+      getChains(client, { chainTypes }),
+  }
+}

package/src/queries/getTools.ts

@@ -0,0 +1,62 @@
+import type { SDKClient, ToolsResponse } from '@lifi/sdk'
+import { getTools } from '@lifi/sdk'
+import type {
+  FactoryQueryOptions,
+  QueryParameter,
+  ScopeKeyParameter,
+} from './types.js'
+
+export type GetToolsQueryFnData = ToolsResponse
+
+export type GetToolsQueryKeyParameters = {
+  /** API base the client talks to. Different bases return different tools. */
+  apiUrl: string
+} & ScopeKeyParameter
+
+export type GetToolsQueryKey = readonly [
+  'tools',
+  { apiUrl: string; scopeKey?: string },
+]
+
+/** The key alone — to read, set or invalidate the entry. */
+export function getToolsQueryKey(
+  parameters: GetToolsQueryKeyParameters
+): GetToolsQueryKey {
+  return [
+    'tools',
+    {
+      apiUrl: parameters.apiUrl,
+      ...(parameters.scopeKey === undefined
+        ? {}
+        : { scopeKey: parameters.scopeKey }),
+    },
+  ]
+}
+
+export type GetToolsOptions<selectData = GetToolsQueryFnData> =
+  ScopeKeyParameter &
+    QueryParameter<GetToolsQueryFnData, selectData, GetToolsQueryKey>
+
+export type GetToolsQueryOptions<selectData = GetToolsQueryFnData> =
+  FactoryQueryOptions<GetToolsQueryFnData, selectData, GetToolsQueryKey>
+
+/**
+ * Query options for the bridges and exchanges of one API base.
+ *
+ * The key is `['tools', { apiUrl, scopeKey }]`. The cache holds the raw,
+ * unfiltered response so every caller can share it; narrow it per caller with
+ * `query.select`, never in the `queryFn`.
+ */
+export function getToolsQueryOptions<selectData = GetToolsQueryFnData>(
+  client: SDKClient,
+  options: GetToolsOptions<selectData> = {}
+): GetToolsQueryOptions<selectData> {
+  return {
+    ...options.query,
+    queryKey: getToolsQueryKey({
+      apiUrl: client.config.apiUrl,
+      scopeKey: options.scopeKey,
+    }),
+    queryFn: ({ signal }) => getTools(client, undefined, { signal }),
+  }
+}

package/src/queries/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Query option factories for LI.FI server data, shared by the widget and its
+ * host. Published as `@lifi/widget/queries`; it depends only on
+ * `@lifi/sdk` and on `@tanstack/react-query` types, so importing it does not
+ * pull in the widget itself.
+ *
+ * Keys follow wagmi's `@wagmi/core/query` convention: `[name, parameters]`,
+ * where the parameters hold everything that changes the response plus an
+ * optional `scopeKey`.
+ */
+export {
+  type GetChainsOptions,
+  type GetChainsQueryFnData,
+  type GetChainsQueryKey,
+  type GetChainsQueryKeyParameters,
+  type GetChainsQueryOptions,
+  getChainsQueryKey,
+  getChainsQueryOptions,
+  supportedChainTypes,
+} from './getChains.js'
+export {
+  type GetToolsOptions,
+  type GetToolsQueryFnData,
+  type GetToolsQueryKey,
+  type GetToolsQueryKeyParameters,
+  type GetToolsQueryOptions,
+  getToolsQueryKey,
+  getToolsQueryOptions,
+} from './getTools.js'
+export type { QueryParameter, ScopeKeyParameter } from './types.js'

package/src/queries/sharedCache.test.tsx

@@ -0,0 +1,223 @@
+/** @vitest-environment happy-dom */
+
+import type * as LifiSdk from '@lifi/sdk'
+import type { SDKClient, ToolsResponse } from '@lifi/sdk'
+import { ChainType } from '@lifi/sdk'
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+/**
+ * A host app and the widget that both build
+ * their options from these factories, inside one QueryClient, send each
+ * request once — whether they mount together or seconds apart.
+ */
+
+const mocks = vi.hoisted(() => ({
+  getChains: vi.fn(),
+  getTools: vi.fn(),
+}))
+
+vi.mock('@lifi/sdk', async (importOriginal) => ({
+  ...(await importOriginal<typeof LifiSdk>()),
+  getChains: mocks.getChains,
+  getTools: mocks.getTools,
+}))
+
+import { getChainsQueryOptions } from './getChains.js'
+import { getToolsQueryOptions } from './getTools.js'
+
+const V1 = 'https://api.example/v1'
+const OTHER_BASE = 'https://api-b.example/v1'
+const clientFor = (apiUrl: string) =>
+  ({ config: { apiUrl } }) as unknown as SDKClient
+
+const TOOLS = {
+  bridges: [{ key: 'across' }, { key: 'stargate' }],
+  exchanges: [{ key: '1inch' }],
+} as unknown as ToolsResponse
+
+/** A host app: all chain types, its own refresh cadence. */
+const Host = ({
+  client,
+  scopeKey,
+}: {
+  client: SDKClient
+  scopeKey: string
+}) => {
+  useQuery(
+    getChainsQueryOptions(client, {
+      scopeKey,
+      query: { staleTime: 300_000 },
+    })
+  )
+  useQuery(
+    getToolsQueryOptions(client, { scopeKey, query: { staleTime: 300_000 } })
+  )
+  return null
+}
+
+/** What the widget does: chain types in another order, a filtered tools view. */
+const Widget = ({
+  client,
+  scopeKey,
+}: {
+  client: SDKClient
+  scopeKey: string
+}) => {
+  useQuery(
+    getChainsQueryOptions(client, {
+      chainTypes: [
+        ChainType.STL,
+        ChainType.TVM,
+        ChainType.MVM,
+        ChainType.UTXO,
+        ChainType.SVM,
+        ChainType.EVM,
+      ],
+      scopeKey,
+      query: { staleTime: 300_000 },
+    })
+  )
+  useQuery(
+    getToolsQueryOptions(client, {
+      scopeKey,
+      query: {
+        staleTime: 180_000,
+        select: (tools) => ({ ...tools, bridges: tools.bridges.slice(0, 1) }),
+      },
+    })
+  )
+  return null
+}
+
+let root: Root
+let queryClient: QueryClient
+
+const render = async (node: ReactNode) => {
+  await act(async () => {
+    root.render(
+      <QueryClientProvider client={queryClient}>{node}</QueryClientProvider>
+    )
+  })
+}
+
+const settle = () =>
+  vi.waitFor(() => {
+    expect(queryClient.isFetching()).toBe(0)
+  })
+
+describe('shared chains and tools cache', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.getChains.mockResolvedValue([{ id: 1 }])
+    mocks.getTools.mockResolvedValue(TOOLS)
+    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 once when the host and the widget mount together', async () => {
+    const client = clientFor(V1)
+
+    await render(
+      <>
+        <Host client={client} scopeKey="host" />
+        <Widget client={client} scopeKey="host" />
+      </>
+    )
+    await settle()
+
+    expect(mocks.getChains).toHaveBeenCalledTimes(1)
+    expect(mocks.getTools).toHaveBeenCalledTimes(1)
+  })
+
+  // A widget often mounts seconds after the host app. A later observer with a
+  // staleTime reads the entry instead of refetching it.
+  it('fetches once when the widget mounts after the host has settled', async () => {
+    const client = clientFor(V1)
+
+    await render(<Host client={client} scopeKey="host" />)
+    await settle()
+    await render(
+      <>
+        <Host client={client} scopeKey="host" />
+        <Widget client={client} scopeKey="host" />
+      </>
+    )
+    await settle()
+
+    expect(mocks.getChains).toHaveBeenCalledTimes(1)
+    expect(mocks.getTools).toHaveBeenCalledTimes(1)
+  })
+
+  it('also shares when the host and widget hold different client objects on the same base', async () => {
+    await render(
+      <>
+        <Host client={clientFor(V1)} scopeKey="host" />
+        <Widget client={clientFor(V1)} scopeKey="host" />
+      </>
+    )
+    await settle()
+
+    expect(mocks.getChains).toHaveBeenCalledTimes(1)
+    expect(mocks.getTools).toHaveBeenCalledTimes(1)
+  })
+
+  it('keeps the raw tools response in the cache under a filtering select', async () => {
+    const client = clientFor(V1)
+
+    await render(<Widget client={client} scopeKey="host" />)
+    await settle()
+
+    const cached = queryClient.getQueryData<ToolsResponse>(
+      getToolsQueryOptions(client, { scopeKey: 'host' }).queryKey
+    )
+    expect(cached?.bridges).toHaveLength(2)
+  })
+
+  // A partner's own queries and another integration's widget stay apart.
+  it('does not share across scopes', async () => {
+    const client = clientFor(V1)
+
+    await render(
+      <>
+        <Host client={client} scopeKey="host" />
+        <Widget client={client} scopeKey="partner" />
+      </>
+    )
+    await settle()
+
+    expect(mocks.getChains).toHaveBeenCalledTimes(2)
+    expect(mocks.getTools).toHaveBeenCalledTimes(2)
+  })
+
+  // Different API bases can return different chains and tools, so they must
+  // never share an entry.
+  it('does not share across API bases', async () => {
+    await render(
+      <>
+        <Host client={clientFor(V1)} scopeKey="host" />
+        <Widget client={clientFor(OTHER_BASE)} scopeKey="host" />
+      </>
+    )
+    await settle()
+
+    expect(mocks.getChains).toHaveBeenCalledTimes(2)
+    expect(mocks.getTools).toHaveBeenCalledTimes(2)
+  })
+})