Skip to main content

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>