From 727171cc0e699dbe252056af743752ded7e9ec85 Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Sun, 10 Aug 2025 20:01:17 -0600
Subject: [PATCH 1/2] refactor: only show user balances in payment selection
 screens

---
 .changeset/warm-ways-decide.md                |  5 ++
 .../FiatProviderSelection.tsx                 | 10 ++--
 .../payment-selection/PaymentSelection.tsx    |  1 +
 .../payment-selection/TokenSelection.tsx      | 47 ++++++++++++-------
 4 files changed, 42 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/warm-ways-decide.md

diff --git a/.changeset/warm-ways-decide.md b/.changeset/warm-ways-decide.md
new file mode 100644
index 00000000000..a534560c8b7
--- /dev/null
+++ b/.changeset/warm-ways-decide.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Hide quote value in payment widgets
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
index b002c97a7db..419d3a992ca 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
@@ -164,12 +164,12 @@ export function FiatProviderSelection({
                         size="sm"
                         style={{ fontWeight: 500 }}
                       >
-                        $
-                        {quote.currencyAmount.toLocaleString(undefined, {
-                          maximumFractionDigits: 2,
+                        {new Intl.NumberFormat(navigator.language, {
+                          style: "currency",
+                          currency: currency,
                           minimumFractionDigits: 2,
-                        })}{" "}
-                        {quote.currency}
+                          maximumFractionDigits: 2,
+                        }).format(quote.currencyAmount)}
                       </Text>
                       <Text color="secondaryText" size="xs">
                         {formatNumber(
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
index be7940ce646..7b6d54c4492 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
@@ -292,6 +292,7 @@ export function PaymentSelection({
             onPaymentMethodSelected={handlePaymentMethodSelected}
             paymentMethods={suitableTokenPaymentMethods}
             paymentMethodsLoading={paymentMethodsLoading}
+            currency={currency}
           />
         )}
 
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx
index e889fed9cc5..60eef3a1b4f 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx
@@ -1,6 +1,7 @@
 "use client";
 import type { Token } from "../../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../../core/design-system/index.js";
 import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
@@ -21,6 +22,7 @@ interface TokenSelectionProps {
   destinationToken: Token;
   destinationAmount: bigint;
   feePayer?: "sender" | "receiver";
+  currency?: SupportedFiatCurrency;
 }
 
 // Individual payment method token row component
@@ -31,12 +33,14 @@ interface PaymentMethodTokenRowProps {
   client: ThirdwebClient;
   onPaymentMethodSelected: (paymentMethod: PaymentMethod) => void;
   feePayer?: "sender" | "receiver";
+  currency?: SupportedFiatCurrency;
 }
 
 function PaymentMethodTokenRow({
   paymentMethod,
   client,
   onPaymentMethodSelected,
+  currency,
 }: PaymentMethodTokenRowProps) {
   const theme = useCustomTheme();
 
@@ -44,6 +48,7 @@ function PaymentMethodTokenRow({
   const hasEnoughBalance = displayOriginAmount
     ? paymentMethod.balance >= displayOriginAmount
     : false;
+  const currencyPrice = paymentMethod.originToken.prices[currency || "USD"];
 
   return (
     <Button
@@ -79,26 +84,34 @@ function PaymentMethodTokenRow({
           gap="3xs"
           style={{ alignItems: "flex-end", flex: 1 }}
         >
-          <Text
-            color="primaryText"
-            size="sm"
-            style={{ fontWeight: 600, textWrap: "nowrap" }}
-          >
-            {formatTokenAmount(
-              displayOriginAmount,
-              paymentMethod.originToken.decimals,
-            )}{" "}
-            {paymentMethod.originToken.symbol}
-          </Text>
-          <Container flex="row" gap="3xs">
-            <Text color="secondaryText" size="xs">
-              Balance:{" "}
+          {currencyPrice && (
+            <Text
+              color="primaryText"
+              size="sm"
+              style={{ fontWeight: 600, textWrap: "nowrap" }}
+            >
+              {new Intl.NumberFormat(navigator.language, {
+                style: "currency",
+                currency: currency,
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              }).format(
+                Number(
+                  formatTokenAmount(
+                    paymentMethod.balance,
+                    paymentMethod.originToken.decimals,
+                  ),
+                ) * currencyPrice,
+              )}
             </Text>
+          )}
+          <Container flex="row" gap="3xs">
             <Text color={hasEnoughBalance ? "success" : "danger"} size="xs">
               {formatTokenAmount(
                 paymentMethod.balance,
                 paymentMethod.originToken.decimals,
-              )}
+              )}{" "}
+              {paymentMethod.originToken.symbol}
             </Text>
           </Container>
         </Container>
@@ -116,6 +129,7 @@ export function TokenSelection({
   destinationToken,
   destinationAmount,
   feePayer,
+  currency,
 }: TokenSelectionProps) {
   const theme = useCustomTheme();
 
@@ -210,7 +224,7 @@ export function TokenSelection({
   return (
     <>
       <Text color="primaryText" size="md">
-        Select payment token
+        Your token balances
       </Text>
       <Spacer y="sm" />
       <Container
@@ -233,6 +247,7 @@ export function TokenSelection({
               key={`${method.originToken.address}-${method.originToken.chainId}`}
               onPaymentMethodSelected={onPaymentMethodSelected}
               paymentMethod={method}
+              currency={currency}
             />
           ))}
       </Container>

From a3b2cf6cb7f51c31d659ac0c4f9f6aa307705bd4 Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Mon, 11 Aug 2025 09:25:52 -0600
Subject: [PATCH 2/2] fix: use formatCurrencyAmount

---
 .../payment-selection/FiatProviderSelection.tsx     | 11 +++++------
 .../ui/Bridge/payment-selection/TokenSelection.tsx  | 13 ++++++-------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
index 419d3a992ca..681b07f67f3 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
@@ -12,6 +12,7 @@ import {
   spacing,
 } from "../../../../core/design-system/index.js";
 import { useBuyWithFiatQuotesForProviders } from "../../../../core/hooks/pay/useBuyWithFiatQuotesForProviders.js";
+import { formatCurrencyAmount } from "../../ConnectWallet/screens/formatTokenBalance.js";
 import { Container } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Img } from "../../components/Img.js";
@@ -164,12 +165,10 @@ export function FiatProviderSelection({
                         size="sm"
                         style={{ fontWeight: 500 }}
                       >
-                        {new Intl.NumberFormat(navigator.language, {
-                          style: "currency",
-                          currency: currency,
-                          minimumFractionDigits: 2,
-                          maximumFractionDigits: 2,
-                        }).format(quote.currencyAmount)}
+                        {formatCurrencyAmount(
+                          currency || "US",
+                          quote.currencyAmount,
+                        )}
                       </Text>
                       <Text color="secondaryText" size="xs">
                         {formatNumber(
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx
index 60eef3a1b4f..61ed2566f6c 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx
@@ -5,7 +5,10 @@ import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../../core/design-system/index.js";
 import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
-import { formatTokenAmount } from "../../ConnectWallet/screens/formatTokenBalance.js";
+import {
+  formatCurrencyAmount,
+  formatTokenAmount,
+} from "../../ConnectWallet/screens/formatTokenBalance.js";
 import { Container } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Skeleton } from "../../components/Skeleton.js";
@@ -90,12 +93,8 @@ function PaymentMethodTokenRow({
               size="sm"
               style={{ fontWeight: 600, textWrap: "nowrap" }}
             >
-              {new Intl.NumberFormat(navigator.language, {
-                style: "currency",
-                currency: currency,
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
-              }).format(
+              {formatCurrencyAmount(
+                currency || "USD",
                 Number(
                   formatTokenAmount(
                     paymentMethod.balance,