0xtrails 0.6.6 → 0.7.0

package/src/widget/hooks/useCheckout.ts

@@ -13,6 +13,7 @@ import {
   getErrorString,
 } from "../../error.js"
 import { invalidateTokenBalancesCache } from "../../tokenBalances.js"
+import type { TransactionState } from "../../transactions.js"
 
 export type CheckoutCallbacks = {
   onCheckoutStart?: (data: { sessionId: string }) => void
@@ -41,20 +42,31 @@ export type CheckoutCallbacks = {
 }
 
 export type CheckoutOnHandlers = {
+  /** Triggered when the intent transaction process starts. */
   triggerCheckoutStart: () => void
+  /** Triggered when a quote is received. */
   triggerCheckoutQuote: (quote: any) => void
+  /** Triggered when a signature is requested. */
   triggerCheckoutSignatureRequest: () => void
+  /** Triggered when a signature is confirmed. */
   triggerCheckoutSignatureConfirmed: () => void
+  /** Triggered when a signature is rejected. */
   triggerCheckoutSignatureRejected: (error: unknown) => void
+  /** Triggered when a token approval is requested. */
   triggerCheckoutApprovalRequest: () => void
+  /** Triggered when a token approval is confirmed. */
   triggerCheckoutApprovalConfirmed: (transactionHash: `0x${string}`) => void
+  /** Triggered when a token approval is rejected. */
   triggerCheckoutApprovalRejected: (error: unknown) => void
+  /** Triggered when the intent transaction process completes. */
   triggerCheckoutComplete: (
     txStatus: "success" | "fail",
     accountAddress?: string,
   ) => void
+  /** Triggered when an error occurs. */
   triggerCheckoutError: (error: unknown) => void
-  triggerCheckoutStatusUpdate: (transactionStates: any[]) => void
+  /** Triggered when the intent transaction states change. */
+  triggerCheckoutStatusUpdate: (transactionStates: TransactionState[]) => void
 }
 
 export type UseCheckoutProps = CheckoutCallbacks

package/src/widget/hooks/useConnector.tsx

@@ -0,0 +1,18 @@
+import { type Connector, useConnectors as useWagmiConnectors } from "wagmi"
+
+export function useConnectors() {
+  const connectors = useWagmiConnectors()
+  return connectors ?? []
+}
+
+export function useConnector(id: string, uuid?: string) {
+  const connectors = useConnectors()
+  if (id === "injected" && uuid) {
+    return connectors.find((c) => c.id === id && c.name === uuid) as Connector
+  } else if (id === "injected") {
+    return connectors.find(
+      (c) => c.id === id && c.name.includes("Injected"),
+    ) as Connector
+  }
+  return connectors.find((c) => c.id === id) as Connector | undefined
+}

package/src/widget/hooks/useCurrentScreen.tsx

@@ -3,6 +3,8 @@ import { createContext, useContext, useState, type ReactNode } from "react"
 export type Screen =
   | "connect"
   | "tokens"
+  | "select-origin-token"
+  | "select-origin-amount"
   | "send-form"
   | "fund-form"
   | "fund-methods"
@@ -10,14 +12,12 @@ export type Screen =
   | "earn-pools"
   | "earn"
   | "swap"
-  | "receive"
   | "wallet-confirmation"
   | "qr-code-wallet-select"
   | "qr-code-deposit"
   | "pending"
   | "receipt"
-  | "mesh-connect"
-  | "mesh-connect-exchanges"
+  | "onramp"
   | "wallet-connect"
   | "wallet-list"
   | "wallet-connection-pending"

package/src/widget/hooks/useCustomTokenFetch.tsx

@@ -0,0 +1,72 @@
+import { useQuery } from "@tanstack/react-query"
+import { isAddress } from "viem"
+import { getTokenInfo } from "../../tokens.js"
+import { logger } from "../../logger.js"
+import { useTrails } from "../providers/TrailsProvider.js"
+
+interface UseCustomTokenFetchProps {
+  address: string | null
+  chainId: number | null
+  enabled?: boolean
+}
+
+interface UseCustomTokenFetchReturn {
+  tokenInfo: Awaited<ReturnType<typeof getTokenInfo>> | null
+  isLoading: boolean
+  error: Error | null
+  isValidAddress: boolean
+}
+
+/**
+ * Hook to fetch token information for a custom address
+ * Reuses getTokenInfo from tokens.ts which handles caching and on-chain fetching
+ */
+export function useCustomTokenFetch({
+  address,
+  chainId,
+  enabled = true,
+}: UseCustomTokenFetchProps): UseCustomTokenFetchReturn {
+  const isValidAddress = address ? isAddress(address) : false
+  const shouldFetch = enabled && isValidAddress && chainId !== null
+  const trailsConfig = useTrails()
+
+  const {
+    data: tokenInfo,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["customToken", address?.toLowerCase(), chainId],
+    queryFn: async () => {
+      if (!address || !chainId) return null
+
+      try {
+        const info = await getTokenInfo(chainId, address, {
+          trailsApiKey: trailsConfig.trailsApiKey,
+          trailsApiUrl: trailsConfig.trailsApiUrl,
+        })
+        if (info) {
+          logger.console.log("[trails-sdk] Fetched custom token info:", info)
+        }
+        return info
+      } catch (err) {
+        logger.console.error(
+          "[trails-sdk] Error fetching custom token info:",
+          err,
+        )
+        throw err
+      }
+    },
+    enabled: shouldFetch,
+    staleTime: 5 * 60 * 1000, // 5 minutes - token info doesn't change often
+    gcTime: 24 * 60 * 60 * 1000, // 24 hours
+    retry: 1, // Only retry once for network errors
+    refetchOnWindowFocus: false,
+  })
+
+  return {
+    tokenInfo: tokenInfo ?? null,
+    isLoading,
+    error: error as Error | null,
+    isValidAddress,
+  }
+}

