Add Web3Modal + Wagmi v2 example in React (#422)

dapps/web3modal/react/package.json

@@ -10,11 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@web3modal/wagmi": "^3.4.0",
+    "@tanstack/react-query": "^5.17.15",
+    "@web3modal/wagmi": "4.0.0-alpha.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^1.19.11",
-    "wagmi": "^1.4.8"
+    "viem": "^2.4.0",
+    "wagmi": "^2.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.14",

dapps/web3modal/react/src/main.tsx

@@ -1,32 +1,55 @@
-import React from "react"
-import ReactDOM from "react-dom/client"
-import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { createWeb3Modal } from "@web3modal/wagmi/react";
 
-import { WagmiConfig } from 'wagmi'
-import { arbitrum, mainnet } from 'viem/chains'
+import { http, createConfig, WagmiProvider } from "wagmi";
+import { mainnet, arbitrum } from "viem/chains";
+import { walletConnect, coinbaseWallet } from "wagmi/connectors";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+// 0. Setup queryClient
+const queryClient = new QueryClient();
 
 // 1. Get projectId at https://cloud.walletconnect.com
-const projectId = import.meta.env.VITE_PROJECT_ID
-if(!projectId) throw new Error("Project ID is undefined")
+const projectId = import.meta.env.VITE_PROJECT_ID;
+if (!projectId) throw new Error("Project ID is undefined");
 
 // 2. Create wagmiConfig
 const metadata = {
-  name: 'Web3Modal',
-  description: 'Web3Modal Example',
-  url: 'https://web3modal.com',
-  icons: ['https://avatars.githubusercontent.com/u/37784886']
-}
+  name: "Web3Modal",
+  description: "Web3Modal Example",
+  url: "https://web3modal.com",
+  icons: ["https://avatars.githubusercontent.com/u/37784886"],
+};
+
+// Define chains
+const chains = [mainnet, arbitrum];
 
-const chains = [mainnet, arbitrum]
-const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })
+const wagmiConfig = createConfig({
+  chains, // Use the defined chains here
+  transports: {
+    [mainnet.id]: http(),
+    [arbitrum.id]: http(),
+  },
+  connectors: [
+    walletConnect({ projectId, metadata, showQrModal: false }),
+    coinbaseWallet({
+      appName: metadata.name,
+      appLogoUrl: metadata.icons[0],
+    }),
+  ],
+});
 
 // 3. Create modal
-createWeb3Modal({ wagmiConfig, projectId, chains })
+createWeb3Modal({ wagmiConfig, projectId, chains });
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <WagmiConfig config={wagmiConfig}>
-      <w3m-button/>
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <w3m-button />
+      </QueryClientProvider>
+    </WagmiProvider>
   </React.StrictMode>
-)
+);