Skip to content

A Step-by-Step Guide of using Ethers v6 library connect Metamask to Your React JS Website

Posted on:June 23, 2023 at 12:00 AM

Metamask is a well-known browser extension that allows users to interact with the Ethereum blockchain effortlessly. In this step-by-step guide, well explore how to connect Metamask to your React JS website using the ethers.js library.

By the end of this tutorial, youll be able to
check if Metamask is installed

connect to users wallets

add custom networks

Table of contents

Open Table of contents

Step 1: Install the Ethers Library

Lets install the ethers library, which will be our primary tool for interacting with the Ethereum blockchain. Open your terminal and run the following command:

npm install ethers

Step 2: Checking Metamask Installation

The first step in connecting Metamask to your React JS website is to check whether the user has Metamask installed. In case its not installed, well prompt the user to install Metamask for a smooth experience.

const checkMetamaskInstallation = () => {
  if (window.ethereum == undefined) {
    alert("Metamask wallet is not installed");
    return;
  }
};

Step 3: Initiating Wallet Connection

Once weve ensured that Metamask is present, the next step is to establish a connection between the users wallet and our DApp. With the connection established, well have the users account address available for further interactions.

const [account, setAccount] = useState(null);
const [provider, setProvider] = useState(null);

const initiateWalletConnection = async () => {
  try {
    const provider = new ethers.BrowserProvider(window.ethereum);
    const accounts = await provider.send("eth_requestAccounts", []);
    const account = accounts[0];
    setProvider(provider);
    setAccount(account);
  } catch (error) {
    console.log(error);
  }
};

儭 Step 4: Adding a Custom Network (Optional)

In some cases, your DApp might be deployed on a specific network, such as the Polygon Mumbai Testnet. To ensure users can interact with your DApp seamlessly you need to add custom networks to the users Metamask. Ill illustrate this with the example of adding the Polygon Mumbai Testnet.

const addPolygonMumbaiTestnet = async () => {
  const provider = new ethers.BrowserProvider(window.ethereum);
  await provider.send("wallet_addEthereumChain", [
    {
      chainId: "0x13881",
      chainName: "Mumbai Testnet",
      nativeCurrency: {
        name: "MATIC",
        symbol: "MATIC",
        decimals: 18,
      },
      rpcUrls: ["https://rpc-mumbai.maticvigil.com"],
      blockExplorerUrls: ["https://mumbai.polygonscan.com/"],
    },
  ]);
};

Step 5: Switching to the Custom Network

After adding the custom network (if needed), its essential to switch the users Metamask to the desired network for proper DApp functioning. If the user is already on the desired network, the function does nothing. Otherwise, it switches to the Polygon Mumbai Testnet.

const switchToMumbaiTestnet = async () => {
  try {
    const provider = new ethers.BrowserProvider(window.ethereum);
    await provider.send("wallet_switchEthereumChain", [{ chainId: "0x13881" }]);
  } catch (error) {
    if (error.code === 4902) {
      await addPolygonMumbaiTestnet();
    } else {
      console.log(error);
    }
  }
};

Conclusion:

By following this comprehensive guide, youve learned how to integrate Metamask with your React JS website using the powerful ethers.js library. You now have the ability to check if Metamask is installed, connect to users wallets, and even add custom networks for an enhanced user experience. With this knowledge, you can create feature-rich DApps that leverage the full potential of blockchain technology.