window.ethereum.isConnected() always returns true

Question

I'm currently working on "How to build an NFT Marketplace from Scratch" and, Implementing wallet connection.

The wallet connect Button is always shows as "connected" even if I disconnect wallet.

useEffect(() => {
let val = window.ethereum.isConnected();
console.log(val);
if (val) {
  console.log("here");
  getAddress();
  toggleConnect(val);
  updateButton();
}

window.ethereum.isConnected() is always retuning true. How can I fix it?

Answer 1

window.ethereum.isConnected() not refers to connection about user account!

In details, this function refers if the provider can make RPC requests to the current chain.

From documentation:

Note that this method has nothing to do with the user's accounts.

You may often encounter the word "connected" in reference to whether a web3 site can access the user's accounts. In the provider interface, however, "connected" and "disconnected" refer to whether the provider can make RPC requests to the current chain.

You can read more here.

Answer 2

the problem is you are only toggling once in the if-statement (if: true / isConnected = true) but not the other way around (isConncted = false) does not trigger toggleConnect. In effect, you are just setting the button's color to green/connected, but never to red/disconnected since your negative case is missing in the code.

What you really need is a updateButton(val) function without the checking the cases beforehand - then passing on the result of window.ethereum.isConnected() to that function directly.

A one-liner with modifications in your updateButton function could be:

useEffect(() => {
  updateButton(window.ethereum.isConnected());
}

You should rename the updateButton function to something more meaningful like updateConnectionButton()