Add WalletConnect Provider

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.

[dievardump]

Hello 😃 I’ve just opened a discussion https://github.com/ethers-io/ethers.js/discussions/1966 about this.

The solution found in this thread forces users to have an infuraId

However, the standalone client already allows things like eth_sendTransaction, signTransaction etc… so I would like to know if it would be possible to actually have a WalletConnect Provider in ethers.js that uses those and completely saves us from the obligation to have a centralized (infura) dependency?

[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