chore: move user balance query out of transaction details hook

Author: gregfromstl

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

@@ -8,7 +8,6 @@ import type { CompilerMetadata } from "../../../contract/actions/compiler-metada
 import { getCompilerMetadata } from "../../../contract/actions/get-compiler-metadata.js";
 import { getContract } from "../../../contract/contract.js";
 import { decimals } from "../../../extensions/erc20/read/decimals.js";
-import { getBalance } from "../../../extensions/erc20/read/getBalance.js";
 import { getToken } from "../../../pay/convert/get-token.js";
 import type { SupportedFiatCurrency } from "../../../pay/convert/type.js";
 import { encode } from "../../../transaction/actions/encode.js";
@@ -18,7 +17,6 @@ import { resolvePromisedValue } from "../../../utils/promise/resolve-promised-va
 import { toTokens } from "../../../utils/units.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import { hasSponsoredTransactionsEnabled } from "../../../wallets/smart/is-smart-wallet.js";
-import { getWalletBalance } from "../../../wallets/utils/getWalletBalance.js";
 import {
   formatCurrencyAmount,
   formatTokenAmount,
@@ -32,8 +30,6 @@ interface TransactionDetails {
     selector: string;
     description?: string;
   };
-  userBalance: string;
-  userBalanceWei: bigint;
   usdValueDisplay: string | null;
   txCostDisplay: string;
   gasCostDisplay: string | null;
@@ -87,28 +83,12 @@ export function useTransactionDetails({
         throw new Error("No active account");
       }
 
-      const [tokenInfo, userBalance, gasCostWei] = await Promise.all([
+      const [tokenInfo, gasCostWei] = await Promise.all([
         getToken(
           client,
-          erc20Value ? erc20Value.tokenAddress : NATIVE_TOKEN_ADDRESS,
+          erc20Value?.tokenAddress || NATIVE_TOKEN_ADDRESS,
           transaction.chain.id,
         ).catch(() => null),
-        (async () =>
-          erc20Value &&
-          erc20Value.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS
-            ? getBalance({
-                contract: getContract({
-                  address: erc20Value.tokenAddress,
-                  chain: transaction.chain,
-                  client,
-                }),
-                address: account.address,
-              })
-            : getWalletBalance({
-                address: account.address,
-                chain: transaction.chain,
-                client,
-              }))().then((result) => result?.value || 0n),
         hasSponsoredTransactions
           ? 0n
           : getTransactionGasCost(transaction).catch(() => null),
@@ -178,7 +158,7 @@ export function useTransactionDetails({
 
       const totalCostWei =
         erc20Value &&
-        erc20Value.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS
+          erc20Value.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS
           ? erc20Value.amountWei
           : (value || 0n) + (gasCostWei || 0n);
       const totalCost = toTokens(totalCostWei, decimal);
@@ -190,8 +170,6 @@ export function useTransactionDetails({
         contractMetadata,
         costWei,
         functionInfo,
-        userBalance: toTokens(userBalance, decimal),
-        userBalanceWei: userBalance,
         gasCostDisplay: gasCostWei
           ? `${formatTokenAmount(gasCostWei, 18)} ${nativeTokenSymbol}`
           : null,

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

@@ -27,6 +27,13 @@ import type { PayEmbedConnectOptions } from "../PayEmbed.js";
 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 @@ export function TransactionPayment({
     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,
+        client,
+      });
+
+      return toTokens(walletBalance.value, tokenDecimals);
+    },
+    queryKey: ["active-account-address"],
+  });
+
   const contractName =
     transactionDataQuery.data?.contractMetadata?.name || "Unknown Contract";
   const functionName =
@@ -330,7 +366,7 @@ export function TransactionPayment({
                 Math.max(
                   0,
                   Number(transactionDataQuery.data.totalCost) -
-                    Number(transactionDataQuery.data.userBalance),
+                  Number(userBalance),
                 ).toString(),
                 transactionDataQuery.data.tokenInfo,
                 getAddress(activeAccount.address),