Last Updated : 26 Jul, 2024
To Connect React JS with MetaMask is important while making Web 3 applications, It will be done with Meta mask wallet which is the most used browser tool for sending and receiving signed transactions .
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 in 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.
Approach to connect React JS with MetaMask
We will connect MetaMask to React using Ether library which can be used to initialize the authentication using MetaMask wallet browser extention. Then a request will be made to acces the account info e.g. current balance, last transections etc.
Steps to create React Application
Step 1: Creating a react project with CLI
npx create-react-app eth_appStep 2: Move to the project directory
cd eth_appStep 3: Install these packages to run the application
npm i react-bootstrap bootstrap [email protected]Project Structure:
The updated dependencies in package.json file will look like:
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"ethers": "^5.7.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}
Example: Initiallize metamask authentication usign browser extention when clicked on Connet button.
// Filename - App.js// Importing modulesimport 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 window.ethereum .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 window.ethereum .request({ method: "eth_getBalance", params: [address, "latest"], }) .then((balance) => { // Setting balance setdata({ Balance: ethers.utils.formatEther(balance), }); }); }; // Function for getting handling all events const accountChangeHandler = (account) => { // Setting an address data setdata({ address: account, }); // Setting a balance getbalance(account); }; return ( <div className="App"> {/* Calling all values which we have stored in usestate */} <Card className="text-center"> <Card.Header> <strong>Address: </strong> {data.address} </Card.Header> <Card.Body> <Card.Text> <strong>Balance: </strong> {data.Balance} </Card.Text> <Button onClick={btnhandler} variant="primary" > Connect to wallet </Button> </Card.Body> </Card> </div> );}export default App;
Step to run the application: Open the terminal and type the following command.
npm start
Output:Open the browser and our project is shown in the URLhttp://localhost:3000/
Improve
