thirdweb 5.104.1 → 5.104.2-nightly-d85ee5fac30b739b69202184eb2e62660790979b-20250625000421

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

@@ -1,6 +1,9 @@
 "use client";
 import { CheckIcon } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import { trackPayEvent } from "../../../../../analytics/track/pay.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { WindowAdapter } from "../../../../core/adapters/WindowAdapter.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { iconSize } from "../../../../core/design-system/index.js";
@@ -37,6 +40,8 @@ export interface SuccessScreenProps {
    * Window adapter for opening URLs
    */
   windowAdapter: WindowAdapter;
+
+  client: ThirdwebClient;
 }
 
 type ViewState = "success" | "detail";
@@ -47,10 +52,27 @@ export function SuccessScreen({
   completedStatuses,
   onDone,
   windowAdapter,
+  client,
 }: SuccessScreenProps) {
   const theme = useCustomTheme();
   const [viewState, setViewState] = useState<ViewState>("success");
 
+  useQuery({
+    queryFn: () => {
+      if (preparedQuote.type === "buy" || preparedQuote.type === "sell") {
+        trackPayEvent({
+          chainId: preparedQuote.intent.originChainId,
+          client: client,
+          event: "ub:ui:success_screen",
+          fromToken: preparedQuote.intent.originTokenAddress,
+          toChainId: preparedQuote.intent.destinationChainId,
+          toToken: preparedQuote.intent.destinationTokenAddress,
+        });
+      }
+    },
+    queryKey: ["success_screen", preparedQuote.type],
+  });
+
   if (viewState === "detail") {
     return (
       <PaymentReceipt

package/src/react/web/ui/PayEmbed.tsx

@@ -307,7 +307,7 @@ export type PayEmbedProps = {
  *
  * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
  *
- * @buyCrypto
+ * @deprecated Use `BuyWidget`, `CheckoutWidget` or `TransactionWidget` instead.
  */
 export function PayEmbed(props: PayEmbedProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
@@ -356,6 +356,7 @@ export function PayEmbed(props: PayEmbedProps) {
         amount={props.payOptions.prefillBuy.amount || "0.01"}
         chain={props.payOptions.prefillBuy.chain}
         client={props.client}
+        onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
         theme={theme}
         title={metadata?.name || "Buy"}
         tokenAddress={
@@ -374,6 +375,7 @@ export function PayEmbed(props: PayEmbedProps) {
         description={metadata?.description}
         image={metadata?.image}
         name={metadata?.name || "Checkout"}
+        onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
         seller={props.payOptions.paymentInfo.sellerAddress as Address}
         theme={theme}
         tokenAddress={
@@ -389,6 +391,7 @@ export function PayEmbed(props: PayEmbedProps) {
         client={props.client}
         description={metadata?.description}
         image={metadata?.image}
+        onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
         theme={theme}
         title={metadata?.name}
         transaction={props.payOptions.transaction}

package/src/stories/Bridge/ErrorBanner.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { createThirdwebClient } from "../../client/client.js";
 import type { Theme } from "../../react/core/design-system/index.js";
 import { ErrorBanner } from "../../react/web/ui/Bridge/ErrorBanner.js";
 import { ModalThemeWrapper } from "../utils.js";
@@ -25,7 +26,10 @@ const ErrorBannerWithTheme = (props: ErrorBannerWithThemeProps) => {
   const { theme, ...componentProps } = props;
   return (
     <ModalThemeWrapper theme={theme}>
-      <ErrorBanner {...componentProps} />
+      <ErrorBanner
+        client={createThirdwebClient({ clientId: "test" })}
+        {...componentProps}
+      />
     </ModalThemeWrapper>
   );
 };

package/src/stories/Bridge/SuccessScreen.stories.tsx

@@ -7,7 +7,7 @@ import {
   SuccessScreen,
   type SuccessScreenProps,
 } from "../../react/web/ui/Bridge/payment-success/SuccessScreen.js";
-import { ModalThemeWrapper } from "../utils.js";
+import { ModalThemeWrapper, storyClient } from "../utils.js";
 import {
   FUND_WALLET_UI_OPTIONS,
   simpleBuyQuote,
@@ -126,6 +126,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    client: storyClient,
     theme: "dark",
   },
   parameters: {
@@ -135,6 +136,7 @@ export const Default: Story = {
 
 export const DefaultLight: Story = {
   args: {
+    client: storyClient,
     theme: "light",
   },
   parameters: {
@@ -144,6 +146,7 @@ export const DefaultLight: Story = {
 
 export const OnrampPayment: Story = {
   args: {
+    client: storyClient,
     completedStatuses: mockOnrampCompletedStatuses,
     preparedQuote: simpleOnrampQuote,
     theme: "dark",
@@ -161,6 +164,7 @@ export const OnrampPayment: Story = {
 
 export const OnrampPaymentLight: Story = {
   args: {
+    client: storyClient,
     completedStatuses: mockOnrampCompletedStatuses,
     preparedQuote: simpleOnrampQuote,
     theme: "light",
@@ -172,6 +176,7 @@ export const OnrampPaymentLight: Story = {
 
 export const ComplexPayment: Story = {
   args: {
+    client: storyClient,
     completedStatuses: [
       ...mockOnrampCompletedStatuses,
       ...mockBuyCompletedStatuses,
@@ -192,6 +197,7 @@ export const ComplexPayment: Story = {
 
 export const ComplexPaymentLight: Story = {
   args: {
+    client: storyClient,
     completedStatuses: [
       ...mockOnrampCompletedStatuses,
       ...mockBuyCompletedStatuses,
@@ -206,6 +212,7 @@ export const ComplexPaymentLight: Story = {
 
 export const TransactionPayment: Story = {
   args: {
+    client: storyClient,
     completedStatuses: mockBuyCompletedStatuses,
     preparedQuote: simpleBuyQuote,
     theme: "light",

package/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { defineChain } from "../../chains/utils.js";
+import { createThirdwebClient } from "../../client/client.js";
 import type { Theme } from "../../react/core/design-system/index.js";
 import {
   UnsupportedTokenScreen,
@@ -7,6 +8,8 @@ import {
 } from "../../react/web/ui/Bridge/UnsupportedTokenScreen.js";
 import { ModalThemeWrapper } from "../utils.js";
 
+const TEST_CLIENT = createThirdwebClient({ clientId: "test" });
+
 // Props interface for the wrapper component
 interface UnsupportedTokenScreenWithThemeProps
   extends UnsupportedTokenScreenProps {
@@ -57,6 +60,7 @@ type Story = StoryObj<typeof meta>;
 export const TokenNotSupported: Story = {
   args: {
     chain: defineChain(1),
+    client: TEST_CLIENT,
     theme: "dark", // Ethereum mainnet - will show indexing spinner
   },
   parameters: {
@@ -73,6 +77,7 @@ export const TokenNotSupported: Story = {
 export const TokenNotSupportedLight: Story = {
   args: {
     chain: defineChain(1),
+    client: TEST_CLIENT,
     theme: "light", // Ethereum mainnet - will show indexing spinner
   },
   parameters: {
@@ -89,6 +94,7 @@ export const TokenNotSupportedLight: Story = {
 export const TestnetNotSupported: Story = {
   args: {
     chain: defineChain(11155111),
+    client: TEST_CLIENT,
     theme: "dark", // Sepolia testnet - will show error state
   },
   parameters: {
@@ -105,6 +111,7 @@ export const TestnetNotSupported: Story = {
 export const TestnetNotSupportedLight: Story = {
   args: {
     chain: defineChain(11155111),
+    client: TEST_CLIENT,
     theme: "light", // Sepolia testnet - will show error state
   },
   parameters: {

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.104.1";
+export const version = "5.104.2-nightly-d85ee5fac30b739b69202184eb2e62660790979b-20250625000421";