chore: update vite app configs for vue-wagmi example (#3181)

reown-com · Nov 1, 2024 · 458b590 · 458b590
1 parent e0b0f2c
commit 458b590
Show file tree

Hide file tree

Showing 29 changed files with 2,044 additions and 451 deletions.
diff --git a/examples/html-ethers5/src/main.js b/examples/html-ethers5/src/main.js
@@ -19,7 +19,7 @@ const modal = createAppKit({
     name: 'AppKit',
     description: 'AppKit Laboratory',
     url: 'https://example.com',
-    icons: ['https://avatars.githubusercontent.com/u/37784886']
+    icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
   },
   projectId,
   metadata,

diff --git a/examples/html-wagmi-cdn/main.js b/examples/html-wagmi-cdn/main.js
@@ -34,7 +34,7 @@ if (!createAppKit || !WagmiAdapter) {
         name: 'Html CDN Example',
         description: 'Html CDN Example using local server',
         url: 'https://reown.com/appkit',
-        icons: ['https://avatars.githubusercontent.com/u/37784886']
+        icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
       }
     })
 

diff --git a/examples/html-wagmi/src/main.js b/examples/html-wagmi/src/main.js
@@ -21,7 +21,7 @@ const modal = createAppKit({
     name: 'Html Example',
     description: 'Html Example',
     url: 'https://reown.com/appkit',
-    icons: ['https://avatars.githubusercontent.com/u/37784886']
+    icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
   },
   networks: [mainnet, arbitrum],
   projectId,

diff --git a/examples/react-ethers5/src/App.tsx b/examples/react-ethers5/src/App.tsx
@@ -24,7 +24,7 @@ createAppKit({
     name: 'AppKit',
     description: 'AppKit Laboratory',
     url: 'https://example.com',
-    icons: ['https://avatars.githubusercontent.com/u/37784886']
+    icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
   },
   networks: [mainnet, arbitrum],
   projectId,

diff --git a/examples/vue-ethers5/index.html b/examples/vue-ethers5/index.html
@@ -3,10 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vue ethers5 example</title>
+    <title>Vue Ethers5 Example</title>
   </head>
+
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/examples/vue-ethers5/package.json b/examples/vue-ethers5/package.json
@@ -3,8 +3,9 @@
   "private": true,
   "version": "1.2.0",
   "scripts": {
-    "dev": "vite --port 3013",
-    "build": "vite build"
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@reown/appkit": "workspace:*",
@@ -14,6 +15,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.2",
-    "vite": "5.2.11"
+    "typescript": "5.6.2",
+    "vite": "5.2.11",
+    "vue-tsc": "2.1.8"
   }
 }
diff --git a/examples/vue-ethers5/src/App.vue b/examples/vue-ethers5/src/App.vue
@@ -1,84 +1,139 @@
 <script lang="ts" setup>
-import { ref, onMounted, watch } from 'vue'
-import { arbitrum, mainnet } from '@reown/appkit/networks'
+import { ref, onMounted } from 'vue'
+import { mainnet, polygon, base } from '@reown/appkit/networks'
 import { Ethers5Adapter } from '@reown/appkit-adapter-ethers5'
-import {
-  createAppKit,
-  useAppKit,
-  useAppKitEvents,
-  useAppKitState,
-  useAppKitTheme
-} from '@reown/appkit/vue'
+import { createAppKit, useAppKitEvents, useAppKitState, useAppKitTheme } from '@reown/appkit/vue'
 
-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')
 }
 
-// 2. Create ethers adapter
+// Initialize Ethers5 adapter
 const ethersAdapter = new Ethers5Adapter()
 
