fix(checkout): pin wallet/public clients to checkout chain v6

packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx

@@ -165,12 +165,28 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
     }
   )
 
+  const isTargetWalletClientReady = !!walletClient
+  const isTargetPublicClientReady = publicClient?.chain?.id === chainId
+
   useEffect(() => {
-    if (isSwitchingChainRef.current && connectedChainId == Number(chainId) && !isLoadingWalletClient) {
+    if (
+      isSwitchingChainRef.current &&
+      connectedChainId === chainId &&
+      !isLoadingWalletClient &&
+      isTargetWalletClientReady &&
+      isTargetPublicClientReady
+    ) {
       isSwitchingChainRef.current = false
       onClickPurchase()
     }
-  }, [connectedChainId, chainId, isLoadingWalletClient, isSwitchingChainRef.current])
+  }, [
+    connectedChainId,
+    chainId,
+    isLoadingWalletClient,
+    isSwitchingChainRef,
+    isTargetWalletClientReady,
+    isTargetPublicClientReady
+  ])
 
   const isNotEnoughBalanceError =
     typeof swapQuoteError?.cause === 'string' && swapQuoteError?.cause?.includes('not enough balance for swap')
@@ -230,20 +246,9 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
   const priceFiat = (fiatExchangeRate * Number(formattedPrice)).toFixed(2)
 
   const onPurchaseMainCurrency = async () => {
-    if (!walletClient || isErrorWalletClient || errorWalletClient) {
-      throw new Error('Wallet client is not available. Please ensure your wallet is connected.', {
-        cause: errorWalletClient
-      })
-    }
     if (!userAddress) {
       throw new Error('User address is not available. Please ensure your wallet is connected.')
     }
-    if (!publicClient) {
-      throw new Error('Public client is not available. Please check your network connection.')
-    }
-    if (!indexerClient) {
-      throw new Error('Indexer client is not available. Please check your network connection.')
-    }
     if (!connector) {
       throw new Error('Wallet connector is not available. Please ensure your wallet is properly connected.')
     }
@@ -258,6 +263,18 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
         return
       }
 
+      if (!walletClient || isErrorWalletClient || errorWalletClient) {
+        throw new Error('Wallet client is not available. Please ensure your wallet is connected.', {
+          cause: errorWalletClient
+        })
+      }
+      if (!publicClient || publicClient.chain?.id !== chainId) {
+        throw new Error('Public client is not ready for the selected network. Please try again.')
+      }
+      if (!indexerClient) {
+        throw new Error('Indexer client is not available. Please check your network connection.')
+      }
+
       const approveTxData = encodeFunctionData({
         abi: ERC_20_CONTRACT_ABI,
         functionName: 'approve',
@@ -380,15 +397,9 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
   }
 
   const onClickPurchaseSwap = async () => {
-    if (!walletClient) {
-      throw new Error('Wallet client is not available. Please ensure your wallet is connected.')
-    }
     if (!userAddress) {
       throw new Error('User address is not available. Please ensure your wallet is connected.')
     }
-    if (!publicClient) {
-      throw new Error('Public client is not available. Please check your network connection.')
-    }
     if (!connector) {
       throw new Error('Wallet connector is not available. Please ensure your wallet is properly connected.')
     }
@@ -406,6 +417,18 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
         return
       }
 
+      if (!walletClient || isErrorWalletClient || errorWalletClient) {
+        throw new Error('Wallet client is not available. Please ensure your wallet is connected.', {
+          cause: errorWalletClient
+        })
+      }
+      if (!publicClient || publicClient.chain?.id !== chainId) {
+        throw new Error('Public client is not ready for the selected network. Please try again.')
+      }
+      if (!indexerClient) {
+        throw new Error('Indexer client is not available. Please check your network connection.')
+      }
+
       const approveTxData = encodeFunctionData({
         abi: ERC_20_CONTRACT_ABI,
         functionName: 'approve',

packages/checkout/src/views/Swap/index.tsx

@@ -84,12 +84,28 @@ export const Swap = () => {
     return map
   }, [tokenBalances])
 
+  const isTargetWalletClientReady = !!walletClient
+  const isTargetPublicClientReady = publicClient?.chain?.id === chainId
+
   useEffect(() => {
-    if (isSwitchingChain && connectedChainId == Number(chainId) && !isLoadingWalletClient) {
+    if (
+      isSwitchingChain &&
+      connectedChainId === chainId &&
+      !isLoadingWalletClient &&
+      isTargetWalletClientReady &&
+      isTargetPublicClientReady
+    ) {
       setIsSwitchingChain(false)
       onClickProceed()
     }
-  }, [connectedChainId, chainId, isLoadingWalletClient, isSwitchingChain])
+  }, [
+    connectedChainId,
+    chainId,
+    isLoadingWalletClient,
+    isSwitchingChain,
+    isTargetWalletClientReady,
+    isTargetPublicClientReady
+  ])
 
   useEffect(() => {
     // Only attempt to select a currency if none is currently selected
@@ -176,14 +192,6 @@ export const Swap = () => {
     if (!userAddress) {
       throw new Error('User address is not available. Please ensure your wallet is connected.')
     }
-    if (!publicClient) {
-      throw new Error('Public client is not available. Please check your network connection.')
-    }
-    if (!walletClient || isErrorWalletClient || errorWalletClient) {
-      throw new Error('Wallet client is not available. Please ensure your wallet is connected.', {
-        cause: errorWalletClient
-      })
-    }
     if (!connector) {
       throw new Error('Wallet connector is not available. Please ensure your wallet is properly connected.')
     }
@@ -194,6 +202,15 @@ export const Swap = () => {
       return
     }
 
+    if (!publicClient || publicClient.chain?.id !== chainId) {
+      throw new Error('Public client is not ready for the selected network. Please try again.')
+    }
+    if (!walletClient || isErrorWalletClient || errorWalletClient) {
+      throw new Error('Wallet client is not available. Please ensure your wallet is connected.', {
+        cause: errorWalletClient
+      })
+    }
+
     setIsError(false)
     setIsTxsPending(true)