For anybody to be able to use your Decentralized Application (DApp), they need to be connected to the blockchain where you've deployed your smart contract.

This article will show you how to prompt your users to switch to your preferred blockchain using JavaScript.

This guide requires that you have the MetaMask extension installed. Also, I assume you have a little bit of experience connecting with MetaMask—perhaps you've previously built a DApp. If you need a quick intro, check out this brilliant piece by MetaMask to get started.

Alright, Let’s dig in!

Step 1 — Check if the User Has MetaMask Installed

The first thing to do is to verify if the user has installed the MetaMask extension.

If they have another wallet installed besides MetaMask, switching networks using the method we are about to learn might not work. So it's a good idea to check first.

Let's check if the ethereum context has been injected into the browser. The code sample below shows how to do this:

const { ethereum } = window;

if (typeof ethereum !== 'undefined' && ethereum.isMetaMask) {  
 console.log("MetaMask is installed")
} else {
  console.log("MetaMask is not installed")
}

Here's what we're doing:

At const { ethereum } = window; we destructure the ethereum property from the windows object and assign it to a variable of the same name.

If you are unfamiliar with this syntax, destructuring involves simply extracting the content of an object or array and assigning it to a variable. Read up on this piece to learn more about destructuring.

Then we check if ethereum actually does exist using the if statement. Also, in the same condition we want to verify if the wallet installed is MetaMask.

Good! Let's see the next step.

Step 2 — How to Switch the Active Blockchain

Once we have verified that the user has MetaMask installed, the next thing to do is trigger the RPC method for switching the MetaMask active blockchain. The code looks like this:

// MetaMask Docs
try {
  await ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: '0xf00' }],
  });
} catch (switchError) {
// This error code indicates that the chain has not been added to MetaMask.
  if (switchError.code === 4902) {
      // Do something
  }
}

Here's what we are doing:

We invoke the ethereum.request method, passing it an object with two properties.

In the method property, we specify the wallet_switchEthereumChain RPC method, which allows Ethereum applications (DApps) to request that MetaMask switches its active Ethereum chain.

Then, the params property is an array that takes an object with the chain ID of the blockchain to switch to. chainId must be hexadecimal, hence the 0x in the sample code.

We wrap our request in a try/catch block to handle errors.

null is returned if the active chain is switched.

If the requested chain does not exist in the user's wallet, the request throws an error code error.code of 4902. If this happens, you can request to add the chain to the wallet.

You can follow this guide to see how to add a new chain to MetaMask using JavaScript.

Great! That's all it takes to switch the active chain on MetaMask with Javascript.

Let's have a quick demo in the next section.

Demo

For this example, let's write a function that, when invoked, will prompt users to switch to the Polygon chain.

const SwitchChainToPolygon = () => {
    const { ethereum } = window;
    if (typeof ethereum !== 'undefined' && ethereum.isMetaMask) return;

    try {
      await ethereum.request({
        method: 'wallet_switchEthereumChain',
        params: [{ chainId: '0x89' }],
      });
    } catch (switchError) {
      if (switchError.code === 4902) {
        // You can make a request to add the chain to wallet here
        console.log('Polygon Chain hasn't been added to the wallet!')
      }
    }
}

In the function SwitchChainToPolygon above, we destructured ethereum from the windows object, as we learned in Step 1.

Next, we verified whether ethereum does exist or not. If the ethereum is unavailable, that is if MetaMask is not installed, the function will exit/break.

If ethereum exists, we call the ethereum.request method to make an RPC call. For the method property, we give it a value of wallet_switchEthereumChain. For the params, chainId will have the value of 0x89 ( 167 in decimal) which is the chainId for the polygon blockchain.

That's all folks!

Conclusion

In this article, you have learned how to switch blockchains on MetaMask with JavaScript. This will help you provide a frictionless user experience for your users.

Thank you for taking the time to read this. I hope you found it useful. Please feel free to connect and chat with me on Twitter and YouTube. See you soon in my next article!

This simplifies the process of onboarding users to your application, since they don't have to manually add the network themselves.

In this article, I'll show you how to use JavaScript to programmatically add custom networks to Metamask. Let's begin!

Step 1: Check if Metamask is Installed

The first thing you need to do is check if the Metamask plugin is installed in the user's browser. Fortunately, Metamask makes this easy by injecting an ethereum object into websites that have it installed.

To check for the presence of Metamask, you can simply try to access the ethereum object. You can do this using the following code:

if (typeof window.ethereum !== 'undefined') {  
 console.log("Metamask is installed")
} else {
  console.log("Metamask is not installed")
}

Step 2: Add a Custom Network to Metamask

To programmatically add a custom network to Metamask, you can use the request method of the ethereum object, passing it the wallet_addEthereumChain property.

For example, the following code demonstrates how to add the Matic Network (Polygon) to Metamask:

window.ethereum.request({
  method: "wallet_addEthereumChain",
  params: [{
    chainId: "0x89",
    rpcUrls: ["https://polygon-rpc.com/"],
    chainName: "Matic Mainnet",
    nativeCurrency: {
      name: "MATIC",
      symbol: "MATIC",
      decimals: 18
    },
    blockExplorerUrls: ["https://polygonscan.com/"]
  }]
});

The window.ethereum.request() method takes an object as an argument with the method and params properties. The method property should be set to wallet_addEthereumChain, and the params property should be an array containing an object with the following properties:

• chainId: The chain ID of the custom network which is a 0x-prefixed hexadecimal string.

• rpcUrls: An array of RPC URLs for the custom network.

• chainName: The name of the custom network.

• nativeCurrency: An object with the properties name, symbol, and decimals, representing the name, symbol, and number of decimals of the native currency of the custom network.

• blockExplorerUrls: An array of block explorer URLs for the custom network.

This code will send a request to Metamask to add the Polygon (Matic) Network to the user's wallet. If the request to add the network is successful, window.ethereum.request() will return null. If not successful, it will return an error.

Demo

To demonstrate how you can use this code, let's write a simple function that adds the Matic network when called.

async function addMaticNetwork() {
  try {
    const result = await window.ethereum.request({
      method: "wallet_addEthereumChain",
      params: [{
        chainId: "0x89",
        rpcUrls: ["https://polygon-rpc.com/"],
        chainName: "Matic Mainnet",
        nativeCurrency: {
          name: "MATIC",
          symbol: "MATIC",
          decimals: 18
        },
        blockExplorerUrls: ["https://polygonscan.com/"]
      }]
    });
  } catch (error){
    console.log(error)
  }

The addMaticNetwork function, when called, will invoke the request to add the matic network. This function uses the async/await syntax to handle the request asynchronously, and includes a try/catch block to handle any errors that may occur.

Note: It's important to note that you should never automatically prompt the user to add a network without their explicit consent. Instead, this request should only be made in response to a direct user action, such as clicking a button.

This ensures that the user is fully aware of the change being made to their wallet and can choose to proceed or cancel the operation as they see fit..

Wrapping Up

In this article, you have learned how to programmatically add custom networks to MetaMask using JavaScript.

By implementing these steps in your own DApp, you can provide a seamless onboarding experience for your users and improve their overall experience with your application.

I hope this article was helpful. Remember, the world is your code oyster.