how can i know if a provider is connected or not?

i need to get a cached provider used by our user previously. if that provider is connected, i will get first user account and display it on the page. or if not, i don’t want to invoke connect process by default, unless user click on the connect button.

some methods of web3js can detect whether a wallet connected to network or not. but i need to use web3modal.connect() to get a provider to construct a web3 instance.

some code snippet:

// use connect method to get a cached provider will invoke connect process and metamask chrome plugin will popup.
const provider = await web3Modal.connect();
const web3 = new Web3(provider);

so, is there any way to get a cached provider without calling the connect function? or any way to detect a cached provider is connected to network or not?

[4skinSkywalker]

First thing: @vanvantsyan thank you for the downvote.

You can get providers the same way Web3Modal gets them (see web3modal connectors). I do this all the time. Web3Modal just abstracts away all the low-level logic to extract providers from the various sources (most of them are different properties in the window object) It’s no voodoo magic.

Unless you take the provider you don’t have a meaningful way to see if that provider was injected and unless you istantiate it via ethers or web3 you don’t have a meaningful way to know what account is connected and on what network. If you don’t want to spawn the dialog with .connect() then simply try to get the provider you want and check it’s state by yourself.

Following some example on how you can get can providers:

Get MetaMask provider

if (typeof win.ethereum !== 'undefined') {
  let provider = win.ethereum;
  provider = await provider.request({ method: 'eth_requestAccounts' });
}

(This may also trigger other injected providers (e.g. Coinbase) but you can filter MetaMask if you want).

Get Binance Wallet provider

if (typeof win.BinanceChain!== 'undefined') {
  let provider = win.BinanceChain;
  provider = await provider.request({ method: 'eth_requestAccounts' });
}

Get Coinbase Wallet provider

let walletLink = new WalletLink({ appName });
let provider = walletLink.makeWeb3Provider(networkUrl, chainId);
let provider = await provider.enable();

Get Fortmatic provider

let fm = new this.Fortmatic(FORTMATIC_APIKEY, { rpcUrl, chainId });
let provider = provider: fm.getProvider();

What I’ve just shown you is obviously painful and it’s just to show you how you can do it manually! To do it without spawning the modal you’ll have to import connectors from Web3Modal library and evaluate them. (see web3modal connectors).

[4skinSkywalker]

So if I understood you want the provider without the modal showing up, right?

(async function() {
    // Get the cached provider from LocalStorage
    const cachedProviderName = JSON.parse(localStorage.getItem("WEB3_CONNECT_CACHED_PROVIDER"));
    
    // Get the connector for the cachedProviderName
    const connector = web3Modal.providerController.providerOptions[cachedProviderName].connector;

    // Evaluate connector() which returns a Proxy in the case of MetaMask
    const proxy = await connector(); // Some connector may need providerPackage and opts
    console.log("Proxy", proxy);

    // Get the working provider from your favorite library (ethers, web3, ...)
    const provider = new ethers.providers.Web3Provider(proxy); // If you use web3, then const web3 = new Web3(proxy);
    console.log("Provider", provider);

    // You can list the connected accounts without launching Web3Modal
    console.log("Accounts", await provider.listAccounts()); // If you use web3, then await web3.eth.getAccounts();
})();

With the above code you should be able to leverage your Web3Modal configurations and get a working provider and feed it in your library of choice without the need of calling the connect method.

I’ve tested the above code and had the expected result:

Ah, you may need to put some if-clauses to guard from undefined, infact if there’s no cached provider you get the following error:

Keep in mind I’m not part of the team, I’m not even an expert of this library. I just read their source code and come up with the above snippet.

Let’s ask the guys from the project itself if my snippet is reliable: @miohtama, @jamesmorgan, @miguelmota, @ptescher and @arronhunt.