0

Web3Modal is a library that allows you to conveniently connect to different wallets.

I can connect using MetaMask on desktop just fine, but when trying anything else (eg, using WalletConnect to connect with MetaMask on mobile), I get a "Uncaught (in promise) Error: Provider not set or invalid" error.

More specifically, if I log web3.eth, I get the following object:

 Eth {_requestManager: RequestManager, givenProvider: null, providers: {…}, _provider: null, }

For some reason, givenProvider is null, even though the provider returned from web3Modal.connect() is defined properly.

Code:

  const [account, setAccount] = useState('');
  const [web3, setWeb3] = useState(new Web3(Web3.givenProvider));

  const providerOptions = {
    walletconnect: {
      package: WalletConnectProvider, // required
      options: {
        rpc: url
      }
    }
  };

  const web3Modal = new Web3Modal({
    network: "mainnet", 
    cacheProvider: true
    providerOptions // required
  });
    
  async function connectPrompt() {
    const provider = await web3Modal.connect();

    setWeb3(new Web3(provider))
    const firstAccount = await web3.eth.getAccounts().then(data=>data[0]);
    setAccount(firstAccount);
  }

Screenshot of the provider and web3.eth objects:

enter image description here

Notice that WalletConnectProvider is defined, but givenProvider is null.

1

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.