[SDK] feat: Batch approvals and swaps for smart wallets (#6209)

Author: joaquim-verges

.changeset/dull-lamps-share.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Batch approvals and swaps if using smart wallets

packages/thirdweb/src/pay/buyWithCrypto/getStatus.ts

@@ -43,6 +43,7 @@ type BuyWithCryptoQuoteSummary = {
 export type BuyWithCryptoTransaction = {
   client: ThirdwebClient;
   transactionHash: string;
+  chainId: number; // optional for backwards compatibility
 };
 
 type BuyWithCryptoStatuses = "NONE" | "PENDING" | "FAILED" | "COMPLETED";
@@ -133,6 +134,7 @@ export async function getBuyWithCryptoStatus(
     }
     const queryString = new URLSearchParams({
       transactionHash: buyWithCryptoTransaction.transactionHash,
+      chainId: buyWithCryptoTransaction.chainId.toString(),
     }).toString();
     const url = `${getPayBuyWithCryptoStatusUrl()}?${queryString}`;
 

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx

@@ -34,6 +34,7 @@ export function SwapDetailsScreen(props: {
       ? {
           client: client,
           transactionHash: initialStatus.source.transactionHash,
+          chainId: initialStatus.source.token.chainId,
         }
       : undefined,
   );

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/useBuyTransactionsToShow.ts

@@ -57,6 +57,7 @@ export function useBuyTransactionsToShow(client: ThirdwebClient) {
             const swapStatus = await getBuyWithCryptoStatus({
               client: client,
               transactionHash: tx.txHash,
+              chainId: tx.chainId,
             });
 
             if (

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

@@ -6,8 +6,12 @@ import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { getContract } from "../../../../../../../contract/contract.js";
 import { approve } from "../../../../../../../extensions/erc20/write/approve.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import { sendBatchTransaction } from "../../../../../../../transaction/actions/send-batch-transaction.js";
 import { sendTransaction } from "../../../../../../../transaction/actions/send-transaction.js";
-import { waitForReceipt } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
+import {
+  type WaitForReceiptOptions,
+  waitForReceipt,
+} from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
 import { shortenAddress } from "../../../../../../../utils/address.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
@@ -55,11 +59,13 @@ export function SwapConfirmationScreen(props: {
   payer: PayerInfo;
   preApprovedAmount?: bigint;
 }) {
-  const needsApproval =
+  const approveTxRequired =
     props.quote.approvalData &&
     props.preApprovedAmount !== undefined &&
     props.preApprovedAmount < BigInt(props.quote.approvalData.amountWei);
-  const initialStep = needsApproval ? "approval" : "swap";
+  const needsApprovalStep =
+    approveTxRequired && !props.payer.account.sendBatchTransaction;
+  const initialStep = needsApprovalStep ? "approval" : "swap";
 
   const [step, setStep] = useState<"approval" | "swap">(initialStep);
   const [status, setStatus] = useState<
@@ -142,7 +148,7 @@ export function SwapConfirmationScreen(props: {
       <Spacer y="xl" />
 
       {/* Show 2 steps - Approve and confirm  */}
-      {needsApproval && (
+      {needsApprovalStep && (
         <>
           <Spacer y="sm" />
           <Container
@@ -251,8 +257,6 @@ export function SwapConfirmationScreen(props: {
             if (step === "swap") {
               setStatus("pending");
               try {
-                const tx = props.quote.transactionRequest;
-
                 trackPayEvent({
                   event: "prompt_swap_execution",
                   client: props.client,
@@ -265,11 +269,31 @@ export function SwapConfirmationScreen(props: {
                   chainId: props.quote.swapDetails.fromToken.chainId,
                   dstChainId: props.quote.swapDetails.toToken.chainId,
                 });
+                const tx = props.quote.transactionRequest;
+                let _swapTx: WaitForReceiptOptions;
+                // check if we can batch approval and swap
+                const canBatch = props.payer.account.sendBatchTransaction;
+                if (canBatch && props.quote.approvalData && approveTxRequired) {
+                  const approveTx = approve({
+                    contract: getContract({
+                      client: props.client,
+                      address: props.quote.swapDetails.fromToken.tokenAddress,
+                      chain: props.fromChain,
+                    }),
+                    spender: props.quote.approvalData.spenderAddress,
+                    amountWei: BigInt(props.quote.approvalData.amountWei),
+                  });
 
-                const _swapTx = await sendTransaction({
-                  account: props.payer.account,
-                  transaction: tx,
-                });
+                  _swapTx = await sendBatchTransaction({
+                    account: props.payer.account,
+                    transactions: [approveTx, tx],
+                  });
+                } else {
+                  _swapTx = await sendTransaction({
+                    account: props.payer.account,
+                    transaction: tx,
+                  });
+                }
 
                 await waitForReceipt({ ..._swapTx, maxBlocksWaitTime: 50 });
 
@@ -291,6 +315,7 @@ export function SwapConfirmationScreen(props: {
                   addPendingTx({
                     type: "swap",
                     txHash: _swapTx.transactionHash,
+                    chainId: _swapTx.chain.id,
                   });
                 }
 

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

@@ -45,7 +45,7 @@ export function FiatValue(
     <Text {...props}>
       {cryptoToFiatQuery.data?.result
         ? `$${formatNumber(cryptoToFiatQuery.data.result, 2)}`
-        : "$0.00"}
+        : "-"}
     </Text>
   );
 }

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

@@ -82,6 +82,7 @@ export function SwapFlow(props: SwapFlowProps) {
         onBack={props.onBack}
         onTryAgain={props.onTryAgain}
         swapTxHash={swapTxHash}
+        fromChain={fromChain}
         client={props.client}
         onDone={props.onDone}
         transactionMode={props.transactionMode}

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

@@ -1,6 +1,7 @@
 import { CheckCircledIcon } from "@radix-ui/react-icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef } from "react";
+import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
@@ -21,6 +22,7 @@ export function SwapStatusScreen(props: {
   title: string;
   onBack?: () => void;
   swapTxHash: string;
+  fromChain: Chain;
   client: ThirdwebClient;
   onTryAgain: () => void;
   onDone: () => void;
@@ -34,6 +36,7 @@ export function SwapStatusScreen(props: {
   const swapStatus = useBuyWithCryptoStatus({
     client: props.client,
     transactionHash: props.swapTxHash,
+    chainId: props.fromChain.id,
   });
 
   let uiStatus: UIStatus = "pending";

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

@@ -35,6 +35,7 @@ export function TransferFlow(props: TransferFlowProps) {
         onBack={props.onBack}
         onTryAgain={props.onTryAgain}
         swapTxHash={transferTxHash}
+        fromChain={props.chain}
         client={props.client}
         onDone={props.onDone}
         transactionMode={false}

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/pendingSwapTx.ts

@@ -4,6 +4,7 @@ type PendingTxInfo =
   | {
       type: "swap";
       txHash: string;
+      chainId: number;
     }
   | {
       type: "fiat";