Connecting Metamask to Your React Application: A Step-by-Step Tutorial

Metamask is a popular web3 wallet that allows users to store and manage cryptocurrencies securely. If you are building a React application that interacts with a blockchain, you may want to integrate Metamask to enable users to sign transactions or interact with your DApp. Here’s a simple tutorial on how to connect Metamask with a React application:

1. Install Metamask: If you haven’t already, install the Metamask extension for your web browser. Metamask is available for Chrome, Firefox, Brave, and Edge. (https://metamask.io/download/)
2. Create a new React app: Use create-react-app or any other React starter kit to create a new React app. You can use the following command to create a new app using create-react-app:

npx create-react-app  my-web3-app
cd my-web3-app

3. Install web3: Web3 is a library that allows you to interact with Ethereum and other blockchain networks. Install web3 by running the following command:

npm install web3 --save-dev

4. Initialize web3 and connect to Metamask: In your React app, create a new JavaScript file (e.g., MyWeb3.js) and add the following code to initialize web3 and connect to Metamask:

import Web3 from 'web3';

export default async function connectToMetamask() {
      if (window.ethereum) {
            await window.ethereum.enable();
            window.web3 = new Web3(window.ethereum);
        } else if (window.web3) {
            window.web3 = new Web3(window.web3.currentProvider);
        } else {
            console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
        }
}

This code checks if Metamask is available. If Metamask is available, it prompts the user to connect to the wallet and sets the global web3 object to the connected provider.

5. Import MyWeb3.js in your React components: In any React component that needs to interact with the blockchain, import the MyWeb3.js file you created in step 4 and use the web3 object to interact with the blockchain:

I will be using the web3 object in app.js file.

import './App.css';
import connectToMetamask from './MyWeb3';
import { useEffect, useState } from 'react';

function App() {

  const [account, setAccount] = useState('');

  useEffect(() => {

    // Get the user's account
    async function getAccount() {
      console.log("Connecting to metamask");
      await connectToMetamask();
      const accounts = await window.web3.eth.getAccounts();
      setAccount(accounts[0]);
      console.log("Account is set ", account);
    }
    getAccount();
  }, []);

  return (
    <div className="App">
      <p>Connected account: {account}</p>
    </div>
  );
}

export default App;

In this example, the component uses the useState and useEffect hooks to get the user’s account using the web3.eth.getAccounts() method. The account is then displayed in the component’s render function.

That’s it! You now have a React application that is connected to Metamask and can interact with the blockchain. You can use the web3 object to perform other blockchain operations, such as signing transactions or reading data from smart contracts.

I hope this tutorial was helpful in integrating Metamask with your React application. If you have any questions or feedback, please don’t hesitate to reach out. I’m always here to help.

Also, feel free to check out my Github repository where I have shared the complete source code for the tutorial: https://github.com/karthik137/my-web3-app