fix: requested changes

Author: gregfromstl

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

@@ -78,11 +78,6 @@ export function useTransactionDetails({
           encode(transaction).catch(() => "0x"),
         ]);
 
-      const account = wallet?.getAccount();
-      if (!account) {
-        throw new Error("No active account");
-      }
-
       const [tokenInfo, gasCostWei] = await Promise.all([
         getToken(
           client,

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

@@ -30,10 +30,7 @@ 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 {
   /**
@@ -92,25 +89,16 @@ export function TransactionPayment({
         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);
+      return walletBalance.displayValue
     },
-    queryKey: ["active-account-address"],
+    queryKey: ["user-balance", activeAccount?.address]
   });
 
   const contractName =

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -17,6 +17,7 @@ import { Img } from "../../components/Img.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
 import { Text } from "../../components/text.js";
+import { formatNumber } from "../../../../../utils/formatNumber.js";
 
 interface FiatProviderSelectionProps {
   client: ThirdwebClient;
@@ -171,10 +172,10 @@ export function FiatProviderSelection({
                         {quote.currency}
                       </Text>
                       <Text color="secondaryText" size="xs">
-                        {toTokens(
+                        {formatNumber(Number(toTokens(
                           quote.destinationAmount,
                           quote.destinationToken.decimals,
-                        )}{" "}
+                        )), 4)}{" "}
                         {quote.destinationToken.symbol}
                       </Text>
                     </Container>