useAccountEffect.onConnect not called after enabling metamask on click causes a reload

[lukaw3d]

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Describe the bug

I'm trying to consistently listen to onConnect

useAccountEffect({ onConnect: console.log });

but it isn't triggered when reloading the page by enabling metamask to run on the site

Link to Minimal Reproducible Example

https://stackblitz.com/edit/new-wagmi-tfvypz?file=src%2FApp.tsx

Steps To Reproduce

Added logging for useAccountEffect.onConnect conditions

wagmi/packages/react/src/hooks/useAccountEffect.ts

Lines 34 to 40 in 34df0c8

	onChange(data, prevData) {
	if (
	(prevData.status === 'reconnecting' ||
	(prevData.status === 'connecting' &&
	prevData.address === undefined)) &&
	data.status === 'connected'
	) {

https://stackblitz.com/edit/new-wagmi-tfvypz?file=src%2FApp.tsx
open preview in new tab

First time connecting, click Injected: 🟢

{"prevData":{"status":"connecting"},"data":{"status":"disconnected"}}
{"prevData":{"status":"disconnected"},"data":{"status":"connecting"}}
{"prevData":{"status":"connecting"},"data":{"status":"connected","address":"0xC3ecf872F643C6238Aa20673798eed6F7dA199e9"}}
useAccountEffect.onConnect was called

Reload page: 🟢

{"prevData":{"status":"reconnecting","address":"0xC3ecf872F643C6238Aa20673798eed6F7dA199e9"},"data":{"status":"reconnecting","address":"0xC3ecf872F643C6238Aa20673798eed6F7dA199e9"}}
{"prevData":{"status":"reconnecting","address":"0xC3ecf872F643C6238Aa20673798eed6F7dA199e9"},"data":{"status":"connected","address":"0xC3ecf872F643C6238Aa20673798eed6F7dA199e9"}}
useAccountEffect.onConnect was called

Reload by enabling metamask to run on this site: 🔴

• configure metamask Site access: On specific sites (chrome://extensions/?id=nkbihfbeogaeaoehlefnkodbefgpgknn)
• close preview and open preview in new tab again
• metamask is disabled on this site
• click metamask to allow it and reload the page

{"prevData":{"status":"connecting"},"data":{"status":"connecting","address":"0xC3ecf872F643C6238Aa20673798eed6F7dA199e9"}}
{"prevData":{"status":"connecting","address":"0xC3ecf872F643C6238Aa20673798eed6F7dA199e9"},"data":{"status":"connected","address":"0xC3ecf872F643C6238Aa20673798eed6F7dA199e9"}}
useAccountEffect.onConnect was not called

What Wagmi package(s) are you using?

wagmi

Wagmi Package(s) Version(s)

2.12.7

Viem Version

2.0.0

TypeScript Version

5.2.2

Anything else?

No response

[ahmetson]

Similar issue in our https://www.ustc.plus/
Code is here: https://github.com/ustc-plus/core/tree/main/packages/app/src/components

[nfts2me]

We are also having this issue on https://nfts2me.com/app/

After some digging, we've seen that the issue comes from WalletConnect and wallets that use it, like walletConnectWallet, okxWallet, trustWallet, rainbowWallet, tokenPocketWallet.

Wagmi should be able to handle a delay from WalletConnect servers response and ignore its response until it responds, not affecting the rest of the connectors for wallets.

It seems that the WS requests to wss://relay.walletconnect.com/ keep pending, and after a time out, it continues and the wagmi account status is finally as expected.

No idea why it doesn't happen on the first connect, and only after a reconnection.

We've disabled temporarily those wallets to make it work.

[nfts2me]

After latest viem and wagmi ("[email protected]") there are no petitions to relay.walletconnect.com ws, and thus, seems to be fixed.

Probably due to this fix by @tmm #4259

[tmm]

Seems to be working fine to me now. If anyone is still experiencing this, please reply with a video so I can clearly see your reproduction steps. (If this comes up again in the future and this current issue is locked, feel free to create a new issue referencing this one.)

[lukaw3d]

Can still reproduce in [email protected]

• example with updated deps https://stackblitz.com/edit/new-wagmi-7apksn?file=src%2FApp.tsx
• added logging for debugging too:

function App() {
  useAccountEffect({
    onConnect: (data) => console.log('useAccountEffect', data),
  });

  const config = useConfig();
  useEffect(() => {
    return watchAccount(config, {
      onChange(data, prevData) {
        console.log('debug watchAccount onChange', { prevData, data });
      },
    });
  }, [config]);

• video of all steps:

screen-recording.webm

timestamps:
0:10: configure metamask to run on demand (new tabs created after this will initialize without metamask injection)
0:20: open the preview in new tab with metamask disabled, enable metamask
0:36: connect first time prints useAccountEffect
0:48: reload in a tab with enabled metamask, automatically connects, prints useAccountEffect
0:57: again reload in a tab with enabled metamask, automatically connects, prints useAccountEffect
1:05: opening a tab with metamask disabled, enable metamask, automatically connects, DOES NOT print useAccountEffect

[tmm]

@lukaw3d looks like the video isn’t there

[lukaw3d]

converted webm to mp4. Does this work https://github.com/user-attachments/assets/3c5b1240-ac60-4e13-bcea-4f24880188b4?

b.mp4

or gif: https://github.com/user-attachments/assets/1062e38c-32d5-4a3c-b5cc-c872868aaabe

[tmm]

Thanks for attaching! Was able to reproduce.

Since most folks likely have Site access set to "On all sites" (it's the default), not sure it's worth updating the behavior at this moment to accommodate "On click" as other features, like chain switching, also do not work with this setting. Let's treat this as more of a feature request for future support (converting to discussion).

In the meantime, to patch useAccountEffect locally, you can do the following:

        if (
          (prevData.status === 'reconnecting' ||
-           (prevData.status === 'connecting' &&
-             prevData.address === undefined)) &&
+           prevData.status === 'connecting') &&
          data.status === 'connected'
        ) {