Issues getting the web3modal to open up

[ShayanJa]

Not sure, what i'm doing wrong here, i'm looked through both the vanilla js and ts examples to get it to work but to no avail. I'm trying to use it through a simple react hook, here's my code. Any help would be much appreciated, thank you

import React, {useState, useEffect} from 'react';
import Web3 from "web3";
import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";
import Fortmatic from "fortmatic";
import Authereum from "authereum";
function App(props) {
  const [state, setState] = useState(props)
  async function init () {
    console.log('starting up');
    console.log("WalletConnectProvider is", WalletConnectProvider);
    console.log("Fortmatic is", Fortmatic);
    const providerOptions = {
      /* See Provider Options Section */
      walletconnect: {
        package: WalletConnectProvider, // required
        options: {
          infuraId: "3fd4907115b84c7eb48e95514768a4e8" // required
        }
      }
      authereum: {
        package: Authereum
      },
    };
  
    const web3Modal = new Web3Modal({
      // network: "rinkeby", // optional
      cacheProvider: false, // optional
      disableInjectedProvider: false,
      providerOptions // required
    });
  
    const provider = await web3Modal.connect();
    console.log(provider)
    const modal = await web3Modal.toggleModal()
    const web3 = new Web3(provider);
    const accounts = await web3.eth.getAccounts();
    const address = accounts[0];
    const networkId = await web3.eth.net.getId();
    console.log(address)
    setState({
      web3,
      provider,
      connected: true,
      address,
      web3Modal,
      networkId
    });
    await subscribeProvider(provider)
  }
  
  const subscribeProvider = async (provider) => {
    if (!provider.on) {
      return;
    }
    // provider.on("close", () => this.resetApp());
    provider.on("accountsChanged", async (accounts) => {
      setState({ address: accounts[0] });
    });
    provider.on("chainChanged", async (chainId) => {
      const { web3 } = this.state;
      const networkId = await web3.eth.net.getId();
      setState({ chainId, networkId });
    });
    provider.on("networkChanged", async (networkId) => {
      const { web3 } = this.state;
      const chainId = await web3.eth.chainId();
      await this.setState({ chainId, networkId });
    });
  };
  const onConnect = async () => {
    const provider = await state.web3Modal.connect();
    await subscribeProvider(provider);
    const web3 = new Web3(provider)
    const accounts = await web3.eth.getAccounts();
    const address = accounts[0];
    const networkId = await web3.eth.net.getId();
    setState({
      web3,
      provider,
      connected: true,
      address,
      networkId
    });
  };
  
  return (
    <div style={{zIndex: -2, position: "absolute"}}>
      <button onClick={init}>Check Out</button>
    </div>
  );
}
export default App;

[ShayanJa]

I figured out that it defaults to metamask in my browser, I had to go to incognito to show the modal

[ItsNickBarry]

This happens even if disableInjectedProvider is set to true.

[kombos]

did anyone find out the solution to this issue? i'm having the same issue. it is automatically accepting the injected provider (metamask), even when thedisableInjectedProvider is set to true. no modal is opening up.

[ShayanJa]

It ended up fixing itself for me

[faustinaedm]

I had the same problem because I was using the default localhost url and for some reason the browser automatically was detecting metamask instead of opening web3Modal window. The solution was to change the url of the localhost with my IP and the problem was gone.

[bigchiano]

After hours of research, I finally understand that without enough supported providers web3modal just defaults to one, to solve this issue of auto inject I added more providers a one that is supported everywhere like the authereum provider, I hope this helps someone.

https://github.com/web3modal/web3modal/blob/HEAD/docs/providers/authereum.md

[charleslukes]

anyone solved this? I have all the providerOptions properly set but it still automatically connects to metamask

[bigchiano]

anyone solved this? I have all the providerOptions properly set but it still automatically connects to metamask

Add this provider and see it work.

https://github.com/web3modal/web3modal/blob/HEAD/docs/providers/authereum.md

[seacevedo]

This worked for me. If on any chrome-based browser, get on your developer console. Then you can click the Application tab (if hidden, you can find this by clicking the arrow at the top) and click "Clear site data"

[elvismdev]

This worked for me. If on any chrome-based browser, get on your developer console. Then you can click the Application tab (if hidden, you can find this by clicking the arrow at the top) and click "Clear site data"

^ This worked for me.

However I noted that if invoked web3Modal.clearCachedProvider() to disconnect from the app itself, it will prompt again the modal to select the different wallet providers configured, without need to manually "clear site data" from Application tab in the developer console.

@ShayanJa Did you have a disconnect button on your app? What was the code that it triggers?

[bigchiano]

This worked for me. If on any chrome-based browser, get on your developer console. Then you can click the Application tab (if hidden, you can find this by clicking the arrow at the top) and click "Clear site data"

^ This worked for me.

However I noted that if invoked web3Modal.clearCachedProvider() to disconnect from the app itself, it will prompt again the modal to select the different wallet providers configured, without need to manually "clear site data" from Application tab in the developer console.

@ShayanJa Did you have a disconnect button on your app? What was the code that it triggers?

Normally I think the cache is useful for recalling existing wallet connections so it’s not necessary trying to create a new connection each time you try to connect a wallet with existing connections. I think that’s probably why it auto cache new connections. An ideal/smooth solution would be to add a provider that is not automatically injected like the one I mentioned, this will force the web3modal to pop up each time you call the connect function.

[Pratyaksh7]

anyone solved this? I have all the providerOptions properly set but it still automatically connects to metamask

use => await web3Modal.clearCachedProvider();
before await web3Modal.connect() and it will work fine.

[xzilja]

With stable version 2.0.0 of Web3Modal now released, we are officially dropping support for version 1.x Due to this this issue/pr was marked for closing. It is highly recommended to upgrade as 2.x will be receiving further updates that will enable functionality for some of our newer sdks like auth and push as well as support for WalletConnect v2 (See this post about WalletConnect v1 being deprecated https://medium.com/walletconnect/walletconnect-v1-0-sunset-notice-and-migration-schedule-8af9d3720d2e)

If you need to continue using Web3Modal 1.x and require this feature/fix implemented, we suggest adding it via forking V1 branch.

[eyooooo]

this is the first hit on google for web3modal no popup - if ur having this issue make sure you dont remove the infuraid key from provideroptions or web3modal doesnt fckin work

export const providerOptions = {
  walletconnect: {
    package: WalletConnect,
    options: {
      infuraId: "why is this required lmao"  //REQUIRED or no popup
    }
  }
};