Open In App
Related Articles

How to connect ReactJS with MetaMask ?

Improve Article
Save Article
Like Article

Blockchain is the backbone of cryptocurrency and web 3.0. The world is accepting blockchain technology and also accepting decentralization applications due to transparency in different transactions. NFT is trending and mostly NFT DAPP runs on the Ethereum blockchain. In this article, we will take a look, at how one can connect theirs react js application to Meta mask wallet which is the most used browser tool for sending and receiving signed transactions.

MetaMask: MetaMask is a crypto wallet and a gateway to blockchain DAPP. It is used to connect our app to web3. It is just a chrome extension that is used to access and interact with the Ethereum blockchain. Its features support tokens and digital assets on the Ethereum ecosystem. It is also used as a primary wallet to store the balance in Ethereum.

For connection, we are using ethers.js, in order to connect to the Ethereum wallet.


Creating React Application:

Step 1: Creating a react project with CLI

npx create-react-app eth_app
yarn create react-app eth_app

Project structure: It will look like the following. 

Step 2: Connecting Metamask to react app. For achieving the meta mask wallet address we need to connect MetaMaks to our react app. For checking, if meta mask is connected.

      // Do something 
      alert("install metamask extension!!")

Now, if meta mask is installed we need to request the account.

        // Return the address of the wallet

For getting the balance we need to request the balance method

    params: [address, 'latest']
}).then(balance => {
    // Return string value to convert it into int balance
    // Yarn add ethers for using ethers utils or
    // npm install ethers
    // Format the string into main latest balance

Step 3: Pull the information in to react. For fetching the information into react page, we will use useState for setting the value from the javascript method and using into jsx

  const [data, setdata] = useState({
    address:'',    // Stores address
    Balance: null  // Stores balance


// Importing modules
import React, { useState } from "react";
import { ethers } from "ethers";
import "./App.css";
import { Button, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
  // usetstate for storing and retrieving wallet details
  const [data, setdata] = useState({
    address: "",
    Balance: null,
  // Button handler button for handling a
  // request event for metamask
  const btnhandler = () => {
    // Asking if metamask is already present or not
    if (window.ethereum) {
      // res[0] for fetching a first wallet
        .request({ method: "eth_requestAccounts" })
        .then((res) => accountChangeHandler(res[0]));
    } else {
      alert("install metamask extension!!");
  // getbalance function for getting a balance in
  // a right format with help of ethers
  const getbalance = (address) => {
    // Requesting balance method
        method: "eth_getBalance"
        params: [address, "latest"
      .then((balance) => {
        // Setting balance
          Balance: ethers.utils.formatEther(balance),
  // Function for getting handling all events
  const accountChangeHandler = (account) => {
    // Setting an address data
      address: account,
    // Setting a balance
  return (
    <div className="App">
      {/* Calling all values which we 
       have stored in usestate */}
      <Card className="text-center">
          <strong>Address: </strong>
            <strong>Balance: </strong>
          <Button onClick={btnhandler} variant="primary">
            Connect to wallet
export default App;


Last Updated : 26 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials