pending chain id change

src/components/modals/SwitchNetwork.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState, useEffect } from 'react';
 import {
 	B,
 	brandColors,
@@ -28,6 +28,7 @@ const defaultNetworks = Object.keys(networksConfig).map(key => ({
 	networkId: Number(key),
 	chainType: networksConfig[Number(key)].chainType,
 }));
+
 interface ISwitchNetworkModal extends IModal {
 	desc?: string;
 	customNetworks?: INetworkIdWithChain[];
@@ -39,11 +40,15 @@ const SwitchNetwork: FC<ISwitchNetworkModal> = ({
 	setShowModal,
 }) => {
 	const { isAnimating, closeModal } = useModalAnimation(setShowModal);
-
 	const { switchChain } = useSwitchChain();
 	const { formatMessage } = useIntl();
-	const { walletChainType, handleSingOutAndSignInWithEVM, chain } =
-		useGeneralWallet();
+	const {
+		walletChainType,
+		handleSingOutAndSignInWithEVM,
+		pendingNetworkId,
+		setPendingNetworkId,
+		chain,
+	} = useGeneralWallet();
 	const chainId = (chain as Chain)?.id;
 	const theme = useAppSelector(state => state.general.theme);
 
@@ -55,6 +60,17 @@ const SwitchNetwork: FC<ISwitchNetworkModal> = ({
 			};
 		}) || defaultNetworks;
 
+	const handleNetworkItemClick = (networkId: number) => {
+		if (walletChainType === ChainType.SOLANA) {
+			setPendingNetworkId(networkId);
+			handleSingOutAndSignInWithEVM();
+			closeModal(); // Close the modal since we cannot control the wallet modal
+		} else {
+			switchChain?.({ chainId: networkId });
+			closeModal();
+		}
+	};
+
 	return (
 		<Modal
 			headerTitle={formatMessage({ id: 'label.switch_network' })}
@@ -67,13 +83,7 @@ const SwitchNetwork: FC<ISwitchNetworkModal> = ({
 				{desc && <P>{desc}</P>}
 				{networks?.map(({ networkId, chainType }) => (
 					<NetworkItem
-						onClick={() => {
-							if (walletChainType === ChainType.SOLANA) {
-								handleSingOutAndSignInWithEVM();
-							}
-							switchChain?.({ chainId: networkId });
-							closeModal();
-						}}
+						onClick={() => handleNetworkItemClick(networkId)}
 						$isSelected={networkId === chainId}
 						key={networkId}
 						$baseTheme={theme}

src/providers/generalWalletProvider.tsx

@@ -14,7 +14,7 @@ import {
 	Transaction,
 	SystemProgram,
 } from '@solana/web3.js';
-import { useBalance, useDisconnect, useAccount } from 'wagmi';
+import { useBalance, useDisconnect, useAccount, useSwitchChain } from 'wagmi';
 import { getWalletClient } from '@wagmi/core';
 import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
 import { useWeb3Modal } from '@web3modal/wagmi/react';
@@ -58,6 +58,8 @@ interface IGeneralWalletContext {
 	handleSignOutAndShowWelcomeModal: () => Promise<void>;
 	isOnSolana: boolean;
 	isOnEVM: boolean;
+	pendingNetworkId: number | null;
+	setPendingNetworkId: (id: number | null) => void;
 }
 // Create the context
 export const GeneralWalletContext = createContext<IGeneralWalletContext>({
@@ -76,6 +78,8 @@ export const GeneralWalletContext = createContext<IGeneralWalletContext>({
 	handleSignOutAndShowWelcomeModal: async () => {},
 	isOnSolana: false,
 	isOnEVM: false,
+	pendingNetworkId: null,
+	setPendingNetworkId: () => {},
 });
 
 const getPhantomSolanaProvider = () => {
@@ -93,6 +97,9 @@ export const GeneralWalletProvider: React.FC<{
 	const [walletChainType, setWalletChainType] = useState<ChainType | null>(
 		null,
 	);
+	const [pendingNetworkId, setPendingNetworkId] = useState<number | null>(
+		null,
+	);
 	const [walletAddress, setWalletAddress] = useState<string | null>(null);
 	const [balance, setBalance] = useState<string>();
 	const [isConnected, setIsConnected] = useState<boolean>(false);
@@ -106,6 +113,7 @@ export const GeneralWalletProvider: React.FC<{
 	const router = useRouter();
 	const { token } = useAppSelector(state => state.user);
 	const { setVisible, visible } = useWalletModal();
+	const { switchChain } = useSwitchChain();
 
 	const isGIVeconomyRoute = useMemo(
 		() => checkIsGIVeconomyRoute(router.route),
@@ -266,6 +274,13 @@ export const GeneralWalletProvider: React.FC<{
 		}
 	}, [walletChainType, nonFormattedEvBalance, solanaBalance]);
 
+	useEffect(() => {
+		if (walletChainType === ChainType.EVM && pendingNetworkId !== null) {
+			switchChain?.({ chainId: pendingNetworkId });
+			setPendingNetworkId(null);
+		}
+	}, [walletChainType, pendingNetworkId]);
+
 	const signMessage = async (
 		message: string,
 	): Promise<string | undefined> => {
@@ -408,6 +423,8 @@ export const GeneralWalletProvider: React.FC<{
 		handleSignOutAndShowWelcomeModal,
 		isOnSolana,
 		isOnEVM,
+		pendingNetworkId,
+		setPendingNetworkId,
 	};
 
 	// Render the provider component with the provided context value