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

@@ -1,13 +1,17 @@
 import { FC, useCallback, useEffect, useState } from "react";
 import { IntrinsicElements } from "@/types";
-import SubmitButton from "@/components/shared/SubmitButton";
 import { css } from "@emotion/react";
 import { Theme } from "@mui/material";
 import { useBridge } from "@/providers/BridgeProvider";
-import useBridgeStatus from "@/hooks/useBridgeStatus";
-import BridgeWithdrawAdvanced from "@/components/BridgeWithdrawAdvanced";
-import { useDepositRequest, useWithdrawRequest } from "@/hooks";
 import { useWalletProvider } from "@/providers/WalletProvider";
+import SubmitButton from "@/components/shared/SubmitButton";
+import BridgeWithdrawAdvanced from "@/components/BridgeWithdrawAdvanced";
+import {
+	useBridgeStatus,
+	useDepositRequest,
+	useEnsureEthereumChain,
+	useWithdrawRequest,
+} from "@/hooks";
 import { ETH_CHAIN_ID } from "@/constants";
 
 interface BridgeFormProps {}
@@ -18,6 +22,7 @@ const BridgeForm: FC<IntrinsicElements["form"] & BridgeFormProps> = ({
 }) => {
 	const { bridgeAction } = useBridge();
 	const { connectedChain } = useWalletProvider();
+	const ensureEthereumChain = useEnsureEthereumChain();
 
 	const [buttonLabel, setButtonLabel] = useState<string>("Deposit");
 
@@ -61,11 +66,10 @@ 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}>
+						Connect to{" "}
+						{ETH_CHAIN_ID === 1 ? "Ethereum Mainnet" : "Kovan Test Network"}
 					</div>
 				)}
 			</div>
@@ -88,10 +92,20 @@ 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;
+				`}
+			`,
 };

components/BridgeUnclaimedWithdrawals.tsx

