Page not loading If Metamask is not installed

[xPaco]

Hi !

I am developing my page and I have added this block of code to have minted count update all the time but it requered Ethers.Now problem is that if someone doesn’t have Meta Mask installed page will be blank/white for them.Is there any way to fix that ? Note that code works as it suppose to,minted count is updating but yea website doesn’t load if Metamask is not installed.
I don’t use ethers for anything else but this.
Thanks !

const { ethers } = require("ethers");

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

  const fetchRemaining = useCallback(async () => {
    if (!contract) return;
    const res = await contract.methods.totalSupply().call();
    setMintedCount(parseInt(res));
  }, [contract]);

  useEffect(() => {
    fetchRemaining();
  }, [contract, fetchRemaining]);

  provider?.on("block", (blockNumber) => {
    console.log("Current block: ", blockNumber);
    fetchRemaining();
  })

[nakedwinnie]

Hey @xPaco, welcome to the MetaMask community!

The Ethereum Provider API detects if a user has MetaMask installed:

import detectEthereumProvider from '@metamask/detect-provider';

const provider = await detectEthereumProvider();

if (provider) {
  // From now on, this should always be true:
  // provider === window.ethereum
  startApp(provider); // initialize your app
} else {
  console.log('Please install MetaMask!');
}

Here is more information on the MetaMask docs:

Ethereum Provider API | MetaMask Docs