From ee29c070497c4382f3ae1e882cbfae85365a98ba Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Wed, 18 Jun 2025 10:55:34 -0700
Subject: [PATCH] fix: ub playground input field and payment receipt chains

---
 .changeset/twelve-brooms-kneel.md                            | 5 +++++
 .../playground-web/src/app/connect/pay/embed/LeftSection.tsx | 2 +-
 .../react/web/ui/Bridge/payment-success/PaymentReceipt.tsx   | 4 +++-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/twelve-brooms-kneel.md

diff --git a/.changeset/twelve-brooms-kneel.md b/.changeset/twelve-brooms-kneel.md
new file mode 100644
index 00000000000..73b2cfea3f2
--- /dev/null
+++ b/.changeset/twelve-brooms-kneel.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix typo in payment confirmation widget
diff --git a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
index fbcc6b1f3d1..11a0d139189 100644
--- a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
+++ b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
@@ -105,7 +105,7 @@ export function LeftSection(props: {
                     <Label htmlFor="fund-wallet-chain-id">Chain ID</Label>
                     <Input
                       id="fund-wallet-chain-id"
-                      type="number"
+                      type="text"
                       placeholder="1 (Ethereum)"
                       className="bg-card"
                       value={payOptions.buyTokenChain?.id || ""}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
index 24cd4e0e0e4..12e12d4a0b4 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
@@ -33,6 +33,7 @@ interface TransactionInfo {
   label: string;
   chain: ChainMetadata;
   destinationToken?: Token;
+  destinationChain?: ChainMetadata;
   originToken?: Token;
   originChain?: ChainMetadata;
   amountPaid?: string;
@@ -102,6 +103,7 @@ function useTransactionInfo(
               originToken: status.originToken,
               originChain,
               destinationToken: status.destinationToken,
+              destinationChain,
               amountReceived: `${formatTokenAmount(
                 status.destinationAmount,
                 status.destinationToken.decimals,
@@ -228,7 +230,7 @@ function CompletedStepDetailCard({
             Origin Chain
           </Text>
           <Text size="sm" color="primaryText">
-            {shorterChainName(txInfo.chain.name)}
+            {shorterChainName(txInfo.originChain.name)}
           </Text>
         </Container>
       )}