update web3modal example (#339)

basic/dapps/web3modal/package.json

@@ -10,12 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@web3modal/ethereum": "^2.7.1",
+    "@web3modal/wagmi": "^3.4.0",
-    "@web3modal/react": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^1.4.1",
+    "viem": "^1.19.11",
-    "wagmi": "^1.3.9"
+    "wagmi": "^1.4.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.14",

basic/dapps/web3modal/src/main.tsx

@@ -1,34 +1,32 @@
-import React from "react";
+import React from "react"
-import ReactDOM from "react-dom/client";
+import ReactDOM from "react-dom/client"
-import {
+import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
-  EthereumClient,
-  w3mConnectors,
-  w3mProvider,
-} from "@web3modal/ethereum";
-import { Web3Modal, Web3Button } from "@web3modal/react";
-import { configureChains, createConfig, WagmiConfig } from "wagmi";
-import { arbitrum, mainnet, polygon } from "wagmi/chains";
 
-// 1. select chains
+import { WagmiConfig } from 'wagmi'
-const chains = [arbitrum, mainnet, polygon];
+import { arbitrum, mainnet } from 'viem/chains'
-const projectId = import.meta.env.VITE_PROJECT_ID;
 
-// 2. generate wagmiConfig with w3mConnectors
+// 1. Get projectId at https://cloud.walletconnect.com
-const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
+const projectId = import.meta.env.VITE_PROJECT_ID
-const wagmiConfig = createConfig({
+if(!projectId) throw new Error("Project ID is undefined")
-  autoConnect: true,
-  connectors: w3mConnectors({ projectId, chains }),
-  publicClient,
-});
 
-// 3. create ethereumClient
+// 2. Create wagmiConfig
-const ethereumClient = new EthereumClient(wagmiConfig, chains);
+const metadata = {
+  name: 'Web3Modal',
+  description: 'Web3Modal Example',
+  url: 'https://web3modal.com',
+  icons: ['https://avatars.githubusercontent.com/u/37784886']
+}
+
+const chains = [mainnet, arbitrum]
+const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })
+
+// 3. Create modal
+createWeb3Modal({ wagmiConfig, projectId, chains })
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <WagmiConfig config={wagmiConfig}>
-      <Web3Button />
+      <w3m-button/>
     </WagmiConfig>
-    <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
   </React.StrictMode>
-);
+)