[SDK] fix: Requery allowances on quote screen return

.changeset/stupid-experts-shake.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Requery allowances when getting back to quote screen

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

@@ -1,9 +1,6 @@
 import type { Hash } from "viem";
 import { getCachedChain } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
-import { getContract } from "../../contract/contract.js";
-import { allowance } from "../../extensions/erc20/__generated__/IERC20/read/allowance.js";
-import { approve } from "../../extensions/erc20/write/approve.js";
 import type { PrepareTransactionOptions } from "../../transaction/prepare-transaction.js";
 import { getClientFetch } from "../../utils/fetch.js";
 import { stringify } from "../../utils/json.js";
@@ -151,7 +148,7 @@
  */
 export type BuyWithCryptoQuote = {
   transactionRequest: PrepareTransactionOptions;
-  approval?: PrepareTransactionOptions;
+  approvalData?: QuoteApprovalInfo;
 
   swapDetails: {
     fromAddress: string;
@@ -254,28 +251,6 @@
 
     // check if the fromAddress already has approval for the given amount
     const approvalData = data.approval;
-    let approval = undefined;
-    if (approvalData) {
-      const contract = getContract({
-        client: params.client,
-        address: approvalData.tokenAddress,
-        chain: getCachedChain(approvalData.chainId),
-      });
-
-      const approvedAmount = await allowance({
-        contract,
-        spender: approvalData.spenderAddress,
-        owner: params.fromAddress,
-      });
-
-      if (approvedAmount < BigInt(approvalData.amountWei)) {
-        approval = approve({
-          contract,
-          spender: approvalData.spenderAddress,
-          amountWei: BigInt(approvalData.amountWei),
-        });
-      }
-    }
 
     const swapRoute: BuyWithCryptoQuote = {
       transactionRequest: {
@@ -287,7 +262,7 @@
         gas: BigInt(data.transactionRequest.gasLimit),
         gasPrice: undefined, // ignore gas price returned by the quote, we handle it ourselves
       },
-      approval: approval,
+      approvalData,
       swapDetails: {
         fromAddress: data.fromAddress,
         toAddress: data.toAddress,

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

@@ -1,8 +1,6 @@
 import type { Hash } from "viem";
 import { getCachedChain } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
-import { getContract } from "../../contract/contract.js";
-import { approve } from "../../extensions/erc20/write/approve.js";
 import type { PrepareTransactionOptions } from "../../transaction/prepare-transaction.js";
 import type { Address } from "../../utils/address.js";
 import { getClientFetch } from "../../utils/fetch.js";
@@ -83,7 +81,7 @@
  */
 export type BuyWithCryptoTransfer = {
   transactionRequest: PrepareTransactionOptions;
-  approval?: PrepareTransactionOptions;
+  approvalData?: QuoteApprovalInfo;
   fromAddress: string;
   toAddress: string;
   paymentToken: QuotePaymentToken;
@@ -159,17 +157,7 @@
         value: BigInt(data.transactionRequest.value),
         gas: BigInt(data.transactionRequest.gasLimit),
       },
-      approval: data.approval
-        ? approve({
-            contract: getContract({
-              client: params.client,
-              address: data.approval.tokenAddress,
-              chain: getCachedChain(data.approval.chainId),
-            }),
-            spender: data.approval.spenderAddress as Address,
-            amountWei: BigInt(data.approval.amountWei),
-          })
-        : undefined,
+      approvalData: data.approval,
       fromAddress: data.fromAddress,
       toAddress: data.toAddress,
       paymentToken: data.paymentToken,

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

@@ -1,8 +1,11 @@
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
 import type { Chain } from "../../../../../../chains/types.js";
+import { getCachedChain } from "../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
+import { getContract } from "../../../../../../contract/contract.js";
+import { allowance } from "../../../../../../extensions/erc20/__generated__/IERC20/read/allowance.js";
 import type { GetBuyWithCryptoQuoteParams } from "../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { BuyWithCryptoStatus } from "../../../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getStatus.js";
@@ -322,6 +325,7 @@
           });
         }}
         onSuccess={onSwapSuccess}
+        approvalAmount={screen.approvalAmount}
       />
     );
   }
@@ -992,6 +996,30 @@
     gcTime: 30 * 1000,
   });
 
+  const allowanceQuery = useQuery({
+    queryKey: [
+      "allowance",
+      payer.account.address,
+      quoteQuery.data?.approvalData,
+    ],
+    queryFn: () => {
+      if (!quoteQuery.data?.approvalData) {
+        return null;
+      }
+      return allowance({
+        contract: getContract({
+          client: props.client,
+          address: quoteQuery.data.swapDetails.fromToken.tokenAddress,
+          chain: getCachedChain(quoteQuery.data.swapDetails.fromToken.chainId),
+        }),
+        spender: quoteQuery.data.approvalData.spenderAddress,
+        owner: props.payer.account.address,
+      });
+    },
+    enabled: !!quoteQuery.data?.approvalData,
+    refetchOnMount: true,
+  });
+
   const sourceTokenAmount = swapRequired
     ? quoteQuery.data?.swapDetails.fromAmount
     : tokenAmount;
@@ -1002,7 +1030,9 @@
     Number(fromTokenBalanceQuery.data.displayValue) < Number(sourceTokenAmount);
 
   const disableContinue =
-    (swapRequired && !quoteQuery.data) || isNotEnoughBalance;
+    (swapRequired && !quoteQuery.data) ||
+    isNotEnoughBalance ||
+    allowanceQuery.isLoading;
   const switchChainRequired =
     props.payer.wallet.getChain()?.id !== fromChain.id;
 
