0xtrails 0.6.6 → 0.7.0

package/src/widget/components/WalletConnect.tsx

@@ -1,11 +1,16 @@
-import React, { useEffect, useCallback, useRef, useMemo } from "react"
-import { useAccount, useConnect, useDisconnect } from "wagmi"
-import { walletConnect } from "wagmi/connectors"
+import React, { useEffect, useMemo, useState } from "react"
+import { useAccount, useConnect } from "wagmi"
 import { QrCode } from "./QrCode.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
-import { useTrails } from "../providers/TrailsProvider.js"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { getWalletIcon, getWalletName } from "../../wallets.js"
+import {
+  getWalletIcon,
+  getWalletName,
+  useWalletConfigs,
+} from "../../wallets.js"
+import { useIsMobile } from "../hooks/useIsMobile.js"
+import { useWalletConnectUri } from "../hooks/useWalletConnectUri.js"
+import { useConnector } from "../hooks/useConnector.js"
 import { logger } from "../../logger.js"
 
 export interface WalletConnectProps {
@@ -16,49 +21,39 @@ export interface WalletConnectProps {
   selectedWalletId?: string
 }
 
-// Local singleton to avoid multiple Core initializations from this screen
-let wcConnectorSingleton: ReturnType<typeof walletConnect> | null = null
-function getWalletConnectConnector(projectId: string) {
-  if (!wcConnectorSingleton) {
-    logger.console.log(
-      "[trails-sdk] [WalletConnect] Creating new connector with projectId:",
-      projectId,
-    )
-    wcConnectorSingleton = walletConnect({
-      projectId: projectId,
-      showQrModal: false,
-    })
-  }
-  return wcConnectorSingleton
-}
-
 export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
   onBack,
   onContinue,
   projectId: projectIdProp,
-  onReconnectPreviousWallet,
   selectedWalletId,
 }) => {
-  const config = useTrails()
-  const projectId = projectIdProp || config.walletConnectProjectId
-  const { connect, connectors, status } = useConnect() as any
-  const { disconnect } = useDisconnect()
+  const { status, connectAsync } = useConnect() as any
   const { isConnected, address, connector } = useAccount()
-  const [wcUri, setWcUri] = React.useState<string | null>(null)
-  const [showUri, setShowUri] = React.useState(false)
-  const listenerRef = React.useRef<(() => void) | null>(null)
-  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const [showUri, setShowUri] = useState(false)
+  const [showQrCodeMobile, setShowQrCodeMobile] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const isMobile = useIsMobile()
+  const walletConfigs = useWalletConfigs()
 
-  // Debounced setWcUri to prevent rapid QR code changes
-  const debouncedSetWcUri = useCallback((uri: string | null) => {
-    if (debounceTimeoutRef.current) {
-      clearTimeout(debounceTimeoutRef.current)
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (error) {
+      logger.console.error("Failed to copy to clipboard:", error)
     }
+  }
+
+  // Use the WalletConnect URI hook to manage connection and URI
+  const { walletConnectUri: wcUri, isConnecting } =
+    useWalletConnectUri(projectIdProp)
+
+  // Get connector for the selected wallet
+  const coinbaseConnector = useConnector(
+    selectedWalletId === "coinbase" ? "coinbaseWalletSDK" : "",
+  )
 
-    debounceTimeoutRef.current = setTimeout(() => {
-      setWcUri(uri)
-    }, 500) // 300ms debounce delay
-  }, [])
   const isWalletConnectConnector = React.useMemo(() => {
     return connector?.name === "WalletConnect" && isConnected
   }, [connector, isConnected])
@@ -66,10 +61,6 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
   // Track if we were connected when the component mounted
   const wasConnectedOnMount = React.useRef(isConnected)
 
-  const wcConnectorFromConfig = connectors.find((c: any) =>
-    (c.id || "").toLowerCase().includes("walletconnect"),
-  )
-
   // Only auto-navigate back if we successfully connect a new wallet
   // Don't auto-navigate if user was already connected when they entered this screen
   useEffect(() => {
@@ -83,152 +74,97 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
     }
   }, [isConnected, status, onBack])
 
