Merge pull request #4770 from Giveth/changing-network-bug

FIX: switching networks bug
Giveth · Oct 28, 2024 · 02a85a3 · 02a85a3
2 parents 4c6bd33 + 8c75399
commit 02a85a3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/src/components/modals/SwitchNetwork.tsx b/src/components/modals/SwitchNetwork.tsx
@@ -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,12 +40,12 @@ const SwitchNetwork: FC<ISwitchNetworkModal> = ({
 	setShowModal,
 }) => {
 	const { isAnimating, closeModal } = useModalAnimation(setShowModal);
-
 	const { switchChain } = useSwitchChain();
 	const { formatMessage } = useIntl();
 	const {
 		walletChainType,
 		handleSingOutAndSignInWithEVM,
+		setPendingNetworkId,
 		handleSignOutAndSignInWithSolana,
 		chain,
 	} = useGeneralWallet();
@@ -59,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' })}
@@ -71,20 +83,7 @@ const SwitchNetwork: FC<ISwitchNetworkModal> = ({
 				{desc && <P>{desc}</P>}
 				{networks?.map(({ networkId, chainType }) => (
 					<NetworkItem
-						onClick={() => {
-							if (walletChainType === ChainType.SOLANA) {
-								handleSingOutAndSignInWithEVM();
-							}
-							if (
-								walletChainType === ChainType.EVM &&
-								chainType === ChainType.SOLANA
-							) {
-								handleSignOutAndSignInWithSolana();
-							} else {
-								switchChain?.({ chainId: networkId });
-							}
-							closeModal();
-						}}
+						onClick={() => handleNetworkItemClick(networkId)}
 						$isSelected={networkId === chainId}
 						key={networkId}
 						$baseTheme={theme}

diff --git a/src/providers/generalWalletProvider.tsx b/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,7 @@ interface IGeneralWalletContext {
 	handleSignOutAndShowWelcomeModal: () => Promise<void>;
 	isOnSolana: boolean;
 	isOnEVM: boolean;
+	setPendingNetworkId: (id: number | null) => void;
 }
 // Create the context
 export const GeneralWalletContext = createContext<IGeneralWalletContext>({
@@ -76,6 +77,7 @@ export const GeneralWalletContext = createContext<IGeneralWalletContext>({
 	handleSignOutAndShowWelcomeModal: async () => {},
 	isOnSolana: false,
 	isOnEVM: false,
+	setPendingNetworkId: () => {},
 });
 
 const getPhantomSolanaProvider = () => {
@@ -93,6 +95,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 +111,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 +272,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 +421,7 @@ export const GeneralWalletProvider: React.FC<{
 		handleSignOutAndShowWelcomeModal,
 		isOnSolana,
 		isOnEVM,
+		setPendingNetworkId,
 	};
 
 	// Render the provider component with the provided context value