How to Recognize When User Has Switched Accounts in Metamask Wallet

[seldomatt]

Is there a function for recognizing when a user has switched their connected wallet account (ex. switching accounts in Metamask)? I'd like to re-run an API call and re-render a component upon user switching their connected account in MM (or upon disconnecting). Any help would be much appreciated, thanks!

[tmm]

You can subscribe to address changes with an effect:

import * as React from "react";

import { useAccount } from "wagmi";

export const App = () => {
  const [{ data: accountData }, disconnect] = useAccount();

  React.useEffect(() => {
    console.log(`Account changed! ${accountData?.address}`);
  }, [accountData?.address]);

  return (
    <div>
      <div>{accountData.address ?? 'Not connected'}</div>
      <button onClick={disconnect}>Disconnect</button>
    </div>
  );
};

https://codesandbox.io/s/pedantic-pateu-p8iud?file=/src/App.tsx

[seldomatt]

Perfect, thanks!

[o-az]

Is there a function for recognizing when a user has switched their connected wallet account (ex. switching accounts in Metamask)? I'd like to re-run an API call and re-render a component upon user switching their connected account in MM (or upon disconnecting). Any help would be much appreciated, thanks!

I needed to do this above the wagmi provider so it wasn't possible to use a wagmi hook so I created this hook https://gist.github.com/o-az/a7e490c964957d5fcf47d9248ee402ca