How to connect ReactJS with MetaMask ?
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_app
Step 2: Move to the project directory
cd eth_app
Step 3: Install these packages to run the application
npm i react-bootstrap bootstrap ethers@5.7.2
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.
Javascript
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() {
const [data, setdata] = useState({
address: "" ,
Balance: null ,
});
const btnhandler = () => {
if (window.ethereum) {
window.ethereum
.request({ method: "eth_requestAccounts" })
.then((res) =>
accountChangeHandler(res[0])
);
} else {
alert( "install metamask extension!!" );
}
};
const getbalance = (address) => {
window.ethereum
.request({
method: "eth_getBalance" ,
params: [address, "latest" ],
})
.then((balance) => {
setdata({
Balance:
ethers.utils.formatEther(balance),
});
});
};
const accountChangeHandler = (account) => {
setdata({
address: account,
});
getbalance(account);
};
return (
<div className= "App" >
{
}
<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 URL http://localhost:3000/
Last Updated :
02 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...