refactor: update vue example with correct wagmi setup (#3157)

examples/html-ethers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@examples/html-ethers",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite --port 3011",
     "build": "vite build"

examples/html-ethers5/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@examples/html-ethers5",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite --port 3011",
     "build": "vite build"

examples/html-wagmi-cdn/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@examples/html-wagmi-cdn",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
     "prebuild": "node inject-cdn-version.js",
     "dev": "vite",

examples/html-wagmi/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@examples/html-wagmi",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite --port 3001",
     "build": "vite build"

examples/next-ethers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/next-ethers",
-  "version": "1.0.6",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

examples/next-wagmi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/next-wagmi",
-  "version": "1.0.6",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

examples/react-ethers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@examples/react-ethers",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite --port 3012",
     "build": "vite build"

examples/react-ethers5/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@examples/react-ethers5",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite --port 3012",
     "build": "vite build"

examples/react-solana/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@examples/react-solana",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite --port 3002",
     "build": "vite build"

examples/react-wagmi/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@examples/react-wagmi",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite --port 3002",
     "build": "vite build"

examples/vue-ethers5/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@examples/vue-ethers5",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite --port 3013",
     "build": "vite build"
   },
   "dependencies": {
-    "@reown/appkit-adapter-ethers5": "workspace:*",
     "@reown/appkit": "workspace:*",
+    "@reown/appkit-adapter-ethers5": "workspace:*",
     "ethers": "5.7.2",
     "vue": "3.4.3"
   },
   "devDependencies": {
-    "vite": "5.2.11",
-    "@vitejs/plugin-vue": "5.0.2"
+    "@vitejs/plugin-vue": "5.0.2",
+    "vite": "5.2.11"
   }
 }

examples/vue-ethers5/src/App.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { ref, onMounted, watch } from 'vue'
+import { arbitrum, mainnet } from '@reown/appkit/networks'
 import { Ethers5Adapter } from '@reown/appkit-adapter-ethers5'
 import {
   createAppKit,
@@ -7,56 +9,87 @@ import {
   useAppKitState,
   useAppKitTheme
 } from '@reown/appkit/vue'
-import { mainnet, arbitrum } from '@reown/appkit/networks'
 
-// @ts-expect-error 1. Get projectId
+const error = ref('')
+
+// 1. Get projectId
 const projectId = import.meta.env.VITE_PROJECT_ID
 if (!projectId) {
   throw new Error('VITE_PROJECT_ID is not set')
 }
 
-function getBlockchainApiRpcUrl(chainId) {
-  return `https://rpc.walletconnect.org/v1/?chainId=eip155:${chainId}&projectId=${projectId}`
-}
-
-// 2. Set Ethers adapter
+// 2. Create ethers adapter
 const ethersAdapter = new Ethers5Adapter()
 
 // 3. Create modal
 createAppKit({
-  ethersConfig,
+  adapters: [ethersAdapter],
+  networks: [mainnet, arbitrum],
   projectId,
   metadata: {
-    name: 'AppKit',
-    description: 'AppKit Laboratory',
-    url: 'https://example.com',
-    icons: ['https://avatars.githubusercontent.com/u/37784886']
-  },
-  networks: [mainnet, arbitrum],
-  themeMode: 'light',
-  themeVariables: {
-    '--w3m-color-mix': '#00BB7F',
-    '--w3m-color-mix-strength': 20
+    name: 'AppKit Vue Ethers Example',
+    description: 'AppKit Vue Ethers Example',
+    url: '',
+    icons: []
   }
 })
 
-// 4. Use modal composable
 const modal = useAppKit()
 const state = useAppKitState()
 const { setThemeMode, themeMode, themeVariables } = useAppKitTheme()
 const events = useAppKitEvents()
+
+const toggleTheme = () => {
+  const newTheme = themeMode.value === 'dark' ? 'light' : 'dark'
+  setThemeMode(newTheme)
+}
+
+// Watch for theme changes and update body class
+watch(themeMode, newTheme => {
+  document.body.className = newTheme
+})
+
+// Set initial theme class on mount
+onMounted(() => {
+  document.body.className = themeMode.value
+})
 </script>
 
 <template>
-  <w3m-button />
-  <w3m-network-button />
-  <w3m-connect-button />
-  <w3m-account-button />
-
-  <button @click="modal.open()">Open Connect Modal</button>
-  <button @click="modal.open({ view: 'Networks' })">Open Network Modal</button>
-  <button @click="setThemeMode(themeMode === 'dark' ? 'light' : 'dark')">Toggle Theme Mode</button>
-  <pre>{{ JSON.stringify(state, null, 2) }}</pre>
-  <pre>{{ JSON.stringify({ themeMode, themeVariables }, null, 2) }}</pre>
-  <pre>{{ JSON.stringify(events, null, 2) }}</pre>
+  <div class="container">
+    <h1>Hello Vue Ethers5</h1>
+    <w3m-button />
+    <w3m-network-button />
+
+    <button @click="modal.open()">Open Connect Modal</button>
+    <button @click="modal.open({ view: 'Networks' })">Open Network Modal</button>
+    <button @click="toggleTheme">Toggle Theme Mode</button>
+    <pre>{{ JSON.stringify(state, null, 2) }}</pre>
+    <pre>{{ JSON.stringify({ themeMode, themeVariables }, null, 2) }}</pre>
+    <pre>{{ JSON.stringify(events, null, 2) }}</pre>
+  </div>
 </template>
+
+<style>
+body {
+  margin: 0;
+  min-height: 100vh;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+}
+
+body.dark {
+  background-color: #333;
+  color: #fff;
+}
+
+body.light {
+  background-color: #fff;
+  color: #000;
+}
+
+.container {
+  padding: 20px;
+}
+</style>

examples/vue-ethers5/src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.mount('#app')

examples/vue-solana/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@examples/vue-solana",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.2.0",
   "scripts": {
-    "dev": "vite --port 3013"
+    "dev": "vite --port 3013",
+    "build": "vite build"
   },
   "dependencies": {
     "@solana/wallet-adapter-backpack": "0.1.14",