[MNY-231] SDK: Fix TransactionWidget not updating on currency prop change after initial render

Author: MananTank

.changeset/rich-pens-hug.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix TransactionWidget not updating when `currency` prop is changed after initial render

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: [

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 (
       <WithHeader
@@ -207,8 +220,7 @@ export function TransactionPayment({
       >
         {/* USD Value */}
         <Text color="primaryText" size="xl" weight={600}>
-          {transactionDataQuery.data?.usdValueDisplay ||
-            transactionDataQuery.data?.txCostDisplay}
+          {costToDisplay}
         </Text>
 
         {/* Function Name */}

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

@@ -199,7 +199,6 @@ export function PaymentOverview(props: {
           <TransactionOverViewCompact
             client={props.client}
             paymentMethod={props.paymentMethod}
-            currency={props.currency}
             transaction={props.modeInfo.transaction}
             metadata={props.metadata}
           />
@@ -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) {