DEV Community

Cover image for How to connect your Dapps to Metamask extension

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.

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.

Some of the requirements include:

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


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

    <title>Web3 Metamask Login</title>

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

      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");
          return false;

        loginButton.addEventListener("click", loginWithMetaMask);

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

        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", () => {

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


After clicking the button, the Metamask window pops up;


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)