update all lib version

package.json

@@ -8,13 +8,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@wagmi/core": "^1.4.2",
-    "@web3modal/wagmi": "^3.0.1",
-    "viem": "^1.12.2",
-    "vue": "^3.3.4"
+    "@wagmi/connectors": "^4.1.14",
+    "@wagmi/core": "^2.6.5",
+    "@web3modal/wagmi": "^4.0.10",
+    "viem": "^2.7.15",
+    "vue": "^3.4.20"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.3.4",
-    "vite": "^4.4.9"
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "^5.1.4"
   }
 }

src/components/HelloWorld.vue

@@ -1,54 +1,40 @@
 <script setup>
-import { walletConnectProvider } from '@web3modal/wagmi';
-import { publicProvider } from '@wagmi/core/providers/public';
-import { createWeb3Modal, defaultWagmiConfig, useWeb3Modal } from '@web3modal/wagmi/vue';
-import { arbitrumGoerli, arbitrum, mainnet } from '@wagmi/core/chains';
-import {
-  getAccount,
-  fetchToken,
-  writeContract,
-  disconnect,
-  watchAccount,
-  configureChains,
-  createConfig,
-  fetchBalance,
-} from '@wagmi/core';
-import { InjectedConnector } from '@wagmi/core';
-import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
+import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi'
+
+import { mainnet, arbitrum } from 'viem/chains'
+import { reconnect } from '@wagmi/core'
+
 
-import { EthereumProvider } from '@walletconnect/ethereum-provider';
-// import Web3 from 'web3';
 
 // 1. Get projectId
 const projectId = 'e7743d46923911fa8850619b7a7f6d9d';
 
-// 2. Configure wagmi client
-const { chains, publicClient } = configureChains(
-  [arbitrumGoerli, arbitrum, mainnet],
-  [walletConnectProvider({ projectId }), publicProvider()]
-);
-
+// 2. Create wagmiConfig
 const metadata = {
   name: 'Web3Modal',
   description: 'Web3Modal Example',
-  url: 'https://web3modal.com',
-  icons: ['https://avatars.githubusercontent.com/u/37784886'],
-};
+  url: 'https://web3modal.com', // origin must match your domain & subdomain
+  icons: ['https://avatars.githubusercontent.com/u/37784886']
+}
 
-const wagmiConfig = createConfig({
-  autoConnect: true,
-  connectors: [
-    new WalletConnectConnector({ chains, options: { projectId, showQrModal: false, metadata } }),
-    new InjectedConnector({ chains, options: { shimDisconnect: true } }),  
-    // new CoinbaseWalletConnector({ chains, options: { appName: metadata.name } }),
-  ],
-  publicClient,
-});
-// const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
+const chains = [mainnet]
+const config = defaultWagmiConfig({
+  chains, // required
+  projectId, // required
+  metadata, // required
+  enableWalletConnect: true, // Optional - true by default
+  enableInjected: true, // Optional - true by default
+  enableEIP6963: true, // Optional - true by default
+  enableCoinbase: false // Optional - true by default
+})
 
+reconnect(config)
 // 3. Create modal
-createWeb3Modal({ wagmiConfig, projectId, chains });
-const modal = useWeb3Modal();
+let modal = createWeb3Modal({
+  wagmiConfig: config,
+  projectId,
+  enableAnalytics: true // Optional - defaults to your Cloud configuration
+})
 
 async function connectWc() {
   modal.open();