Fix: WalletConnect v1 Switch Accounts and bump V2 package support (#1644)

* Working for switching chains and accounts

* Cleanup on walletconnect v1 and standardize accounts to lowercase to match other wallets

* Revert demo changes for testing

Author: Adamj1232

packages/demo/package.json

@@ -45,7 +45,7 @@
     "@web3-onboard/torus": "^2.2.3",
     "@web3-onboard/taho": "^2.0.2",
     "@web3-onboard/web3auth": "^2.2.1",
-    "@web3-onboard/walletconnect": "^2.3.5",
+    "@web3-onboard/walletconnect": "^2.3.6-alpha.1",
     "@web3-onboard/enkrypt": "^2.0.2",
     "@web3-onboard/mew-wallet": "^2.0.1",
     "@web3-onboard/xdefi": "^2.0.2",

packages/walletconnect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/walletconnect",
-  "version": "2.3.5",
+  "version": "2.3.6-alpha.1",
   "description": "WalletConnect SDK module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@ethersproject/providers": "^5.5.0",
-    "@walletconnect/ethereum-provider": "2.5.2",
+    "@walletconnect/ethereum-provider": "2.7.0",
     "@walletconnect/client": "^1.8.0",
     "@walletconnect/qrcode-modal": "^1.8.0",
     "@web3modal/standalone":"^2.2.2",

packages/walletconnect/src/v1.ts

@@ -3,7 +3,9 @@ import type {
   Chain,
   ProviderAccounts,
   WalletInit,
-  EIP1193Provider
+  EIP1193Provider,
+  ChainId,
+  AccountAddress
 } from '@web3-onboard/common'
 import { isHexString, WalletConnectOptions } from './index.js'
 
@@ -86,24 +88,31 @@ function walletConnect(
             this.chains = chains
             this.disconnected$ = new Subject()
             this.providers = {}
+            let activeChain: ChainId
 
             // listen for session updates
             fromEvent(this.connector, 'session_update', (error, payload) => {
               if (error) {
                 throw error
               }
-
               return payload
             })
               .pipe(takeUntil(this.disconnected$))
               .subscribe({
                 next: ({ params }) => {
                   const [{ accounts, chainId }] = params
-                  this.emit('accountsChanged', accounts)
+                  const lowerCaseAccounts = accounts.map(
+                    (accountAddress: AccountAddress) =>
+                      accountAddress.toLowerCase()
+                  )
+                  this.emit('accountsChanged', lowerCaseAccounts)
                   const hexChainId = isHexString(chainId)
                     ? chainId
                     : `0x${chainId.toString(16)}`
-                  this.emit('chainChanged', hexChainId)
+                  if (!activeChain || activeChain !== hexChainId) {
+                    this.emit('chainChanged', hexChainId)
+                    activeChain = hexChainId
+                  }
                 },
                 error: console.warn
               })
@@ -138,6 +147,34 @@ function walletConnect(
 
               if (method === 'eth_requestAccounts') {
                 return new Promise<ProviderAccounts>((resolve, reject) => {
+                  // Subscribe to connection events
+                  fromEvent(this.connector, 'connect', (error, payload) => {
+                    if (error) {
+                      throw error
+                    }
+
+                    return payload
+                  })
+                    .pipe(take(1))
+                    .subscribe({
+                      next: ({ params }) => {
+                        const [{ accounts, chainId }] = params
+                        const lowerCaseAccounts = accounts.map(
+                          (accountAddress: AccountAddress) =>
+                            accountAddress.toLowerCase()
+                        )
+                        this.emit('accountsChanged', lowerCaseAccounts)
+                        const hexChainId = isHexString(chainId)
+                          ? chainId
+                          : `0x${chainId.toString(16)}`
+                        if (!activeChain) activeChain = hexChainId
+                        this.emit('chainChanged', hexChainId)
+                        QRCodeModal.close()
+                        resolve(lowerCaseAccounts)
+                      },
+                      error: reject
+                    })
+
                   // Check if connection is already established
                   if (!this.connector.connected) {
                     // create new session
@@ -165,32 +202,15 @@ function walletConnect(
                     const hexChainId = isHexString(chainId)
                       ? chainId
                       : `0x${chainId.toString(16)}`
+
                     this.emit('chainChanged', hexChainId)
-                    return resolve(accounts)
+                    if (!activeChain) activeChain = hexChainId as ChainId
+                    const lowerCaseAccounts = accounts.map(
+                      (accountAddress: AccountAddress) =>
+                        accountAddress.toLowerCase()
+                    )
+                    return resolve(lowerCaseAccounts)
                   }
-
-                  // Subscribe to connection events
-                  fromEvent(this.connector, 'connect', (error, payload) => {
-                    if (error) {
-                      throw error
-                    }
-
-                    return payload
-                  })
-                    .pipe(take(1))
-                    .subscribe({
-                      next: ({ params }) => {
-                        const [{ accounts, chainId }] = params
-                        this.emit('accountsChanged', accounts)
-                        const hexChainId = isHexString(chainId)
-                          ? chainId
-                          : `0x${chainId.toString(16)}`
-                        this.emit('chainChanged', hexChainId)
-                        QRCodeModal.close()
-                        resolve(accounts)
-                      },
-                      error: reject
-                    })
                 })
               }
 
@@ -283,7 +303,6 @@ function walletConnect(
                   currentChain.rpcUrl
                 )
               }
-
               return this.providers[chainId].send(
                 method,
                 // @ts-ignore