From 46d0b4bdc050b92886cfea5623a08aa8f7272006 Mon Sep 17 00:00:00 2001 From: Joaquim Verges Date: Fri, 8 Nov 2024 14:26:54 +1300 Subject: [PATCH] fix: use maxFeePerGas for Pay gas estimations (#5349) --- .changeset/hot-bees-turn.md | 5 +++++ .../src/components/pay/transaction-button.tsx | 10 +++++----- .../src/react/web/ui/ConnectWallet/Details.tsx | 2 +- .../screens/Buy/TransactionModeScreen.tsx | 2 +- .../screens/Buy/WalletSelectorButton.tsx | 2 +- .../screens/Buy/swap/PayWithCrypto.tsx | 2 +- .../actions/estimate-gas-cost.test.ts | 18 +++++++++--------- .../transaction/actions/estimate-gas-cost.ts | 16 +++++++++++----- 8 files changed, 34 insertions(+), 23 deletions(-) create mode 100644 .changeset/hot-bees-turn.md diff --git a/.changeset/hot-bees-turn.md b/.changeset/hot-bees-turn.md new file mode 100644 index 00000000000..6f9d2e8aaaa --- /dev/null +++ b/.changeset/hot-bees-turn.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Use maxFeePerGas for Pay gas cost estimations in transaction flow diff --git a/apps/playground-web/src/components/pay/transaction-button.tsx b/apps/playground-web/src/components/pay/transaction-button.tsx index e9ee1775445..ee2404a6932 100644 --- a/apps/playground-web/src/components/pay/transaction-button.tsx +++ b/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, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx index 48bec878345..7b35e2afeed 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx @@ -363,7 +363,7 @@ function DetailsModal(props: { {chainNameQuery.name || `Unknown chain #${walletChain?.id}`} {balanceQuery.data ? ( - formatNumber(Number(balanceQuery.data.displayValue), 5) + formatNumber(Number(balanceQuery.data.displayValue), 9) ) : ( )}{" "} diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx index 3d2aca0654e..c0a68cedaa2 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx @@ -125,7 +125,7 @@ export function TransactionModeScreen(props: { {balanceQuery.data ? ( - {formatTokenBalance(balanceQuery.data, false, 3)} + {formatTokenBalance(balanceQuery.data, false)} - {formatTokenBalance(tokenBalance.balance, true, 3)} + {formatTokenBalance(tokenBalance.balance, true)} diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx index b15746c32ba..85a86c7b3f3 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx @@ -74,7 +74,7 @@ export function PayWithCryptoQuoteInfo(props: { {balanceQuery.data ? ( - {formatTokenBalance(balanceQuery.data, false, 3)} + {formatTokenBalance(balanceQuery.data, false)} { 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, } `); }); diff --git a/packages/thirdweb/src/transaction/actions/estimate-gas-cost.ts b/packages/thirdweb/src/transaction/actions/estimate-gas-cost.ts index 8387eba9a7a..dcbbddb10f9 100644 --- a/packages/thirdweb/src/transaction/actions/estimate-gas-cost.ts +++ b/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 @@ export async function estimateGasCost( 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");