@lifi/widget 4.7.0 → 4.8.0

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/useExplorer.test.tsx

@@ -0,0 +1,106 @@
+/** @vitest-environment happy-dom */
+
+import type { ExtendedChain } from '@lifi/sdk'
+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'
+
+const txHash = `0x${'ab'.repeat(32)}`
+
+let explorerUrls: WidgetConfig['explorerUrls']
+let blockExplorerUrls: string[] = []
+
+const getChainById = (id: number) =>
+  ({
+    id,
+    chainType: 'EVM',
+    metamask: { blockExplorerUrls },
+  }) as unknown as ExtendedChain
+
+vi.mock('../providers/WidgetProvider/WidgetProvider.js', () => ({
+  useWidgetConfig: () => ({ explorerUrls }),
+}))
+
+vi.mock('./useAvailableChains.js', () => ({
+  useAvailableChains: () => ({ getChainById }),
+}))
+
+const { useExplorer } = await import('./useExplorer.js')
+
+let explorer: ReturnType<typeof useExplorer>
+
+const ExplorerHandle = (): null => {
+  explorer = useExplorer()
+  return null
+}
+
+let root: Root
+
+beforeEach(() => {
+  explorerUrls = undefined
+  blockExplorerUrls = ['https://etherscan.io/']
+  root = createRoot(document.createElement('div'))
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+})
+
+const render = () => {
+  act(() => {
+    root.render(<ExplorerHandle />)
+  })
+}
+
+describe('useExplorer', () => {
+  it('builds links from an https explorer base', () => {
+    render()
+    expect(explorer.getAddressLink('0xabc', 1)).toBe(
+      'https://etherscan.io/address/0xabc'
+    )
+    expect(explorer.getTransactionLink({ txHash, chain: 1 })).toBe(
+      `https://etherscan.io/tx/${txHash}`
+    )
+  })
+
+  it('returns no link when chain metadata carries a javascript: explorer base', () => {
+    blockExplorerUrls = ['javascript:alert(document.domain)//']
+    render()
+    expect(explorer.getAddressLink('0xabc', 1)).toBeUndefined()
+    expect(explorer.getTransactionLink({ txHash, chain: 1 })).toBeUndefined()
+  })
+
+  it('returns no link when the integrator config carries a javascript: explorer base', () => {
+    explorerUrls = {
+      1: ['javascript:alert(document.domain)'],
+      internal: ['javascript:alert(document.domain)'],
+    }
+    render()
+    expect(explorer.getAddressLink('0xabc', 1)).toBeUndefined()
+    expect(explorer.getTransactionLink({ txHash })).toBeUndefined()
+  })
+
+  it('falls back to an https txLink when the hash link is rejected', () => {
+    blockExplorerUrls = ['javascript:alert(document.domain)//']
+    render()
+    expect(
+      explorer.getTransactionLink({
+        txHash,
+        txLink: 'https://scan.li.fi/tx/0xabc',
+        chain: 1,
+      })
+    ).toBe('https://scan.li.fi/tx/0xabc')
+  })
+
+  it('rejects a javascript: txLink fallback', () => {
+    render()
+    expect(
+      explorer.getTransactionLink({
+        txLink: 'javascript:alert(document.domain)',
+      })
+    ).toBeUndefined()
+  })
+})

package/src/hooks/useExplorer.ts

@@ -4,6 +4,7 @@ import { useCallback } from 'react'
 import { internalExplorerUrl } from '../config/constants.js'
 import { useAvailableChains } from '../hooks/useAvailableChains.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { isHttpUrl } from '../utils/url.js'
 
 const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
 
