ConnectButton status incorrect after manual disconnect

[ninpeng]

I'm using the thirdweb/react library with ConnectButton and Auth for authentication functionality.

The problem is that when updating to version 5.44.1 or higher, if I connect MetaMask on mobile app and then manually disconnect the active wallet, the ConnectButton still appears to be connected.

However, when I actually check the active account, it returns as undefined.

In version 5.44.0, the manual disconnect functionality works correctly.

Test code

'use client';

import { useCallback } from 'react';
import { useActiveAccount, useActiveWallet, useActiveWalletConnectionStatus } from 'thirdweb/react';

export function useAuth() {
  const wallet = useActiveWallet();
  const account = useActiveAccount();
  const status = useActiveWalletConnectionStatus();

  return {
    logout: useCallback(async () => {
      console.log('active wallet', wallet?.id, wallet?.getAccount()?.address, wallet?.getChain()?.name);
      console.log('active account', account?.address);
      console.log('wallet status', status);
      console.log('proceed logout');
      await wallet?.disconnect();
      console.log('active wallet', wallet?.id, wallet?.getAccount()?.address, wallet?.getChain()?.name);
      console.log('active account', account?.address);
      console.log('wallet status', status);
    }, [account?.address, status, wallet]),
  }
}

Result log

active wallet walletConnect 0x14D9c764215477EA0Fa1D1C719C1b7f96E7c0393 Ethereum
active account 0x14D9c764215477EA0Fa1D1C719C1b7f96E7c0393
wallet status connected
proceed logout
active wallet walletConnect undefined undefined
active account 0x14D9c764215477EA0Fa1D1C719C1b7f96E7c0393
wallet status connected

Reference

#3963 2e3c5e9 Thanks @jnsdls! - handle switching accounts inside a connected wallet in SIWE auth states

It is suspected that the patch mentioned above is the cause of the issue.

[gregfromstl]

Hey @ninpeng, thanks for opening an issue. Does it work properly with useDisconnect? useAccount is using the global React context, which the lower level wallet has no knowledge of and cannot update. When working in React you should try to use the hooks wherever possible to make sure you're properly updating the React contexts

[ninpeng]

@gregfromstl Thank you. Instead of using wallet.disconnect(), using useDisconnect to execute the disconnect works perfectly. I will close the issue.