Add watch function to the switchChain method to handle chain switchin…

…g more accurately than before
kolirt · Mar 11, 2024 · ea5e4b4 · ea5e4b4 · kolirt · Mar 11, 2024
1 parent f2fc6bb
commit ea5e4b4
Show file tree

Hide file tree

Showing 31 changed files with 6,482 additions and 2,341 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -3,21 +3,17 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
+  extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting',
+    '@vue/eslint-config-prettier/skip-formatting'
   ],
   parserOptions: {
     ecmaVersion: 'latest'
   },
   rules: {
     'vue/multi-word-component-names': 'off'
   },
-  ignorePatterns: [
-    'dist/**/*',
-    'demo/**/*',
-    'examples/**/*'
-  ]
+  ignorePatterns: ['dist/**/*', 'demo/**/*', 'examples/**/*']
 }
diff --git a/Makefile b/Makefile
@@ -3,7 +3,7 @@ dev:
 format:
 	yarn format
 check:
-	yarn type-check-lib && yarn lint
+	yarn type-check && yarn lint
 build:
 	yarn build-lib && yarn build-demo
 build-demo:

diff --git a/env.d.ts b/env.d.ts
@@ -1,5 +1,5 @@
 declare module '*.vue' {
-    import type { DefineComponent } from 'vue'
-    const component: DefineComponent<{}, {}, any>
-    export default component
-}
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/issues/15-elevenliu123456/.gitignore b/examples/issues/15-elevenliu123456/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/issues/15-elevenliu123456/README.md b/examples/issues/15-elevenliu123456/README.md
@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
diff --git a/examples/issues/15-elevenliu123456/index.html b/examples/issues/15-elevenliu123456/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/issues/15-elevenliu123456/package.json b/examples/issues/15-elevenliu123456/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@kolirt/vue-web3-auth": "^2",
+    "bootstrap": "^5.3.2",
+    "vue": "^3.3.8"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vue-tsc": "^1.8.22"
+  }
+}
diff --git a/examples/issues/15-elevenliu123456/public/vite.svg b/examples/issues/15-elevenliu123456/public/vite.svg
diff --git a/examples/issues/15-elevenliu123456/src/App.vue b/examples/issues/15-elevenliu123456/src/App.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import type { Chain } from '@kolirt/vue-web3-auth'
+import {
+  $off,
+  $on,
+  Events,
+  account,
+  accountDetails,
+  chain,
+  getAvailableChains,
+  connect as masterConnect,
+  disconnect as masterDisconnect,
+  switchChain as masterSwitchChain,
+  selectChain
+} from '@kolirt/vue-web3-auth'
+import { computed, reactive } from 'vue'
+
+const loading = reactive({
+  connecting: false,
+  connectingTo: {} as Record<number, boolean>,
+  switchingTo: {} as Record<number, boolean>,
+  logouting: false
+})
+
+async function connect(newChain?: Chain) {
+  const handler = (state: boolean) => {
+    if (!state) {
+      if (newChain) {
+        loading.connectingTo[newChain.id] = false
+      } else {
+        loading.connecting = false
+      }
+
+      $off(Events.ModalStateChanged, handler)
+    }
+  }
+
+  $on(Events.ModalStateChanged, handler)
+
+  if (newChain) {
+    loading.connectingTo[newChain.id] = true
+  } else {
+    loading.connecting = true
+  }
+
+  await masterConnect(newChain)
+}
+
+async function disconnect() {
+  loading.logouting = true
+
+  const handler = () => {
+    loading.logouting = false
+    $off(Events.Disconnected, handler)
+  }
+
+  $on(Events.Disconnected, handler)
+
+  await masterDisconnect().catch(() => {
+    loading.logouting = false
+    $off(Events.Disconnected, handler)
+  })
+}
+
+async function switchChain(newChain: Chain) {
+  if (!loading.switchingTo[newChain.id]) {
+    loading.switchingTo[newChain.id] = true
+    await masterSwitchChain(newChain)
+      .then(() => {
+        console.log('switchChainSuccess', chain.value)
+      })
+      .catch((err) => {
+        console.log('switchChainErr', err)
+      })
+      .finally(() => {
+        loading.switchingTo[newChain.id] = false
+      })
+  }
+}
+
+async function reconnect(newChain: Chain) {
+  if (chain.value.id !== newChain.id) {
+    await masterDisconnect()
+    await masterConnect(newChain)
+  }
+}
+
+const chains = getAvailableChains()
+const availableChains = computed(() => {
+  return chains.filter((item) => item.id !== chain.value.id)
+})
+</script>
+
+<template>
+  <div class="container py-5">
+    <div class="bg-body-secondary rounded p-5">
+      <div class="d-grid d-sm-flex mb-3 gap-2">
+        <img
+          src="https://img.shields.io/static/v1?label=Made%20with&message=VueJS&color=limegreen&style=for-the-badge&logo=vue.js"
+          alt="vuejs"
+        />
+        <img src="https://img.shields.io/badge/Made%20for-Dapps-orange?style=for-the-badge&logo=ethereum" alt="dapp" />
+      </div>
+
+      <iframe
+        src="https://ghbtns.com/github-btn.html?user=kolirt&repo=vue-web3-auth&type=star&count=true&size=large"
+        frameborder="0"
+        scrolling="0"
+        width="170"
+        height="30"
+        title="GitHub"
+        class="mb-3"
+      >
+      </iframe>
+
+      <div class="d-grid d-sm-flex mb-3 gap-2">
+        <a href="https://github.com/kolirt/vue-web3-auth" target="_blank">Github</a>
+        <a href="https://www.npmjs.com/package/@kolirt/vue-web3-auth" target="_blank">Npmjs</a>
+        <a href="https://github.com/kolirt/vue-web3-auth/tree/master/README.md" target="_blank">Docs</a>
+        <a href="https://github.com/kolirt/vue-web3-auth/tree/master/examples" target="_blank">Example</a>
+      </div>
+
+      <h1>Web3 authentication for Vue3 apps</h1>
+      <p class="lead">Simple WalletConnect Web3Modal v2 integration package for Vue3 dApps</p>
+
+      <template v-if="account.connected">
+        <ul>
+          <li class="mb-2">
+            <span>Wallet info:</span>
+            <ul>
+              <li>Connected: {{ account.connected }}</li>
+              <li>Address: {{ account.address }}</li>
+              <li>Short address: {{ account.shortAddress }}</li>
+            </ul>
+          </li>
+          <li>
+            <span>Chain info:</span>
+            <ul>
+              <li>ID: {{ chain.id }}</li>
+              <li>Network: {{ chain.network }}</li>
+              <li>Name: {{ chain.name }}</li>
+              <li>Native currency: {{ chain.nativeCurrency.symbol }}</li>
+              <li>
+                Explorer:
+                <a :href="chain.blockExplorers?.default.url" target="_blank">
+                  {{ chain.blockExplorers?.default.name }}
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+
+        <hr />
+
+        <div class="d-grid d-sm-flex mb-3 gap-2">
+          <button @click="accountDetails" class="btn btn-primary">Account details</button>
+        </div>
+
+        <div class="d-grid d-sm-flex mb-3 gap-2">
+          <button @click="selectChain" class="btn btn-primary">Select chain via the wc modal</button>
+        </div>
+
+        <div class="d-grid d-sm-flex mb-3 gap-2">
+          <button
+            v-for="item in availableChains"
+            @click="switchChain(item)"
+            :key="item.id"
+            class="btn btn-outline-primary"
+          >
+            {{ loading.switchingTo[item.id] ? `Switching chain to ${item.name}...` : `Switch chain to ${item.name}` }}
+          </button>
+        </div>
+
+        <div class="d-grid d-sm-flex mb-3 gap-2">
+          <button
+            v-for="item in availableChains"
+            @click="reconnect(item)"
+            :key="item.id"
+            class="btn btn-outline-primary"
+          >
+            Reconnect to {{ item.name }}
+          </button>
+        </div>
+
+        <hr />
+
+        <button @click="disconnect" class="btn btn-danger">
+          {{ loading.logouting ? 'Logouting...' : 'Logout' }}
+        </button>
+      </template>
+
+      <div v-else class="d-grid d-sm-flex mb-3 gap-2">
+        <button @click="connect()" class="btn btn-primary">
+          {{ loading.connecting ? 'Connecting...' : 'Connect wallet' }}
+        </button>
+
+        <button v-for="item in chains" @click="connect(item)" :key="item.id" class="btn btn-outline-primary">
+          {{ loading.connectingTo[item.id] ? `Connecting to ${item.name}...` : `Connect to ${item.name}` }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/examples/issues/15-elevenliu123456/src/main.ts b/examples/issues/15-elevenliu123456/src/main.ts
@@ -0,0 +1,26 @@
+import App from './App.vue'
+
+import { Chains, createWeb3Auth } from '@kolirt/vue-web3-auth'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+app.use(
+  createWeb3Auth({
+    projectId: '3c5c8069ff37304cc62e07ae8cb592a8', // generate here https://cloud.walletconnect.com/ and turn on 'Supports Sign v2'
+    logEnabled: true,
+    chains: [
+      Chains.bsc,
+      Chains.mainnet,
+      Chains.polygon,
+      Chains.avalanche,
+      Chains.polygonMumbai,
+      Chains.sepolia,
+      Chains.linea,
+      Chains.bscTestnet
+    ]
+  })
+)
+
+app.mount('#app')
diff --git a/examples/issues/15-elevenliu123456/src/vite-env.d.ts b/examples/issues/15-elevenliu123456/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/issues/15-elevenliu123456/tsconfig.json b/examples/issues/15-elevenliu123456/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,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}