How to listen for account change? (Solved)

[Ian-Bright]

Is there a hook where we can detect an account change? Specifically I'd like to force a disconnect if I user switches accounts on metamask while connected on one account

--EDIT: Nevermind found in a prior discussion

[allenchuang]

FYI You can use the following:

  const { connector: activeConnector } = useAccount()

  useEffect(() => {
	const handleConnectorUpdate = ({account, chain}: ConnectorData) => {
      if (account) {
        console.log('new account', account)
      } else if (chain) {
        console.log('new chain', chain)
      }
    }

    if (activeConnector) {
      activeConnector.on('change', handleConnectorUpdate)
    }

	return () => activeConnector.off('change', handleConnectorUpdate)
  }, [activeConnector])

[Melancholism]

@cosmicknox Glad I could help:)

[Conviley]

The problem is that useEffect cleanup function is returning activeConnector?.off("change", handleConnectorUpdate) which is of type Connector<any,any> whereas useEffect expects a cleanup function that returns nothing i.e void.

Rather than typecasting with any effectively disabling typescript may i suggest simply opening up the cleanup functions with brackets and only running but not returning the off function. i.e

return () => {
  activeConnector?.off("change", handleConnectorUpdate);
};

[Emkay860]

This solution works, Thanks.

[raffle-x-dev]

What's ConnectorData? My typescript can't find it.

[ybgbob]

It look likes v1's solution

[mwawrusch]

If you happen to find a solution please also post if for everyone else

[VitorPChaves]

Hey, can you share the previous discussion you mentioned on the edit? Can't find it.

[JorisZierold]

An even simpler solution:

React.useEffect(() => {
        const unwatch = watchAccount(account => {
            console.log('Account changed to:', account);
        });

        // Cleanup by calling unwatch to unsubscribe from the account change event
        return () => unwatch();
    }, []);

As of: https://wagmi.sh/core/actions/watchAccount

[sbeben]

Argument of type 'Config<PublicClient, WebSocketPublicClient>' is not assignable to parameter of type 'WatchAccountCallback'.

[sbeben]

and obviously this does not work

[ghost]

can not detect switching metamask account

[dimisus]

Nope, this is not the event it promises to be. This will not catch the switching accounts inside the wallet like MetaMask.

[dimisus]

Nope, this is not the event it promises to be. This will not catch the switching accounts inside the wallet like MetaMask.

Correction, it will, but only for the accounts that have previously granted permissions!

[1antares1]

For now, these workarounds aren't possible for me now or are deprecated...

But using the useAccountEffect available from wagmi, it has worked for me so far (it recognizes when the user disconnects inside and outside the app from their wallet): 👍🏻
E.g.:

useAccountEffect({
    onConnect(data) {
      console.log('Connected!', data)
    },
    onDisconnect() {
      console.log('Disconnected!')
    },
  })

Ref link: https://wagmi.sh/react/api/hooks/useAccountEffect#useaccounteffect

[c0rdeiro]

but if the user changes accounts on metamask directly without disconnecting, does it trigger the onConnect?
I had this issue and it wasn't entering the onConnect when the user changed accounts, and tecnically connecting via metamask

[Nilbristi]

NO, For that you need to set useAccountEffect