walletconnect-monorepo: web3-provider doesn't work with custom rpc

"@walletconnect/web3-provider": "^1.4.1"

Following the docs here I attempted the following:

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

...

const provider = new WalletConnectProvider({
    rpc: {  
        56: "https://bsc-dataseed.binance.org",
    },
});

await provider.enable();

The QR modal pops up and I scan using TrustWallet and I get errors:

Unhandled Promise rejection: Callback was already called. ; Zone: <root> ; Task: Promise.then ; Value: Error: Callback was already called.
    at onlyOnce.js:9
    at createAsyncMiddleware.js:54
    at ZoneDelegate.invoke (zone-evergreen.js:372)
    at Zone.run (zone-evergreen.js:134)
    at zone-evergreen.js:1276
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Zone.runTask (zone-evergreen.js:178)
    at drainMicroTaskQueue (zone-evergreen.js:582) Error: Callback was already called.
    at http://localhost:4200/vendor.js:165943:32
    at http://localhost:4200/vendor.js:97:11
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:1146:26)
    at Zone.run (http://localhost:4200/polyfills.js:908:43)
    at http://localhost:4200/polyfills.js:2050:36
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:1180:31)
    at Zone.runTask (http://localhost:4200/polyfills.js:952:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.js:1356:35)

and clear querying against infura mainnet even though a node url was provided:

Screenshot 2021-06-03 at 17 43 06

What am I doing wrong?

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 4
  • Comments: 27

Most upvoted comments

Hi all, I think I still have an issue with it. I follow the setting and found out trust wallet is not correctly connected. does anybody come across the same issue as I do? My code is below:

const provider = await new WalletConnectProvider({
    rpc: {
        56: "https://bsc-dataseed1.binance.org",
    },
    chainId: 56,
    network: "binance",
    qrcode: true,
    qrcodeModalOptions: {
        mobileLinks: [
          "metamask",
          "trust",
        ]
    }
});
provider.networkId = 56;
await provider.enable();

I was running into the same issue and for me the following seemed to have fixed it. In my case it was for polygon mumbai testnet:

    const provider = new WalletConnectProvider({
      rpc: {
        137: 'https://polygon-rpc.com',
        1337: 'http://localhost:8545',
        80001: 'https://matic-mumbai.chainstacklabs.com',
      },
      chainId: 80001
    });
    provider.updateRpcUrl(80001); // Don't think this one did anything
    await provider.enable();
    provider.updateRpcUrl(80001); // This one forces the switch 

From what I seem to notice is that after ‘enable’ the chainId goes back to 1 regardless of the provided chainId and it starts polling infura. The updateRpcUrl (after enable) switches it back to the actual requested chain and it’ll stop the infura spam.

Sometimes you still get 1 or 2 polls to Infura though.

I am using it like this:

this.web3Modal = new Web3Modal({
      cacheProvider: true,
      providerOptions: this.getProviderOptions(),
    });
providerOptions = {
        walletconnect: {
          package: WalletConnectProvider,
          options: {
            rpc: {
              56: 'https://bsc-dataseed.binance.org/',
            },
            network: 'binance',
            chainId: 56,
            infuraId: process.env.REACT_APP_INFURA_ID,
          },
        },
      };

@ochikov @happyeric77 The Infura ID isn’t required if you specify RPC options. It’s one or the other but not necessarily both, although in this case it looks like it doesn’t flag an error if you specify both.

If you read the first line in the docs that @ochikov linked, it says this (my emphasis):

In order to resolve non-signing requests you need to provide one of the following: Infura ID … RPC URL Mapping …

My options doesn’t have an infura id entry and it still works:

      providerOptions: {
        walletconnect: {
          package: WalletConnectProvider,
          options: {
            rpc: {
              56: "https://bsc-dataseed.binance.org",
            },
            network: 'binance'
          },
        },

Hi all, I think I still have an issue with it. I follow the setting and found out trust wallet is not correctly connected. does anybody come across the same issue as I do? My code is below:

const provider = await new WalletConnectProvider({
    rpc: {
        56: "https://bsc-dataseed1.binance.org",
    },
    chainId: 56,
    network: "binance",
    qrcode: true,
    qrcodeModalOptions: {
        mobileLinks: [
          "metamask",
          "trust",
        ]
    }
});
provider.networkId = 56;
await provider.enable();

This does work for me thank you! But any idea how to support multiple chainIds ?

I am using web3Modal, but under the hood its the same implementation.

    walletconnect: {
      package: WalletConnectProvider,
      options: {
        rpc: {
          56: 'https://bsc-dataseed.binance.org/',
          80001: "https://7m3prrcccvpjjwlhk.usemoralis.com:2053/server",
        },
        chainId: [56, 80001],
        infuraId: "d452c5f789194e2e9a1055567a2fb41",
      }
    },
  };```

@ochikov Thanks! It is very informative.

@happyeric77 @ochikov Thanks guys, I got it to work. For me the key missing entry was network: 'binance'. Once I added that, I was able to connect to the wallet and the network. Cheers!

Perfect.