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.


  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]);

Screenshot of the provider and web3.eth objects:

enter image description here

Notice that WalletConnectProvider is defined, but givenProvider is null.



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.