How to test if user is on the mainnet/testnet using web3?

Question

Hello everyone I need your quick help!

I am using web3 1.0.0-beta.34 with React and Next.js and I want to check if user has it Metamask set on mainnet/rinkeby network.

I have read quite a few solutions but I am having a slight problem implementing them.

Basically, I have a Layout component which serves as a wrapper around all the elements, so it is called on every page.

What I found so far is this:

web3.eth.net.getId().then(netId => {
  switch (netId) {
    case 1:
      console.log('This is mainnet')
      break
    case 2:
      console.log('This is the ropsten test network.')
      break
    case 3:
      console.log('This is the kovantest network.')
      break
    case 4:
      console.log('This is the rinkeby network.')
      break
    default:
      console.log('This is an unknown network.')
  }
})

I don't want to console.log it, I want to put it in some kind of a variable, but I am not able to use React state. To simplify it, all I want from this function is to return me a number/string ID of the network where the user is at the moment. For now, it is only returning me a Promise object, and I don't know how to extract the ID from it.

var net = web3.eth.net.getId();
console.log(net);

this is what it shows

Promise {<pending>}
__proto__:Promise
[[PromiseStatus]]:"resolved"
[[PromiseValue]]:1

What i really need is this [[Promise Value]] extracted to a const/var so that I can manipulate it.

Answer 1

This is more a question about developing in Javascript in general, so next time I suggest to use another proper channel for this kind of question.

With Web3 you are actually executing async calls.

You have two methods to get result from async calls in Javascript: Callbacks (the old fashioned method, always present) and Promises (a newer and cleaner method, still it is not already available in all JS libraries).

Here a full example for your case:

// Utility function
var showNetId = function (netId) {
    console.log("Network ID is", netId)
}

// Callback function: see that error are passed to the function as the first parameter, and the result is the second
var callbackExample = function (error, result) {
    if(error) console.err("There was an error during the call:", error)
    else showNetId(result)
}

// Please note this function is async because I use the "await" command inside
var examples = async function() {

    // To do something just after the promise is fullfilled
    web3.eth.net.getId().then(showNetId)

    // To get the promise and then do something, when the promise is fullfilled
    var promise = web3.eth.net.getId()
    promise.then(showNetId)

    // To get the promise and then, when the promise is fullfilled, assign a variable
    var netId = undefined;
    var promise = web3.eth.net.getId()
    await promise.then((result) => netId = result)
    showNetId(netId)

    // Blocking execution with "await" as if it was a sync call
    var result = await web3.eth.net.getId()
    showNetId(result)

    // Old fashioned callback
    web3.eth.net.getId(callbackExample)

}

examples();

Answer 2

You can store it into browser storage or cookies.