@@ -13,10 +13,12 @@ import {
 import { useHistoricalWithdrawRequest } from "@/hooks";
 import { getMinutesAndSeconds } from "@/utils";
 import { useBridge } from "@/providers/BridgeProvider";
+import { useWalletProvider } from "@/providers/WalletProvider";
 import { WithdrawClaim } from "@/types";
 
 const BridgeUnclaimedWithdrawals: VFC = () => {
 	const { unclaimedWithdrawals } = useBridge();
+	const { connectedChain } = useWalletProvider();
 	const processHistoricalRequest = useHistoricalWithdrawRequest();
 
 	const someUnclaimed = unclaimedWithdrawals?.some(
@@ -56,8 +58,9 @@ const BridgeUnclaimedWithdrawals: VFC = () => {
 									{/* Action */}
 									<TableCell css={styles.column}>
 										<button
-											onClick={() => processHistoricalRequest(unclaimed)}
 											type="button"
+											disabled={connectedChain !== "Ethereum"}
+											onClick={() => processHistoricalRequest(unclaimed)}
 										>
 											Claim
 										</button>
@@ -187,10 +190,16 @@ const styles = {
 			border: 1px solid ${palette.primary.main};
 			color: ${palette.primary.main};
 
-			&:hover {
+			&:hover:not(:disabled) {
 				background-color: ${palette.primary.main};
 				color: white;
 			}
+
+			&:disabled {
+				color: ${palette.grey["500"]};
+				border-color: ${palette.grey["500"]};
+				cursor: not-allowed;
+			}
 		}
 	`,
 

components/WalletSelect.tsx

@@ -7,19 +7,28 @@ import MetaMaskIconSVG from "@/assets/vectors/metamask.svg";
 import { WalletOption } from "@/types";
 import { useMetaMaskWallet } from "@/providers/MetaMaskWalletProvider";
 import { useCENNZWallet } from "@/providers/CENNZWalletProvider";
+import { useEnsureEthereumChain } from "@/hooks";
 
 const WalletSelect: VFC = () => {
 	const { setSelectedWallet } = useWalletProvider();
 	const { connectWallet: connectCENNZWallet } = useCENNZWallet();
 	const { connectWallet: connectMetaMaskWallet } = useMetaMaskWallet();
 
+	const ensureEthereumChain = useEnsureEthereumChain();
+
 	const onOptionClick = useCallback(
 		(wallet: WalletOption) => {
 			setSelectedWallet(wallet);
 			if (wallet === "CENNZnet") return connectCENNZWallet();
-			if (wallet === "MetaMask") return connectMetaMaskWallet();
+			if (wallet === "MetaMask")
+				return connectMetaMaskWallet(ensureEthereumChain);
 		},
-		[setSelectedWallet, connectCENNZWallet, connectMetaMaskWallet]
+		[
+			setSelectedWallet,
+			connectCENNZWallet,
+			connectMetaMaskWallet,
+			ensureEthereumChain,
+		]
 	);
 
 	return (
@@ -59,7 +68,7 @@ const WalletSelect: VFC = () => {
 export default WalletSelect;
 
 const styles = {
-	modalContent: ({ palette }: Theme) => css`
+	modalContent: css`
 		position: absolute;
 		top: calc(4em + 48px);
 		right: 3em;

components/shared/SubmitButton.tsx

@@ -5,7 +5,7 @@ import MetaMaskSVG from "@/assets/vectors/metamask.svg";
 import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
 import { useMetaMaskWallet } from "@/providers/MetaMaskWalletProvider";
 import { useWalletProvider } from "@/providers/WalletProvider";
-import { useSelectedAccount } from "@/hooks";
+import { useEnsureEthereumChain, useSelectedAccount } from "@/hooks";
 
 interface SubmitButtonProps {
 	forceRequireMetaMask?: boolean;
@@ -20,6 +20,7 @@ const SubmitButton: FC<
 		connectWallet: connectMetaMaskWallet,
 	} = useMetaMaskWallet();
 	const selectedAccount = useSelectedAccount();
+	const ensureEthereumChain = useEnsureEthereumChain();
 
 	const isConnected = useMemo(
 		() => !!selectedWallet || !!selectedAccount,
@@ -44,6 +45,10 @@ const SubmitButton: FC<
 		}, 500);
 	}, [setWalletOpen]);
 
+	const onConnectMetaMaskClick = useCallback(async () => {
+		await connectMetaMaskWallet(ensureEthereumChain);
+	}, [ensureEthereumChain, connectMetaMaskWallet]);
+
 	return (
 		<>
 			{!isConnected && (
@@ -63,7 +68,7 @@ const SubmitButton: FC<
 						<button
 							type="button"
 							css={[styles.root, styles.metaMaskButton]}
-							onClick={() => connectMetaMaskWallet()}
+							onClick={onConnectMetaMaskClick}
 						>
 							<img
 								src={MetaMaskSVG.src}

hooks/index.ts

@@ -10,6 +10,7 @@ export { default as usePoolGasFee } from "@/hooks/usePoolGasFee";
 export { default as usePoolCoreAssetValue } from "@/hooks/usePoolCoreAssetValue";
 export { default as useBalanceValidation } from "@/hooks/useBalanceValidation";
 export { default as useBridgeGasFee } from "@/hooks/useBridgeGasFee";
+export { default as useBridgeStatus } from "@/hooks/useBridgeStatus";
 export { default as useBridgeVerificationFee } from "@/hooks/useBridgeVerificationFee";
 export { default as useBlockHashValidation } from "@/hooks/useBlockHashValidation";
 export { default as useTxStatus } from "@/hooks/useTxStatus";
@@ -20,6 +21,7 @@ export { default as useBeforeUnload } from "@/hooks/useBeforeUnload";
 export { default as useSelectedAccount } from "@/hooks/useSelectedAccount";
 export { default as useUpdateCENNZBalances } from "@/hooks/useUpdateCENNZBalances";
 export { default as useEthereumBalances } from "@/hooks/useEthereumBalances";
+export { default as useEnsureEthereumChain } from "@/hooks/useEnsureEthereumChain";
 
 export type { TokenInputHook } from "@/hooks/useTokenInput";
 export type { PoolExchangeInfoHook } from "@/hooks/usePoolExchangeInfo";

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,

hooks/useDepositRequest.ts

@@ -1,11 +1,9 @@
 import { useBridge } from "@/providers/BridgeProvider";
 import { useCENNZApi } from "@/providers/CENNZApiProvider";
-import { useMetaMaskExtension } from "@/providers/MetaMaskExtensionProvider";
 import { useMetaMaskWallet } from "@/providers/MetaMaskWalletProvider";
 import {
 	Balance,
 	ensureBridgeDepositActive,
-	ensureEthereumChain,
 	ensureRelayerDepositDone,
 	sendDepositRequest,
 } from "@/utils";
@@ -17,7 +15,6 @@ import { useUpdateCENNZBalances } from "@/hooks";
 export default function useDepositRequest(): () => Promise<void> {
 	const { api } = useCENNZApi();
 	const { wallet: metaMaskWallet } = useMetaMaskWallet();
-	const { extension } = useMetaMaskExtension();
 	const { selectedWallet } = useWalletProvider();
 	const {
 		transferInput,
@@ -47,7 +44,6 @@ export default function useDepositRequest(): () => Promise<void> {
 
 		try {
 			setTxPending();
-			await ensureEthereumChain(extension);
 			await ensureBridgeDepositActive(api, metaMaskWallet);
 			const tx = await sendDepositRequest(
 				transferAmount,
@@ -107,7 +103,6 @@ export default function useDepositRequest(): () => Promise<void> {
 		metaMaskWallet,
 		updateEthereumBalances,
 		updateCENNZBalances,
-		extension,
 		setTxIdle,
 		setTxFailure,
 		setTxPending,

hooks/useEnsureEthereumChain.ts

@@ -0,0 +1,23 @@
+import { ETH_CHAIN_ID } from "@/constants";
+import { useCallback } from "react";
+import { useMetaMaskExtension } from "@/providers/MetaMaskExtensionProvider";
+import { useSectionUri } from "@/hooks/index";
+
+export default function useEnsureEthereumChain(): () => Promise<void> {
+	const { extension } = useMetaMaskExtension();
+	const section = useSectionUri();
+
+	return useCallback(async () => {
+		if (!extension || section !== "bridge") return;
+
+		const chainId = `0x${ETH_CHAIN_ID.toString(16)}`;
+		const ethChainId = await extension.request({ method: "eth_chainId" });
+
+		if (ethChainId === chainId) return;
+
+		await extension.request({
+			method: "wallet_switchEthereumChain",
+			params: [{ chainId }],
+		});
+	}, [extension, section]);
+}

hooks/useHistoricalWithdrawRequest.ts

@@ -1,11 +1,9 @@
 import { useBridge } from "@/providers/BridgeProvider";
 import { useCENNZApi } from "@/providers/CENNZApiProvider";
-import { useMetaMaskExtension } from "@/providers/MetaMaskExtensionProvider";
 import { useMetaMaskWallet } from "@/providers/MetaMaskWalletProvider";
 import { WithdrawClaim } from "@/types";
 import {
 	ensureBridgeWithdrawActive,
-	ensureEthereumChain,
 	sendWithdrawEthereumRequest,
 } from "@/utils";
 import { useCallback } from "react";
@@ -26,7 +24,6 @@ export default function useHistoricalWithdrawRequest(): (
 	} = useBridge();
 	const { api } = useCENNZApi();
 	const { wallet: metaMaskWallet } = useMetaMaskWallet();
-	const { extension } = useMetaMaskExtension();
 
 	const updateCENNZBalances = useUpdateCENNZBalances();
 
@@ -40,7 +37,6 @@ export default function useHistoricalWithdrawRequest(): (
 
 			try {
 				setTxPending();
-				await ensureEthereumChain(extension);
 				await ensureBridgeWithdrawActive(api, metaMaskWallet);
 
 				setTxPending({
@@ -100,7 +96,6 @@ export default function useHistoricalWithdrawRequest(): (
 			transferInput.setValue,
 			transferSelect.setTokenId,
 			setTxPending,
-			extension,
 			api,
 			metaMaskWallet,
 			updateEthereumBalances,