Connecting to Metamask
React app
After creating your react app npx create-react-app app-name
, and installing web3 npm i web3
you can go to src/app.js
, you can clean up the code and import {Web3}
. It should look like this:
import { useState } from "react";
import { Web3 } from "web3";
function App() {
return <> </>;
}
export default App;
Let's divide this into 2 small steps:
1. Create Button to Connect and Display Connected Address
In this step, we'll add a button to the front end for users to connect to Metamask. We'll also include an <h2></h2>
element to display the connected address once the connection is established.
import { useState } from "react";
import { Web3 } from "web3";
function App() {
//react state to store and show the connected account
const [connectedAccount, setConnectedAccount] = useState("null");
return (
<>
{/* Button to trigger Metamask connection */}
<button onClick={() => connectMetamask()}>Connect to Metamask</button>
{/* Display the connected account */}
<h2>{connectedAccount}</h2>
</>
);
}
export default App;
2. Implement the Function to Connect Metamask
In this step, we'll implement the function that triggers Metamask to prompt the user to connect their wallet.
import { useState } from "react";
import { Web3 } from "web3";
function App() {
//state to store and show the connected account
const [connectedAccount, setConnectedAccount] = useState("null");
async function connectMetamask() {
//check metamask is installed
if (window.ethereum) {
// instantiate Web3 with the injected provider
const web3 = new Web3(window.ethereum);
//request user to connect accounts (Metamask will prompt)
await window.ethereum.request({ method: "eth_requestAccounts" });
//get the connected accounts
const accounts = await web3.eth.getAccounts();
//show the first connected account in the react page
setConnectedAccount(accounts[0]);
} else {
alert("Please download metamask");
}
}
return (
<>
{/* Button to trigger Metamask connection */}
<button onClick={() => connectMetamask()}>Connect to Metamask</button>
{/* Display the connected account */}
<h2>{connectedAccount}</h2>
</>
);
}
export default App;
HTML Single page
1. Create an html file and import Web3 from CDN
<!DOCTYPE html>
<html>
<head>
<title>Metamask Connection</title>
<!-- Import Web3 library from CDN -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
</head>
<body>
</body>
</html>
2. Create Button to Connect and Display Connected Address
<!DOCTYPE html>
<html>
<head>
<title>Metamask Connection</title>
<!-- Import Web3 library from CDN -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
</head>
<body>
<h1>Metamask Connection</h1>
<!-- button to connect Metamask -->
<button id="connectButton">Connect to Metamask</button>
<!-- display the connected account -->
<h2 id="connectedAccount">null</h2>
</body>
</html>
3. Implement Script to Connect Metamask
<!DOCTYPE html>
<html>
<head>
<title>Metamask Connection</title>
<!-- Import Web3 library from CDN -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
</head>
<body>
<h1>Metamask Connection</h1>
<!-- button to connect Metamask -->
<button id="connectButton">Connect to Metamask</button>
<!-- display the connected account -->
<h2 id="connectedAccount">null</h2>
<script type="module">
//listen for a `click` to connect when clicking the button
document.getElementById("connectButton").addEventListener("click", async () => {
//check if Metamask is installed
if (window.ethereum) {
const web3 = new Web3(window.ethereum);
// Request the user to connect accounts (Metamask will prompt)
await window.ethereum.request({ method: "eth_requestAccounts" });
// Get the connected accounts
const accounts = await web3.eth.getAccounts();
// Display the connected account
document.getElementById("connectedAccount").innerText = accounts[0];
} else {
// Alert the user to download Metamask
alert("Please download Metamask");
}
});
</script>
</body>
</html>