From 968913d55b761c1e23062fdf6008904fa8c17050 Mon Sep 17 00:00:00 2001 From: MananTank Date: Mon, 6 Oct 2025 19:22:27 +0000 Subject: [PATCH] [MNY-231] SDK: Fix TransactionWidget not updating on currency prop change after initial render (#8192) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on fixing the `TransactionWidget` to ensure it updates correctly when the `currency` prop changes after the initial render. It also refines how the total cost and display values are calculated based on the selected currency. ### Detailed summary - Updated `PaymentOverview` to remove the `currency` prop from `TransactionOverViewCompact`. - Enhanced `TransactionPayment` to calculate `totalFiatCost` and `costToDisplay` based on the selected currency. - Adjusted the display of USD value to use `costToDisplay`. - Removed the `currency` type from `UseTransactionDetailsOptions`. - Simplified `useTransactionDetails` by removing currency-related calculations. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` ## Summary by CodeRabbit * **Bug Fixes** * Transaction widget now updates correctly when the selected currency changes after initial render. * Payment and transaction details display accurate fiat totals, with graceful fallback when pricing data is unavailable. * **Improvements** * Streamlined pricing display to focus on the selected currency, improving clarity and consistency across payment views. * **Chores** * Added a patch-level changeset entry documenting the bug fix. --- .changeset/rich-pens-hug.md | 5 +++++ .../react/core/hooks/useTransactionDetails.ts | 15 +-------------- .../react/web/ui/Bridge/TransactionPayment.tsx | 18 +++++++++++++++--- .../Bridge/payment-details/PaymentOverview.tsx | 3 --- 4 files changed, 21 insertions(+), 20 deletions(-) create mode 100644 .changeset/rich-pens-hug.md diff --git a/.changeset/rich-pens-hug.md b/.changeset/rich-pens-hug.md new file mode 100644 index 00000000000..69af02457ad --- /dev/null +++ b/.changeset/rich-pens-hug.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Fix TransactionWidget not updating when `currency` prop is changed after initial render diff --git a/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts b/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts index 667a25dc5c0..6e5df9159d6 100644 --- a/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts +++ b/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts @@ -9,7 +9,6 @@ import { getCompilerMetadata } from "../../../contract/actions/get-compiler-meta import { getContract } from "../../../contract/contract.js"; import { decimals } from "../../../extensions/erc20/read/decimals.js"; import { getToken } from "../../../pay/convert/get-token.js"; -import type { SupportedFiatCurrency } from "../../../pay/convert/type.js"; import { encode } from "../../../transaction/actions/encode.js"; import type { PreparedTransaction } from "../../../transaction/prepare-transaction.js"; import { getTransactionGasCost } from "../../../transaction/utils.js"; @@ -18,10 +17,7 @@ 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 { - formatCurrencyAmount, - formatTokenAmount, -} from "../../web/ui/ConnectWallet/screens/formatTokenBalance.js"; +import { formatTokenAmount } from "../../web/ui/ConnectWallet/screens/formatTokenBalance.js"; import { useChainMetadata } from "./others/useChainQuery.js"; interface TransactionDetails { @@ -31,7 +27,6 @@ interface TransactionDetails { selector: string; description?: string; }; - usdValueDisplay: string | null; txCostDisplay: string; gasCostDisplay: string | null; tokenInfo: TokenWithPrices | null; @@ -45,7 +40,6 @@ interface UseTransactionDetailsOptions { transaction: PreparedTransaction; client: ThirdwebClient; wallet: Wallet | undefined; - currency: SupportedFiatCurrency | undefined; } /** @@ -54,7 +48,6 @@ interface UseTransactionDetailsOptions { */ export function useTransactionDetails({ transaction, - currency, client, wallet, }: UseTransactionDetailsOptions) { @@ -158,9 +151,6 @@ export function useTransactionDetails({ : (value || 0n) + (gasCostWei || 0n); const totalCost = toTokens(totalCostWei, decimal); - const price = tokenInfo?.prices[currency || "USD"] || 0; - const usdValue = price ? Number(totalCost) * price : null; - return { contractMetadata, costWei, @@ -173,9 +163,6 @@ export function useTransactionDetails({ totalCost, totalCostWei, txCostDisplay: `${formatTokenAmount(costWei, decimal)} ${tokenSymbol}`, - usdValueDisplay: usdValue - ? formatCurrencyAmount(currency || "USD", usdValue) - : null, }; }, queryKey: [ diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx index 67ab578fda5..f58b08a6671 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx @@ -24,6 +24,7 @@ import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.j import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js"; import { ConnectButton } from "../ConnectWallet/ConnectButton.js"; import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js"; +import { formatCurrencyAmount } from "../ConnectWallet/screens/formatTokenBalance.js"; import { Container, Line } from "../components/basic.js"; import { Button } from "../components/buttons.js"; import { ChainName } from "../components/ChainName.js"; @@ -100,7 +101,6 @@ export function TransactionPayment({ client, transaction: transaction, wallet, - currency: currency, }); // We can't use useWalletBalance here because erc20Value is a possibly async value @@ -134,6 +134,19 @@ export function TransactionPayment({ const buttonLabel = _buttonLabel || `Execute ${functionName}`; + const tokenFiatPricePerToken = + transactionDataQuery.data?.tokenInfo?.prices[currency] || undefined; + + const totalFiatCost = + tokenFiatPricePerToken && transactionDataQuery.data + ? tokenFiatPricePerToken * Number(transactionDataQuery.data.totalCost) + : undefined; + + const costToDisplay = + totalFiatCost !== undefined + ? formatCurrencyAmount(currency, totalFiatCost) + : transactionDataQuery.data?.txCostDisplay; + if (isLoading) { return ( {/* USD Value */} - {transactionDataQuery.data?.usdValueDisplay || - transactionDataQuery.data?.txCostDisplay} + {costToDisplay} {/* Function Name */} diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx index 0c6ee0f6df2..e3345bc7bd6 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx @@ -199,7 +199,6 @@ export function PaymentOverview(props: { @@ -211,7 +210,6 @@ export function PaymentOverview(props: { const TransactionOverViewCompact = (props: { transaction: PreparedTransaction; - currency: SupportedFiatCurrency; paymentMethod: PaymentMethod; client: ThirdwebClient; metadata: { @@ -224,7 +222,6 @@ const TransactionOverViewCompact = (props: { client: props.client, transaction: props.transaction, wallet: props.paymentMethod.payerWallet, - currency: props.currency, }); if (!txInfo.data) {