fix: use maxFeePerGas for Pay gas estimations

.changeset/hot-bees-turn.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Use maxFeePerGas for Pay gas cost estimations in transaction flow

apps/playground-web/src/components/pay/transaction-button.tsx

@@ -2,7 +2,7 @@
 
 import { useTheme } from "next-themes";
 import { getContract } from "thirdweb";
-import { polygon, sepolia } from "thirdweb/chains";
+import { base, sepolia } from "thirdweb/chains";
 import { transfer } from "thirdweb/extensions/erc20";
 import { claimTo, getNFT } from "thirdweb/extensions/erc1155";
 import {
@@ -16,8 +16,8 @@ import { THIRDWEB_CLIENT } from "../../lib/client";
 import { StyledConnectButton } from "../styled-connect-button";
 
 const nftContract = getContract({
-  address: "0x827c1c3889923015C1FC31BF677D00FbE6F01D52",
-  chain: polygon,
+  address: "0xf0d0CBf84005Dd4eC81364D1f5D7d896Bd53D1B8",
+  chain: base,
   client: THIRDWEB_CLIENT,
 });
 
@@ -35,7 +35,7 @@ export function PayTransactionPreview() {
   const { theme } = useTheme();
   const { data: nft } = useReadContract(getNFT, {
     contract: nftContract,
-    tokenId: 0n,
+    tokenId: 1n,
   });
 
   return (
@@ -51,7 +51,7 @@ export function PayTransactionPreview() {
             transaction: claimTo({
               contract: nftContract,
               quantity: 1n,
-              tokenId: 0n,
+              tokenId: 1n,
               to: account?.address || "",
             }),
             metadata: nft?.metadata,

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -363,7 +363,7 @@
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
           <Text color="secondaryText" size="xs">
             {balanceQuery.data ? (
-              formatNumber(Number(balanceQuery.data.displayValue), 5)
+              formatNumber(Number(balanceQuery.data.displayValue), 9)
             ) : (
               <Skeleton height="1em" width="100px" />
             )}{" "}

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

@@ -125,7 +125,7 @@
               {balanceQuery.data ? (
                 <Container flex="row" gap="3xs" center="y">
                   <Text size="xs" color="secondaryText" weight={500}>
-                    {formatTokenBalance(balanceQuery.data, false, 3)}
+                    {formatTokenBalance(balanceQuery.data, false)}
                   </Text>
                   <TokenSymbol
                     token={transactionCostAndData.token}

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

@@ -115,7 +115,7 @@
       <div style={{ flex: 1 }} />
       <Container flex="row" center="y" gap="3xs">
         <Text size="xs" color="secondaryText">
-          {formatTokenBalance(tokenBalance.balance, true, 3)}
+          {formatTokenBalance(tokenBalance.balance, true)}
         </Text>
       </Container>
     </StyledButton>

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

@@ -74,7 +74,7 @@
         {balanceQuery.data ? (
           <Container flex="row" gap="3xs" center="y">
             <Text size="xs" color="secondaryText" weight={500}>
-              {formatTokenBalance(balanceQuery.data, false, 3)}
+              {formatTokenBalance(balanceQuery.data, false)}
             </Text>
             <TokenSymbol
               token={props.token}

packages/thirdweb/src/transaction/actions/estimate-gas-cost.test.ts

@@ -22,11 +22,11 @@ describe.runIf(process.env.TW_SECRET_KEY)("estimateGasCost", () => {
         transaction: tx,
       });
       expect(result).toMatchInlineSnapshot(`
-          {
-            "ether": "0.001196638702568277",
-            "wei": 1196638702568277n,
-          }
-        `);
+        {
+          "ether": "0.002468675264234022",
+          "wei": 2468675264234022n,
+        }
+      `);
     });
 
     it("should estimateGasCost native token", async () => {
@@ -41,8 +41,8 @@ describe.runIf(process.env.TW_SECRET_KEY)("estimateGasCost", () => {
       });
       expect(result).toMatchInlineSnapshot(`
         {
-          "ether": "0.00052179661420146",
-          "wei": 521796614201460n,
+          "ether": "0.00107647061028156",
+          "wei": 1076470610281560n,
         }
       `);
     });
@@ -61,8 +61,8 @@ describe.runIf(process.env.TW_SECRET_KEY)("estimateGasCost", () => {
       });
       expect(result).toMatchInlineSnapshot(`
         {
-          "ether": "0.000021198198952138",
-          "wei": 21198198952138n,
+          "ether": "0.000023420415571618",
+          "wei": 23420415571618n,
         }
       `);
     });

packages/thirdweb/src/transaction/actions/estimate-gas-cost.ts

@@ -1,5 +1,5 @@
 import { isOpStackChain } from "../../chains/constants.js";
-import { getGasPrice } from "../../gas/get-gas-price.js";
+import { getDefaultGasOverrides } from "../../gas/fee-data.js";
 import { resolvePromisedValue } from "../../utils/promise/resolve-promised-value.js";
 import { toEther } from "../../utils/units.js";
 import { type EstimateGasOptions, estimateGas } from "./estimate-gas.js";
@@ -33,10 +33,16 @@
   const gasLimit =
     (await resolvePromisedValue(transaction.gas)) ||
     (await estimateGas({ transaction, from }));
-  const gasPrice = await getGasPrice({
-    client: transaction.client,
-    chain: transaction.chain,
-  });
+  const fees = await getDefaultGasOverrides(
+    transaction.client,
+    transaction.chain,
+  );
+  const gasPrice = fees.maxFeePerGas || fees.gasPrice;
+  if (!gasPrice) {
+    throw new Error(
+      `Unable to determine gas price for chain ${transaction.chain.id}`,
+    );
+  }
   let l1Fee: bigint;
   if (isOpStackChain(transaction.chain)) {
     const { estimateL1Fee } = await import("../../gas/estimate-l1-fee.js");