Merge pull request #135 from vu3th/feature/wallet-connect-v2

feat: wallet connect v2
vu3th · Jun 24, 2023 · dcdf229 · dcdf229
2 parents b1110cd + 3a8af88
commit dcdf229
Show file tree

Hide file tree

Showing 5 changed files with 3,414 additions and 3,236 deletions.
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -45,10 +45,22 @@ let connectors: Connector[] = [
     appUrl: 'http://localhost:3000',
   }),
   new WalletConnectConnector({
-    qrcode: true,
-    rpc: {
-      1: 'https://eth-mainnet.public.blastapi.io',
-      5: 'https://rpc.ankr.com/eth_goerli',
+    projectId: '3f3c98042b194264687bf59e104c534a',
+    chains: [1],
+    showQrModal: true,
+    qrModalOptions: {
+      themeMode: 'dark',
+      themeVariables: undefined,
+      chainImages: undefined,
+      desktopWallets: undefined,
+      walletImages: undefined,
+      mobileWallets: undefined,
+      enableExplorer: true,
+      explorerAllowList: undefined,
+      tokenImages: undefined,
+      privacyPolicyUrl: undefined,
+      explorerDenyList: undefined,
+      termsOfServiceUrl: undefined,
     },
   }),
   new CoinbaseWalletConnector({

diff --git a/demo/src/main.ts b/demo/src/main.ts
@@ -11,6 +11,17 @@ app.use(VueDapp, {
   autoConnect: true,
   dumb: false,
   networks: {
+    137: {
+      chainId: ethers.utils.hexValue(137),
+      blockExplorerUrls: ['https://polygonscan.com'],
+      chainName: 'Polygon',
+      rpcUrls: ['https://rpc-mainnet.maticvigil.com'],
+      nativeCurrency: {
+        name: 'Matic',
+        decimals: 18,
+        symbol: 'MATIC',
+      },
+    },
     80001: {
       chainId: ethers.utils.hexValue(80001),
       blockExplorerUrls: ['https://mumbai.polygonscan.com/'],

diff --git a/package.json b/package.json
@@ -41,15 +41,23 @@
     "@coinbase/wallet-sdk": ">=3.1.0",
     "@gnosis.pm/safe-apps-provider": ">=0.15.1",
     "@gnosis.pm/safe-apps-sdk": ">=7.8.0",
-    "@walletconnect/web3-provider": ">=1.7.8",
+    "@walletconnect/ethereum-provider": "^2.7.7",
+    "@walletconnect/modal": "^2.4.5",
+    "@web3modal/standalone": "^2.4.1",
     "ethers": ">=5.6.8",
     "vue": ">=3.2.0"
   },
   "peerDependenciesMeta": {
     "@coinbase/wallet-sdk": {
       "optional": true
     },
-    "@walletconnect/web3-provider": {
+    "@walletconnect/ethereum-provider": {
+      "optional": true
+    },
+    "@walletconnect/modal": {
+      "optional": true
+    },
+    "@web3modal/standalone": {
       "optional": true
     },
     "@gnosis.pm/safe-apps-provider": {
@@ -76,7 +84,9 @@
     "@vue/test-utils": "^2.2.6",
     "@vuedx/typecheck": "^0.7.5",
     "@vuedx/typescript-plugin-vue": "^0.7.5",
-    "@walletconnect/web3-provider": "^1.7.8",
+    "@walletconnect/ethereum-provider": "^2.7.7",
+    "@walletconnect/modal": "^2.4.5",
+    "@web3modal/standalone": "^2.4.1",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",

diff --git a/src/connectors/walletConnect.ts b/src/connectors/walletConnect.ts
@@ -1,5 +1,4 @@
 import { Connector } from './connector'
-import type WalletConnectProvider from '@walletconnect/web3-provider'
 import { getAddress, hexValue } from 'ethers/lib/utils'
 import {
   ProviderNotFoundError,
@@ -8,36 +7,21 @@ import {
   SwitchChainNotSupportedError,
   UserRejectedRequestError,
 } from './errors'
+import { EthereumProviderOptions } from '@walletconnect/ethereum-provider/dist/types/EthereumProvider'
 
-/**
- * WalletConnect v1.0 \
- * Docs: https://docs.walletconnect.com/quick-start/dapps/web3-provider \
- * Test Wallet: https://test.walletconnect.org/ \
- * Source: https://github.com/WalletConnect/walletconnect-monorepo/blob/v1.0/packages/providers/web3-provider/src/index.ts
- */
-export interface IWalletConnectProvider extends WalletConnectProvider {} // eslint-disable-line
-
-export type WalletConnectOptions = ConstructorParameters<
-  typeof WalletConnectProvider
->[0]
-
-export class WalletConnectConnector extends Connector<
-  WalletConnectProvider,
-  WalletConnectOptions
-> {
+export class WalletConnectConnector extends Connector {
   readonly name = 'walletConnect'
-
-  #provider?: WalletConnectProvider
+  #provider?: any
   #onDisconnectHandler?: (code: number, reason: string) => void
   #onAccountsChangedHandler?: (accounts: string[]) => void
   #onChainChangedHandler?: (chainId: number) => void
 
-  constructor(options: WalletConnectOptions) {
+  constructor(options: EthereumProviderOptions) {
     super(options)
   }
 
   async connect() {
-    const provider = await this.getProvider()
+    const provider: any = await this.getProvider()
     this.#provider = provider
     const accounts = await provider.enable()
     const account = getAddress(accounts[0])
@@ -49,29 +33,26 @@ export class WalletConnectConnector extends Connector<
   }
 
   async getProvider() {
-    const WalletConnectProvider = (await import('@walletconnect/web3-provider'))
-      .default
-    const provider = new WalletConnectProvider({
+    const { EthereumProvider } = await import(
+      '@walletconnect/ethereum-provider'
+    )
+    const provider = await EthereumProvider.init({
       ...this.options,
     })
 
-    // fix: If user reject session, provider.enable() will be stuck and can't be resolved.
-    // source code: https://github.com/WalletConnect/walletconnect-monorepo/blob/v1.0/packages/providers/web3-provider/src/index.ts
-    // TODO: fix Promise executor functions should not be async.
-    return new Promise<WalletConnectProvider>(async (resolve, reject) => {
-      provider.wc.on('disconnect', (err, payload) => {
-        if (!provider.connected) {
-          reject(new UserRejectedRequestError(err))
-        }
-      })
-      try {
-        await provider.enable()
-      } catch (e: any) {
-        reject(new Error(e))
-        return
+    provider.on('disconnect', (args: any) => {
+      if (!provider.connected) {
+        throw new UserRejectedRequestError(args.message)
       }
-      resolve(provider)
     })
+
+    try {
+      await provider.enable()
+    } catch (err: any) {
+      throw new Error(err)
+    }
+
+    return provider
   }
 
   async disconnect() {