How to connect your Dapps to Metamask extension
Tags: blockchain, metamask, javascript, dapps
Published: 2021-12-24 15:28:18


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>

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

![connect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lffznc8ex4iqhg4zur0l.jpg)

After clicking the button, the Metamask window pops up;

![popup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t59u3l7j7hpofae3krz1.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/albszxjcacab1kff55tq.jpg).

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.....