avoid auto popup of ensureEthereumChain

components/AppSwitch.tsx

@@ -1,20 +1,11 @@
-import { VFC, useEffect } from "react";
+import { VFC } from "react";
 import { css } from "@emotion/react";
 import Link from "next/link";
 import { Theme } from "@mui/material";
-import useSectionUri from "@/hooks/useSectionUri";
-import { useMetaMaskExtension } from "@/providers/MetaMaskExtensionProvider";
-import { ensureEthereumChain } from "@/utils";
+import { useSectionUri } from "@/hooks";
 
 const Switch: VFC = () => {
 	const section = useSectionUri();
-	const { extension } = useMetaMaskExtension();
-
-	useEffect(() => {
-		if (!extension) return;
-
-		if (section === "bridge") void ensureEthereumChain(extension);
-	}, [extension, section]);
 
 	return (
 		<nav css={styles.container}>

components/BridgeForm.tsx

@@ -9,6 +9,8 @@ import BridgeWithdrawAdvanced from "@/components/BridgeWithdrawAdvanced";
 import { useDepositRequest, useWithdrawRequest } from "@/hooks";
 import { useWalletProvider } from "@/providers/WalletProvider";
 import { ETH_CHAIN_ID } from "@/constants";
+import { useMetaMaskExtension } from "@/providers/MetaMaskExtensionProvider";
+import { ensureEthereumChain } from "@/utils";
 
 interface BridgeFormProps {}
 
@@ -18,6 +20,7 @@ const BridgeForm: FC<IntrinsicElements["form"] & BridgeFormProps> = ({
 }) => {
 	const { bridgeAction } = useBridge();
 	const { connectedChain } = useWalletProvider();
+	const { extension } = useMetaMaskExtension();
 
 	const [buttonLabel, setButtonLabel] = useState<string>("Deposit");
 
@@ -61,11 +64,13 @@ const BridgeForm: FC<IntrinsicElements["form"] & BridgeFormProps> = ({
 					</div>
 				)}
 
-				{!!connectedChain && connectedChain !== "Ethereum" && (
-					<div css={styles.formNote}>
-						Please connect to{" "}
-						{ETH_CHAIN_ID === 1 ? "Ethereum Mainnet" : "Kovan Test Network"} in
-						MetaMask.
+				{connectedChain !== "Ethereum" && (
+					<div
+						css={styles.formNote(true)}
+						onClick={() => ensureEthereumChain(extension)}
+					>
+						Connect to{" "}
+						{ETH_CHAIN_ID === 1 ? "Ethereum Mainnet" : "Kovan Test Network"}
 					</div>
 				)}
 			</div>
@@ -88,10 +93,19 @@ const styles = {
 		margin: 2em -2.5em 0;
 	`,
 
-	formNote: ({ palette }: Theme) => css`
-		font-size: 14px;
-		margin: 1em auto 0;
-		color: ${palette.grey["800"]};
-		width: 240px;
-	`,
+	formNote:
+		(isMetaMask?: boolean) =>
+		({ palette }: Theme) =>
+			css`
+				font-size: 14px;
+				margin: 1em auto 0;
+				color: ${palette.grey["800"]};
+				width: 240px;
+
+				${isMetaMask && `
+					cursor: pointer;
+					font-style: italic;
+					text-decoration: underline;
+				`}
+			`,
 };

hooks/useBridgeStatus.ts

@@ -4,22 +4,24 @@ import { useMetaMaskWallet } from "@/providers/MetaMaskWalletProvider";
 import { BridgeStatus } from "@/types";
 import { fetchBridgeDepositStatus, fetchBridgeWithdrawStatus } from "@/utils";
 import { useEffect, useState } from "react";
+import { useWalletProvider } from "@/providers/WalletProvider";
 
 export default function useBridgeStatus(): BridgeStatus {
 	const [bridgeStatus, setBridgeStatus] = useState<BridgeStatus>("Active");
 	const { api } = useCENNZApi();
 	const { wallet } = useMetaMaskWallet();
 	const { bridgeAction } = useBridge();
+	const { connectedChain } = useWalletProvider();
 
 	useEffect(() => {
-		if (!api || !wallet) return;
+		if (!api || !wallet || connectedChain !== "Ethereum") return;
 
 		if (bridgeAction === "Deposit")
 			fetchBridgeDepositStatus(api, wallet).then(setBridgeStatus);
 
 		if (bridgeAction === "Withdraw")
 			fetchBridgeWithdrawStatus(api, wallet).then(setBridgeStatus);
-	}, [bridgeAction, api, wallet]);
+	}, [bridgeAction, api, wallet, connectedChain]);
 
 	return bridgeStatus;
 }

hooks/useBridgeVerificationFee.ts

@@ -2,6 +2,7 @@ import { useBridge } from "@/providers/BridgeProvider";
 import { useMetaMaskWallet } from "@/providers/MetaMaskWalletProvider";
 import { Balance, getBridgeContract } from "@/utils";
 import { useCallback, useEffect, useState } from "react";
+import { useWalletProvider } from "@/providers/WalletProvider";
 
 interface BridgeVerificationFeeHook {
 	verificationFee: Balance;
@@ -10,10 +11,11 @@ interface BridgeVerificationFeeHook {
 }
 
 export default function useBridgeVerificationFee(): BridgeVerificationFeeHook {
+	const { ethAsset } = useBridge();
 	const { wallet } = useMetaMaskWallet();
+	const { connectedChain } = useWalletProvider();
 	const [loading, setLoading] = useState<boolean>(true);
 	const [verificationFee, setVerificationFee] = useState<Balance>(null);
-	const { ethAsset } = useBridge();
 
 	const updateVerificationFee = useCallback(async () => {
 		if (!wallet) return;
@@ -26,8 +28,9 @@ export default function useBridgeVerificationFee(): BridgeVerificationFeeHook {
 	}, [wallet, ethAsset]);
 
 	useEffect(() => {
-		updateVerificationFee?.();
-	}, [updateVerificationFee]);
+		if (connectedChain !== "Ethereum") return;
+		void updateVerificationFee?.();
+	}, [updateVerificationFee, connectedChain]);
 
 	return {
 		verificationFee,

providers/MetaMaskWalletProvider.tsx

@@ -9,6 +9,8 @@ import {
 } from "react";
 import { ethers } from "ethers";
 import { MetaMaskAccount } from "@/types";
+import { ensureEthereumChain } from "@/utils";
+import { useSectionUri } from "@/hooks";
 
 interface MetaMaskWalletContextType {
 	connectWallet: (callback?: () => void) => Promise<void>;
@@ -31,13 +33,17 @@ const MetaMaskWalletProvider: FC<MetaMaskWalletProviderProps> = ({
 	const [selectedAccount, setSelectedAccount] =
 		useState<MetaMaskWalletContextType["selectedAccount"]>(null);
 
+	const section = useSectionUri();
+
 	const connectWallet = useCallback(
 		async (callback) => {
 			if (!extension) {
 				callback?.();
 				return promptInstallExtension();
 			}
 
+			if (section === "bridge") await ensureEthereumChain(extension);
+
 			const accounts = (await extension.request({
 				method: "eth_requestAccounts",
 			})) as string[];
@@ -50,7 +56,7 @@ const MetaMaskWalletProvider: FC<MetaMaskWalletProviderProps> = ({
 			setSelectedAccount({ address: accounts[0] });
 			setWallet(new ethers.providers.Web3Provider(extension as any, "any"));
 		},
-		[extension, promptInstallExtension]
+		[extension, promptInstallExtension, section]
 	);
 
 	useEffect(() => {