Connecting MetaMask wallet in Blockchain / Solidity - Mini Project: Build & Apply

Connecting MetaMask Wallet

📖 Scenario: You want to create a simple web page that connects to a MetaMask wallet. MetaMask is a popular browser extension that lets you manage Ethereum accounts. Connecting the wallet allows your web page to interact with the blockchain through the user's account.

🎯 Goal: Build a web page that connects to the MetaMask wallet when a button is clicked and shows the connected account address.

📋 What You'll Learn

Create a button with the id connectButton to trigger the wallet connection.

Create a paragraph with the id accountDisplay to show the connected account address.

Write JavaScript code to detect if MetaMask is installed.

Write JavaScript code to request connection to MetaMask when the button is clicked.

Display the connected account address in the paragraph after successful connection.

💡 Why This Matters

🌍 Real World

Connecting a MetaMask wallet is a common first step in building decentralized applications (dApps) that interact with Ethereum blockchain.

💼 Career

Blockchain developers and frontend engineers working on dApps need to know how to connect wallets like MetaMask to access user accounts securely.

1

Create the HTML structure

Create a simple HTML page with a button having the id connectButton and text 'Connect MetaMask'. Also add a paragraph with the id accountDisplay to show the connected account address.

Blockchain / Solidity

Connect MetaMask

Need a hint?

Use the <button> tag with id="connectButton" and a <p> tag with id="accountDisplay".

2

Check if MetaMask is installed

Create a JavaScript variable called isMetaMaskInstalled that checks if window.ethereum exists and if window.ethereum.isMetaMask is true.

Blockchain / Solidity

Connect MetaMask


// Check if MetaMask is installed
const isMetaMaskInstalled = false; // Your code here

Need a hint?

Use typeof window.ethereum !== 'undefined' and window.ethereum.isMetaMask to detect MetaMask.

3

Add event listener to connect wallet

Add a click event listener to the button with id connectButton. Inside the listener, if isMetaMaskInstalled is true, request accounts using window.ethereum.request({ method: 'eth_requestAccounts' }) and store the first account in a variable called account.

Blockchain / Solidity

Connect MetaMask


// Check if MetaMask is installed
const isMetaMaskInstalled = typeof window.ethereum !== 'undefined' && window.ethereum.isMetaMask;

// Add click event listener to connectButton
// Your code here

Need a hint?

Use document.getElementById('connectButton') and addEventListener('click', async () => { ... }). Use await window.ethereum.request({ method: 'eth_requestAccounts' }) to get accounts.

4

Display the connected account

Inside the click event listener, after getting the account, set the text content of the paragraph with id accountDisplay to 'Connected account: ' followed by the account value. If MetaMask is not installed, set the paragraph text to 'MetaMask is not installed.'

Blockchain / Solidity

Connect MetaMask


// Check if MetaMask is installed
const isMetaMaskInstalled = typeof window.ethereum !== 'undefined' && window.ethereum.isMetaMask;

const connectButton = document.getElementById('connectButton');
connectButton.addEventListener('click', async () => {
    if (isMetaMaskInstalled) {
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        const account = accounts[0];
        // Display the connected account
        // Your code here
    } else {
        // Display MetaMask not installed message
        // Your code here
    }
});

Need a hint?

Use accountDisplay.textContent = `Connected account: ${account}` to show the address. Use accountDisplay.textContent = 'MetaMask is not installed.' if MetaMask is missing.