@@ -25,7 +26,10 @@ type TransactionLinkProps = {
 
 export const useExplorer = (): {
   getTransactionLink: (props: TransactionLinkProps) => string | undefined
-  getAddressLink: (address: string, chain?: Chain | number) => string
+  getAddressLink: (
+    address: string,
+    chain?: Chain | number
+  ) => string | undefined
 } => {
   const { explorerUrls } = useWidgetConfig()
   const { getChainById } = useAvailableChains()
@@ -82,11 +86,12 @@ export const useExplorer = (): {
           config.resolvedChain?.chainType !== ChainType.EVM ||
           config.hasOverride ||
           isHex(txHash, { strict: true })
-        if (validForEvm) {
-          return `${config.url}/${config.txPath}/${txHash}`
+        const link = `${config.url}/${config.txPath}/${txHash}`
+        if (validForEvm && isHttpUrl(link)) {
+          return link
         }
       }
-      return txLink
+      return isHttpUrl(txLink) ? txLink : undefined
     },
     [getExplorerConfig]
   )
@@ -94,7 +99,8 @@ export const useExplorer = (): {
   const getAddressLink = useCallback(
     (address: string, chain?: Chain | number) => {
       const config = getExplorerConfig(chain)
-      return `${config.url}/${config.addressPath}/${address}`
+      const link = `${config.url}/${config.addressPath}/${address}`
+      return isHttpUrl(link) ? link : undefined
     },
     [getExplorerConfig]
   )

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/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,
     ],

package/src/hooks/useRouteExecution.ts

@@ -43,7 +43,7 @@ export const useRouteExecution = ({
   const queryClient = useQueryClient()
   const { account } = useAccount()
   const resumedAfterMount = useRef(false)
-  const { keyPrefix } = useWidgetConfig()
+  const { storageScopeKey } = useWidgetConfig()
   const sdkClient = useSDKClient()
   const emitter = useWidgetEvents()
   const routeExecutionStoreContext = useRouteExecutionStoreContext()
@@ -84,16 +84,16 @@ export const useRouteExecution = ({
     if (executionCompleted || executionFailed) {
       const invalidateKeys = [
         [
-          getQueryKey('token-balances', keyPrefix),
+          getQueryKey('token-balances', storageScopeKey),
           clonedUpdatedRoute.fromAddress,
           clonedUpdatedRoute.fromChainId,
         ],
         [
-          getQueryKey('token-balances', keyPrefix),
+          getQueryKey('token-balances', storageScopeKey),
           clonedUpdatedRoute.toAddress,
           clonedUpdatedRoute.toChainId,
         ],
-        [getQueryKey('transaction-history', keyPrefix)],
+        [getQueryKey('transaction-history', storageScopeKey)],
       ]
       for (const key of invalidateKeys) {
         queryClient.invalidateQueries(
@@ -133,7 +133,7 @@ export const useRouteExecution = ({
         throw new Error('Execution route not found.')
       }
       queryClient.removeQueries({
-        queryKey: [getQueryKey('routes', keyPrefix)],
+        queryKey: [getQueryKey('routes', storageScopeKey)],
         exact: false,
       })
       return executeRoute(sdkClient, routeExecution.route, {

package/src/hooks/useRoutes.ts

@@ -82,7 +82,7 @@ export const useRoutes = ({
     exchanges,
     feeConfig,
     useRelayerRoutes,
-    keyPrefix,
+    storageScopeKey,
   } = useWidgetConfig()
   const sdkClient = useSDKClient()
   const setExecutableRoute = useSetExecutableRoute()
@@ -214,7 +214,7 @@ export const useRoutes = ({
   const queryKey = useMemo(
     () =>
       [
-        getQueryKey('routes', keyPrefix),
+        getQueryKey('routes', storageScopeKey),
         effectiveFromAddress,
         fromChain?.id as number,
         fromToken?.address as string,
@@ -244,7 +244,7 @@ export const useRoutes = ({
         observableRoute?.id,
       ] as const,
     [
-      keyPrefix,
+      storageScopeKey,
       effectiveFromAddress,
       fromChain?.id,
       fromToken?.address,
@@ -550,14 +550,14 @@ export const useRoutes = ({
         ;[fromToken, toToken].forEach((token) => {
           // Update main tokens cache (verified)
           queryClient.setQueriesData<TokensByChain>(
-            { queryKey: [getQueryKey('tokens', keyPrefix)] },
+            { queryKey: [getQueryKey('tokens', storageScopeKey)] },
             (data) => updateTokenInCache(data, token)
           )
 
           // Update search tokens cache (unverified) - matches any search query
           queryClient.setQueriesData<TokensByChain>(
             {
-              queryKey: [getQueryKey('tokens-search', keyPrefix)],
+              queryKey: [getQueryKey('tokens-search', storageScopeKey)],
               exact: false,
             },
             (data) => updateTokenInCache(data, token)
@@ -566,7 +566,7 @@ export const useRoutes = ({
           queryClient.setQueriesData<Token[]>(
             {
               queryKey: [
-                getQueryKey('token-balances', keyPrefix),
+                getQueryKey('token-balances', storageScopeKey),
                 fromAddress,
                 token.chainId,
               ],

package/src/hooks/useTokenBalance.ts

@@ -23,18 +23,18 @@ export const useTokenBalance = (
   getTokenBalancesWithRetry: typeof getTokenBalancesWithRetry
 } => {
   const queryClient = useQueryClient()
-  const { keyPrefix } = useWidgetConfig()
+  const { storageScopeKey } = useWidgetConfig()
   const sdkClient = useSDKClient()
 
   const tokenBalanceQueryKey = useMemo(
     () =>
       [
-        getQueryKey('token-balance', keyPrefix),
+        getQueryKey('token-balance', storageScopeKey),
         accountAddress,
         token?.chainId,
         token?.address,
       ] as const,
-    [token?.address, token?.chainId, accountAddress, keyPrefix]
+    [token?.address, token?.chainId, accountAddress, storageScopeKey]
   )
 
   const { data, isLoading, refetch } = useQuery({
@@ -67,7 +67,7 @@ export const useTokenBalance = (
       queryClient.setQueriesData<TokenAmount[]>(
         {
           queryKey: [
-            getQueryKey('token-balances', keyPrefix),
+            getQueryKey('token-balances', storageScopeKey),
             accountAddress,
             tokenChainId,
           ],

package/src/hooks/useTokenBalancesQueries.ts

@@ -20,7 +20,7 @@ export const useTokenBalancesQueries = (
   isLoading: boolean
   isError: boolean
 } => {
-  const { keyPrefix } = useWidgetConfig()
+  const { storageScopeKey } = useWidgetConfig()
   const sdkClient = useSDKClient()
   const firstLoadStartRef = useRef<number | null>(null)
 
@@ -34,7 +34,7 @@ export const useTokenBalancesQueries = (
           const chainId = Number(chainIdStr)
           return {
             queryKey: [
-              getQueryKey('token-balances', keyPrefix),
+              getQueryKey('token-balances', storageScopeKey),
               accountAddress,
               chainId,
               tokens.length,
@@ -55,7 +55,7 @@ export const useTokenBalancesQueries = (
           }
         })
     )
-  }, [accountsWithTokens, isBalanceLoadingEnabled, keyPrefix, sdkClient])
+  }, [accountsWithTokens, isBalanceLoadingEnabled, storageScopeKey, sdkClient])
 
   const result = useQueries({
     queries: queryConfig,

package/src/hooks/useTokenSearch.ts

@@ -18,11 +18,15 @@ export const useTokenSearch = (
   isLoading: boolean
 } => {
   const queryClient = useQueryClient()
-  const { tokens: configTokens, keyPrefix } = useWidgetConfig()
+  const { tokens: configTokens, storageScopeKey } = useWidgetConfig()
   const sdkClient = useSDKClient()
 
   const { data, isLoading } = useQuery({
-    queryKey: [getQueryKey('token-search', keyPrefix), chainId, tokenQuery],
+    queryKey: [
+      getQueryKey('token-search', storageScopeKey),
+      chainId,
+      tokenQuery,
+    ],
     queryFn: async ({ queryKey: [, chainId, tokenQuery], signal }) => {
       const token = await getToken(
         sdkClient,
@@ -52,7 +56,7 @@ export const useTokenSearch = (
 
         // Add token to main tokens cache
         queryClient.setQueriesData<TokensByChain>(
-          { queryKey: [getQueryKey('tokens', keyPrefix)] },
+          { queryKey: [getQueryKey('tokens', storageScopeKey)] },
           (data) => {
             if (!data) {
               return data