I am using window.confirm() in my React app's useEffect as follows:
useEffect(() => {
const connectorId = window.localStorage.getItem("connectorId");
if (isAuthenticated && !isWeb3Enabled && !isWeb3EnableLoading){
enableWeb3({ provider: connectorId });}
if (chainId != '0xa86a') {
if (window.confirm(`You're on the wrong network! Click OK to switch to Avalanche C-chain!`)) {
switchNetwork("0xa86a")
} else {
alert("You're on the wrong network & will result in loss of funds due to failed transaction! Switch to Avalance C-chain manually in your Metamask Wallet!");
}
}
}, [isAuthenticated, isWeb3Enabled, chain]);
Everything works fine if the user is on the same tab when window.confirm is triggered. However if the user is on a different tab when window.confirm is triggered, on switching back to the app's tab I find that the first message never shows up. It directly proceeds to Cancel and the else statement gets executed. How do I prevent this from happening?
(Note: For those unaware of web3, the use effect is triggered by a change to the Metamask browser extension. So the user may not necessarily be on the react app's tab when it is triggered).