Using alternative provider when MetaMask isn’t installed?

[dksuper]

Ethers Version

^5.6.8

Search Terms

No response

Describe the Problem

I want to via ethers to get totalsupply in contract, it work fine on Chrome, but it can't work on Safari and Firefox

Code Snippet

const provider = new ethers.providers.Web3Provider(window.ethereum);

const nftTotalSupply = new ethers.Contract(
   address,
   abi,
   provider
);
    
async function totalSupplyHandle(){
   const totalSupplyNum = await nftTotalSupply.totalSupply();
   console.log('totalsupply:',totalSupplyNum.toString());
   setTotalSupply(totalSupplyNum.toString());
}

Contract ABI

No response

Errors

Error: missing provider (argument="provider", value=undefined, code=INVALID_ARGUMENT, version=providers/5.6.8)

Environment

Browser (Chrome, Safari, etc), React Native/Expo/JavaScriptCore

Environment (Other)

No response

[ricmoo]

Your problem is you don’t have an injected provider in your Safari; you would have the same problem in Chrome if you did not have MetaMask installed.

You will likely need more logic throughout your app, but at a high level, you can imagine using something like: const provider = ((window.ethereum != null) ? new ethers.Web3Provider(window.provider): ethers.getDefaultProvider());.

Basically, you need to find a different source for blockchain data if the user doesn’t have a plugin installed. You will likely need messaging around anything that requires a signer indicating to configure WalletConnect or install MetaMask too. If the page is only read-only and designed as a dashboard, you may wish to just use the default provider and not pull from MetaMask, since if the MM is connected to another network, you may get the wrong result.

[dksuper]

@ricmoo I got it, thank you a lot!

[bobanm]

const provider = ((window.ethereum != null) ? new ethers.Web3Provider(window.provider): ethers.getDefaultProvider())
                                                  ~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~   ~~~~~~~~~~~~~~~~~~~~~~~~~

Thanks for the snippet @ricmoo. It seems to me there are a few typos here:

1. window.provider should be window.ethereum?
2. ethers.Web3Provider should be ethers.providers.Web3Provider?
3. ethers.getDefaultProvider should be ethers.provider.getDefaultProvider?

Or are those some shorthand methods to access provider constructors? 🤔

[zemse]

1. Yeah it should be window.ethereum
2. Yep it's ethers.providers.Web3Provider
3. getDefaultProvider is exposed under ethers as well since it's quite common.