Automatically injecting metamask provider even when disableInjectedProvider is false

[kombos]

I'm trying to implement web3modal in the following way in a dev environment (using ganache):

import WalletConnectProvider from "@walletconnect/web3-provider";
import Fortmatic from "fortmatic";
import Web3 from "web3";
import Web3Modal from "web3modal";

const getWeb3Provider = () => {
  console.log("inside web3controller");
  const providerOptions = {
    /* See Provider Options Section */
    walletconnect: {
      package: WalletConnectProvider, // required
      options: {
        infuraId: "INFURA_KEY", // required
      },
    },
    fortmatic: {
      package: Fortmatic, // required
      options: {
        key: "FORTMATIC_KEY", // required
      },
    },
  };

  const subscribeProvider = async (provider) => {
    if (!provider.on) {
      return;
    }
    // provider.on("close", () => this.resetgetWeb3Provider());
    provider.on("accountsChanged", async (accounts) => {
      console.log("inside subscribeProvider");
    });
    provider.on("chainChanged", async (chainId) => {
      console.log("inside subscribeProvider");
    });
    provider.on("networkChanged", async (networkId) => {
      console.log("inside subscribeProvider");
    });
  };

  const web3Modal = new Web3Modal({
    network: "5777", // optional
    cacheProvider: false, // optional
    disableInjectedProvider: false,
    providerOptions, // required
  });

  const onConnect = async () => {
    const provider = await web3Modal.connect();
    console.log("web3Modal.connect() provider: ", provider);
    const web3 = new Web3(provider);
    console.log("web3: ", web3);
    const accounts = await web3.eth.getAccounts();
    const address = accounts[0];
    const networkId = await web3.eth.net.getId();
    console.log("address: ", address, " netowrkID: ", networkId);
    await subscribeProvider(provider);
    return provider;
  };
  const web3Provider = onConnect();
  return web3Provider;
};
export default getWeb3Provider;

Expected Result: Should open the modal with list of providers to select from..

Actual Result Automatically taking the injected provider (metamask) even at first run, even when disableInjectedProvider is set to false, and cache is disabled.

would appreciate it if anyone has an instance of code which actually works (the react component implementation, not the vanilla javascript implementation). Thanks.

[joeb000]

Having the same issue, the only way i can get the modal to pop up correctly is to open in incognito mode...

[branmcf]

Same issue here

UPDATE: I was able to achieve the desired behavior by modifying the web3Modal instantiation and the onConnect function as follows. Let me know if this fixes the issue for you!

    this.web3Modal = new Web3Modal({
      network: this.getNetwork(),
      cacheProvider: false,
      disableInjectedProvider: false,
      providerOptions: this.getProviderOptions()
    });

onConnect = async () => {
    let provider, hasProvider
    try {
      provider = await this.web3Modal.connect();
      hasProvider = true;
    } catch ( err ) {
      await this.resetApp()
      hasProvider = false;
    }

    if (hasProvider) {
      try {
        await this.subscribeProvider(provider);
      } catch ( err ) {
        console.error(`Error calling subscribeProvider - ${ err.message }`);
      }

      const web3 = initWeb3(provider);
      const accounts = await web3.eth.getAccounts();
      const address = accounts[0];
      const networkId = await web3.eth.net.getId();
      const chainId = await web3.eth.chainId();
      const currentAccountTruncated = this.smartTrim(address, 16) + ' '

      try {
        await this.setState({
          web3,
          provider,
          connected: true,
          address,
          chainId,
          networkId,
          currentAccountTruncated
        });
      } catch ( err ) {
        console.error( `Error setting state in onConnect - ${ err.message }` );
      }

      try {
        await this.getAccountAssets();
      } catch ( err ) {
        console.error( `Error calling getAccountAssets - ${ err.message }` );
      }
    }
  };

[Sanjeev-Hegde]

I had the same Issue, the problem occured when I used metamask (plugin) with cacheProvider: true. If you have connected to metamask atleast once, you need to clear your local storage and then set cacheProvider: false

[Amirjab21]

Is there not a PR for this yet? such an annoying issue

[benjaminlim00]

try this @Amirjab21

[GorgeousPuree]

@Sanjeev-Hegde thanks a lot.

[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.