hey @zubin. the way to handle chain changes you can request metamask to handle chain changes whenever the user clicks on some button to change which uses a metamask request option to change chain by triggering a popup forcing the user to change. on the other hand if a user just decides to change chain then you can use an onChainChange event handler to trigger the popup automatically with useEffect also. the code below shows an example of how to do this for the example of ethereum, ploygon and binance smart chain. this is even more powerful implemnted with web3react. or mroalis if you desire
import { useState, useEffect } from "react";
const networks = {
polygon: {
chainId: `0x${Number(137).toString(16)}`,
chainName: "Polygon Mainnet",
nativeCurrency: {
name: "MATIC",
symbol: "MATIC",
decimals: 18
},
rpcUrls: ["https://polygon-rpc.com/"],
blockExplorerUrls: ["https://polygonscan.com/"]
},
bsc: {
chainId: `0x${Number(56).toString(16)}`,
chainName: "Binance Smart Chain Mainnet",
nativeCurrency: {
name: "Binance Chain Native Token",
symbol: "BNB",
decimals: 18
},
rpcUrls: ["https://bsc-dataseed1.binance.org"],
blockExplorerUrls: ["https://bscscan.com"]
}
};
const changeNetwork = async ({ networkName, setError }) => {
try {
if (!window.ethereum) throw new Error("No crypto wallet found");
await window.ethereum.request({
method: "wallet_addEthereumChain",
params: [
{
...networks[networkName]
}
]
});
} catch (err) {
setError(err.message);
}
};
export default function App() {
const [error, setError] = useState();
const handleNetworkSwitch = async (networkName) => {
setError();
await changeNetwork({ networkName, setError });
};
const networkChanged = (chainId) => {
console.log({ chainId });
};
useEffect(() => {
window.ethereum.on("chainChanged", networkChanged);
return () => {
window.ethereum.removeListener("chainChanged", networkChanged);
};
}, []);
return (
<div className="credit-card w-full lg:w-1/2 sm:w-auto shadow-lg mx-auto rounded-xl bg-white">
<main className="mt-4 p-4">
<h1 className="text-xl font-semibold text-gray-700 text-center">
Force MetaMask network
</h1>
<div className="mt-4">
<button
onClick={() => handleNetworkSwitch("polygon")}
className="mt-2 mb-2 btn btn-primary submit-button focus:ring focus:outline-none w-full"
>
Switch to Polygon
</button>
<button
onClick={() => handleNetworkSwitch("bsc")}
className="mt-2 mb-2 bg-warning border-warning btn submit-button focus:ring focus:outline-none w-full"
>
Switch to BSC
</button>
</div>
</main>
</div>
);
}
the above example is basic and only supports thos two chains. to make it more robust you should integrate this web3react or moralis (which you are jsing) and use this hook to get the current chain. something like
const { chainId } = useWebReact()
or for your case
const { cahinId } = useMoralis
if you then, in the useffect with the chainChain event listener add the dependancy of the chainId then evrry time you switch networks the popup will automatically show, that is if you call the handleNetworkChange function inside the useEffect.