Im talking about how i can implement this metamask navbar icon?

enter image description here

I would like to make it look like this when people are logged in with metamask enter image description here

1 Answer 1


You could have a function such as the following:

import Web3 from "web3";

const getWeb3 = () => {
  return new Promise((resolve, reject) => {
    // Wait for loading completion to avoid race conditions with web3 injection timing.
    window.addEventListener("load", async () => {
      // Modern dapp browsers...
      if (window.ethereum) {
        const web3 = new Web3(window.ethereum);
        try {
          // Request account access if needed
          await window.ethereum.enable();
          // Acccounts now exposed
        } catch (error) {
      // Legacy dapp browsers...
      else if (window.web3) {
        // Use Mist/MetaMask's provider.
        const web3 = window.web3;
        console.log("Injected web3 detected.");
      // Fallback to localhost; use dev console port by default...
      else {
        const provider = new Web3.providers.HttpProvider(
        const web3 = new Web3(provider);
        console.log("No web3 instance injected, using Infura/Local web3.");

Then you could do this:

async function getEthereumAccounts() {
    const web3 = await getWeb3();
    // Use web3 to get the user's accounts.
    const accounts = await web3.eth.getAccounts();
    return acccounts || [];

At this point, accounts should be an array of available addresses, and accounts[0] should be the current address, from that point onwards you can use the address and put it into your user interface.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.