-  const handleConnect = useCallback(
-    async (force: boolean = false) => {
-      logger.console.log("[trails-sdk] [WalletConnect] handleConnect", {
-        status,
-        wcUri,
-        isWalletConnectConnector,
-      })
-      if ((status === "pending" || status === "success") && !force) return
-
-      const makeConnector = () => getWalletConnectConnector(projectId!)
-      const connector = wcConnectorFromConfig || makeConnector()
-
-      logger.console.log(
-        "[trails-sdk] [WalletConnect] wcConnectorFromConfig",
-        wcConnectorFromConfig,
-      )
-      logger.console.log("[trails-sdk] [WalletConnect] connector", connector)
-
-      try {
-        logger.console.log(
-          "[trails-sdk] [WalletConnect] Starting connection...",
-        )
-
-        // Set up message listener for display_uri events (like ConnectKit does)
-        const handleMessage = (message: any) => {
-          const { type, data } = message
-          logger.console.log(
-            "[trails-sdk] [WalletConnect] Message received:",
-            type,
-            data,
-          )
-          if (type === "display_uri") {
-            logger.console.log(
-              "[trails-sdk] [WalletConnect] Setting URI from display_uri event:",
-              data,
-            )
-            debouncedSetWcUri(data)
-          }
-        }
-
-        // Set up disconnect handler to regenerate QR code
-        const handleDisconnect = async () => {
-          logger.console.log(
-            "[trails-sdk] [WalletConnect] Disconnected, regenerating QR code",
-          )
-          debouncedSetWcUri(null)
-          // Try to reconnect
-          try {
-            await connect({ connector })
-          } catch (error: any) {
-            logger.console.error(
-              "[trails-sdk] [WalletConnect] Reconnection error:",
-              error,
-            )
-          }
-        }
-
-        // Add listeners to connector emitter
-        if ((connector as any).emitter) {
-          logger.console.log(
-            "[trails-sdk] [WalletConnect] Adding listeners to connector emitter",
-          )
-          ;(connector as any).emitter.on("message", handleMessage)
-          ;(connector as any).emitter.on("disconnect", handleDisconnect)
-
-          // Store listeners for cleanup
-          listenerRef.current = () => {
-            ;(connector as any).emitter.off("message", handleMessage)
-            ;(connector as any).emitter.off("disconnect", handleDisconnect)
-          }
-        } else {
-          logger.console.log(
-            "[trails-sdk] [WalletConnect] No emitter found on connector",
-          )
-        }
-
-        await connect({ connector })
-      } catch (err) {
-        logger.console.error("[trails-sdk] [WalletConnect] connect error", err)
-        // If user rejected, try to regenerate QR code
-        if ((err as any).code === 4001) {
-          logger.console.log(
-            "[trails-sdk] [WalletConnect] User rejected, regenerating QR code",
-          )
-          debouncedSetWcUri(null)
-          // Try to reconnect after a short delay
-          setTimeout(() => {
-            handleConnect()
-          }, 0)
-        }
-      }
-    },
-    [
-      connect,
-      wcConnectorFromConfig,
-      projectId,
-      status,
-      wcUri,
-      isWalletConnectConnector,
-      debouncedSetWcUri,
-    ],
-  )
-
-  // Auto-start WalletConnect connection when component mounts (if not already connected via WalletConnect)
-  useEffect(() => {
-    if (!isWalletConnectConnector && !wcUri && status !== "pending") {
-      logger.console.log(
-        "[trails-sdk] [WalletConnect] Auto-starting connection on mount",
-      )
-      handleConnect()
-    }
-  }, [isWalletConnectConnector, wcUri, status, handleConnect])
-
-  // Force QR code regeneration when wcUri is cleared
-  useEffect(() => {
-    if (!wcUri && !isWalletConnectConnector && status !== "pending") {
-      logger.console.log(
-        "[trails-sdk] [WalletConnect] URI cleared, regenerating QR code",
-      )
-      handleConnect()
-    }
-  }, [wcUri, isWalletConnectConnector, status, handleConnect])
-
-  useEffect(() => {
-    return () => {
-      try {
-        // Clean up the listener function if it exists
-        if (listenerRef.current) {
-          listenerRef.current()
-        }
-        // Clean up debounce timeout
-        if (debounceTimeoutRef.current) {
-          clearTimeout(debounceTimeoutRef.current)
-        }
-      } catch {}
-    }
-  }, [])
-
   const title = useMemo(() => {
     const walletName = getWalletName(selectedWalletId)
     if (walletName && walletName !== "WalletConnect") {
+      if (isMobile) {
+        return `Connect to ${walletName}`
+      }
       return `Scan code to connect to ${walletName}`
     }
 
     return `Connect with WalletConnect`
-  }, [selectedWalletId])
+  }, [selectedWalletId, isMobile])
+
+  // Shared QR code component
+  const qrCodeComponent = wcUri ? (
+    <QrCode
+      url={wcUri}
+      size={300}
+      imageUrl={
+        getWalletIcon(selectedWalletId) || getWalletIcon("walletconnect")
+      }
+    />
+  ) : null
+
+  // Shared URI display component
+  const uriDisplayComponent = (
+    <>
+      <button
+        type="button"
+        onClick={() => setShowUri(!showUri)}
+        className="mt-3 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline cursor-pointer flex items-center gap-1"
+      >
+        {showUri ? "Hide URI" : "Show URI"}
+        <svg
+          className={`w-3 h-3 transition-transform ${showUri ? "rotate-180" : ""}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+      {showUri && (
+        <div className="mt-2 flex items-center gap-2 w-full sm:max-w-sm">
+          <p className="text-xs text-gray-600 dark:text-gray-400 break-all flex-1">
+            {wcUri}
+          </p>
+          <button
+            type="button"
+            onClick={() => copyToClipboard(wcUri || "")}
+            className="flex-shrink-0 px-2 py-1 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors cursor-pointer"
+            title={copied ? "Copied!" : "Copy to clipboard"}
+          >
+            {copied ? (
+              <svg
+                className="w-4 h-4 text-green-600 dark:text-green-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M5 13l4 4L19 7"
+                />
+              </svg>
+            ) : (
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                />
+              </svg>
+            )}
+          </button>
+        </div>
+      )}
+    </>
+  )
 
   return (
     <div className="flex flex-col h-full">
@@ -240,7 +176,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
       />
 
       <div className="flex-1 flex items-center justify-center">
-        <div className="text-center p-6 w-full max-w-sm trails-border-radius-container trails-bg-secondary">
+        <div className="text-center p-6 w-full sm:max-w-sm sm:mx-auto trails-border-radius-container trails-bg-secondary">
           {isWalletConnectConnector ? (
             <div className="flex flex-col items-center">
               <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mb-4">
@@ -275,46 +211,52 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                 >
                   Continue
                 </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    disconnect()
-                    debouncedSetWcUri(null)
-                    setShowUri(false)
-                    setTimeout(() => {
-                      if (onReconnectPreviousWallet) {
-                        onReconnectPreviousWallet()
-                      }
-                    }, 0)
-                    setTimeout(() => {
-                      handleConnect(true)
-                    }, 1000)
-                  }}
-                  className="px-4 py-2 text-sm transition-all duration-200 cursor-pointer hover:scale-[1.02] shadow-sm hover:shadow-md trails-border-radius-button font-medium trails-bg-secondary trails-text-secondary trails-border-color"
-                >
-                  Disconnect
-                </button>
               </div>
             </div>
-          ) : (
-            <>
-              {wcUri ? (
-                <div className="flex flex-col items-center">
-                  <QrCode
-                    url={wcUri}
-                    size={300}
-                    imageUrl={
-                      getWalletIcon(selectedWalletId) ||
-                      getWalletIcon("walletconnect")
-                    }
-                  />
+          ) : wcUri ? (
+            <div className="flex flex-col items-center">
+              {/* Mobile: Show Connect button with collapsible QR code */}
+              {isMobile &&
+              selectedWalletId &&
+              walletConfigs[selectedWalletId]?.getWalletConnectDeepLink ? (
+                <div className="flex flex-col items-center w-full">
+                  {selectedWalletId.toLowerCase().includes("coinbase") &&
+                  coinbaseConnector ? (
+                    <button
+                      type="button"
+                      onClick={async () => {
+                        try {
+                          await connectAsync({
+                            connector: coinbaseConnector,
+                          })
+                          if (onContinue) {
+                            onContinue()
+                          }
+                        } catch (error) {
+                          logger.console.error(error)
+                        }
+                      }}
+                      className="w-full px-4 py-3 text-base transition-all duration-200 cursor-pointer hover:scale-[1.02] shadow-sm hover:shadow-md trails-border-radius-button font-medium trails-primary-button-bg trails-primary-button-text bg-blue-500 hover:bg-blue-600 text-white text-center"
+                    >
+                      Connect
+                    </button>
+                  ) : (
+                    <a
+                      href={walletConfigs[selectedWalletId]
+                        .getWalletConnectDeepLink!(wcUri)}
+                      className="w-full px-4 py-3 text-base transition-all duration-200 cursor-pointer hover:scale-[1.02] shadow-sm hover:shadow-md trails-border-radius-button font-medium trails-primary-button-bg trails-primary-button-text bg-blue-500 hover:bg-blue-600 text-white text-center"
+                    >
+                      Connect
+                    </a>
+                  )}
                   <button
-                    onClick={() => setShowUri(!showUri)}
-                    className="mt-2 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline cursor-pointer flex items-center gap-1"
+                    type="button"
+                    onClick={() => setShowQrCodeMobile(!showQrCodeMobile)}
+                    className="mt-3 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer flex items-center gap-1"
                   >
-                    {showUri ? "Hide URI" : "Show URI"}
+                    or scan QR code
                     <svg
-                      className={`w-3 h-3 transition-transform ${showUri ? "rotate-180" : ""}`}
+                      className={`w-4 h-4 transition-transform ${showQrCodeMobile ? "rotate-180" : ""}`}
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -327,31 +269,51 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                       />
                     </svg>
                   </button>
-                  {showUri && (
-                    <p className="mt-2 text-xs text-gray-600 dark:text-gray-400 break-all">
-                      {wcUri}
-                    </p>
+                  {showQrCodeMobile && (
+                    <div className="mt-4 flex flex-col items-center w-full">
+                      {qrCodeComponent}
+                      {uriDisplayComponent}
+                      {isConnecting && wcUri && (
+                        <p className="mt-3 text-xs text-gray-600 dark:text-gray-400">
+                          Waiting for confirmation…
+                        </p>
+                      )}
+                    </div>
                   )}
                 </div>
               ) : (
-                <div className="flex flex-col items-center">
-                  <div className="w-[300px] h-[300px] bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center trails-border-radius-container">
-                    <div className="text-center">
-                      <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-600 mx-auto mb-2"></div>
-                      <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Generating QR code...
-                      </p>
+                /* Desktop: Show QR code with URI toggle */
+                <>
+                  {qrCodeComponent}
+                  <div className="mt-2">{uriDisplayComponent}</div>
+                  {isConnecting && wcUri && (
+                    <div className="mt-3 text-xs text-gray-600 dark:text-gray-400">
+                      <span>Waiting for confirmation…</span>
                     </div>
+                  )}
+                </>
+              )}
+            </div>
+          ) : (
+            <div className="flex flex-col items-center">
+              {isMobile ? (
+                <div className="flex flex-col items-center">
+                  <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-600"></div>
+                  <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                    Loading link...
+                  </p>
+                </div>
+              ) : (
+                <div className="w-[300px] h-[300px] bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center trails-border-radius-container">
+                  <div className="text-center">
+                    <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-600 mx-auto mb-2"></div>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Generating QR code...
+                    </p>
                   </div>
                 </div>
               )}
-
-              <div className="mt-3 text-xs text-gray-600 dark:text-gray-400">
-                {status === "pending" && wcUri && (
-                  <span>Waiting for confirmation…</span>
-                )}
-              </div>
-            </>
+            </div>
           )}
         </div>
       </div>

package/src/widget/components/WidgetProviders.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react"
+import type { TrailsWidgetProps } from "../widget.js"
+import { WidgetPropsProvider } from "../hooks/useWidgetProps.js"
+import { ToastProvider } from "./Toast.js"
+import { CurrentScreenProvider } from "../hooks/useCurrentScreen.js"
+import { BackProvider } from "../hooks/useBack.js"
+import { WalletConnectionProvider } from "../hooks/useWalletConnectionContext.js"
+import { OriginSelectedTokenProvider } from "../hooks/useOriginSelectedToken.js"
+import { DestinationSelectedTokenProvider } from "../hooks/useDestinationSelectedToken.js"
+import { SelectedFeeOptionProvider } from "../hooks/useSelectedFeeOption.js"
+import { SelectedRecipientProvider } from "../hooks/useSelectedRecipient.js"
+import { SwapAmountProvider } from "../hooks/useSwapAmount.js"
+import { ChainFilterProvider } from "../hooks/useChainFilter.js"
+import { BalanceVisibleProvider } from "../hooks/useBalanceVisible.js"
+import { ThemeProvider as ThemePreferenceProvider } from "../hooks/useTheme.js"
+import { SelectedFundMethodProvider } from "../hooks/useSelectedFundMethod.js"
+import { EarnPoolProvider } from "../hooks/useEarnPool.js"
+import { DefaultTokenSelectionProvider } from "../hooks/useDefaultTokenSelection.js"
+
+// Default props for hook modal (minimal required config)
+const DEFAULT_HOOK_MODAL_PROPS: TrailsWidgetProps = {
+  apiKey: "",
+  renderInline: false,
+}
+
+interface WidgetProvidersProps {
+  children: ReactNode
+  props?: TrailsWidgetProps
+}
+
+/**
+ * Shared provider tree component that wraps all widget-level providers.
+ * Used by both WidgetInner (full widget) and TrailsHookModal (standalone hook modal).
+ * This ensures identical behavior regardless of how the modal is rendered.
+ */
+export function WidgetProviders({
+  children,
+  props = DEFAULT_HOOK_MODAL_PROPS,
+}: WidgetProvidersProps) {
+  return (
+    <WidgetPropsProvider props={props}>
+      <ToastProvider>
+        <CurrentScreenProvider initialScreen="home">
+          <BackProvider>
+            <WalletConnectionProvider>
+              <OriginSelectedTokenProvider>
+                <DestinationSelectedTokenProvider>
+                  <SelectedFeeOptionProvider>
+                    <SelectedRecipientProvider>
+                      <SwapAmountProvider>
+                        <ChainFilterProvider>
+                          <BalanceVisibleProvider>
+                            <ThemePreferenceProvider>
+                              <SelectedFundMethodProvider>
+                                <EarnPoolProvider>
+                                  <DefaultTokenSelectionProvider>
+                                    {children}
+                                  </DefaultTokenSelectionProvider>
+                                </EarnPoolProvider>
+                              </SelectedFundMethodProvider>
+                            </ThemePreferenceProvider>
+                          </BalanceVisibleProvider>
+                        </ChainFilterProvider>
+                      </SwapAmountProvider>
+                    </SelectedRecipientProvider>
+                  </SelectedFeeOptionProvider>
+                </DestinationSelectedTokenProvider>
+              </OriginSelectedTokenProvider>
+            </WalletConnectionProvider>
+          </BackProvider>
+        </CurrentScreenProvider>
+      </ToastProvider>
+    </WidgetPropsProvider>
+  )
+}

package/src/widget/hooks/useAddressWalletIcon.ts

@@ -0,0 +1,53 @@
+import { useMemo } from "react"
+import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { type Connector, useConnections } from "wagmi"
+import type { Address } from "viem"
+
+/**
+ * Hook to get the wallet icon for an connected address
+ * @param address - The address to get the wallet icon for
+ * @param connector - The connector to get the wallet icon for
+ * @returns The wallet icon for the address
+ */
+export const useConnectedAddressWalletIcon = (
+  address: Address,
+  connector: Connector | undefined,
+) => {
+  const connections = useConnections()
+  const { wallets: allWallets } = useWallets()
+
+  const addressWalletIcon = useMemo(() => {
+    if (!address || !allWallets || allWallets.length === 0) {
+      return undefined
+    }
+
+    const walletMap = new Map()
+
+    connections.forEach((connection) => {
+      // Process each account in the connection
+      connection.accounts.forEach((account) => {
+        if (account && !walletMap.has(account)) {
+          const walletId = wagmiConnectorToWalletId(connection.connector)
+          const walletConfig = allWallets.find(
+            (wallet) => wallet.id === walletId,
+          )
+
+          walletMap.set(account, {
+            address: account,
+            connector: connection.connector,
+            walletConfig,
+            walletId,
+            isActive:
+              connection.connector.id === connector?.id && account === address,
+          })
+        }
+      })
+    })
+
+    const connectedWallets = Array.from(walletMap.values())
+    return connectedWallets.find((wallet) => wallet.address === address)
+      ?.walletConfig?.icon
+  }, [address, connector, connections, allWallets])
+
+  return addressWalletIcon
+}

package/src/widget/hooks/useBalanceVisible.tsx

@@ -82,7 +82,7 @@ export const BalanceVisibleProvider: React.FC<BalanceVisibleProviderProps> = ({
   )
 }
 
-export const useBalanceVisible = (): BalanceVisibleContextType => {
+export function useBalanceVisible(): BalanceVisibleContextType {
   const context = useContext(BalanceVisibleContext)
 
   if (context === undefined) {

package/src/widget/hooks/useChainFilter.tsx

@@ -45,7 +45,7 @@ export const ChainFilterProvider: React.FC<ChainFilterProviderProps> = ({
   )
 }
 
-export const useChainFilter = (): ChainFilterContextType => {
+export function useChainFilter(): ChainFilterContextType {
   const context = useContext(ChainFilterContext)
 
   if (context === undefined) {