window ethereum networkVersion undefined

Question

I am developing a frontend of my smart contract using Angular 8 and web3 version 1.2.7.
When I enter the view my web3 service gets created. In the constructor I check if the window.ethereum object exists. If yes I want to set some variables according to the networkVersion, but sometimes networkVersion is undefined and the behavior of the website is then undefined too.

I have no idea why window.ethereum exists but networkVersion is undefined. Maybe I call it to early before the provider (in my case Metamask) can set the values.

Does anyone face the same problem and has a solution for that?

Web3Service.ts

constructor(private snackBar: MatSnackBar, private dialog: MatDialog) {
   if (typeof window.ethereum !== 'undefined') {
      this.web3 = new Web3(window.web3.currentProvider);
      // Here networkVersion sometimes undefined
      this.networkId = +window.ethereum.networkVersion;

      if (this.networkId === 1) {
        this.apiPath = environment.apiPathMainnet;
        this.tokenContract = new this.web3.eth.Contract(artifacts.abi, environment.mainnetContractAddress);
      } else if (this.networkId === 3) {
        this.apiPath = environment.apiPathRopsten;
        this.tokenContract = new this.web3.eth.Contract(artifacts.abi, environment.ropstenContractAddress);
      } else {
        this.apiPath = environment.apiPathRopsten;
        this.networkNotSupported();
      }
   }
}

Answer 1

It seems that you don't have the access to the user's MetaMask and therefore the networkVersion, since there is no network provided yet.

have you enabled the MetaMask? you first need to get the user's authentication in order to use his/her MetaMask, using this code ethereum.enable(); , for further information visit MetaMask documentation in here

In this case you have "window.ethereum" because the user has the newest version of the MetaMask but don't have the access to user's MetaMask yet.

If the User only has "window.web3" it means he/she has the older version of MetaMask which accessing it doesn't need to be authorized.

Here is a post by MetaMask itself on 'medium', explaining this.

Answer 2

I found web3.eth.net.getId() to be more accurate and cross compatible with other wallets. Check out the docs