walletconnect-monorepo WalletConnectProvider is not a constructor

Hello guys,

I'm following example from npm page, but I get this error.

Am I missing something?

import Web3 from "web3";
import WalletConnectProvider from "@walletconnect/web3-provider";

//  Create WalletConnect Provider
const provider = new WalletConnectProvider({
  infuraId: "27e484dcd9e3efcfd25a83a78777cdf1", // Required
});

//  Enable session (triggers QR Code modal)
await provider.enable();

//  Create Web3
const web3 = new Web3(provider);

const provider = new WalletConnectProvider({
                 ^

TypeError: WalletConnectProvider is not a constructor
    at file:///home/luke/repos/dx/test/index.mjs:5:18
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async loadESM (node:internal/process/esm_loader:88:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12)

Dec 02 '21 09:12 LukeSamkharadze

It seems WalletConnectProvider.default is the class itself. Why do I have to do this and why don't you update examples?

//  Create WalletConnect Provider
const provider = new WalletConnectProvider.default({
  infuraId: "27e484dcd9e3efcfd25a83a78777cdf1", // Required
});

Dec 02 '21 09:12 LukeSamkharadze

//  Create WalletConnect Provider
const provider = new WalletConnectProvider.default({
  infuraId: "27e484dcd9e3efcfd25a83a78777cdf1", // Required
});

this code is not working in an async function.

Apr 20 '22 21:04 joharzmn

+1 I have tried using the constructor with both .default and without. I have also tried to use @walletconnect/ethereum-provider to no avail.

Apr 21 '22 00:04 kyokosdream

My forked web3modal library where I've been playing with removing the default:

https://github.com/kyokosdream/web3modal/blob/master/src/providers/connectors/walletconnect.ts#L34

I saw that web3-react was using @walletconnect/ethereum-provider so I swapped to that but I'm having the same error. I follow the reference implementation:

https://www.npmjs.com/package/@walletconnect/ethereum-provider

Here is the web3-react code, it could offer some help. It uses the .default.

https://github.com/WalletConnect/walletconnect-monorepo/issues/658

Apr 21 '22 02:04 kyokosdream

Here is my custom connector for web3-modal. Thank you to @4skinskywalker for helping me get here. This works now, but leads to an error when scanning the QR code: "Error initializing WalletConnect". This happens on both localhost and my SSL-enabled site.

"custom-walletconnectv2": {
    display: {
      name: "WalletConnectV2",
      description: "Connect to WalletConnect(V2)",
    },
    package: true,
    connector: async () => {
      console.log("hi");
      const client = await WalletConnectClient.init({
        projectId: "MY-PROJECT-ID",
        relayUrl: "wss://relay.walletconnect.com",
        metadata: {
          name: "Candy Chain Dapp",
          description: "Candy",
          url: "#",
          icons: ["https://walletconnect.com/walletconnect-logo.png"],
        },
      });

      // Should subscribe to client here but skipping for now

      client.on(
        CLIENT_EVENTS.pairing.proposal,
        async (proposal: PairingTypes.Proposal) => {
          // Display the QRCode modal on a new pairing request.
          const { uri } = proposal.signal.params;
          console.log("EVENT", "QR Code Modal opened");
          QRCodeModal.open(uri, () => {
            console.log("EVENT", "QR Code Modal closed");
          });
        }
      );

      client.on(
        CLIENT_EVENTS.session.deleted,
        (deletedSession: SessionTypes.Settled) => {
          // Perform some cleanup after session was deleted (e.g. via `provider.disconnect()`)
          console.log(deletedSession);
        }
      );

      const provider = new EthereumProvider({
        chainId: 1,
        client,
        rpc: {
          infuraId: "MY-INFURA-ID",
        },
      });
      await provider.enable();
      return provider;
    },
  },

Apr 21 '22 16:04 kyokosdream

@kyokosdream can you please share version of walletconnect/types that you are using, I can't find PairingTypes