@@ -1047,6 +1077,7 @@
     setScreen({
       id: "swap-flow",
       quote: quoteQuery.data,
+      approvalAmount: allowanceQuery.data ?? undefined,
     });
   }
 
@@ -1155,6 +1186,7 @@
         </Button>
       ) : switchChainRequired &&
         !quoteQuery.isLoading &&
+        !allowanceQuery.isLoading &&
         !isNotEnoughBalance &&
         !quoteQuery.error ? (
         <SwitchNetworkButton
@@ -1493,7 +1525,7 @@
 const defaultMessage = "Unable to get price quote";
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 function getErrorMessage(err: any): ApiError {
-  if (typeof err.error === "object") {
+  if (typeof err.error === "object" && err.error.code) {
     return err.error;
   }
   return {

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

@@ -1,6 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
+import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { getContract } from "../../../../../../../contract/contract.js";
+import { allowance } from "../../../../../../../extensions/erc20/__generated__/IERC20/read/allowance.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
 import { getPostOnRampQuote } from "../../../../../../../pay/buyWithFiat/getPostOnRampQuote.js";
@@ -43,18 +46,46 @@
     refetchOnWindowFocus: false,
   });
 
+  const allowanceQuery = useQuery({
+    queryKey: [
+      "allowance",
+      props.payer.account.address,
+      postOnRampQuoteQuery.data?.approvalData,
+    ],
+    queryFn: () => {
+      if (!postOnRampQuoteQuery.data?.approvalData) {
+        return null;
+      }
+      return allowance({
+        contract: getContract({
+          client: props.client,
+          address: postOnRampQuoteQuery.data.swapDetails.fromToken.tokenAddress,
+          chain: getCachedChain(
+            postOnRampQuoteQuery.data.swapDetails.fromToken.chainId,
+          ),
+        }),
+        spender: postOnRampQuoteQuery.data.approvalData.spenderAddress,
+        owner: props.payer.account.address,
+      });
+    },
+    enabled: !!postOnRampQuoteQuery.data?.approvalData,
+    refetchOnMount: true,
+  });
+
   useEffect(() => {
     if (
       postOnRampQuoteQuery.data &&
       !lockedOnRampQuote &&
-      !postOnRampQuoteQuery.isRefetching
+      !postOnRampQuoteQuery.isRefetching &&
+      !allowanceQuery.isLoading
     ) {
       setLockedOnRampQuote(postOnRampQuoteQuery.data);
     }
   }, [
     postOnRampQuoteQuery.data,
     lockedOnRampQuote,
     postOnRampQuoteQuery.isRefetching,
+    allowanceQuery.isLoading,
   ]);
 
   if (postOnRampQuoteQuery.isError) {
@@ -133,6 +164,7 @@
       transactionMode={props.transactionMode}
       isEmbed={props.isEmbed}
       onSuccess={props.onSuccess}
+      approvalAmount={allowanceQuery.data ?? undefined}
     />
   );
 }

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/types.ts

@@ -34,6 +34,7 @@ export type SelectedScreen =
   | {
       id: "swap-flow";
       quote: BuyWithCryptoQuote;
+      approvalAmount?: bigint;
     }
   | {
       id: "fiat-flow";

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

@@ -3,6 +3,8 @@
 import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 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 { sendTransaction } from "../../../../../../../transaction/actions/send-transaction.js";
 import { waitForReceipt } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
@@ -51,9 +53,13 @@
   fromTokenSymbol: string;
   isFiatFlow: boolean;
   payer: PayerInfo;
+  preApprovedAmount?: bigint;
 }) {
-  const isApprovalRequired = props.quote.approval !== undefined;
-  const initialStep = isApprovalRequired ? "approval" : "swap";
+  const needsApproval =
+    props.quote.approvalData &&
+    props.preApprovedAmount !== undefined &&
+    props.preApprovedAmount < BigInt(props.quote.approvalData.amountWei);
+  const initialStep = needsApproval ? "approval" : "swap";
 
   const [step, setStep] = useState<"approval" | "swap">(initialStep);
   const [status, setStatus] = useState<
@@ -136,7 +142,7 @@
       <Spacer y="xl" />
 
       {/* Show 2 steps - Approve and confirm  */}
-      {isApprovalRequired && (
+      {needsApproval && (
         <>
           <Spacer y="sm" />
           <Container
@@ -187,7 +193,7 @@
           fullWidth
           disabled={status === "pending"}
           onClick={async () => {
-            if (step === "approval" && props.quote.approval) {
+            if (step === "approval" && props.quote.approvalData) {
               try {
                 setStatus("pending");
 
@@ -204,13 +210,22 @@
                   dstChainId: props.quote.swapDetails.toToken.chainId,
                 });
 
+                const transaction = 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 tx = await sendTransaction({
                   account: props.payer.account,
-                  transaction: props.quote.approval,
+                  transaction,
                 });
 
                 await waitForReceipt({ ...tx, maxBlocksWaitTime: 50 });
-                // props.onQuoteFinalized(props.quote);
 
                 trackPayEvent({
                   event: "swap_approval_success",

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

@@ -22,6 +22,7 @@
   transactionMode: boolean;
   isEmbed: boolean;
   onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
+  approvalAmount?: bigint;
 };
 
 export function SwapFlow(props: SwapFlowProps) {
@@ -109,6 +110,7 @@
       quote={quote}
       isFiatFlow={props.isFiatFlow}
       payer={props.payer}
+      preApprovedAmount={props.approvalAmount}
     />
   );
 }