feat: add support for coinbase wallet with auto connect and metamask

src/components/providers/WagmiProvider.tsx

@@ -4,6 +4,42 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { farcasterFrame } from "@farcaster/frame-wagmi-connector";
 import { coinbaseWallet, metaMask } from 'wagmi/connectors';
 import { APP_NAME, APP_ICON_URL, APP_URL } from "~/lib/constants";
+import { useEffect, useState } from "react";
+import { useConnect, useAccount } from "wagmi";
+import React from "react";
+
+// Custom hook for Coinbase Wallet detection and auto-connection
+function useCoinbaseWalletAutoConnect() {
+  const [isCoinbaseWallet, setIsCoinbaseWallet] = useState(false);
+  const { connect, connectors } = useConnect();
+  const { isConnected } = useAccount();
+
+  useEffect(() => {
+    // Check if we're running in Coinbase Wallet
+    const checkCoinbaseWallet = () => {
+      const isInCoinbaseWallet = window.ethereum?.isCoinbaseWallet || 
+        window.ethereum?.isCoinbaseWalletExtension ||
+        window.ethereum?.isCoinbaseWalletBrowser;
+      setIsCoinbaseWallet(!!isInCoinbaseWallet);
+    };
+    
+    checkCoinbaseWallet();
+    window.addEventListener('ethereum#initialized', checkCoinbaseWallet);
+    
+    return () => {
+      window.removeEventListener('ethereum#initialized', checkCoinbaseWallet);
+    };
+  }, []);
+
+  useEffect(() => {
+    // Auto-connect if in Coinbase Wallet and not already connected
+    if (isCoinbaseWallet && !isConnected) {
+      connect({ connector: connectors[1] }); // Coinbase Wallet connector
+    }
+  }, [isCoinbaseWallet, isConnected, connect, connectors]);
+
+  return isCoinbaseWallet;
+}
 
 export const config = createConfig({
   chains: [base, optimism, mainnet, degen, unichain],
@@ -32,10 +68,20 @@ export const config = createConfig({
 
 const queryClient = new QueryClient();
 
+// Wrapper component that provides Coinbase Wallet auto-connection
+function CoinbaseWalletAutoConnect({ children }: { children: React.ReactNode }) {
+  useCoinbaseWalletAutoConnect();
+  return <>{children}</>;
+}
+
 export default function Provider({ children }: { children: React.ReactNode }) {
   return (
     <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        <CoinbaseWalletAutoConnect>
+          {children}
+        </CoinbaseWalletAutoConnect>
+      </QueryClientProvider>
     </WagmiProvider>
   );
 }