From 7936ebb6e9d2b9ed1b60173410c89b3a71ecc8f4 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 24 Sep 2025 21:43:56 +0000
Subject: [PATCH] [MNY-180] SDK: Fix TransactionWidget not respecting currency
 prop (#8118)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the handling of the `currency` property in various components and adding a new story for a transaction mode in light theme that showcases an ERC20 token transfer.

### Detailed summary
- Changed `currency` from optional to required in `useTransactionDetails.ts`.
- Added `currency` to the props in `PaymentOverview.tsx` and `TransactionPayment.tsx`.
- Introduced a new story `TransactionJPYCurrency` in `BridgeOrchestrator.stories.tsx` for displaying an ERC20 token transfer in light theme.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../react/core/hooks/useTransactionDetails.ts |  2 +-
 .../web/ui/Bridge/TransactionPayment.tsx      |  1 +
 .../payment-details/PaymentOverview.tsx       |  1 +
 .../Bridge/BridgeOrchestrator.stories.tsx     | 31 +++++++++++++++++++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts b/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts
index cbb6bb88aa8..667a25dc5c0 100644
--- a/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts
+++ b/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts
@@ -45,7 +45,7 @@ interface UseTransactionDetailsOptions {
   transaction: PreparedTransaction;
   client: ThirdwebClient;
   wallet: Wallet | undefined;
-  currency?: SupportedFiatCurrency;
+  currency: SupportedFiatCurrency | undefined;
 }
 
 /**
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
index 3474ac665d0..70bef2e5c1b 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
@@ -89,6 +89,7 @@ export function TransactionPayment({
     client,
     transaction: uiOptions.transaction,
     wallet,
+    currency: uiOptions.currency,
   });
 
   // We can't use useWalletBalance here because erc20Value is a possibly async value
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 f7db580bfa7..8cd744a7394 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
@@ -210,6 +210,7 @@ const TransactionOverViewCompact = (props: {
     client: props.client,
     transaction: props.uiOptions.transaction,
     wallet: props.paymentMethod.payerWallet,
+    currency: props.uiOptions.currency,
   });
 
   if (!txInfo.data) {
diff --git a/packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx b/packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx
index 51fe16ca5e6..598dc9a2aea 100644
--- a/packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx
+++ b/packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx
@@ -241,6 +241,37 @@ export const TransactionLight: Story = {
   },
 };
 
+/**
+ * Transaction mode in light theme showing an ERC20 token transfer.
+ */
+export const TransactionJPYCurrency: Story = {
+  args: {
+    connectLocale: undefined,
+    connectOptions: undefined,
+    onCancel: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    paymentLinkId: undefined,
+    presetOptions: undefined,
+    purchaseData: undefined,
+    receiverAddress: undefined,
+    theme: "light",
+    uiOptions: {
+      ...TRANSACTION_UI_OPTIONS.erc20Transfer,
+      currency: "JPY",
+    },
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "Light theme version of transaction mode showing an ERC20 token transfer with proper token amount formatting and USD conversion.",
+      },
+    },
+  },
+};
+
 export const CustompresetOptions: Story = {
   args: {
     connectLocale: undefined,