thirdweb 5.104.1-nightly-c26be2d958283fb77d7689e31356b1cee7c6ff2a-20250624000418 → 5.104.2-nightly-d85ee5fac30b739b69202184eb2e62660790979b-20250625000421

package/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
+import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Token } from "../../../../bridge/index.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
@@ -267,14 +268,24 @@ type UIOptionsResult =
  *
  * Refer to the [`TransactionWidgetConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/TransactionWidgetConnectOptions) type for more details.
  *
- * @bridge
- * @beta
- * @react
+ * @bridge Widgets
  */
 export function TransactionWidget(props: TransactionWidgetProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
   const theme = props.theme || "dark";
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        chainId: props.transaction.chain.id,
+        client: props.client,
+        event: "ub:ui:transaction_widget:render",
+        toToken: props.tokenAddress,
+      });
+    },
+    queryKey: ["transaction_widget:render"],
+  });
+
   const bridgeDataQuery = useQuery({
     queryFn: async (): Promise<UIOptionsResult> => {
       let erc20Value = props.transaction.erc20Value;
@@ -331,7 +342,13 @@ export function TransactionWidget(props: TransactionWidgetProps) {
     );
   } else if (bridgeDataQuery.data?.type === "unsupported_token") {
     // Show unsupported token screen
-    content = <UnsupportedTokenScreen chain={bridgeDataQuery.data.chain} />;
+    content = (
+      <UnsupportedTokenScreen
+        chain={bridgeDataQuery.data.chain}
+        client={props.client}
+        tokenAddress={props.tokenAddress}
+      />
+    );
   } else if (bridgeDataQuery.data?.type === "success") {
     // Show normal bridge orchestrator
     content = (

package/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx

@@ -1,4 +1,7 @@
+import { useQuery } from "@tanstack/react-query";
+import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useChainMetadata } from "../../../core/hooks/others/useChainQuery.js";
 import { AccentFailIcon } from "../ConnectWallet/icons/AccentFailIcon.js";
@@ -11,6 +14,8 @@ export interface UnsupportedTokenScreenProps {
    * The chain the token is on
    */
   chain: Chain;
+  client: ThirdwebClient;
+  tokenAddress?: string;
 }
 
 /**
@@ -18,10 +23,22 @@ export interface UnsupportedTokenScreenProps {
  * @internal
  */
 export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) {
-  const { chain } = props;
+  const { chain, tokenAddress, client } = props;
 
   const { data: chainMetadata } = useChainMetadata(chain);
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        chainId: chain.id,
+        client,
+        event: "ub:ui:unsupported_token",
+        fromToken: tokenAddress,
+      });
+    },
+    queryKey: ["unsupported_token"],
+  });
+
   if (chainMetadata?.testnet) {
     return (
       <Container

package/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useQuery } from "@tanstack/react-query";
+import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../../core/design-system/index.js";
@@ -68,6 +70,38 @@ export function PaymentDetails({
     }
   };
 
+  useQuery({
+    queryFn: () => {
+      if (
+        preparedQuote.type === "buy" ||
+        preparedQuote.type === "sell" ||
+        preparedQuote.type === "transfer"
+      ) {
+        trackPayEvent({
+          chainId:
+            preparedQuote.type === "transfer"
+              ? preparedQuote.intent.chainId
+              : preparedQuote.intent.originChainId,
+          client,
+          event: "payment_details",
+          fromToken:
+            preparedQuote.type === "transfer"
+              ? preparedQuote.intent.tokenAddress
+              : preparedQuote.intent.originTokenAddress,
+          toChainId:
+            preparedQuote.type === "transfer"
+              ? preparedQuote.intent.chainId
+              : preparedQuote.intent.destinationChainId,
+          toToken:
+            preparedQuote.type === "transfer"
+              ? preparedQuote.intent.tokenAddress
+              : preparedQuote.intent.destinationTokenAddress,
+        });
+      }
+    },
+    queryKey: ["payment_details", preparedQuote.type],
+  });
+
   // Extract common data based on quote type
   const getDisplayData = () => {
     switch (preparedQuote.type) {

package/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -1,5 +1,7 @@
 "use client";
+import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
+import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import type { Token } from "../../../../../bridge/types/Token.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
@@ -96,6 +98,18 @@ export function PaymentSelection({
     type: "walletSelection",
   });
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client,
+        event: "payment_selection",
+        toChainId: destinationToken.chainId,
+        toToken: destinationToken.address,
+      });
+    },
+    queryKey: ["payment_selection"],
+  });
+
   const payerWallet =
     currentStep.type === "tokenSelection"
       ? currentStep.selectedWallet

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-nightly-c26be2d958283fb77d7689e31356b1cee7c6ff2a-20250624000418";
+export const version = "5.104.2-nightly-d85ee5fac30b739b69202184eb2e62660790979b-20250625000421";