package/src/widget/hooks/useCustomTokenSearch.tsx

@@ -0,0 +1,402 @@
+import { useMemo, useEffect, useCallback } from "react"
+import { isAddress } from "viem"
+import { useAccount, useChainId } from "wagmi"
+import { useQuery } from "@tanstack/react-query"
+import { useSupportedChains } from "../../chains.js"
+import { getChainInfo } from "../../chains.js"
+import { useGetTokenImageUrl, getSupportedTokens } from "../../tokens.js"
+import { useCustomTokens } from "../../customTokens.js"
+// Removed convertTokenToSupportedToken import - addCustomToken now accepts Token directly
+import { useCustomTokenFetch } from "./useCustomTokenFetch.js"
+import type { Token } from "../../tokens.js"
+import { logger } from "../../logger.js"
+import { useAccountTokenBalance, formatRawAmount } from "../../tokenBalances.js"
+import { useIndexerGatewayClient } from "../../indexerClient.js"
+import { useTrailsClient } from "../../trailsClient.js"
+import { useTrails } from "../providers/TrailsProvider.js"
+
+interface UseCustomTokenSearchProps {
+  searchQuery: string
+  filteredTokensFormatted: Token[]
+  filterByChainId: number | null
+}
+
+interface UseCustomTokenSearchReturn {
+  chainFilteredTokens: Token[]
+  isLoadingCustomToken: boolean
+  customTokenError: Error | null
+  fetchChainId: number | null
+  isCustomToken: (chainId: number, contractAddress: string) => boolean
+}
+
+/**
+ * Hook to handle custom token search and integration
+ * Detects addresses in search query, fetches token info, and merges with token list
+ */
+export function useCustomTokenSearch({
+  searchQuery,
+  filteredTokensFormatted,
+  filterByChainId,
+}: UseCustomTokenSearchProps): UseCustomTokenSearchReturn {
+  const { address } = useAccount()
+  const connectedChainId = useChainId()
+  const { supportedChains } = useSupportedChains()
+  const { getTokenImageUrl } = useGetTokenImageUrl()
+  const { addCustomToken, customTokens } = useCustomTokens()
+  const trailsConfig = useTrails()
+  // Get official supported tokens (before merging with custom tokens) to check if token is truly custom
+  const { data: officialSupportedTokens = [] } = useQuery({
+    queryKey: [
+      "supportedTokens",
+      trailsConfig.trailsApiUrl,
+      trailsConfig.trailsApiKey,
+    ],
+    queryFn: () =>
+      getSupportedTokens({
+        trailsApiKey: trailsConfig.trailsApiKey,
+        trailsApiUrl: trailsConfig.trailsApiUrl,
+      }),
+    staleTime: 60 * 60 * 1000, // 1 hour
+    gcTime: 24 * 60 * 60 * 1000, // 24 hours
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+  const indexerGatewayClient = useIndexerGatewayClient()
+  const trailsClient = useTrailsClient()
+
+  // Detect if search query is a valid address
+  const searchAddress = useMemo(() => {
+    const trimmed = searchQuery.trim()
+    return isAddress(trimmed) ? trimmed : null
+  }, [searchQuery])
+
+  // Determine chain ID for fetching custom token
+  // Priority: filterByChainId > connectedChainId > first supported chain
+  const fetchChainId = useMemo(() => {
+    if (filterByChainId !== null) return filterByChainId
+    if (connectedChainId) return connectedChainId
+    // Fallback to first supported chain if available
+    return supportedChains.length > 0 ? supportedChains?.[0]?.id : null
+  }, [filterByChainId, connectedChainId, supportedChains])
+
+  // Check if the address already exists in the token list
+  // When chain filter is active, check if token exists on that specific chain
+  // Otherwise, check if it exists on any chain
+  // Also check custom tokens from localStorage
+  const addressExistsInList = useMemo(() => {
+    if (!searchAddress) return false
+
+    // First check custom tokens (from localStorage)
+    const existsInCustomTokens = customTokens.some((token) => {
+      const addressMatch =
+        token.contractAddress.toLowerCase() === searchAddress.toLowerCase()
+      if (filterByChainId !== null) {
+        return addressMatch && token.chainId === filterByChainId
+      }
+      return addressMatch
+    })
+
+    if (existsInCustomTokens) return true
+
+    // Then check filteredTokensFormatted
+    // If chain filter is active, check if token exists on that specific chain
+    if (filterByChainId !== null) {
+      return filteredTokensFormatted.some(
+        (token) =>
+          token.chainId === filterByChainId &&
+          token.contractAddress.toLowerCase() === searchAddress.toLowerCase(),
+      )
+    }
+
+    // Otherwise, check if it exists on any chain
+    return filteredTokensFormatted.some(
+      (token) =>
+        token.contractAddress.toLowerCase() === searchAddress.toLowerCase(),
+    )
+  }, [searchAddress, filteredTokensFormatted, filterByChainId, customTokens])
+
+  // Fetch custom token info when address is detected and not in list
+  const {
+    tokenInfo: customTokenInfo,
+    isLoading: isLoadingCustomToken,
+    error: customTokenError,
+  } = useCustomTokenFetch({
+    address: searchAddress && !addressExistsInList ? searchAddress : null,
+    chainId: fetchChainId ?? null,
+    enabled: !!searchAddress && !addressExistsInList && fetchChainId !== null,
+  })
+
+  // Fetch balance for newly fetched custom token
+  const {
+    tokenBalance: customTokenBalance,
+    isLoadingTokenBalance: isLoadingCustomTokenBalance,
+  } = useAccountTokenBalance({
+    account: address ?? undefined,
+    token: customTokenInfo?.contractAddress,
+    chainId: fetchChainId ?? undefined,
+    indexerGatewayClient: indexerGatewayClient ?? undefined,
+    trailsClient: trailsClient ?? undefined,
+  })
+
+  // Convert custom token to Token format
+  // Always include in search results, regardless of balance
+  const customTokenFormatted = useMemo((): Token | null => {
+    if (!customTokenInfo || !fetchChainId) return null
+
+    const chainInfo = getChainInfo(fetchChainId)
+    const chainName = chainInfo?.name || `Chain ${fetchChainId}`
+    const imageUrl = getTokenImageUrl({
+      chainId: fetchChainId,
+      contractAddress: customTokenInfo.contractAddress,
+      symbol: customTokenInfo.symbol,
+    })
+
+    const balance = customTokenBalance?.balance ?? "0"
+    const balanceFormatted =
+      customTokenBalance && customTokenInfo.decimals
+        ? formatRawAmount(balance, customTokenInfo.decimals)
+        : "0"
+    const priceUsd = customTokenBalance?.priceUsd ?? 0
+
+    // Create Token with all required and optional properties
+    return {
+      symbol: customTokenInfo.symbol,
+      name: customTokenInfo.name,
+      decimals: customTokenInfo.decimals,
+      contractAddress: customTokenInfo.contractAddress,
+      chainId: fetchChainId,
+      chainName,
+      imageUrl,
+      balance,
+      balanceFormatted,
+      balanceDisplay: balanceFormatted,
+      balanceUsd: customTokenBalance?.balanceUsd,
+      balanceUsdFormatted: customTokenBalance?.balanceUsdFormatted,
+      balanceUsdDisplay: customTokenBalance?.balanceUsdFormatted,
+      priceUsd,
+      priceUsdFormatted: priceUsd.toFixed(2),
+      priceUsdDisplay: `$${priceUsd.toFixed(2)}`,
+      isCustomToken: true,
+      isSufficientBalance: true,
+    }
+  }, [customTokenInfo, fetchChainId, getTokenImageUrl, customTokenBalance])
+
+  // Add custom token to storage when successfully fetched
+  // Only save if it doesn't exist in the base supported tokens list
+  useEffect(() => {
+    if (customTokenInfo && !customTokenError && fetchChainId) {
+      // Check if token already exists in official supported tokens (before merging)
+      const existsInOfficialSupportedTokens = officialSupportedTokens.some(
+        (token) =>
+          token.chainId === fetchChainId &&
+          token.contractAddress.toLowerCase() ===
+            customTokenInfo.contractAddress.toLowerCase(),
+      )
+
+      // Only add to custom tokens if it's not an official supported token
+      if (!existsInOfficialSupportedTokens && customTokenInfo) {
+        // Add Token directly to storage
+        addCustomToken(customTokenInfo)
+        logger.console.log(
+          "[trails-sdk] Added custom token to storage:",
+          customTokenInfo,
+        )
+      } else {
+        logger.console.log(
+          "[trails-sdk] Token already exists in supported tokens, skipping custom token addition:",
+          { address: customTokenInfo.contractAddress, chainId: fetchChainId },
+        )
+      }
+    }
+  }, [
+    customTokenInfo,
+    customTokenError,
+    fetchChainId,
+    addCustomToken,
+    officialSupportedTokens,
+  ])
+
+  // Show error if custom token fetch failed
+  useEffect(() => {
+    if (
+      customTokenError &&
+      searchAddress &&
+      !addressExistsInList &&
+      fetchChainId
+    ) {
+      logger.console.error(
+        "[trails-sdk] Failed to fetch custom token:",
+        customTokenError,
+      )
+      // Error will be shown in the UI via the error message
+    }
+  }, [customTokenError, searchAddress, addressExistsInList, fetchChainId])
+
+  // Convert custom tokens from localStorage to TokenFormatted format
+  // Always include in search results, but prefer balance info from filteredTokensFormatted if available
+  const customTokensFormatted = useMemo(() => {
+    return customTokens
+      .filter((token) => {
+        // If searching by address, only include tokens that match the address
+        if (searchAddress) {
+          const addressMatch =
+            token.contractAddress.toLowerCase() === searchAddress.toLowerCase()
+          if (!addressMatch) return false
+        }
+        // Apply chain filter if active
+        if (filterByChainId !== null) {
+          return token.chainId === filterByChainId
+        }
+        return true
+      })
+      .map((token): Token => {
+        // Check if this token exists in filteredTokensFormatted (meaning it has a balance)
+        const tokenWithBalance = filteredTokensFormatted.find(
+          (t) =>
+            (t.chainId || 0) === (token.chainId || 0) &&
+            t.contractAddress.toLowerCase() ===
+              token.contractAddress.toLowerCase(),
+        )
+
+        const chainInfo = getChainInfo(token.chainId || 0)
+        const chainName = chainInfo?.name || `Chain ${token.chainId || 0}`
+        const imageUrl = getTokenImageUrl({
+          chainId: token.chainId || 0,
+          contractAddress: token.contractAddress,
+          symbol: token.symbol,
+        })
+
+        // If token exists in filteredTokensFormatted, use that data (has balance)
+        if (tokenWithBalance) {
+          return {
+            ...tokenWithBalance,
+            chainName,
+            // Preserve isCustomToken flag from the custom token
+            isCustomToken: token.isCustomToken ?? true,
+          }
+        }
+
+        // Otherwise, create a minimal token without balance (for search results)
+        return {
+          symbol: token.symbol,
+          name: token.name,
+          decimals: token.decimals,
+          contractAddress: token.contractAddress,
+          chainId: token.chainId,
+          chainName,
+          imageUrl,
+          isSufficientBalance: true,
+          isCustomToken: token.isCustomToken ?? true,
+        }
+      })
+  }, [
+    customTokens,
+    filterByChainId,
+    filteredTokensFormatted,
+    getTokenImageUrl,
+    searchAddress,
+  ])
+
+  // Helper function to check if a token has a balance
+  const hasBalance = useCallback((token: Token): boolean => {
+    try {
+      const balance = token.balance || "0"
+      return BigInt(balance) > 0n
+    } catch {
+      return false
+    }
+  }, [])
+
+  // Apply chain filter to tokens and merge with custom tokens
+  // Custom tokens with no balance are placed at the bottom
+  const chainFilteredTokens = useMemo(() => {
+    let tokens = filteredTokensFormatted
+
+    // Apply chain filter
+    if (filterByChainId !== null) {
+      tokens = tokens.filter(
+        (token) => (token.chainId || 0) === filterByChainId,
+      )
+    }
+
+    // Create a set of existing token keys to avoid duplicates
+    const existingTokenKeys = new Set(
+      tokens.map(
+        (token) =>
+          `${token.chainId || 0}-${token.contractAddress.toLowerCase()}`,
+      ),
+    )
+
+    // Separate custom tokens with and without balance
+    const customTokensWithBalance: Token[] = []
+    const customTokensWithoutBalance: Token[] = []
+
+    // Process custom tokens from localStorage
+    customTokensFormatted.forEach((customToken) => {
+      const key = `${customToken.chainId || 0}-${customToken.contractAddress.toLowerCase()}`
+      if (!existingTokenKeys.has(key)) {
+        if (hasBalance(customToken)) {
+          customTokensWithBalance.push(customToken)
+        } else {
+          customTokensWithoutBalance.push(customToken)
+        }
+        existingTokenKeys.add(key)
+      }
+    })
+
+    // Process newly fetched custom token
+    if (customTokenFormatted) {
+      const shouldInclude =
+        filterByChainId === null ||
+        customTokenFormatted.chainId === filterByChainId
+
+      if (shouldInclude) {
+        const key = `${customTokenFormatted.chainId || 0}-${customTokenFormatted.contractAddress.toLowerCase()}`
+        if (!existingTokenKeys.has(key)) {
+          if (hasBalance(customTokenFormatted)) {
+            customTokensWithBalance.push(customTokenFormatted)
+          } else {
+            customTokensWithoutBalance.push(customTokenFormatted)
+          }
+          existingTokenKeys.add(key)
+        }
+      }
+    }
+
+    // Combine: regular tokens + custom tokens with balance + custom tokens without balance (at bottom)
+    return [
+      ...tokens,
+      ...customTokensWithBalance,
+      ...customTokensWithoutBalance,
+    ]
+  }, [
+    filteredTokensFormatted,
+    filterByChainId,
+    customTokenFormatted,
+    customTokensFormatted,
+    hasBalance,
+  ])
+
+  // Helper function to check if a token is a custom token
+  // Simply checks the isCustomToken property on the token
+  const isCustomToken = useCallback(
+    (chainId: number, contractAddress: string): boolean => {
+      // Check if token exists in customTokens with isCustomToken flag
+      return customTokens.some(
+        (token) =>
+          token.isCustomToken === true &&
+          (token.chainId || 0) === chainId &&
+          token.contractAddress.toLowerCase() === contractAddress.toLowerCase(),
+      )
+    },
+    [customTokens],
+  )
+
+  return {
+    chainFilteredTokens,
+    isLoadingCustomToken: isLoadingCustomToken || isLoadingCustomTokenBalance,
+    customTokenError,
+    fetchChainId: fetchChainId ?? null,
+    isCustomToken,
+  }
+}

package/src/widget/hooks/useDebounce.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react"
+
+/**
+ * Debounce hook that delays updating a value until after a specified delay.
+ * Useful for reducing API calls during user input like search.
+ *
+ * @param value - The value to debounce
+ * @param delay - The delay in milliseconds (default: 300ms)
+ * @returns The debounced value
+ */
+export function useDebounce<T>(value: T, delay = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

package/src/widget/hooks/useDebugScreens.ts

@@ -3,10 +3,13 @@ import { parseUnits } from "viem"
 import { getNormalizedQuoteObject } from "../../prepareSend.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { TransactionState } from "../../transactions.js"
+import { useTrails } from "../providers/TrailsProvider.js"
 
 type Screen =
   | "connect"
   | "tokens"
+  | "select-origin-token"
+  | "select-origin-amount"
   | "send-form"
   | "fund-form"
   | "fund-methods"
@@ -14,13 +17,12 @@ type Screen =
   | "earn"
   | "earn-pools"
   | "swap"
-  | "receive"
   | "wallet-confirmation"
   | "qr-code-wallet-select"
   | "qr-code-deposit"
   | "pending"
   | "receipt"
-  | "mesh-connect"
+  | "onramp"
   | "wallet-connect"
   | "wallet-list"
   | "wallet-connection-pending"
@@ -41,7 +43,14 @@ interface UseDebugScreensProps {
   setShowWalletConnectionRetry: (show: boolean) => void
   setError: (error: string | null) => void
   setIsConnecting: (connecting: boolean) => void
-  setMeshConnectProps: (props: any) => void
+  setOnrampProps: (
+    props: {
+      toTokenSymbol?: string
+      toTokenAmount?: string
+      toChainId?: number
+      toRecipientAddress?: string
+    } | null,
+  ) => void
   isConnected: boolean
 }
 
@@ -57,6 +66,7 @@ export const useDebugScreens = ({
   setError,
   isConnected,
 }: UseDebugScreensProps) => {
+  const trailsConfig = useTrails()
   const handleDebugScreenSelect = useCallback(
     async (screen: string) => {
       // Reset necessary state based on the target screen
@@ -89,6 +99,8 @@ export const useDebugScreens = ({
         destinationTokenAddress: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
         destinationAmount: parseUnits("0.97", 6)?.toString(),
         destinationTokenPriceUsd: "1",
+        trailsApiKey: trailsConfig.trailsApiKey,
+        trailsApiUrl: trailsConfig.trailsApiUrl,
       })
 
       switch (screen) {
@@ -104,6 +116,12 @@ export const useDebugScreens = ({
             setCurrentScreen("tokens")
           }
           break
+        case "select-origin-token":
+          setCurrentScreen("select-origin-token")
+          break
+        case "select-origin-amount":
+          setCurrentScreen("select-origin-amount")
+          break
         case "chain-list":
           setSelectedToken(null)
           setTransactionStates([])
@@ -536,7 +554,7 @@ export const useDebugScreens = ({
                   returnData: "0x",
                 } as any,
               ],
-              decodedTrailsTokenSweeperEvents: [
+              decodedTokenSweeperEvents: [
                 {
                   type: "Sweep",
                   token: "0x0000000000000000000000000000000000000000",
@@ -550,8 +568,8 @@ export const useDebugScreens = ({
 
           setCurrentScreen("receipt")
           break
-        case "mesh-connect":
-          setCurrentScreen("mesh-connect")
+        case "onramp":
+          setCurrentScreen("onramp")
           break
         case "wallet-connect":
           setCurrentScreen("wallet-connect")
@@ -584,10 +602,6 @@ export const useDebugScreens = ({
           setTransactionStates([])
           setCurrentScreen("swap")
           break
-        case "receive":
-          setCurrentMode("receive")
-          setCurrentScreen("receive")
-          break
         case "account-history":
           setCurrentScreen("account-history")
           break
@@ -610,6 +624,8 @@ export const useDebugScreens = ({
       setShowWalletConnectionRetry,
       setError,
       isConnected,
+      trailsConfig.trailsApiKey,
+      trailsConfig.trailsApiUrl,
     ],
   )