[SDK] fix: Handle wallet chain mismatch on post onramp flow

.changeset/quiet-melons-jump.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Handle wallet chain mismatch on post onramp flow

apps/playground-web/src/components/pay/embed.tsx

@@ -18,10 +18,6 @@ export function StyledPayEmbedPreview() {
     <div className="flex flex-col items-center justify-center">
       <StyledConnectButton
         chains={[base, defineChain(466), arbitrum, treasure, arbitrumNova]}
-        accountAbstraction={{
-          sponsorGas: true,
-          chain: base,
-        }}
         supportedTokens={{
           466: [
             {
@@ -54,12 +50,6 @@ export function StyledPayEmbedPreview() {
       <PayEmbed
         client={THIRDWEB_CLIENT}
         theme={theme === "light" ? "light" : "dark"}
-        connectOptions={{
-          accountAbstraction: {
-            sponsorGas: true,
-            chain: base,
-          },
-        }}
         payOptions={{
           mode: "fund_wallet",
           metadata: {

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/OnRampScreen.tsx

@@ -634,19 +634,32 @@
       amount: string;
     }) => {
       const { fromToken, toToken, amount } = input;
+      const wallet = props.payer.wallet;
+
+      // in case the wallet is not on the same chain as the fromToken, switch to it
+      if (wallet.getChain()?.id !== fromToken.chainId) {
+        await wallet.switchChain(getCachedChain(fromToken.chainId));
+      }
+
+      const account = wallet.getAccount();
+
+      if (!account) {
+        throw new Error("Payer wallet has no account");
+      }
+
       // always get a fresh quote before executing
       const quote = await getBuyWithCryptoQuote({
         fromChainId: fromToken.chainId,
         fromTokenAddress: fromToken.tokenAddress,
         toAmount: amount,
         toChainId: toToken.chainId,
         toTokenAddress: toToken.tokenAddress,
-        fromAddress: props.payer.account.address,
-        toAddress: props.payer.account.address,
+        fromAddress: account.address,
+        toAddress: account.address,
         client: props.client,
       });
 
-      const canBatch = props.payer.account.sendBatchTransaction;
+      const canBatch = account.sendBatchTransaction;
       const tokenContract = getContract({
         client: props.client,
         address: quote.swapDetails.fromToken.tokenAddress,
@@ -656,14 +669,14 @@
         quote.approvalData &&
         (await allowance({
           contract: tokenContract,
-          owner: props.payer.account.address,
+          owner: account.address,
           spender: quote.approvalData.spenderAddress,
         })) < BigInt(quote.approvalData.amountWei);
       if (approveTxRequired && quote.approvalData && !canBatch) {
         trackPayEvent({
           event: "prompt_swap_approval",
           client: props.client,
-          walletAddress: props.payer.account.address,
+          walletAddress: account.address,
           walletType: props.payer.wallet.id,
           fromToken: quote.swapDetails.fromToken.tokenAddress,
           fromAmount: quote.swapDetails.fromAmountWei,
@@ -680,7 +693,7 @@
         });
 
         const tx = await sendTransaction({
-          account: props.payer.account,
+          account,
           transaction,
         });
 
@@ -689,7 +702,7 @@
         trackPayEvent({
           event: "swap_approval_success",
           client: props.client,
-          walletAddress: props.payer.account.address,
+          walletAddress: account.address,
           walletType: props.payer.wallet.id,
           fromToken: quote.swapDetails.fromToken.tokenAddress,
           fromAmount: quote.swapDetails.fromAmountWei,
@@ -703,7 +716,7 @@
       trackPayEvent({
         event: "prompt_swap_execution",
         client: props.client,
-        walletAddress: props.payer.account.address,
+        walletAddress: account.address,
         walletType: props.payer.wallet.id,
         fromToken: quote.swapDetails.fromToken.tokenAddress,
         fromAmount: quote.swapDetails.fromAmountWei,
@@ -723,12 +736,12 @@
         });
 
         _swapTx = await sendBatchTransaction({
-          account: props.payer.account,
+          account,
           transactions: [approveTx, tx],
         });
       } else {
         _swapTx = await sendTransaction({
-          account: props.payer.account,
+          account,
           transaction: tx,
         });
       }
@@ -738,7 +751,7 @@
       trackPayEvent({
         event: "swap_execution_success",
         client: props.client,
-        walletAddress: props.payer.account.address,
+        walletAddress: account.address,
         walletType: props.payer.wallet.id,
         fromToken: quote.swapDetails.fromToken.tokenAddress,
         fromAmount: quote.swapDetails.fromAmountWei,

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx

@@ -160,15 +160,28 @@
             fullWidth
             disabled={status === "pending"}
             onClick={async () => {
+              const wallet = props.payer.wallet;
+
+              // in case the wallet is not on the same chain as the fromToken, switch to it
+              if (wallet.getChain()?.id !== props.fromChain.id) {
+                await wallet.switchChain(props.fromChain);
+              }
+
+              const account = wallet.getAccount();
+
+              if (!account) {
+                throw new Error("Payer wallet has no account");
+              }
+
               if (step === "approval" && props.quote.approvalData) {
                 try {
                   setStatus("pending");
 
                   trackPayEvent({
                     event: "prompt_swap_approval",
                     client: props.client,
-                    walletAddress: props.payer.account.address,
-                    walletType: props.payer.wallet.id,
+                    walletAddress: account.address,
+                    walletType: wallet.id,
                     fromToken: props.quote.swapDetails.fromToken.tokenAddress,
                     fromAmount: props.quote.swapDetails.fromAmountWei,
                     toToken: props.quote.swapDetails.toToken.tokenAddress,
@@ -188,7 +201,7 @@
                   });
 
                   const tx = await sendTransaction({
-                    account: props.payer.account,
+                    account: account,
                     transaction,
                   });
 
@@ -197,8 +210,8 @@
                   trackPayEvent({
                     event: "swap_approval_success",
                     client: props.client,
-                    walletAddress: props.payer.account.address,
-                    walletType: props.payer.wallet.id,
+                    walletAddress: account.address,
+                    walletType: wallet.id,
                     fromToken: props.quote.swapDetails.fromToken.tokenAddress,
                     fromAmount: props.quote.swapDetails.fromAmountWei,
                     toToken: props.quote.swapDetails.toToken.tokenAddress,
@@ -221,8 +234,8 @@
                   trackPayEvent({
                     event: "prompt_swap_execution",
                     client: props.client,
-                    walletAddress: props.payer.account.address,
-                    walletType: props.payer.wallet.id,
+                    walletAddress: account.address,
+                    walletType: wallet.id,
                     fromToken: props.quote.swapDetails.fromToken.tokenAddress,
                     fromAmount: props.quote.swapDetails.fromAmountWei,
                     toToken: props.quote.swapDetails.toToken.tokenAddress,
@@ -233,7 +246,7 @@
                   const tx = props.quote.transactionRequest;
                   let _swapTx: WaitForReceiptOptions;
                   // check if we can batch approval and swap
-                  const canBatch = props.payer.account.sendBatchTransaction;
+                  const canBatch = account.sendBatchTransaction;
                   if (
                     canBatch &&
                     props.quote.approvalData &&
@@ -250,21 +263,21 @@
                     });
 
                     _swapTx = await sendBatchTransaction({
-                      account: props.payer.account,
+                      account: account,
                       transactions: [approveTx, tx],
                     });
                   } else {
                     _swapTx = await sendTransaction({
-                      account: props.payer.account,
+                      account: account,
                       transaction: tx,
                     });
                   }
 
                   trackPayEvent({
                     event: "swap_execution_success",
                     client: props.client,
-                    walletAddress: props.payer.account.address,
-                    walletType: props.payer.wallet.id,
+                    walletAddress: account.address,
+                    walletType: wallet.id,
                     fromToken: props.quote.swapDetails.fromToken.tokenAddress,
                     fromAmount: props.quote.swapDetails.fromAmountWei,
                     toToken: props.quote.swapDetails.toToken.tokenAddress,

packages/thirdweb/src/wallets/smart/index.ts

@@ -264,11 +264,12 @@
         executeOverride: options.overrides?.execute,
       });
 
+      const chain = getCachedChain(transaction.chainId);
       const result = await _sendUserOp({
         executeTx,
         options: {
           ...options,
-          chain: getCachedChain(transaction.chainId),
+          chain,
           accountContract,
           overrides: {
             ...options.overrides,
@@ -278,7 +279,7 @@
       });
       trackTransaction({
         client: options.client,
-        chainId: options.chain.id,
+        chainId: chain.id,
         transactionHash: result.transactionHash,
         walletAddress: options.accountContract.address,
         walletType: "smart",
@@ -292,17 +293,25 @@
         transactions,
         executeBatchOverride: options.overrides?.executeBatch,
       });
+      if (transactions.length === 0) {
+        throw new Error("No transactions to send");
+      }
+      const firstTx = transactions[0];
+      if (!firstTx) {
+        throw new Error("No transactions to send");
+      }
+      const chain = getCachedChain(firstTx.chainId);
       const result = await _sendUserOp({
         executeTx,
         options: {
           ...options,
-          chain: getCachedChain(transactions[0]?.chainId ?? options.chain.id),
+          chain,
           accountContract,
         },
       });
       trackTransaction({
         client: options.client,
-        chainId: options.chain.id,
+        chainId: chain.id,
         transactionHash: result.transactionHash,
         walletAddress: options.accountContract.address,
         walletType: "smart",