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:
- HTML
- Some CSS(we'll be using TailwindCss)
- Knowledge of JavaScript
Tools
- Editor/ IDE
- 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).
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.
.
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)