Request user to switch to supported chain using Wagmi and WalletConnect in ReactJS.

[BrahimSeriah]

I am using useEffect to update currentPayment state : [ETH, BNB, MATIC, ...] if the user switch chain from his wallet (ex Metamask).

import { useAccount } from 'wagmi';

const { chainId } = useAccount();

useEffect(() => {
        setPaymentMethod(PAYMENT_METHODS.find(method => method.chainId === chainId) || PAYMENT_METHODS[0]);
}, [chainId]);

I have the case where I want to ask user to switch to supported chain if he selects a chain from his wallet not supported in my wagmi config.

Something similar to this:

I don't know where or how to automatically show this modal and force user to switch to supported chains.

The closest thing I got is

import { useWeb3Modal } from '@web3modal/wagmi/react';

const { open } = useWeb3Modal();

open({view: 'Networks'})

and this requires to add logic to check for current chainId and keep opening this modal until user selects supported chain.