0xtrails 0.6.6 → 0.7.0

package/src/widget/components/TokenSelector.tsx

@@ -1,29 +1,30 @@
-import { ChevronLeft, Copy } from "lucide-react"
+import { ChevronLeft, Copy, AlertTriangle, Info } from "lucide-react"
 import type React from "react"
 import { useState, useMemo } from "react"
 import { AnimatePresence, motion } from "motion/react"
 import { zeroAddress } from "viem"
-import type { Token, TokenFormatted } from "../hooks/useTokenList.js"
 import { useTokenList } from "../hooks/useTokenList.js"
 import { useChainFilter } from "../hooks/useChainFilter.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { TokenImage } from "./TokenImage.js"
-import type { SupportedToken } from "../../tokens.js"
+import type { Token } from "../../tokens.js"
 import { RecentTokens } from "./RecentTokens.js"
 import { getChainInfo } from "../../chains.js"
 import { ChainFilterDropdown } from "./ChainFilterDropdown.js"
 import { SearchInputField } from "./SearchInputField.js"
-import { truncateAddress } from "../../utils.js"
+import { truncateAddress, isValueZero } from "../../utils.js"
 import { logger } from "../../logger.js"
 import { useAccount } from "wagmi"
+import { useCustomTokenSearch } from "../hooks/useCustomTokenSearch.js"
+import { Tooltip } from "./Tooltip.js"
 
 interface TokenSelectorProps {
   onTokenSelect: (selectedToken: Token) => void
   targetAmountUsd?: number | null
   targetAmountUsdFormatted?: string | null
   onError: (error: Error | string | null) => void
-  recentTokens?: SupportedToken[]
-  onRecentTokenSelect?: (token: SupportedToken) => void
+  recentTokens?: Token[]
+  onRecentTokenSelect?: (token: Token) => void
   fundMethod?: string | null
   onNavigateToFundMethods?: () => void
   showContinueButton?: boolean
@@ -65,6 +66,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
     handleTokenSelect,
     filteredTokens,
     isLoadingTokens,
+    isSearching,
     isTokenSelected,
     filteredTokensFormatted,
     balanceError,
@@ -81,20 +83,22 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
     setSelectedChainId: setFilterByChainId,
   } = useChainFilter()
 
