How to listen to network changed event from chain modal?

[hungdoansy]

Hi guys,

I need your help with this question.

I need a way to differentiate chain is switched by webapp and by wallet connector. Here's my story.

1. I have a webapp and I use Rainbowkit for wallet connection
2. My webapp supports only several chains: Ethereum, Base and zkSync. Only 3
3. I set syncConnectedChain = false so that when users change network in their wallet, the webapp is not affected and still shows correct data from the last network.
4. I want to update chainId in the config, only if the network is changed by user using chain modal.

Updated:
Chain can be changed by 2 ways

User changes it in their wallet
User changes it using chain modal of RK
In case 1, I don't want our app to react to it. If the webapp's in Ethereum, it will still be Ethereum no matter what they try to change in the their wallet

In case 2, it is their intention to change the network so I'd like the webapp to save this latest chain.

In summary, I only want the webapp to change chainId (in the config) only if this is done within our webapp.

Thanks in advance.

[hungdoansy]

Hi @magiziz, can you give some thoughts? Thanks

[magiziz]

Hi @hungdoansy. You can pick chainId from useAccount hook and have some sort of useEffect logic to see when a user has changed their chain id, but i imagine you would do that after app mounts. You also can't change chains directly in the config (getDefaultConfig or createConfig), but you can ofc have your own logic to block users from connecting to invalid chain.

You can also try listening to events from the connector like we do here.

[hungdoansy]

Thanks @magiziz for the answer, but let me make myself a bit more clear.

Chain can be changed by 2 ways

1. User changes it in their wallet
2. User changes it using chain modal of RK

In case 1, I don't want our app to react to it. If the webapp's in Ethereum, it will still be Ethereum no matter what they try to change in the their wallet

In case 2, it is their intention to change the network so I'd like the webapp to save this latest chain.

In summary, I only want the webapp to change chainId (in the config) only if this is done within our webapp.

I'm not sure if my requirement can be fulfilled with RK only. Or with the current state of RK and Wagmi, it's not possible?

[magiziz]

Ah i see now. Yeah that would not be possible since we force users to change chain through their wallet. You could ofc try building your own modal flow if you want where you could play around with different states in the app. Lmk if that would work 🙏

[hungdoansy]

Thank you @magiziz. Here's the steps I think I'd need to do:

1. Create my own modal (fork from RK maybe)
2. Customize switchChain

[magiziz]

Yep exactly. Lmk if you've got any other questions 🙏

[conwayconstar]

If you are still looking to do this or if anyone else I patched wagmi (not reccomended). It looks like wagmi handles the chain state here
@wagmi__core@2.13.8.patch

I have created a feature request to wagmi wevm/wagmi#4439