[Dashboard] Feature: Update payment success copy on payment page (#7936)

Author: gregfromstl

.changeset/cuddly-results-play.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Updates copy on the payment widgets

apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx

@@ -60,6 +60,7 @@ export function PayPageWidget({
             createWallet("io.metamask"),
             createWallet("io.rabby"),
             createWallet("com.okex.wallet"),
+            createWallet("me.rainbow"),
             createWallet("walletConnect"),
           ],
           showAllWallets: true,

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

@@ -389,6 +389,7 @@ export function BridgeOrchestrator({
             preparedQuote={state.context.quote}
             uiOptions={uiOptions}
             windowAdapter={webWindowAdapter}
+            hasPaymentId={!!paymentLinkId}
           />
         )}
 

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

@@ -42,6 +42,11 @@ export interface SuccessScreenProps {
   windowAdapter: WindowAdapter;
 
   client: ThirdwebClient;
+
+  /**
+   * Whether or not this payment is associated with a payment ID. If it does, we show a different message.
+   */
+  hasPaymentId?: boolean;
 }
 
 type ViewState = "success" | "detail";
@@ -53,6 +58,7 @@ export function SuccessScreen({
   onDone,
   windowAdapter,
   client,
+  hasPaymentId = false,
 }: SuccessScreenProps) {
   const theme = useCustomTheme();
   const [viewState, setViewState] = useState<ViewState>("success");
@@ -120,7 +126,11 @@ export function SuccessScreen({
         </Text>
 
         <Text center color="secondaryText" size="sm">
-          Your cross-chain payment has been completed successfully.
+          {hasPaymentId
+            ? "You can now close this page and return to the application."
+            : uiOptions.mode === "transaction"
+              ? "Click continue to execute your transaction."
+              : "Your payment has been completed successfully."}
         </Text>
       </Container>
       <Spacer y="lg" />
@@ -135,9 +145,11 @@ export function SuccessScreen({
           View Payment Receipt
         </Button>
 
-        <Button fullWidth onClick={onDone} variant="accent">
-          {uiOptions.mode === "transaction" ? "Continue" : "Done"}
-        </Button>
+        {!hasPaymentId && (
+          <Button fullWidth onClick={onDone} variant="accent">
+            {uiOptions.mode === "transaction" ? "Continue" : "Done"}
+          </Button>
+        )}
       </Container>
 
       {/* CSS Animations */}

packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx

@@ -222,3 +222,17 @@ export const TransactionPayment: Story = {
     backgrounds: { default: "light" },
   },
 };
+
+export const PaymentId: Story = {
+  args: {
+    client: storyClient,
+    completedStatuses: mockBuyCompletedStatuses,
+    hasPaymentId: true,
+    preparedQuote: simpleBuyQuote,
+    theme: "light",
+    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};