-  // Apply chain filter to tokens
-  const chainFilteredTokens = useMemo(() => {
-    if (filterByChainId === null) {
-      return filteredTokensFormatted
-    }
-    return filteredTokensFormatted.filter(
-      (token) => token.chainId === filterByChainId,
-    )
-  }, [filteredTokensFormatted, filterByChainId])
+  // Handle custom token search and integration
+  const {
+    chainFilteredTokens,
+    isLoadingCustomToken,
+    customTokenError,
+    fetchChainId,
+  } = useCustomTokenSearch({
+    searchQuery,
+    filteredTokensFormatted,
+    filterByChainId,
+  })
 
   // Get unique chains from all tokens (not filtered by chain)
   const uniqueChains = useMemo(() => {
     const chainIds = new Set(
-      filteredTokensFormatted.map((token) => token.chainId),
+      filteredTokensFormatted.map((token) => token.chainId || 0),
     )
     return Array.from(chainIds)
       .map((chainId) => {
@@ -115,7 +119,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
       (token) =>
         token.contractAddress.toLowerCase() ===
           recentToken.contractAddress.toLowerCase() &&
-        token.chainId === recentToken.chainId,
+        (token.chainId || 0) === (recentToken.chainId || 0),
     )
 
     if (!existsInTokenList) return false
@@ -145,7 +149,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
   }
 
   // Enhanced token select handler that resets chain filter
-  const handleTokenSelectWithReset = (token: TokenFormatted) => {
+  const handleTokenSelectWithReset = (token: Token) => {
     // Reset chain filter after token selection
     setFilterByChainId(null)
     // Call the original handler
@@ -153,13 +157,13 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
   }
 
   // Handle recent token selection by finding the actual token from the list
-  const handleRecentTokenSelect = (recentToken: SupportedToken) => {
+  const handleRecentTokenSelect = (recentToken: Token) => {
     // Find the actual token from the filtered tokens list
     const actualToken = chainFilteredTokens.find(
       (token) =>
         token.contractAddress.toLowerCase() ===
           recentToken.contractAddress.toLowerCase() &&
-        token.chainId === recentToken.chainId,
+        (token.chainId || 0) === (recentToken.chainId || 0),
     )
 
     if (actualToken) {
@@ -172,13 +176,44 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
     }
   }
 
+  // Determine the error message to display
+  const errorMessage = useMemo(() => {
+    // Custom token error with chain info
+    if (
+      customTokenError &&
+      fetchChainId &&
+      searchQuery.trim().startsWith("0x")
+    ) {
+      const chainInfo = getChainInfo(fetchChainId)
+      const networkName = chainInfo?.name || `Chain ${fetchChainId}`
+      return `Token not found on ${networkName}.`
+    }
+
+    // Search query provided but no results
+    if (searchQuery.trim()) {
+      return "No tokens found matching your search."
+    }
+
+    // Fund method doesn't require error message
+    if (fundMethod === "qr-code" || fundMethod === "exchange") {
+      return ""
+    }
+
+    // Address connected but no tokens available
+    if (address) {
+      return "No available tokens found"
+    }
+
+    return ""
+  }, [customTokenError, fetchChainId, searchQuery, fundMethod, address])
+
   return (
     <div className="space-y-2">
       {/* Search Field */}
       <SearchInputField
         value={searchQuery}
         onChange={setSearchQuery}
-        placeholder="Search tokens"
+        placeholder="Search tokens, symbol, address"
         autoFocus={true}
         className="mb-2"
         rightAlignedComponent={
@@ -211,48 +246,71 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
         )}
       </AnimatePresence>
 
-      {isLoadingTokens && (
+      {/* Show full spinner only for initial load (when no tokens are available yet) */}
+      {((isLoadingTokens && chainFilteredTokens.length === 0) ||
+        isLoadingCustomToken) && (
         <div className="text-center py-4">
           <div className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto border-solid border-black dark:border-white"></div>
           <p className="mt-2 text-gray-500 dark:text-gray-400">
-            Loading your token balances...
+            {isLoadingCustomToken
+              ? "Fetching token information..."
+              : "Loading your token balances..."}
           </p>
         </div>
       )}
 
-      {!isLoadingTokens && !balanceError && filteredTokens.length === 0 && (
-        <div className="text-center py-4 rounded-lg trails-bg-secondary">
-          <p className="text-gray-500 dark:text-gray-400">
-            {searchQuery.trim()
-              ? "No tokens found matching your search."
-              : fundMethod === "qr-code" || fundMethod === "exchange"
-                ? ""
-                : address
-                  ? "No available tokens found"
-                  : ""}
+      {/* Subtle search indicator when searching with existing tokens */}
+      {isSearching && chainFilteredTokens.length > 0 && (
+        <div className="flex items-center justify-center gap-2 py-2">
+          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-solid border-gray-400 dark:border-gray-500"></div>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            Searching...
           </p>
         </div>
       )}
 
+      {!isLoadingTokens &&
+        !isLoadingCustomToken &&
+        !balanceError &&
+        filteredTokens.length === 0 &&
+        chainFilteredTokens.length === 0 &&
+        errorMessage && (
+          <div className="text-center py-4 rounded-lg trails-bg-secondary">
+            <p className="text-gray-500 dark:text-gray-400">{errorMessage}</p>
+          </div>
+        )}
+
       {/* Token List */}
       {chainFilteredTokens.length > 0 && (
         <div
           className={`${compactMode ? "max-h-48" : filteredRecentTokens.length > 0 ? "max-h-[200px]" : "max-h-[250px]"} overflow-y-auto trails-scrollbar space-y-1`}
         >
           <AnimatePresence mode="popLayout">
-            {chainFilteredTokens.map((token: TokenFormatted) => {
+            {chainFilteredTokens.map((token: Token) => {
               const {
                 symbol,
                 imageUrl,
                 chainId,
                 contractAddress,
                 balanceUsdFormatted,
-                tokenName,
+                balanceUsdDisplay,
+                name,
                 priceUsd,
                 balanceFormatted,
+                balance,
+                balanceUsd,
                 isSufficientBalance,
               } = token
 
+              // Check if balance should be shown (hide if balance is 0 or empty)
+              const hasBalance =
+                !isValueZero(balance) ||
+                !isValueZero(balanceFormatted) ||
+                !isValueZero(balanceUsd) ||
+                !isValueZero(balanceUsdFormatted)
+              // Default isSufficientBalance to true if not set
+              const sufficientBalance = isSufficientBalance ?? true
+
               return (
                 <motion.div
                   key={`${chainId}-${contractAddress}`}
@@ -273,22 +331,22 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                     }
                   }}
                   tabIndex={0}
-                  aria-label={`Select ${tokenName} token`}
+                  aria-label={`Select ${name} token`}
                   title={
-                    !isSufficientBalance &&
+                    !sufficientBalance &&
                     fundMethod !== "qr-code" &&
                     fundMethod !== "exchange"
                       ? "Insufficient balance for this token"
-                      : `Select ${tokenName} token`
+                      : `Select ${name} token`
                   }
                   className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-list-item trails-border-radius-list-button ${
                     isTokenSelected(token) ? "trails-list-item-selected" : ""
-                  } ${!isSufficientBalance && fundMethod !== "qr-code" && fundMethod !== "exchange" ? "opacity-75 cursor-not-allowed" : "cursor-pointer"}`}
+                  } ${!sufficientBalance && fundMethod !== "qr-code" && fundMethod !== "exchange" ? "opacity-75 cursor-not-allowed" : "cursor-pointer"}`}
                 >
                   <div className="relative flex-shrink-0 mr-2">
                     <div
                       className={`rounded-full flex items-center justify-center bg-gray-100 dark:bg-gray-700 ${
-                        !isSufficientBalance &&
+                        !sufficientBalance &&
                         fundMethod !== "qr-code" &&
                         fundMethod !== "exchange"
                           ? "opacity-80"
@@ -306,7 +364,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                       ) : (
                         <span
                           className={`text-base font-medium text-gray-600 dark:text-gray-300 ${
-                            !isSufficientBalance &&
+                            !sufficientBalance &&
                             fundMethod !== "qr-code" &&
                             fundMethod !== "exchange"
                               ? "opacity-70"
@@ -322,19 +380,19 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                   <div className="flex-1 min-w-0 text-left">
                     <h3
                       className={`text-sm font-medium truncate text-gray-900 dark:text-white ${
-                        !isSufficientBalance &&
+                        !sufficientBalance &&
                         fundMethod !== "qr-code" &&
                         fundMethod !== "exchange"
                           ? "opacity-70"
                           : ""
                       }`}
                     >
-                      {tokenName}
+                      {name}
                     </h3>
-                    <div className="group relative overflow-hidden w-full">
+                    <div className="group relative w-full">
                       {/* Default state: show symbol */}
                       <div
-                        className={`flex items-center transition-all duration-300 ease-in-out ${
+                        className={`flex items-center gap-1.5 transition-all duration-300 ease-in-out ${
                           contractAddress &&
                           contractAddress.toLowerCase() !==
                             zeroAddress.toLowerCase()
@@ -351,6 +409,16 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                         <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                           {symbol}
                         </span>
+                        {/* Custom token indicator */}
+                        {token.isCustomToken && (
+                          <div className="relative group/indicator">
+                            <AlertTriangle className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+                            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/indicator:opacity-100 transition-opacity pointer-events-none z-50">
+                              Custom token added by user
+                              <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
+                            </div>
+                          </div>
+                        )}
                       </div>
 
                       {/* Hover state: show address with copy button (only for non-zero addresses) */}
@@ -358,8 +426,8 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                         contractAddress.toLowerCase() !==
                           zeroAddress.toLowerCase() && (
                           <div
-                            className={`absolute top-0 left-0 flex items-center transition-all duration-300 ease-in-out opacity-0 transform translate-x-2 ${
-                              !isSufficientBalance &&
+                            className={`absolute top-0 left-0 flex items-center gap-1.5 transition-all duration-300 ease-in-out opacity-0 transform translate-x-2 ${
+                              !sufficientBalance &&
                               fundMethod !== "qr-code" &&
                               fundMethod !== "exchange"
                                 ? "group-hover:opacity-70"
@@ -374,7 +442,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                               onClick={(e) =>
                                 handleCopyAddress(contractAddress, e)
                               }
-                              className={`ml-1 p-0.5 rounded transition-all duration-200 cursor-pointer ${
+                              className={`p-0.5 rounded transition-all duration-200 cursor-pointer ${
                                 copiedAddress === contractAddress
                                   ? "bg-green-100 dark:bg-green-900/30"
                                   : "hover:bg-gray-200 dark:hover:bg-gray-600"
@@ -405,29 +473,105 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                                 <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
                               )}
                             </button>
+                            {/* Token info tooltip */}
+                            <Tooltip
+                              content={
+                                <div className="space-y-2 text-left">
+                                  <div>
+                                    <span className="opacity-70">Symbol:</span>{" "}
+                                    <span className="font-medium">
+                                      {token.symbol}
+                                    </span>
+                                  </div>
+                                  <div>
+                                    <span className="opacity-70">Name:</span>{" "}
+                                    <span className="font-medium">
+                                      {token.name}
+                                    </span>
+                                  </div>
+                                  <div>
+                                    <span className="opacity-70">Chain:</span>{" "}
+                                    <span className="font-medium">
+                                      {token.chainName ||
+                                        getChainInfo(token.chainId || 0)
+                                          ?.name ||
+                                        `Chain ${token.chainId || 0}`}
+                                    </span>
+                                  </div>
+                                  <div>
+                                    <span className="opacity-70">
+                                      Decimals:
+                                    </span>{" "}
+                                    <span className="font-medium">
+                                      {token.decimals}
+                                    </span>
+                                  </div>
+                                  <div>
+                                    <span className="opacity-70">Address:</span>{" "}
+                                    <span className="font-mono text-[10px] break-all block mt-0.5">
+                                      {contractAddress}
+                                    </span>
+                                  </div>
+                                </div>
+                              }
+                              side="top"
+                              align="center"
+                              sideOffset={8}
+                            >
+                              <Info className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" />
+                            </Tooltip>
+                            {/* Custom token indicator on hover state */}
+                            {token.isCustomToken && (
+                              <div className="relative group/indicator">
+                                <AlertTriangle className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+                                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/indicator:opacity-100 transition-opacity pointer-events-none z-50">
+                                  Custom token added by user
+                                  <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
+                                </div>
+                              </div>
+                            )}
                           </div>
                         )}
                     </div>
                   </div>
 
-                  {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
-                    <div className="text-right flex-shrink-0">
-                      {priceUsd > 0 ? (
-                        <>
+                  {fundMethod !== "qr-code" &&
+                    fundMethod !== "exchange" &&
+                    hasBalance && (
+                      <div className="text-right flex-shrink-0">
+                        {(priceUsd ?? 0) > 0 ? (
+                          <>
+                            <p
+                              className={`text-sm font-medium text-gray-900 dark:text-white ${
+                                !sufficientBalance &&
+                                fundMethod !== "qr-code" &&
+                                fundMethod !== "exchange"
+                                  ? "opacity-70"
+                                  : ""
+                              }`}
+                            >
+                              {isBalanceVisible
+                                ? balanceUsdDisplay ||
+                                  balanceUsdFormatted ||
+                                  "$0.00"
+                                : "••••••"}
+                            </p>
+                            <p
+                              className={`text-xs text-gray-500 dark:text-gray-400 ${
+                                !sufficientBalance &&
+                                fundMethod !== "qr-code" &&
+                                fundMethod !== "exchange"
+                                  ? "opacity-70"
+                                  : ""
+                              }`}
+                            >
+                              {isBalanceVisible ? balanceFormatted : "••••••"}
+                            </p>
+                          </>
+                        ) : (
                           <p
                             className={`text-sm font-medium text-gray-900 dark:text-white ${
-                              !isSufficientBalance &&
-                              fundMethod !== "qr-code" &&
-                              fundMethod !== "exchange"
-                                ? "opacity-70"
-                                : ""
-                            }`}
-                          >
-                            {isBalanceVisible ? balanceUsdFormatted : "••••••"}
-                          </p>
-                          <p
-                            className={`text-xs text-gray-500 dark:text-gray-400 ${
-                              !isSufficientBalance &&
+                              !sufficientBalance &&
                               fundMethod !== "qr-code" &&
                               fundMethod !== "exchange"
                                 ? "opacity-70"
@@ -436,22 +580,9 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                           >
                             {isBalanceVisible ? balanceFormatted : "••••••"}
                           </p>
-                        </>
-                      ) : (
-                        <p
-                          className={`text-sm font-medium text-gray-900 dark:text-white ${
-                            !isSufficientBalance &&
-                            fundMethod !== "qr-code" &&
-                            fundMethod !== "exchange"
-                              ? "opacity-70"
-                              : ""
-                          }`}
-                        >
-                          {isBalanceVisible ? balanceFormatted : "••••••"}
-                        </p>
-                      )}
-                    </div>
-                  )}
+                        )}
+                      </div>
+                    )}
                 </motion.div>
               )
             })}

package/src/widget/components/Tooltip.tsx

@@ -3,17 +3,28 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 import { useTheme } from "./ThemeProvider.js"
 
 interface TooltipProps {
-  message: string
+  message?: string
+  content?: React.ReactNode
   children: React.ReactNode
   className?: string
+  side?: "top" | "right" | "bottom" | "left"
+  align?: "start" | "center" | "end"
+  sideOffset?: number
+  alignOffset?: number
 }
 
 export const Tooltip: React.FC<TooltipProps> = ({
   message,
+  content,
   children,
   className = "",
+  side = "top",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 0,
 }) => {
   const { isDark } = useTheme()
+  const tooltipContent = content ?? message
 
   return (
     <TooltipPrimitive.Provider>
@@ -23,7 +34,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
           <TooltipPrimitive.Content
-            className="trails-border-radius-container px-3 py-2 text-xs font-medium shadow-lg z-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+            className="trails-border-radius-container px-3 py-2 text-xs font-medium shadow-lg z-[100] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
             style={{
               maxWidth: "400px",
               wordWrap: "break-word",
@@ -32,12 +43,12 @@ export const Tooltip: React.FC<TooltipProps> = ({
               backgroundColor: isDark ? "#111827" : "#ffffff", // gray-900 or white
               color: isDark ? "#ffffff" : "#000000", // white or black
             }}
-            side="top"
-            align="center"
-            sideOffset={4}
-            alignOffset={0}
+            side={side}
+            align={align}
+            sideOffset={sideOffset}
+            alignOffset={alignOffset}
           >
-            {message}
+            {tooltipContent}
             <TooltipPrimitive.Arrow
               style={{ fill: isDark ? "#111827" : "#ffffff" }} // gray-900 or white
             />

package/src/widget/components/TrailsHookModal.tsx

@@ -0,0 +1,118 @@
+import { useState, useEffect, useContext, useMemo } from "react"
+import { createPortal } from "react-dom"
+import { http } from "viem"
+import type { Chain } from "viem"
+import { WagmiContext, WagmiProvider, createConfig, createStorage } from "wagmi"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { logger } from "../../logger.js"
+import { getAllChains, getRpcUrl } from "../../chains.js"
+import { getConnectorsInternal } from "../../wallets.js"
+import { PROD_SEQUENCE_NODE_GATEWAY_URL } from "../../constants.js"
+import { TrailsContext } from "../providers/TrailsProvider.js"
+import { ShadowPortal } from "./ShadowPortal.js"
+import { ThemeProvider } from "./ThemeProvider.js"
+import { WidgetProviders } from "./WidgetProviders.js"
+import { HookModalContent } from "./HookModalContent.js"
+
+// QueryClient for when we create our own WagmiProvider
+const hookModalQueryClient = new QueryClient()
+
+/**
+ * Inner component that renders the portal with shared provider tree.
+ * Uses WidgetProviders to ensure all widget-level context providers are available.
+ */
+function TrailsHookModalInner() {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    logger.console.log("[trails-sdk] [TrailsHookModalInner] Mounted")
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  return createPortal(
+    <ShadowPortal>
+      <ThemeProvider>
+        <WidgetProviders>
+          <HookModalContent />
+        </WidgetProviders>
+      </ThemeProvider>
+    </ShadowPortal>,
+    document.body,
+  )
+}
+
+/**
+ * TrailsHookModal is the modal component used by useTrailsSendTransaction.
+ * It creates its own WagmiProvider if none exists, ensuring it can work
+ * both with and without a parent TrailsWidget.
+ *
+ * The modal content is wrapped with WidgetProviders to ensure all widget-level
+ * context providers are available, making shared components like ScreenHeader work.
+ */
+export function TrailsHookModal() {
+  const wagmiContext = useContext(WagmiContext)
+  const trailsContext = useContext(TrailsContext)
+
+  logger.console.log("[trails-sdk] [TrailsHookModal] Check:", {
+    hasWagmiContext: !!wagmiContext,
+    hasTrailsContext: !!trailsContext,
+  })
+
+  // Create wagmi config if no parent WagmiProvider exists
+  const wagmiConfig = useMemo(() => {
+    if (wagmiContext) {
+      logger.console.log(
+        "[trails-sdk] [TrailsHookModal] Using parent WagmiProvider",
+      )
+      return null // Use parent's config
+    }
+
+    logger.console.log(
+      "[trails-sdk] [TrailsHookModal] Creating own WagmiProvider",
+    )
+
+    // Create our own config (similar to TrailsWidget)
+    const chains = getAllChains() as Chain[]
+    const apiKey = trailsContext?.trailsApiKey || ""
+    const nodeGatewayUrl =
+      trailsContext?.sequenceNodeGatewayUrl || PROD_SEQUENCE_NODE_GATEWAY_URL
+
+    return createConfig({
+      chains: chains as any,
+      transports: chains.reduce(
+        (acc, chain) => {
+          const sequenceRpcUrl = getRpcUrl(chain.id, apiKey, nodeGatewayUrl)
+          return {
+            ...acc,
+            [chain.id]: sequenceRpcUrl ? http(sequenceRpcUrl) : http(),
+          }
+        },
+        {} as Record<number, ReturnType<typeof http>>,
+      ),
+      connectors: getConnectorsInternal(apiKey),
+      storage: createStorage({
+        storage: localStorage,
+        key: "trails-hook-modal-wagmi",
+      }),
+    })
+  }, [wagmiContext, trailsContext])
+
+  const content = <TrailsHookModalInner />
+
+  // Wrap with WagmiProvider if we created our own config
+  if (wagmiConfig) {
+    return (
+      <WagmiProvider config={wagmiConfig}>
+        <QueryClientProvider client={hookModalQueryClient}>
+          {content}
+        </QueryClientProvider>
+      </WagmiProvider>
+    )
+  }
+
+  return content
+}