Disconnect dapp from MetaMask

Question

There are various tutorials that teach how to activate and deactivate Metamask wallet, or probably any crypto wallet in general, but in all of them I have the same problem, as so:

When I deactivate my account it is still displayed in Metamask GUI that you are connected, the problem with that is when you reload the page you get the connected behavior again, as though you never disconnected, you can verify this yourselves via this code example:

Using UseDapp framework:

import React from 'react'
import { useEthers } from '@usedapp/core'

const TryUseDappExample = () => {

  const { activateBrowserWallet, deactivate, account } = useEthers()

  return (
    <div>
      {!account && <button onClick={activateBrowserWallet}> Connect </button>}
      {account && <button onClick={deactivate}> Disconnect </button>}
      {account && <p>Account: {account}</p>}
    </div>
  )
}

export default TryUseDappExample

please try to hit connect -> disconnect -> reload the page, you will see you are still connected.

Using Web3-react tutorial provides the same scenario, although when I reload the page it doesn't show that the wallet is connected, rather it is shown only on Metamask GUI.

My question is a general one, how do you properly disconnect the Metamask wallet from the dapp?

Thank You!

You can see the behaviour in the image provided, the wallet is disconnected via disconnect button, but you can still see it's connected in Metamask GUI

Answer 1

I have faced this problem too, but I found there is no way for a dapp application to disconnect from inside Metamask (it doesn't have the privilege).

What we can do is to handle the connection from inside our application. ex: you store the account and provider inside a variable and then when you press the disconnect button it just removes that information from that variable. You think we are disconnected, but in reality we can't disconnect from actual Metamask.

But when somebody really disconnects his/her account from Metamask, then you can listen to the accountChanged event to handle it in your app.