feat: update to use coinbaseWallet and metaMask connectors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neynar/create-farcaster-mini-app",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "type": "module",
   "private": false,
   "access": "public",

src/components/Demo.tsx

@@ -59,7 +59,22 @@ export default function Demo(
   } = useSignTypedData();
 
   const { disconnect } = useDisconnect();
-  const { connect } = useConnect();
+  const { connect, connectors } = useConnect();
+
+  const handleConnect = useCallback(async () => {
+    if (context) {
+      // If we're in a frame client, use the frame connector
+      await connect({ connector: connectors[0] });
+    } else {
+      try {
+        // Try Coinbase Wallet first
+        await connect({ connector: connectors[1] });
+      } catch (error) {
+        // If Coinbase Wallet fails, try MetaMask
+        await connect({ connector: connectors[2] });
+      }
+    }
+  }, [connect, connectors, context]);
 
   const {
     switchChain,
@@ -321,15 +336,21 @@ export default function Demo(
           )}
 
           <div className="mb-4">
+            {isConnected ? (
               <Button
-              onClick={() =>
+                onClick={() => disconnect()}
-                isConnected
+                className="w-full"
-                  ? disconnect()
-                  : connect({ connector: config.connectors[0] })
-              }
               >
-              {isConnected ? "Disconnect" : "Connect"}
+                Disconnect
               </Button>
+            ) : (
+              <Button
+                onClick={handleConnect}
+                className="w-full"
+              >
+                Connect
+              </Button>
+            )}
           </div>
 
           <div className="mb-4">

src/components/providers/WagmiProvider.tsx

@@ -2,6 +2,8 @@ import { createConfig, http, WagmiProvider } from "wagmi";
 import { base, degen, mainnet, optimism, unichain } from "wagmi/chains";
 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";
 
 export const config = createConfig({
   chains: [base, optimism, mainnet, degen, unichain],
@@ -12,7 +14,20 @@ export const config = createConfig({
     [degen.id]: http(),
     [unichain.id]: http(),
   },
-  connectors: [farcasterFrame()],
+  connectors: [
+    farcasterFrame(),
+    coinbaseWallet({
+      appName: APP_NAME,
+      appLogoUrl: APP_ICON_URL,
+      preference: 'all',
+    }),
+    metaMask({
+      dappMetadata: {
+        name: APP_NAME,
+        url: APP_URL,
+      },
+    }),
+  ],
 });
 
 const queryClient = new QueryClient();