From 7b873d38db373151ef42dfa7bc1e083568cb5432 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 5 Dec 2025 20:46:01 +0000
Subject: [PATCH] [MNY-322] SDK: Update success message shown in SwapWidget
 component (#8509)
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 updates the success messages in the `SuccessScreen` component across various widgets in the `thirdweb` package, specifically for payment and swap transactions.

### Detailed summary
- Updated success message type in `SwapWidget` to `"swap-success"`.
- Updated success message type in `BuyWidget` and `CheckoutWidget` to `"payment-success"`.
- Added a new story `BasicSwapSuccess` in `SuccessScreen.stories.tsx`.
- Modified `SuccessScreen` to handle different message types.
- Updated displayed titles and descriptions based on the success type.
- Changed button text from "View Payment Receipt" to "View Transaction Receipt".

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Success screens now display dynamic, context-appropriate messaging tailored to transaction type, with distinct titles and descriptions for swap versus payment transactions.
  * Enhanced user experience with improved terminology—the option to "View Transaction Receipt" now displays consistently across all payment flows for better clarity and consistency.

<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .changeset/happy-dots-jam.md                     |  5 +++++
 .../src/react/web/ui/Bridge/BuyWidget.tsx        |  1 +
 .../src/react/web/ui/Bridge/CheckoutWidget.tsx   |  1 +
 .../react/web/ui/Bridge/TransactionWidget.tsx    |  1 +
 .../ui/Bridge/payment-success/SuccessScreen.tsx  | 16 +++++++++++++---
 .../web/ui/Bridge/swap-widget/SwapWidget.tsx     |  1 +
 .../src/stories/Bridge/SuccessScreen.stories.tsx |  7 +++++++
 7 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/happy-dots-jam.md

diff --git a/.changeset/happy-dots-jam.md b/.changeset/happy-dots-jam.md
new file mode 100644
index 00000000000..deb9be575ca
--- /dev/null
+++ b/.changeset/happy-dots-jam.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Update success message shown in SwapWidget component
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
index 34ca753fc80..ce1bc57231a 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
@@ -723,6 +723,7 @@ function BridgeWidgetContent(
   if (screen.id === "6:success") {
     return (
       <SuccessScreen
+        type="payment-success"
         // from props
         client={props.client}
         hasPaymentId={!!props.paymentLinkId}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
index 542892770a0..168165bbe51 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
@@ -730,6 +730,7 @@ function CheckoutWidgetContent(
   if (screen.id === "6:success") {
     return (
       <SuccessScreen
+        type="payment-success"
         // from props
         client={props.client}
         hasPaymentId={!!props.paymentLinkId}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
index c7d9426acda..5c7b0198853 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
@@ -786,6 +786,7 @@ function TransactionWidgetContent(
       <SuccessScreen
         // from props
         client={props.client}
+        type="payment-success"
         hasPaymentId={!!props.paymentLinkId}
         // others
         completedStatuses={screen.completedStatuses}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
index 29cdff156b4..7b3850b85a9 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
@@ -46,6 +46,8 @@ type SuccessScreenProps = {
    * Whether or not this payment is associated with a payment ID. If it does, we show a different message.
    */
   hasPaymentId: boolean;
+
+  type: "swap-success" | "payment-success";
 };
 
 type ViewState = "success" | "detail";
@@ -58,6 +60,7 @@ export function SuccessScreen({
   client,
   hasPaymentId = false,
   showContinueWithTx,
+  type,
 }: SuccessScreenProps) {
   const theme = useCustomTheme();
   const [viewState, setViewState] = useState<ViewState>("success");
@@ -112,6 +115,13 @@ export function SuccessScreen({
     );
   }
 
+  const title =
+    type === "swap-success" ? "Swap Successful" : "Payment Successful";
+  const description =
+    type === "swap-success"
+      ? "Your token swap has been completed successfully."
+      : "Your payment has been completed successfully.";
+
   return (
     <Container flex="column" fullHeight px="md" pb="md" pt="md+">
       <Spacer y="3xl" />
@@ -151,7 +161,7 @@ export function SuccessScreen({
               marginBottom: spacing.xxs,
             }}
           >
-            Payment Successful
+            {title}
           </Text>
 
           <Text center color="secondaryText" size="sm">
@@ -159,7 +169,7 @@ export function SuccessScreen({
               ? "You can now close this page and return to the application."
               : showContinueWithTx
                 ? "Click continue to execute your transaction."
-                : "Your payment has been completed successfully."}
+                : description}
           </Text>
         </div>
       </Container>
@@ -173,7 +183,7 @@ export function SuccessScreen({
           onClick={() => setViewState("detail")}
           variant="secondary"
         >
-          View Payment Receipt
+          View Transaction Receipt
         </Button>
 
         {!hasPaymentId && (
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
index 547dd2abd18..0aef7b9f934 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
@@ -440,6 +440,7 @@ function SwapWidgetContent(
   if (screen.id === "4:success") {
     return (
       <SuccessScreen
+        type="swap-success"
         client={props.client}
         completedStatuses={screen.completedStatuses}
         onDone={() => {
diff --git a/packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx b/packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx
index 3913b59426b..0b4e8cda3ec 100644
--- a/packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx
+++ b/packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx
@@ -75,6 +75,7 @@ const meta: Meta<typeof SuccessScreen> = {
     windowAdapter: webWindowAdapter,
     client: storyClient,
     hasPaymentId: false,
+    type: "payment-success",
   },
   component: SuccessScreen,
   decorators: [
@@ -94,6 +95,12 @@ export const Basic: Story = {
   args: {},
 };
 
+export const BasicSwapSuccess: Story = {
+  args: {
+    type: "swap-success",
+  },
+};
+
 export const OnrampPayment: Story = {
   args: {
     completedStatuses: mockOnrampCompletedStatuses,