-// 3. Create modal
-createAppKit({
+// Initialize AppKit
+const modal = createAppKit({
   adapters: [ethersAdapter],
-  networks: [mainnet, arbitrum],
+  networks: [mainnet, polygon, base],
   projectId,
   metadata: {
     name: 'AppKit Vue Ethers Example',
     description: 'AppKit Vue Ethers Example',
-    url: '',
-    icons: []
+    url: 'https://reown.com/appkit',
+    icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
   }
 })
 
-const modal = useAppKit()
-const state = useAppKitState()
-const { setThemeMode, themeMode, themeVariables } = useAppKitTheme()
+// State Management
+const accountState = ref({})
+const networkState = ref({})
+const appState = useAppKitState()
+const { setThemeMode } = useAppKitTheme()
 const events = useAppKitEvents()
+const walletInfo = ref({})
+const themeState = ref({ themeMode: 'light', themeVariables: {} })
 
+// Theme toggle function
 const toggleTheme = () => {
-  const newTheme = themeMode.value === 'dark' ? 'light' : 'dark'
+  const newTheme = themeState.value.themeMode === 'dark' ? 'light' : 'dark'
   setThemeMode(newTheme)
-}
-
-// Watch for theme changes and update body class
-watch(themeMode, newTheme => {
+  themeState.value.themeMode = newTheme
   document.body.className = newTheme
-})
+}
 
-// Set initial theme class on mount
+// Subscriptions
 onMounted(() => {
-  document.body.className = themeMode.value
+  // Set initial theme
+  document.body.className = themeState.value.themeMode
+
+  // Setup subscriptions
+  modal.subscribeAccount(state => {
+    accountState.value = state
+  })
+
+  modal.subscribeNetwork(state => {
+    networkState.value = state
+  })
+
+  modal.subscribeTheme(state => {
+    themeState.value = state
+    document.body.className = state.themeMode
+  })
+
+  modal.subscribeWalletInfo(state => {
+    // @ts-ignore
+    walletInfo.value = state
+  })
 })
 </script>
 
 <template>
   <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>
+    <h1>Vue Ethers5 Example</h1>
+
+    <!-- AppKit UI Components -->
+    <div class="button-group">
+      <w3m-button />
+      <w3m-network-button />
+    </div>
+
+    <!-- Modal Controls -->
+    <div class="button-group">
+      <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>
+    </div>
+
+    <!-- State Displays -->
+    <div class="state-container">
+      <section>
+        <h2>Account</h2>
+        <pre>{{ JSON.stringify(accountState, null, 2) }}</pre>
+      </section>
+
+      <section>
+        <h2>Network</h2>
+        <pre>{{ JSON.stringify(networkState, null, 2) }}</pre>
+      </section>
+
+      <section>
+        <h2>State</h2>
+        <pre>{{ JSON.stringify(appState, null, 2) }}</pre>
+      </section>
+
+      <section>
+        <h2>Theme</h2>
+        <pre>{{ JSON.stringify(themeState, null, 2) }}</pre>
+      </section>
+
+      <section>
+        <h2>Events</h2>
+        <pre>{{ JSON.stringify(events, null, 2) }}</pre>
+      </section>
+
+      <section>
+        <h2>Wallet Info</h2>
+        <pre>{{ JSON.stringify(walletInfo, null, 2) }}</pre>
+      </section>
+    </div>
   </div>
 </template>
 
 <style>
+/* Base styles */
 body {
   margin: 0;
   min-height: 100vh;
   transition:
     background-color 0.3s,
     color 0.3s;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
+/* Theme styles */
 body.dark {
   background-color: #333;
   color: #fff;
@@ -89,7 +144,90 @@ body.light {
   color: #000;
 }
 
+/* Layout */
 .container {
   padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Typography */
+h1 {
+  font-weight: 700;
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+  letter-spacing: -0.02em;
+}
+
+h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  margin: 0 0 10px 0;
+  letter-spacing: -0.01em;
+}
+
+/* Buttons */
+.button-group {
+  display: flex;
+  gap: 16px;
+  margin: 20px 0;
+}
+
+button {
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+/* Light theme button styles */
+body.light button {
+  background: white;
+  color: black;
+  border-color: #ddd;
+}
+
+body.light button:hover {
+  background: #f5f5f5;
+}
+
+/* Dark theme button styles */
+body.dark button {
+  background: #444;
+  color: white;
+  border-color: #666;
+}
+
+body.dark button:hover {
+  background: #555;
+}
+
+/* State container */
+.state-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+section {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 16px;
+  border-radius: 8px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro',
+    monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 </style>
diff --git a/examples/vue-ethers5/src/env.d.ts b/examples/vue-ethers5/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_PROJECT_ID: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/examples/vue-solana/src/main.js → examples/vue-ethers5/src/main.ts b/examples/vue-solana/src/main.js → examples/vue-ethers5/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+// @ts-ignore
 import App from './App.vue'
 
 createApp(App).mount('#app')
diff --git a/examples/vue-ethers5/tsconfig.json b/examples/vue-ethers5/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}
diff --git a/examples/vue-wagmi/vite.config.js → examples/vue-ethers5/vite.config.ts b/examples/vue-wagmi/vite.config.js → examples/vue-ethers5/vite.config.ts
@@ -1,11 +1,9 @@
-import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   plugins: [vue()],
-  build: {
-    rollupOptions: {
-      external: ['@tanstack/vue-query']
-    }
+  define: {
+    'import.meta.env.VITE_PROJECT_ID': JSON.stringify(process.env.VITE_PROJECT_ID)
   }
 })