[SDK] Fix: only require missing token amount for transaction widget

.changeset/few-moments-add.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fixed a regression that prompted the user to pay the full amount in the TransactionWidget, rather than the difference from their current balance

packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts

@@ -78,10 +78,15 @@
           encode(transaction).catch(() => "0x"),
         ]);
 
+      const account = wallet?.getAccount();
+      if (!account) {
+        throw new Error("No active account");
+      }
+
       const [tokenInfo, gasCostWei] = await Promise.all([
         getToken(
           client,
-          erc20Value ? erc20Value.tokenAddress : NATIVE_TOKEN_ADDRESS,
+          erc20Value?.tokenAddress || NATIVE_TOKEN_ADDRESS,
           transaction.chain.id,
         ).catch(() => null),
         hasSponsoredTransactions
@@ -151,9 +156,11 @@
         chainMetadata.data?.nativeCurrency?.symbol || "ETH";
       const tokenSymbol = tokenInfo?.symbol || nativeTokenSymbol;
 
-      const totalCostWei = erc20Value
-        ? erc20Value.amountWei
-        : (value || 0n) + (gasCostWei || 0n);
+      const totalCostWei =
+        erc20Value &&
+          erc20Value.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS
+          ? erc20Value.amountWei
+          : (value || 0n) + (gasCostWei || 0n);
       const totalCost = toTokens(totalCostWei, decimal);
 
       const price = tokenInfo?.prices[currency || "USD"] || 0;

packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -27,6 +27,13 @@
 import type { UIOptions } from "./BridgeOrchestrator.js";
 import { ChainIcon } from "./common/TokenAndChain.js";
 import { WithHeader } from "./common/WithHeader.js";
+import { useQuery } from "@tanstack/react-query";
+import { getWalletBalance } from "../../../../wallets/utils/getWalletBalance.js";
+import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised-value.js";
+import { decimals } from "../../../../extensions/erc20/read/decimals.js";
+import { getContract } from "../../../../contract/contract.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
+import { toTokens } from "../../../../utils/units.js";
 
 export interface TransactionPaymentProps {
   /**
@@ -77,6 +84,35 @@
     wallet,
   });
 
+  // We can't use useWalletBalance here because erc20Value is a possibly async value
+  const { data: userBalance } = useQuery({
+    enabled: !!activeAccount?.address,
+    queryFn: async (): Promise<string> => {
+      if (!activeAccount?.address) {
+        return "0";
+      }
+      const erc20Value = await resolvePromisedValue(uiOptions.transaction.erc20Value);
+      const tokenDecimals = erc20Value?.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS && erc20Value
+        ? await decimals({
+          contract: getContract({
+            address: erc20Value.tokenAddress,
+            chain: uiOptions.transaction.chain,
+            client,
+          }),
+        })
+        : 18;
+      const walletBalance = await getWalletBalance({
+        address: activeAccount?.address,
+        chain: uiOptions.transaction.chain,
+        tokenAddress: erc20Value?.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS ? erc20Value?.tokenAddress : undefined,
+        client,
+      });
+
+      return toTokens(walletBalance.value, tokenDecimals);
+    },
+    queryKey: ["active-account-address"],
+  });
+
   const contractName =
     transactionDataQuery.data?.contractMetadata?.name || "Unknown Contract";
   const functionName =
@@ -327,7 +363,11 @@
           onClick={() => {
             if (transactionDataQuery.data?.tokenInfo) {
               onContinue(
-                transactionDataQuery.data.totalCost,
+                Math.max(
+                  0,
+                  Number(transactionDataQuery.data.totalCost) -
+                  Number(userBalance ?? "0"),
+                ).toString(),
                 transactionDataQuery.data.tokenInfo,
                 getAddress(activeAccount.address),
               );