Ethers.js: Add WalletConnect Provider

[fritzschoff]

I'm supporting MetaMask and WalletConnect in my Angular 9 DApp. And I was asking myself, is there a way for ethers.js to instantiate a provider/signer which fits the need of WalletConnect?
You need this npm package: walletconnect
And then you can do the following:

this.provider = new WalletConnect({
            bridge: "https://bridge.walletconnect.org",
        });
        // Check if connection is already established
        if (!this.provider.connected) {
            // create new session
            this.provider.createSession().then(() => {
                // get uri for QR Code modal
                const uri = this.provider.uri;
                // display QR Code modal
                WalletConnectQRCodeModal.open(uri, () => {
                    console.log("QR Code Modal closed");
                });
            });

            // Subscribe to connection events
            this.provider.on("connect", (error, payload) => {
                if (error) {
                    throw error;
                }

                // Close QR Code Modal
                WalletConnectQRCodeModal.close();

                // Get provided accounts and chainId
                const { accounts, chainId } = payload.params[0];
            });

            this.provider.on("session_update", (error, payload) => {
                if (error) {
                    throw error;
                }

                // Get updated accounts and chainId
                const { accounts, chainId } = payload.params[0];
            });

            this.provider.on("disconnect", (error, payload) => {
                if (error) {
                    throw error;
                }
                this.web3Store.update({ isConnected: false })
            })
        }

It is a bit annoying to have two "connectors to web3". Would be nice if ethers.js can handle this case.
For instance. React has such a wrapper lib that can work with ethers.js and web3.js web3react
I guess this is the provider they create depending on the lib you are using(ethers.js, web3.js): WalletConnectProvider
I'm not an expert ethers.js so this seems a bit random. But maybe some experienced devs have an idea.

[ricmoo]

I need to look more into Wallet Connect, but this seems like a good idea, adding a WalletConnectSigner. I'll look into it next week. :)

[fritzschoff]

How to instantiate a provider from walletConnect Docs
Some results after playing around with this npm lib.

Seems to work, but didn't tested yet

[pedrouid]

I’d love to help with this... I was actually looking into the Provider documentation to actually make the WalletConnect provider based on ethers instead of web3-provider-engine.

Do you think that would be doable? The reason I’ve depended on web3-provider-engine until now is because it was the most stable solution for web3.js but I wonder if you had success with getting compatibility accross libraries

[fritzschoff]

@pedrouid I 'm trying to implement your lib into my dapp. web3modal . It works fine with meta mask, but for wallet it is almost like a new instance, cause functions like getSigner() doesn't exist

[pedrouid]

Have you tried wrapping the @walletconnect/web3-provider with ethers Web3Provider?

Example

import { providers } from "ethers"
import WalletConnectProvider from "@walletconnect/web3-provider"

const provider = new providers.Web3Provider(
  new WalletConnectProvider({
    infuraId: "27e484dcd9e3efcfd25a83a78777cdf1" // Required
  })
)

PS - please use the version 1.0.0-rc.4 for better results

[fritzschoff]

can't somehow make the web3-provider work since the qr-image lib is throwing an error when I want to serve app. Seems an issue about recent releases. @pedrouid As you can see above I already was able to implement the web3provider from ethers with walletconnect.

[ricmoo]

What is the error? Ethers should certainly not be interfering with a QR code library...

[fritzschoff]

It's a wallet connect error, not a ethers error. The qr-image module doesn't have the zlib module exported anymore, didn't investigate in that too much

[pedrouid]

Hey @fritzschoff, there was a report about a weird issue with qrcode-modal from one of the dependencies reported here:
https://github.com/WalletConnect/walletconnect-monorepo/issues/299

I've published 1.0.9 on NPM under the next tag. Could you test if this fixed your issue?

[fritzschoff]

Nice work!! Thanks, I will test it

[fritzschoff]

     const walletConnectProvider = new WalletConnectProvider({
        infuraId: infura.id, // Required
        qrcode: true
      });
      await walletConnectProvider.enable();
      this.provider = new providers.Web3Provider(walletConnectProvider)

I'm closing this issue, since it is working like a charm now with the method above.
"@walletconnect/web3-provider": "^1.2.0-alpha.0",
"ethers": "^5.0.8",

[pedrouid]

Great to hear 🙌 I will go ahead and publish 1.2.0 then

[James-Unicrypt]

any update on how to get a signer with this approach?

[fritzschoff]

provider.getSigner()

[EvilJordan]

My goal is to use ethers (and all my configured keys for that provider's APIs) and the web3modal to connect to walletconnect.
To be clear, one needs to import all of the following to get this to work, right:

• ethers
• web3modal
• web3-provider

My confusion is around the web3-provider package and why it's necessary if ethers is the preferred choice/involved.

[EvilJordan]

@fritzschoff Did you get ethers working with web3modal? If so, can you post your code? I've been struggling with this for months.

[fritzschoff]

It has been a while but you should be able to const provider = await web3modal.connect() and this provider variable, you can use with ethers new providers.Web3Providee(provider) . Writing this of the top of my head, so might be a typo here and there. This issue was about wallet connect,no? I had issues with how they bundled their library. If I would used it, I ended up the nodejs modules in the browser which obviously doesn't work. But for that @pedrouid maybe can help you or you check your webpack config, or what ever you are using