DEV Community 👩‍💻👨‍💻

Cover image for How to connect your Dapps to Metamask extension
NerdyDave2017
NerdyDave2017

Posted on

How to connect your Dapps to Metamask extension

One of the most in demand technology today is blockchain technology and I will be showing an example of how to connect your frontend app to Metamask browser extension. I noticed the lack of adequate information for developers on blockchain technology as it's a relatively new space.

What is Metamask

MetaMask is a software cryptocurrency wallet used to interact with the Ethereum blockchain. It allows users to access their Ethereum wallet through a browser extension or mobile app, which can then be used to interact with decentralized applications.
reference: https://en.wikipedia.org/wiki/MetaMask

Decentralized Applications(Dapps)

A Dapp in simple language is an application that interacts with and leverages on a decentralized network such as Ethereum, Solana etc. A decentralized application (dapp) is an application built on a decentralized network that combines a smart contract and a frontend user interface. On Ethereum, smart contracts are accessible and transparent; Dapp = frontend + smart contract backend.
reference: https://ethereum.org/en/developers/docs/dapps/

Requirements
Some of the requirements include:

  1. HTML
  2. Some CSS(we'll be using TailwindCss)
  3. Knowledge of JavaScript

Tools

  1. Editor/ IDE
  2. Install Metamask browser extension

Getting Started
Let's get going 🚀🚀🚀.
First we create an Html file and let's name it Connect.html. Since we'll be using TailwindCss, let's head to https://cdnjs.com/libraries/tailwindcss and copy the very first tag and add it to our Html header.
To make this short, we'll be writing the Javascript code in the Html file 😅😉. Bellow is the code snippet of what we'll be doing.

<html>
  <head>
    <title>Web3 Metamask Login</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>

  <body class="flex w-screen h-screen justify-center items-center">
    <div class="flex-col space-y-2 justify-center items-center">
      <button
        id="loginButton"
        onclick=""
        class="mx-auto rounded-md p-2 bg-green-500 text-white"
      >
        Login with MetaMask
      </button>
      <p id="userWallet" class="text-lg text-gray-600 my-2"></p>
    </div>

    <script>
      window.userWalletAddress = null;
      const loginButton = document.getElementById("loginButton");
      const userWallet = document.getElementById("userWallet");

      function toggleButton() {
        if (!window.ethereum) {
          loginButton.innerText = "MetaMask is not installed";
          loginButton.classList.remove("bg-purple-500", "text-white");
          loginButton.classList.add(
            "bg-gray-500",
            "text-gray-100",
            "cursor-not-allowed"
          );
          return false;
        }

        loginButton.addEventListener("click", loginWithMetaMask);
      }

      async function loginWithMetaMask() {
        const accounts = await window.ethereum
          .request({ method: "eth_requestAccounts" })
          .catch((e) => {
            console.error(e.message);
            return;
          });
        if (!accounts) {
          return;
        }

        window.userWalletAddress = accounts[0];
        userWallet.innerText = window.userWalletAddress;
        loginButton.innerText = "Sign out of MetaMask";

        loginButton.removeEventListener("click", loginWithMetaMask);
        setTimeout(() => {
          loginButton.addEventListener("click", signOutOfMetaMask);
        }, 200);
      }

      function signOutOfMetaMask() {
        window.userWalletAddress = null;
        userWallet.innerText = "";
        loginButton.innerText = "Sign in with MetaMask";

        loginButton.removeEventListener("click", signOutOfMetaMask);
        setTimeout(() => {
          loginButton.addEventListener("click", loginWithMetaMask);
        }, 200);
      }

      window.addEventListener("DOMContentLoaded", () => {
        toggleButton();
      });
    </script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

So let's test our code. Open your html file in your browser(make sure you have Metamask extension installed).

connect

After clicking the button, the Metamask window pops up;

popup

On granting permision to connect, we display the wallet address, we also replace the "Signin with Metamask" to a "Sign out of Metamask" button.

display address.

This explanation above is just a simple way of connecting your frontend to Metamask 😀😁. Thanks!!! more content about blockchain coming up so click the follow button.....

Top comments (0)

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!