[MNY-322] SDK: Update success message shown in SwapWidget component

.changeset/happy-dots-jam.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Update success message shown in SwapWidget component

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -723,6 +723,7 @@
   if (screen.id === "6:success") {
     return (
       <SuccessScreen
+        type="payment-success"
         // from props
         client={props.client}
         hasPaymentId={!!props.paymentLinkId}

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}

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -786,6 +786,7 @@
       <SuccessScreen
         // from props
         client={props.client}
+        type="payment-success"
         hasPaymentId={!!props.paymentLinkId}
         // others
         completedStatuses={screen.completedStatuses}

packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx

@@ -46,6 +46,8 @@
    * 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 @@
   client,
   hasPaymentId = false,
   showContinueWithTx,
+  type,
 }: SuccessScreenProps) {
   const theme = useCustomTheme();
   const [viewState, setViewState] = useState<ViewState>("success");
@@ -112,6 +115,13 @@
     );
   }
 
+  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,15 +161,15 @@
               marginBottom: spacing.xxs,
             }}
           >
-            Payment Successful
+            {title}
           </Text>
 
           <Text center color="secondaryText" size="sm">
             {hasPaymentId
               ? "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 @@
           onClick={() => setViewState("detail")}
           variant="secondary"
         >
-          View Payment Receipt
+          View Transaction Receipt
         </Button>
 
         {!hasPaymentId && (

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={() => {

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,