Merge branch 'main' into chore/terms-checkbox

reown-com · Nov 7, 2024 · ff62220 · ff62220
2 parents bfce081 + b57579b
commit ff62220
Show file tree

Hide file tree

Showing 52 changed files with 3,464 additions and 3,538 deletions.
diff --git a/.changeset/light-trainers-divide.md b/.changeset/light-trainers-divide.md
@@ -0,0 +1,24 @@
+---
+'@reown/appkit': patch
+'@reown/appkit-core': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@apps/laboratory': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-polkadot': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-common': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+---
+
+Refactors Vue hooks to listen state as expected
diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx
@@ -22,7 +22,8 @@ const modal = createAppKit({
   projectId: ConstantsUtil.ProjectId,
   features: {
     analytics: true
-  }
+  },
+  customWallets: ConstantsUtil.CustomWallets
 })
 
 const config = wagmiAdapter.wagmiConfig

diff --git a/examples/html-wagmi-cdn/main.js b/examples/html-wagmi-cdn/main.js
@@ -2,7 +2,7 @@ import {
   createAppKit,
   WagmiAdapter,
   networks
-} from 'https://cdn.jsdelivr.net/npm/@reown/appkit-cdn@__VERSION__/dist/appkit.js'
+} from 'https://cdn.jsdelivr.net/npm/@reown/appkit-cdn@1.3.0/dist/appkit.js'
 import { reconnect } from 'https://esm.sh/@wagmi/[email protected]'
 
 if (!createAppKit || !WagmiAdapter) {

diff --git a/examples/vue-ethers-solana/index.html b/examples/vue-ethers-solana/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Ethers + Solana Example</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue-ethers-solana/package.json b/examples/vue-ethers-solana/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@examples/vue-ethers-solana",
+  "private": true,
+  "version": "1.2.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@reown/appkit": "workspace:*",
+    "@reown/appkit-adapter-ethers": "workspace:*",
+    "@reown/appkit-adapter-solana": "workspace:*",
+    "ethers": "5.7.2",
+    "vue": "3.4.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "5.0.2",
+    "typescript": "5.6.2",
+    "vite": "5.2.11",
+    "vue-tsc": "2.1.8"
+  }
+}
diff --git a/examples/vue-ethers-solana/src/App.vue b/examples/vue-ethers-solana/src/App.vue
@@ -0,0 +1,241 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { mainnet, polygon, base, solana, solanaTestnet } from '@reown/appkit/networks'
+import { EthersAdapter } from '@reown/appkit-adapter-ethers'
+import { SolanaAdapter } from '@reown/appkit-adapter-solana'
+import {
+  createAppKit,
+  useAppKitEvents,
+  useAppKitState,
+  useAppKitTheme,
+  useAppKitAccount,
+  useAppKitNetwork
+} from '@reown/appkit/vue'
+
+const projectId = import.meta.env.VITE_PROJECT_ID
+if (!projectId) {
+  throw new Error('VITE_PROJECT_ID is not set')
+}
+
+// Initialize Ethers adapter
+const ethersAdapter = new EthersAdapter()
+
+// Initialize Solana adapter
+const solanaAdapter = new SolanaAdapter({})
+
+// Initialize AppKit
+const modal = createAppKit({
+  adapters: [ethersAdapter, solanaAdapter],
+  networks: [mainnet, polygon, base, solana, solanaTestnet],
+  projectId,
+  metadata: {
+    name: 'AppKit Vue Ethers Example',
+    description: 'AppKit Vue Ethers Example',
+    url: 'https://reown.com/appkit',
+    icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
+  }
+})
+
+// State Management
+const useAccount = useAppKitAccount()
+const useNetwork = useAppKitNetwork()
+const useAppKit = useAppKitState()
+const { setThemeMode } = useAppKitTheme()
+const events = useAppKitEvents()
+const walletInfo = ref({})
+const themeState = ref({ themeMode: 'light', themeVariables: {} })
+
+// Theme toggle function
+const toggleTheme = () => {
+  const newTheme = themeState.value.themeMode === 'dark' ? 'light' : 'dark'
+  setThemeMode(newTheme)
+  themeState.value.themeMode = newTheme
+  document.body.className = newTheme
+}
+
+// Subscriptions
+onMounted(() => {
+  // Set initial theme
+  document.body.className = themeState.value.themeMode
+
+  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>Vue Ethers + Solana 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>
+      <button
+        @click="useNetwork.switchNetwork(useNetwork.chainId === polygon.id ? mainnet : polygon)"
+      >
+        Switch to
+        {{ useNetwork.chainId === polygon.id ? 'Mainnet' : 'Polygon' }}
+      </button>
+    </div>
+
+    <!-- State Displays -->
+    <div class="state-container">
+      <section>
+        <h2>Account</h2>
+        <pre>{{ JSON.stringify(useAccount, null, 2) }}</pre>
+      </section>
+
+      <section>
+        <h2>Network</h2>
+        <pre>{{ JSON.stringify(useNetwork, null, 2) }}</pre>
+      </section>
+
+      <section>
+        <h2>Modal State</h2>
+        <pre>{{ JSON.stringify(useAppKit, 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;
+}
+
+body.light {
+  background-color: #fff;
+  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-ethers-solana/src/env.d.ts b/examples/vue-ethers-solana/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-ethers-solana/src/main.ts b/examples/vue-ethers-solana/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+// @ts-ignore
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/vue-ethers-solana/tsconfig.json b/examples/vue-ethers-solana/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-ethers-solana/vite.config.ts b/examples/vue-ethers-solana/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})