0xtrails 0.13.0 → 0.13.2

package/src/widget/hooks/useTokenList.ts

@@ -5,7 +5,6 @@ import { useAccount } from "wagmi"
 import { useQuery } from "@tanstack/react-query"
 import { getChainInfo } from "../../chains.js"
 import { useSupportedChains } from "../../query/chains.hooks.js"
-import { SECOND_MS, MINUTE_MS, DAY_MS } from "../../utils/time.js"
 import type { Token } from "../../tokens.js"
 import {
   addressEqual,
@@ -25,13 +24,22 @@ import {
 } from "../../utils/format.js"
 import { useSupportedTokens, useGetTokenImageUrl } from "../../tokens.js"
 import { useTrailsClient } from "../../trailsClient.js"
-import { useTokenPrices } from "../../prices.js"
+import { useTokenPrices } from "../../query/price.hooks.js"
 import { logger } from "../../logger.js"
+import { useOnrampClient } from "../../onrampClient.js"
+import type { MeshSupportedToken } from "@0xtrails/api/onramp"
 import { useTrails } from "../providers/TrailsProvider.js"
-import { useCustomTokenFetch } from "./useCustomTokenFetch.js"
+import { isMeshAssetSupported } from "../utils/meshSupportedTokens.js"
+import { getActiveMeshEnvironment } from "../utils/onrampConfig.js"
+import { getWidgetOnrampConfig } from "../utils/trailsOnrampConfig.js"
+import { DAY_MS } from "../../utils/time.js"
 import { useChainFilter } from "./useChainFilter.js"
+import { useCustomTokenSearch } from "./useCustomTokenSearch.js"
 import { useDebounce } from "./useDebounce.js"
+import { useSelectedFundMethod } from "./useSelectedFundMethod.js"
+import { useWidgetProps } from "./useWidgetProps.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
+import { tokenListQueries } from "../../query/tokenList.queries.js"
 
 // Standard tokens for QR code and exchange modes
 const STANDARD_TOKENS = [
@@ -162,6 +170,7 @@ export type UseTokenListProps = {
   fundMethod?: FundMethod | null
   allSupportedTokens?: boolean
   includePrice?: boolean
+  balanceRefetchInterval?: number | false
 }
 
 export type UseTokenListReturn = {
@@ -169,9 +178,14 @@ export type UseTokenListReturn = {
   searchQuery: string
   handleTokenSelect: (token: Token) => void
   filteredTokens: Token[]
+  chainFilteredTokens: Token[]
+  /** All tokens found by findContractInfo across every supported chain (unfiltered by chain selector). */
+  foundTokensAllChains: Token[]
   isLoadingSortedTokens: boolean
   isLoadingSearchTokens?: boolean
+  isLoadingCustomToken: boolean
   isSearching: boolean // True when search is in progress (typing)
+  customTokenError: Error | null
   balanceError: Error | null
   showContinueButton: boolean
   isTokenSelected: (token: Token) => boolean
@@ -191,26 +205,50 @@ export function useTokenList({
   fundMethod,
   allSupportedTokens = false,
   includePrice = false,
+  balanceRefetchInterval = WIDGET_REFRESH_INTERVAL,
 }: UseTokenListProps): UseTokenListReturn {
   const [selectedToken, setSelectedToken] = useState<Token | null>(null)
   const [searchQuery, setSearchQuery] = useState("")
   const { address } = useAccount()
   const trailsClient = useTrailsClient()
   const { getTokenImageUrl } = useGetTokenImageUrl()
+  const shouldSkipBalanceQueries = !!fundMethod && fundMethod !== "wallet"
+  const balanceQueryAccount = shouldSkipBalanceQueries
+    ? null
+    : (address as Address.Address)
+
   const {
     sortedTokens: allSortedTokens,
     isLoadingSortedTokens,
     balanceError,
-  } = useTokenBalances(address as Address.Address, undefined, {
-    refetchInterval: WIDGET_REFRESH_INTERVAL,
+  } = useTokenBalances(balanceQueryAccount, undefined, {
+    disabled: shouldSkipBalanceQueries,
+    refetchInterval: shouldSkipBalanceQueries ? false : balanceRefetchInterval,
   })
 
-  // Use cached supported tokens hook
+  // Only fetch the full token catalog when needed (non-wallet fund methods
+  // or destination selector with allSupportedTokens). For the wallet source
+  // selector we only show user balance tokens.
+  const needsSupportedTokens =
+    (fundMethod && fundMethod !== "wallet") || allSupportedTokens
   const { supportedTokens, isLoadingTokens: isLoadingSupportedTokens } =
-    useSupportedTokens()
+    useSupportedTokens({ disabled: !needsSupportedTokens })
 
   // Get trails config for API calls
   const trailsConfig = useTrails()
+  const { onramp: onrampFactory } = useWidgetProps()
+  const { selectedMeshExchange } = useSelectedFundMethod()
+  const onrampClient = useOnrampClient()
+  const meshOnrampConfig = getWidgetOnrampConfig(onrampFactory)
+  const meshEnvironment = getActiveMeshEnvironment(meshOnrampConfig)
+  const meshEnabled = !!meshOnrampConfig?.mesh
+  const meshAllowedExchanges = meshOnrampConfig?.mesh?.exchanges ?? null
+  const activeMeshIntegrationIds = selectedMeshExchange
+    ? [selectedMeshExchange.integrationId]
+    : null
+  const activeMeshExchangeKeys = selectedMeshExchange
+    ? null
+    : meshAllowedExchanges
 
   // Get supported chains for getTokenList API
   const { data: supportedChains = [] } = useSupportedChains()
@@ -223,6 +261,8 @@ export function useTokenList({
   // For other modes, we only filter user's token balances locally
   const shouldUseApiSearch =
     (fundMethod && fundMethod !== "wallet") || allSupportedTokens
+  const shouldFilterMeshTokens =
+    fundMethod === "onramp-mesh" && !allSupportedTokens
 
   // Memoize chain IDs to avoid recalculating
   const apiSearchChainIds = useMemo(
@@ -245,60 +285,25 @@ export function useTokenList({
   // Call getTokenList API when there's a search query (for any search, not just addresses)
   const { data: searchTokensResult, isLoading: isLoadingSearchTokens } =
     useQuery({
-      queryKey: [
-        "getTokenList",
-        "search",
-        debouncedSearchQuery,
-        apiSearchChainIds,
-        trailsConfig.trailsApiUrl,
-        trailsConfig.trailsApiKey,
-      ],
-      queryFn: async () => {
-        if (
-          !debouncedSearchQuery ||
-          !trailsClient ||
-          !trailsConfig.trailsApiKey
-        ) {
-          return { tokens: [] }
-        }
-
-        try {
-          const response = await trailsClient.getTokenList({
-            searchQuery: debouncedSearchQuery,
-            chainIds: apiSearchChainIds,
-            includeAllListed: true,
-            limit: 30,
-          })
-          return response
-        } catch (error) {
-          logger.console.warn("[trails-sdk] Error searching tokens:", error)
-          return { tokens: [] }
-        }
-      },
+      ...tokenListQueries.search(
+        trailsClient,
+        {
+          trailsApiUrl: trailsConfig.trailsApiUrl,
+          trailsApiKey: trailsConfig.trailsApiKey,
+        },
+        {
+          searchQuery: debouncedSearchQuery,
+          // For getTokenList, pass a chain id if selected
+          chainIds:
+            filterByChainId !== null ? [filterByChainId] : apiSearchChainIds,
+          limit: 30,
+        },
+      ),
       enabled:
         shouldUseApiSearch &&
         debouncedSearchQuery.length > 0 &&
         !!trailsClient &&
         !!trailsConfig.trailsApiKey,
-      staleTime: 30 * SECOND_MS, // 30 seconds
-      gcTime: 5 * MINUTE_MS, // 5 minutes
-    })
-
-  // Fetch custom token info if searching by address and getTokenList returned no results
-  const hasNoSearchResults = searchTokensResult?.tokens?.length === 0
-  const shouldFetchCustomToken =
-    shouldUseApiSearch &&
-    isSearchQueryAddress &&
-    hasNoSearchResults &&
-    !isLoadingSearchTokens &&
-    trimmedSearchQuery.length > 0
-  const customTokenChainId = supportedChains[0]?.id ?? null
-
-  const { tokenInfo: customTokenInfo, isLoading: isLoadingCustomToken } =
-    useCustomTokenFetch({
-      address: shouldFetchCustomToken ? trimmedSearchQuery : null,
-      chainId: customTokenChainId,
-      enabled: shouldFetchCustomToken,
     })
 
   // Fetch tokens from getTokenList when a chain is selected (for destination token list only)
@@ -306,51 +311,77 @@ export function useTokenList({
   const {
     data: chainFilteredTokenList,
     isLoading: isLoadingChainFilteredTokens,
+  } = useQuery({
+    ...tokenListQueries.byChain(
+      trailsClient,
+      {
+        trailsApiUrl: trailsConfig.trailsApiUrl,
+        trailsApiKey: trailsConfig.trailsApiKey,
+      },
+      {
+        chainId: filterByChainId,
+        limit: 100,
+      },
+    ),
+    enabled:
+      shouldUseApiSearch &&
+      filterByChainId !== null &&
+      !!trailsClient &&
+      !!trailsConfig.trailsApiKey,
+  })
+
+  const {
+    data: meshSupportedTokens = [],
+    isLoading: isLoadingMeshSupportedTokens,
   } = useQuery({
     queryKey: [
-      "getTokenList",
-      filterByChainId,
+      "mesh-supported-tokens",
+      meshEnvironment,
+      activeMeshExchangeKeys,
       trailsConfig.trailsApiUrl,
       trailsConfig.trailsApiKey,
     ],
     queryFn: async () => {
-      if (
-        !filterByChainId ||
-        !trailsClient ||
-        !trailsConfig.trailsApiKey ||
-        !shouldUseApiSearch
-      ) {
-        return { tokens: [] }
-      }
+      const response = await onrampClient.getMeshSupportedTokens({
+        environment: meshEnvironment,
+      })
 
-      try {
-        // Fetch tokens from the selected chain with limit of 100 for single chain
-        const response = await trailsClient.getTokenList({
-          chainIds: [filterByChainId],
-          includeAllListed: true,
-          limit: 100,
-        })
-        return response
-      } catch (error) {
-        logger.console.warn(
-          "[trails-sdk] Error fetching tokens for chain filter:",
-          error,
+      if (activeMeshIntegrationIds?.length) {
+        return (response.tokens || []).filter((token: MeshSupportedToken) =>
+          (token.integrationIds || []).some((integrationId) =>
+            activeMeshIntegrationIds.includes(integrationId),
+          ),
         )
-        return { tokens: [] }
       }
+
+      if (!activeMeshExchangeKeys?.length) {
+        return response.tokens || []
+      }
+
+      return (response.tokens || []).filter((token: MeshSupportedToken) =>
+        (token.exchangeKeys || []).some((exchangeKey) =>
+          activeMeshExchangeKeys.includes(exchangeKey),
+        ),
+      )
     },
     enabled:
-      shouldUseApiSearch &&
-      filterByChainId !== null &&
-      !!trailsClient &&
-      !!trailsConfig.trailsApiKey,
-    staleTime: DAY_MS, // 24 hours - token list is static
-    gcTime: DAY_MS, // 24 hours
+      fundMethod === "onramp-mesh" &&
+      meshEnabled &&
+      !!trailsConfig.trailsApiKey &&
+      !!trailsConfig.trailsApiUrl,
+    staleTime: DAY_MS,
+    gcTime: DAY_MS,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
   })
 
+  const isSupportedMeshToken = useMemo(
+    () => (chainId?: number | null, symbol?: string | null) =>
+      isMeshAssetSupported(meshSupportedTokens, chainId, symbol),
+    [meshSupportedTokens],
+  )
+
   // Fetch prices for supported tokens when allSupportedTokens is true OR for qr-code/exchange/meld modes
   const supportedTokensForPricing = useMemo(() => {
     if (
@@ -363,7 +394,9 @@ export function useTokenList({
 
       const filteredTokens = supportedTokens.filter((token: any) => {
         const symbol = token.symbol.toUpperCase()
-        return STANDARD_TOKENS.includes(symbol as any)
+        return shouldFilterMeshTokens
+          ? isSupportedMeshToken(token.chainId, token.symbol)
+          : STANDARD_TOKENS.includes(symbol as any)
       })
 
       return filteredTokens.map((token: any) => ({
@@ -380,7 +413,13 @@ export function useTokenList({
       tokenAddress: token.contractAddress || zeroAddress,
       tokenSymbol: token.symbol,
     }))
-  }, [allSupportedTokens, supportedTokens, fundMethod])
+  }, [
+    allSupportedTokens,
+    supportedTokens,
+    fundMethod,
+    isSupportedMeshToken,
+    shouldFilterMeshTokens,
+  ])
 
   const {
     tokenPrices: supportedTokenPrices,
@@ -392,8 +431,8 @@ export function useTokenList({
     fundMethod && fundMethod !== "wallet"
       ? isLoadingSupportedTokens ||
         isLoadingSupportedTokenPrices ||
+        isLoadingMeshSupportedTokens ||
         isLoadingSearchTokens ||
-        isLoadingCustomToken ||
         isLoadingChainFilteredTokens
       : allSupportedTokens
         ? isLoadingSortedTokens ||
@@ -403,28 +442,32 @@ export function useTokenList({
         : isLoadingSortedTokens
 
   const { data: totalBalanceUsd = 0, isLoading: isLoadingTotalBalanceUsd } =
-    useAccountTotalBalanceUsd(address as Address.Address)
+    useAccountTotalBalanceUsd(balanceQueryAccount)
   const totalBalanceUsdFormatted = formatUsdAmountDisplay(totalBalanceUsd)
   const {
     data: hasSufficientBalanceUsd = false,
     isLoading: isLoadingHasSufficientBalanceUsd,
     error: hasSufficientBalanceUsdError,
-  } = useHasSufficientBalanceUsd(address as Address.Address, targetAmountUsd)
+  } = useHasSufficientBalanceUsd(
+    balanceQueryAccount,
+    shouldSkipBalanceQueries ? null : targetAmountUsd,
+  )
   const showContinueButton = false
   // Note: Supported tokens are now fetched via useSupportedTokens hook with caching
 
   // Map chain-filtered token list results to Token format
   // Used when a chain is selected for destination token list
   const chainFilteredApiTokens = useMemo(() => {
+    const chainTokens = (chainFilteredTokenList?.tokens ?? []) as ApiTokenInfo[]
     if (
       !shouldUseApiSearch ||
-      !chainFilteredTokenList?.tokens?.length ||
+      chainTokens.length === 0 ||
       filterByChainId === null
     ) {
       return []
     }
 
-    return chainFilteredTokenList.tokens
+    const tokens = chainTokens
       .filter((tokenInfo: ApiTokenInfo) => {
         if (!isValidDecimals(tokenInfo.decimals)) {
           logger.console.warn(
@@ -442,11 +485,19 @@ export function useTokenList({
       .map((tokenInfo: ApiTokenInfo) =>
         convertApiTokenToToken(tokenInfo, getTokenImageUrl),
       )
+
+    return shouldFilterMeshTokens
+      ? tokens.filter((token) =>
+          isSupportedMeshToken(token.chainId, token.symbol),
+        )
+      : tokens
   }, [
     chainFilteredTokenList,
     getTokenImageUrl,
     shouldUseApiSearch,
     filterByChainId,
+    shouldFilterMeshTokens,
+    isSupportedMeshToken,
   ])
 
   const sortedTokens = useMemo<Array<Token>>(() => {
@@ -501,13 +552,19 @@ export function useTokenList({
           }
         }
 
-        return mergedTokens
+        return shouldFilterMeshTokens
+          ? mergedTokens.filter((token) =>
+              isSupportedMeshToken(token.chainId, token.symbol),
+            )
+          : mergedTokens
       }
 
       // Filter to only show specific tokens for QR code and exchange modes
       const filteredTokens = supportedTokens.filter((token: any) => {
         const symbol = token.symbol.toUpperCase()
-        return STANDARD_TOKENS.includes(symbol as any)
+        return shouldFilterMeshTokens
+          ? isSupportedMeshToken(token.chainId, token.symbol)
+          : STANDARD_TOKENS.includes(symbol as any)
       })
 
       // Convert SupportedToken to Token format and add price data
@@ -541,9 +598,15 @@ export function useTokenList({
       )
 
       // Sort by price (highest first) since volume is not available
-      return tokensWithPrices.sort((a, b) => {
+      const sortedMeshTokens = tokensWithPrices.sort((a, b) => {
         return (b.priceUsd || 0) - (a.priceUsd || 0)
       })
+
+      return shouldFilterMeshTokens
+        ? sortedMeshTokens.filter((token) =>
+            isSupportedMeshToken(token.chainId, token.symbol),
+          )
+        : sortedMeshTokens
     }
 
     // If allSupportedTokens is true and chain filter is active, use chain-filtered tokens
@@ -604,6 +667,8 @@ export function useTokenList({
     fundMethod,
     supportedTokens,
     supportedTokenPrices,
+    isSupportedMeshToken,
+    shouldFilterMeshTokens,
     shouldUseApiSearch,
     filterByChainId,
     chainFilteredApiTokens,
@@ -665,11 +730,12 @@ export function useTokenList({
   // Map API search results to Token format
   // Only used for exchange/qr-code modes
   const apiSearchTokens = useMemo(() => {
-    if (!shouldUseApiSearch || !searchTokensResult?.tokens?.length) {
+    const searchTokens = (searchTokensResult?.tokens ?? []) as ApiTokenInfo[]
+    if (!shouldUseApiSearch || searchTokens.length === 0) {
       return []
     }
 
-    return searchTokensResult.tokens
+    const tokens = searchTokens
       .filter((tokenInfo: ApiTokenInfo) => {
         if (!isValidDecimals(tokenInfo.decimals)) {
           logger.console.warn(
@@ -687,42 +753,21 @@ export function useTokenList({
       .map((tokenInfo: ApiTokenInfo) =>
         convertApiTokenToToken(tokenInfo, getTokenImageUrl),
       )
-  }, [searchTokensResult, getTokenImageUrl, shouldUseApiSearch])
-
-  // Convert custom token info to Token format
-  const customTokenAsTokenBalance = useMemo(() => {
-    if (!customTokenInfo || !customTokenChainId) return null
-
-    const chainInfo = getChainInfo(customTokenChainId)
-    const validatedDecimals = validateDecimals(customTokenInfo.decimals)
-
-    return {
-      symbol: customTokenInfo.symbol,
-      name: customTokenInfo.name,
-      decimals: validatedDecimals,
-      contractAddress: customTokenInfo.contractAddress,
-      chainId: customTokenChainId,
-      chainName: chainInfo?.name || `Chain ${customTokenChainId}`,
-      imageUrl: getTokenImageUrl({
-        chainId: customTokenChainId,
-        contractAddress: customTokenInfo.contractAddress,
-        symbol: customTokenInfo.symbol,
-      }),
-      isCustomToken: true,
-    } as Token
-  }, [customTokenInfo, customTokenChainId, getTokenImageUrl])
 
-  const filteredTokens = useMemo(() => {
-    // If searching by address and getTokenList returned no results, return custom token if available
-    if (
-      shouldUseApiSearch &&
-      isSearchQueryAddress &&
-      hasNoSearchResults &&
-      customTokenAsTokenBalance
-    ) {
-      return [customTokenAsTokenBalance]
-    }
+    return shouldFilterMeshTokens
+      ? tokens.filter((token) =>
+          isSupportedMeshToken(token.chainId, token.symbol),
+        )
+      : tokens
+  }, [
+    searchTokensResult,
+    getTokenImageUrl,
+    shouldUseApiSearch,
+    shouldFilterMeshTokens,
+    isSupportedMeshToken,
+  ])
 
+  const filteredTokens = useMemo(() => {
     // sortedTokens is already Token[] from useTokenBalances
     // Only use API search results for exchange/qr-code modes
     if (
@@ -853,15 +898,7 @@ export function useTokenList({
 
       return bScore - aScore // Higher score first
     })
-  }, [
-    sortedTokens,
-    trimmedSearchQuery,
-    apiSearchTokens,
-    shouldUseApiSearch,
-    isSearchQueryAddress,
-    hasNoSearchResults,
-    customTokenAsTokenBalance,
-  ])
+  }, [sortedTokens, trimmedSearchQuery, apiSearchTokens, shouldUseApiSearch])
 
   const filteredTokensFormatted = useMemo(() => {
     // Get base formatted tokens - filteredTokens is already Token[]
@@ -924,6 +961,13 @@ export function useTokenList({
       // Add supported tokens that don't exist in the base list
       const additionalSupportedTokens: Token[] = supportedTokens
         .filter((supportedToken) => {
+          if (
+            shouldFilterMeshTokens &&
+            !isSupportedMeshToken(supportedToken.chainId, supportedToken.symbol)
+          ) {
+            return false
+          }
+
           const key = `${supportedToken.chainId || 0}-${normalizeAddress(supportedToken.contractAddress)}`
           return !existingTokenKeys.has(key)
         })
@@ -1053,6 +1097,8 @@ export function useTokenList({
     supportedTokens,
     supportedTokenPrices,
     searchQuery,
+    shouldFilterMeshTokens,
+    isSupportedMeshToken,
   ])
 
   const showInsufficientBalance = useMemo(() => {
@@ -1077,14 +1123,37 @@ export function useTokenList({
   // isSearching: true when user is typing (debounce pending) or API is fetching
   const isSearching = isSearchPending || isLoadingSearchTokens
 
+  // True when an address search via the trailsApi.getTokenList has finished with zero results.
+  const isApiAddressSearchComplete =
+    isSearchQueryAddress &&
+    !isLoadingSearchTokens &&
+    !isSearchPending &&
+    (searchTokensResult?.tokens?.length ?? 0) === 0
+
+  const {
+    chainFilteredTokens,
+    foundTokensAllChains,
+    isLoadingCustomToken,
+    customTokenError,
+  } = useCustomTokenSearch({
+    searchQuery,
+    filteredTokensFormatted,
+    filterByChainId,
+    isApiAddressSearchComplete,
+  })
+
   return {
     selectedToken,
     searchQuery,
     handleTokenSelect,
     filteredTokens,
+    chainFilteredTokens,
+    foundTokensAllChains,
     isLoadingSortedTokens: isLoadingSortedTokens || isLoadingSearchTokens,
     isLoadingSearchTokens,
+    isLoadingCustomToken,
     isSearching,
+    customTokenError,
     balanceError,
     showContinueButton,
     isTokenSelected,

package/src/widget/hooks/useTrailsSendTransaction.ts

@@ -18,7 +18,7 @@ import { balanceQueries } from "../../query/balance.queries.js"
 import { checkSufficientToken } from "../../query/balance.fetchers.js"
 import { useSupportedTokens } from "../../tokens.js"
 import { getChainInfo } from "../../chains.js"
-import { getTokenPrice } from "../../prices.js"
+import { getTokenPrice } from "../../query/price.queries.js"
 import { findSupportedToken } from "../utils/tokens.js"
 import { zeroAddress, erc20Abi, type Address, type Hex } from "viem"
 import { useCommitIntent, useExecuteIntent } from "../../mutations.js"

package/src/widget/hooks/useViewManager.tsx

@@ -20,6 +20,7 @@ export type Screen =
   | "send-form"
   | "fund-form"
   | "fund-methods"
+  | "mesh-exchanges"
   | "payment-methods"
   | "select-funding-wallet"
   | "onramp-payment-methods"

package/src/widget/providers/TrailsProvider.tsx

@@ -17,6 +17,7 @@ import {
   PROD_TRAILS_API_URL,
   PROD_TRAILS_APP_URL,
   PROD_SEQUENCE_API_URL,
+  PROD_KEYMACHINE_URL,
 } from "../../constants.js"
 import { declareCommitHash, updateGlobalConfig } from "../../config.js"
 import { updateProjectAccessKey } from "../../analytics.js"
@@ -33,6 +34,7 @@ export interface TrailsConfig {
   sequenceNodeGatewayUrl: string
   sequenceMetadataUrl: string
   sequenceApiUrl: string
+  keyMachineUrl: string
   walletConnectProjectId: string
   slippageTolerance: string | number
   debug: boolean
@@ -49,6 +51,7 @@ export interface TrailsProviderProps {
     sequenceNodeGatewayUrl?: string
     sequenceMetadataUrl?: string
     sequenceApiUrl?: string
+    keyMachineUrl?: string
     walletConnectProjectId?: string
     slippageTolerance?: string | number
     debug?: boolean
@@ -76,6 +79,7 @@ export const TrailsProvider = ({ children, config }: TrailsProviderProps) => {
       sequenceMetadataUrl:
         config.sequenceMetadataUrl || PROD_SEQUENCE_METADATA_URL,
       sequenceApiUrl: config.sequenceApiUrl || PROD_SEQUENCE_API_URL,
+      keyMachineUrl: config.keyMachineUrl || PROD_KEYMACHINE_URL,
       walletConnectProjectId:
         config.walletConnectProjectId || DEFAULT_WALLETCONNECT_PROJECT_ID,
       slippageTolerance: config.slippageTolerance ?? DEFAULT_SLIPPAGE_TOLERANCE,
@@ -91,6 +95,7 @@ export const TrailsProvider = ({ children, config }: TrailsProviderProps) => {
     config.sequenceMetadataUrl,
     config.sequenceNodeGatewayUrl,
     config.sequenceApiUrl,
+    config.keyMachineUrl,
     config.walletConnectProjectId,
     config.slippageTolerance,
     resolvedDebug,