Detect account change

[sjshon]

Does wagmi support account change detection?

Using useSwitchNetwork was very useful and thought it'd be nice to have something similar like useSwitchAccount

I've been trying with below approach by switching between accounts in metamask, but I don't see any detection.

  import { useProvider } from 'wagmi';

  const AppLayout = ({ children, layoutType }) => {
      const provider = useProvider();

      provider.on("accountsChanged", (accounts: string[]) => {
        console.log(accounts);
      });
  } 

What's the suggested way with wagmi?

[tmm]

wagmi listens for account changes. You can compose useAccount, useConnect, and useDisconnect in a variety of ways.

[tmm]

You should listen to events on the active connector, not provider. Check out how this works for the wagmi Client here.

[sjshon]

great! that surely helped.

  const { connector: activeConnector } = useAccount();
  
  useEffect(() => {
    if (activeConnector) {
      activeConnector.on("change", logout);
    }
  }, [activeConnector]);

[justingreenberg]

great! that surely helped.

  const { connector: activeConnector } = useAccount();
  
  useEffect(() => {
    if (activeConnector) {
      activeConnector.on("change", logout);
    }
  }, [activeConnector]);

be sure to return a cleanup function to unbind subscription

[justingreenberg]

@kkagill use key of returned data object to determine source of change:

  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])

[kkagill]

@justingreenberg thank you! working well