WalletConnect v2 support

[re2005]

Seems like we a using a deprecated version of WalletConnect

We should use @walletconnect/web3wallet

[re2005]

Before June 28
https://docs.walletconnect.com/2.0/advanced/migration-from-v1.x/overview

[johnson86tw]

@re2005 Got it. Will prepare to migrate to the new version before the expiration date

[re2005]

Awesome, I've tried quickly to make it work. Lots of typing and other stuff to fix:
#133

Also don't see metamask option in here.

[re2005]

WalletConnect/web3modal-examples#12

[johnson86tw]

FYI https://github.com/clrfund/monorepo/pull/657/files

[johnson86tw]

@re2005 Hey, thanks for starting PR #133 and helping with the testing. To show my appreciation, I'd like to sponsor you with 10 DAI from the funds we collected for vue-dapp. All you need to provide is your ETH address and let me know which network you prefer for the transaction (Ethereum or Polygon). Once I have that, I'll take care of the reward. Thank you for your contributions!

[tempe-techie]

@re2005 great job! 😎 I can also send you some DAI if you provide the address 🤘

[re2005]

@chnejohnson @tempe-techie I really appreciate it. Will DM @chnejohnson with the 0x..
Once again thanks, I'm looking forward to keep improving this lib!

[goums]

Thanks @re2005 ❤️ & @chnejohnson for adding WalletConnect v2 support
We just integrated it, but came across few issues, so I'm sharing here our workarounds.

It seems that EthereumProviderOptions is expecting rpcMap and not rpc, see here:
https://www.npmjs.com/package/@walletconnect/ethereum-provider
Maybe rpc was in an older version?

We had to updates these 2 lines to replace rpc with rpcMap:

• vue-dapp/src/connectors/walletConnect.ts

  Line 89 in cd4df36

  if (this.options?.rpc && this.options.rpc[chainId]) {

• vue-dapp/src/connectors/walletConnect.ts

  Line 111 in cd4df36

  if (!this.options?.rpc?.[chainId]) throw new SwitchChainNotSupportedError()

Also, the onChainChanged receives an hex value for the chainId, see here:
https://github.com/WalletConnect/walletconnect-monorepo/blob/v2.0/providers/ethereum-provider/src/EthereumProvider.ts#L425

So we had to replace this line:

vue-dapp/src/connectors/walletConnect.ts

Line 88 in cd4df36

this.#provider.on('chainChanged', (chainId: number) => {

with:

this.#provider.on('chainChanged', (hexChainId: string) => {
    const chainId = parseInt(hexChainId, 16);

[johnson86tw]

@goums Nice! I will fix it. Thanks for your sharing!

[github-actions]

🎉 This issue has been resolved in version 0.9.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