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

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

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

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
    }
});

Hint

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

Practice

1. What does window.ethereum represent in a web page when MetaMask is installed?

easy

A. A browser setting to enable cookies

B. An object injected by MetaMask to interact with the Ethereum blockchain

C. A method to create a new Ethereum wallet

D. A function to send transactions automatically

Solution

1. Step 1: Understand MetaMask injection

   MetaMask injects window.ethereum into the browser to allow web pages to communicate with the Ethereum blockchain.

2. Step 2: Identify the role of window.ethereum

   This object provides methods to request accounts, send transactions, and listen to blockchain events.

3. Final Answer:

   An object injected by MetaMask to interact with the Ethereum blockchain -> Option B

4. Quick Check:

   window.ethereum = MetaMask's injected object [OK]

Hint: Remember: window.ethereum is MetaMask's bridge to Ethereum [OK]

Common Mistakes:

• Thinking window.ethereum is a function
• Confusing it with wallet creation
• Assuming it's a browser setting

2. Which of the following is the correct way to request account access from MetaMask in JavaScript?

easy

A. window.ethereum.getAccounts()

B. window.ethereum.enable()

C. window.ethereum.request({ method: 'eth_requestAccounts' })

D. window.ethereum.connect()

Solution

1. Step 1: Identify the current recommended method

   The modern and recommended way to request accounts is using window.ethereum.request with the method eth_requestAccounts.

2. Step 2: Compare options

   window.ethereum.enable() (enable()) is deprecated. Options C and D are not valid MetaMask methods.

3. Final Answer:

   window.ethereum.request({ method: 'eth_requestAccounts' }) -> Option C

4. Quick Check:

   Use request with eth_requestAccounts to connect [OK]

Hint: Use window.ethereum.request with 'eth_requestAccounts' [OK]

Common Mistakes:

• Using deprecated enable() method
• Calling non-existent getAccounts() or connect()
• Not passing method as an object

3. What will the following code output if the user rejects the MetaMask connection request?

async function connect() {
  try {
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    console.log('Connected:', accounts[0]);
  } catch (error) {
    console.log('Error:', error.message);
  }
}
connect();

medium

A. Connected: 0x123... (first account address)

B. Error: window.ethereum is undefined

C. No output

D. Error: User rejected the request.

Solution

1. Step 1: Understand the try-catch block

   The code tries to request accounts. If the user rejects, the promise rejects and control goes to catch block.

2. Step 2: Identify the error message on rejection

   When user rejects, MetaMask throws an error with message like 'User rejected the request.'

3. Final Answer:

   Error: User rejected the request. -> Option D

4. Quick Check:

   User rejection triggers catch with error message [OK]

Hint: User rejection triggers catch block with error message [OK]

Common Mistakes:

• Assuming accounts array is returned on rejection
• Not handling promise rejection
• Expecting no output on rejection

4. Identify the error in this code snippet that tries to connect MetaMask wallet:

async function connectWallet() {
  const accounts = window.ethereum.request('eth_requestAccounts');
  console.log(accounts[0]);
}
connectWallet();

medium

A. Missing await before window.ethereum.request call

B. Incorrect method name, should be 'requestAccounts'

C. window.ethereum.request does not exist

D. accounts is not an array

Solution

1. Step 1: Check the request call usage

   window.ethereum.request returns a Promise, so it must be awaited or handled with then().

2. Step 2: Identify missing await

   The code calls request without await, so accounts is a Promise, not an array, causing accounts[0] to be undefined.

3. Final Answer:

   Missing await before window.ethereum.request call -> Option A

4. Quick Check:

   Async calls need await to get resolved value [OK]

Hint: Always await async calls like window.ethereum.request [OK]

Common Mistakes:

• Forgetting await on async calls
• Passing method as string instead of object
• Assuming request returns array directly

5. You want to connect a MetaMask wallet and display the connected account or an error message if MetaMask is not installed. Which code snippet correctly handles both cases?

async function connect() {
  if (window.ethereum) {
    try {
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('Connected account:', accounts[0]);
    } catch (error) {
      console.log('Connection error:', error.message);
    }
  } else {
    console.log('MetaMask is not installed');
  }
}
connect();

hard

A. Correctly checks for MetaMask and handles connection and errors

B. Fails to check if window.ethereum exists before requesting accounts

C. Does not handle user rejection errors

D. Uses deprecated enable() method instead of request()

Solution

1. Step 1: Check for MetaMask presence

   The code correctly checks if window.ethereum exists before trying to connect.

2. Step 2: Handle connection and errors properly

   It uses try-catch to handle user rejection or other errors and logs appropriate messages.

3. Final Answer:

   Correctly checks for MetaMask and handles connection and errors -> Option A

4. Quick Check:

   Check existence + try-catch = robust connection [OK]

Hint: Always check window.ethereum before connecting [OK]

Common Mistakes:

• Not checking if MetaMask is installed
• Ignoring errors from user rejection
• Using deprecated methods