refactor next

dapps/web3modal/next/package.json

@@ -15,8 +15,8 @@
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
-    "viem": "^2.2.0",
-    "wagmi": "^2.2.1"
+    "viem": "^2.4.0",
+    "wagmi": "^2.3.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.5.2",

dapps/web3modal/next/src/app/layout.tsx

@@ -3,8 +3,9 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import { headers } from 'next/headers'
 
-import { Web3Modal, wagmiConfig } from '@/context/Web3Modal'
+import { Web3Modal } from '@/context/Web3Modal'
 import { cookieToInitialState } from 'wagmi'
+import { wagmiConfig } from '@/context/wagmiConfig'
 
 const inter = Inter({ subsets: ['latin'] })
 

dapps/web3modal/next/src/context/Web3Modal.tsx

@@ -3,45 +3,11 @@
 import { WagmiProvider, State } from 'wagmi'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactNode } from 'react'
-import { createWeb3Modal } from '@web3modal/wagmi/react'
-import { cookieStorage, createConfig, createStorage, http } from 'wagmi'
-import { type Chain, mainnet, sepolia } from 'wagmi/chains'
-import { walletConnect } from 'wagmi/connectors'
+import { wagmiConfig } from './wagmiConfig'
 
 // 0. Setup queryClient
 const queryClient = new QueryClient()
 
-// 1. Get projectId at https://cloud.walletconnect.com
-const projectId = process.env.NEXT_PUBLIC_PROJECT_ID || ''
-
-if (!projectId) throw new Error('WalletConnect 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'],
-}
-
-const chains = [mainnet, sepolia] as [Chain, ...Chain[]]
-
-export const wagmiConfig = createConfig({
-	chains,
-	transports: {
-		[mainnet.id]: http(),
-		[sepolia.id]: http(),
-	},
-	connectors: [walletConnect({ projectId, metadata, showQrModal: false })],
-	ssr: true,
-	storage: createStorage({
-		storage: cookieStorage,
-	}),
-})
-
-// 3. Create modal
-createWeb3Modal({ wagmiConfig, projectId, chains })
-
 export function Web3Modal({ children, initialState }: { children: ReactNode; initialState?: State }) {
 	return (
 		<WagmiProvider config={wagmiConfig} initialState={initialState}>

dapps/web3modal/next/src/context/wagmiConfig.ts

@@ -0,0 +1,41 @@
+import { createWeb3Modal } from "@web3modal/wagmi"
+import { cookieStorage, createConfig, createStorage, http } from "wagmi"
+import { getConnectors, watchConnectors } from "wagmi/actions"
+import { Chain, mainnet, sepolia } from "wagmi/chains"
+import { injected, walletConnect } from "wagmi/connectors"
+
+// 1. Get projectId at https://cloud.walletconnect.com
+const projectId = process.env.NEXT_PUBLIC_PROJECT_ID || ''
+
+if (!projectId) throw new Error('WalletConnect 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'],
+}
+
+const chains = [mainnet, sepolia] as [Chain, ...Chain[]]
+
+export const wagmiConfig = createConfig({
+	chains,
+	transports: {
+		[mainnet.id]: http(),
+		[sepolia.id]: http(),
+	},
+	connectors: [walletConnect({ projectId, metadata, showQrModal: false }), injected()],
+	ssr: true,
+	storage: createStorage({
+		storage: cookieStorage,
+	}),
+})
+
+const connectors = getConnectors(wagmiConfig)
+console.log(connectors)
+
+watchConnectors(wagmiConfig, { onChange(cone){ console.log(cone) } })
+// 3. Create modal
+createWeb3Modal({ wagmiConfig, projectId, chains })
+

dapps/web3modal/react/package.json

@@ -15,7 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.4.0",
-    "wagmi": "^2.2.1"
+    "wagmi": "^2.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.14",