Connect Web3 Wallets

Estimated completion time: 15 minutes.

No previous blockchain experience is needed - just follow along. ✌️

Pre-requirements

Create a Metamask wallet
Install Node.js

How to fetch user wallet address:

We will use metamask-onboarding library to make this process very easy. It has the additional benefit of helping users who do not have a metamask wallet get started (i.e. install metamask and then get connected).

Install all dependencies

$ npm install @metamask/onboarding
$ npm install express
$ npm install path

Frontend

Add this code snippet to your app or create an index.html file to allow users to connect their Metamask wallet.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>MetaMask Connect</title>
    <meta charset="UTF-8"/>
    <script src="./node_modules/@metamask/onboarding/dist/metamask-onboarding.bundle.js"></script>
</head>
<body>
<h1>Connect Metamask with your app</h1>
<button id="onboard">Loading...</button>
<p>Your wallet address : </p>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    const onboarding = new MetaMaskOnboarding();
    const onboardButton = document.getElementById('onboard');
    let accounts;

    const updateButton = () => {
      if (!MetaMaskOnboarding.isMetaMaskInstalled()) {
        onboardButton.innerText = 'Click here to install MetaMask!';
        onboardButton.onclick = () => {
          onboardButton.innerText = 'Onboarding in progress';
          onboardButton.disabled = true;
          onboarding.startOnboarding();
        };
      } else if (accounts && accounts.length > 0) {
        onboardButton.innerText = 'Connected';
        onboardButton.disabled = true;
        onboarding.stopOnboarding();
      } else {
        onboardButton.innerText = 'Connect';
        onboardButton.onclick = async () => {
          getAccounts();
        };
      }
    };
    updateButton();

    async function getAccounts() {
      accounts = await window.ethereum.request({method: 'eth_requestAccounts'});
      const account = accounts[0];
      const response = fetch("/wallet", {
        method: "POST",
        headers: {
          "Content-type": "application/json"
        },
        body: JSON.stringify({address: account})
      })
      let address_display = document.querySelector("p");
      address_display.innerText = "Your wallet address : " + account;
      updateButton();
    }
  });

</script>
</body>
</html>

Backend

Now, let's create a simple Node.js server to serve the webpage.

// app.js

const express = require("express")
const path = require("path");
  
const app = express();
const port = 3000;
  
// Setting path for directory 
const static_path = path.join(__dirname, "");
app.use(express.static(static_path));
app.use(express.urlencoded({ extended: true }));
  
// Handling request 
app.post("/wallet", (req) => {
   console.log(req.body.address) // This is the user's wallet address
})
  
// Server Setup
app.listen(port, () => {
   console.log(`server is running at ${port}`);
});

In your terminal, run the following command to start the app:

$ node app.js

Every time a user clicks on the 'connect' button, a POST request is made and the wallet address is sent to the server. You can use this wallet address as needed in your app. For example, if you want to showcase the NFTs owned by a user, you can make use of NFTPort's Ownership API to fecth the NFTs owned by that account/wallet address. Check out our tutorial to learn how to fetch NFTs owned by an account/wallet address.

Your app is ready to rock'n'roll with Metamask 😎

How it looks like:

Example

See our live example here.

If you want to send transactions using Metamask, see this tutorial.

Join the Community for Support and to Build Together

Join our Discord community if you need support from our team and a space to discuss NFT related topics, voice feature requests, and engage with other like-minded NFT developers.