Question

91

How to check if Metamask is connected after page refreshing

rated 0 times [ 96] [ 5] / answers: 1 / hits: 15080 / 2 Years ago, sat, february 19, 2022, 12:00:00

My dApp have to connect to MetaMask. There are two rude solutions in the docs: make user to click connect btn every time manually or just pop up connection confirmation after page load. I want to implement the only convenient solution: first time user connect manually by clicking the connect btn and interacting with MetaMask popup and then my dApp detect that connection is still established and use this connection. I can't find the solution, but i saw this in other dApps (Capture the ether for example) I use:

import detectEthereumProvider from '@metamask/detect-provider';



const provider = await detectEthereumProvider(); 



if (provider) {

  connect(provider)

} else {

  // kind of "Install the MetaMask please!"

}



function connect(provider) {

  // How to check if the connection is here

  if (//connection established) {

    // Show the user connected account address

  } else {

    // Connect

    provider.request({ method: "eth_requestAccounts" })

      .then // some logic

  }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austonjuancarlosb

Add To Favorites

Follow

Total Points: 238

Total Questions: 89

Total Answers: 99

Location: Chad

Member since Mon, Dec 5, 2022

2 Years ago

austonjuancarlosb questions

1 TypeError: Cannot read properties of undefined (reading 'call') on Next.js

Sat, Dec 17, 22, 00:00, 1 Year ago

1 Slash Commands - Discord.js

Sun, Mar 14, 21, 00:00, 3 Years ago

1 How to reload Next.js page initial props without reloading the whole page

Mon, May 18, 20, 00:00, 4 Years ago

1 How can I disable keyboard input on an html input of type number? What about in react or material-ui?

Tue, Apr 14, 20, 00:00, 4 Years ago

1 How to properly type event handler in wrapped addEventListener call in TypeScript

Tue, Jan 28, 20, 00:00, 4 Years ago

View All

answered 2 Years ago kayap · Accepted Answer

I finally found a possible solution and it turned out to be as simple as it should be. There is an eth_accounts method in Ethereum JSON-RPC which allow us to ask for available accounts without actually requesting them. This way we can check if metamask is still connected (if there are any accounts) and avoid auto requesting or need of manually clicking "connect" every time. Simple example implementation could be:

// detect provider using @metamask/detect-provider

detectEthereumProvider().then((provider) => {

  if (provider && provider.isMetaMask) {

    provider.on('accountsChanged', handleAccountsChanged);

    // connect btn is initially disabled

    $('#connect-btn').addEventListener('click', connect);

    checkConnection();

  } else {

    console.log('Please install MetaMask!');

  }

});



function connect() {

  ethereum

    .request({ method: 'eth_requestAccounts' })

    .then(handleAccountsChanged)

    .catch((err) => {

      if (err.code === 4001) {

        console.log('Please connect to MetaMask.');

      } else {

        console.error(err);

      }

    });

}



function checkConnection() {

  ethereum.request({ method: 'eth_accounts' }).then(handleAccountsChanged).catch(console.error);

}



function handleAccountsChanged(accounts) {

  console.log(accounts);



  if (accounts.length === 0) {

    $('#connection-status').innerText = "You're not connected to MetaMask";

    $('#connect-btn').disabled = false;

  } else if (accounts[0] !== currentAccount) {

    currentAccount = accounts[0];

    $('#connection-status').innerText = `Address: ${currentAccount}`;

    $('#connect-btn').disabled = true;

  }

}