thirdweb 5.104.1 → 5.104.2-nightly-c5f9921dc9cf6c62d754f12ce6171d95bd87a590-20250625053652

package/dist/types/stories/Bridge/SuccessScreen.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessScreen.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Bridge/SuccessScreen.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAEvF,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,4DAA4D,CAAC;AAsEpE,UAAU,2BAA4B,SAAQ,kBAAkB;IAC9D,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CACjC;AAYD,QAAA,MAAM,IAAI;;;;;;;;qBA1C2D,CAAC;2BAEhE,CAAD;qBACY,CAAC;;;;;;;;;;;;;;;;;;;uBA8BqB,2BAA2B;;;;;;;;;;;CAsCnB,CAAC;AAEhD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAUhC,CAAC"}
+{"version":3,"file":"SuccessScreen.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Bridge/SuccessScreen.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAEvF,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,4DAA4D,CAAC;AAsEpE,UAAU,2BAA4B,SAAQ,kBAAkB;IAC9D,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CACjC;AAYD,QAAA,MAAM,IAAI;;;;;;;;qBA1C8C,CAAC;2BACjD,CAAL;qBAEG,CAAD;;;;;;;;;;;;;;;;;;;uBA8BkC,2BAA2B;;;;;;;;;;;CAsCnB,CAAC;AAEhD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAUhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC"}

package/dist/types/stories/Bridge/UnsupportedTokenScreen.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedTokenScreen.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Bridge/UnsupportedTokenScreen.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,qDAAqD,CAAC;AAI7D,UAAU,oCACR,SAAQ,2BAA2B;IACnC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CACjC;AAcD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;uBAVD,oCAAoC;;;;;;;;;;;CAkCW,CAAC;AAEzD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAcpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAcjC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KActC,CAAC"}
+{"version":3,"file":"UnsupportedTokenScreen.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Bridge/UnsupportedTokenScreen.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,qDAAqD,CAAC;AAM7D,UAAU,oCACR,SAAQ,2BAA2B;IACnC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CACjC;AAcD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;uBAVD,oCAAoC;;;;;;;;;;;CAkCW,CAAC;AAEzD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAepC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAejC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAetC,CAAC"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.104.1";
+export declare const version = "5.104.2-nightly-c5f9921dc9cf6c62d754f12ce6171d95bd87a590-20250625053652";
 //# sourceMappingURL=version.d.ts.map

package/dist/types/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,4EAA4E,CAAC"}

package/package.json

@@ -375,7 +375,7 @@
     }
   },
   "typings": "./dist/types/exports/thirdweb.d.ts",
-  "version": "5.104.1",
+  "version": "5.104.2-nightly-c5f9921dc9cf6c62d754f12ce6171d95bd87a590-20250625053652",
   "scripts": {
     "bench": "vitest -c ./test/vitest.config.ts bench",
     "bench:compare": "bun run ./benchmarks/run.ts",

package/src/bridge/Buy.ts

@@ -99,7 +99,6 @@ import type { PreparedQuote, Quote } from "./types/Quote.js";
  *
  * @throws Will throw an error if there is an issue fetching the quote.
  * @bridge Buy
- * @beta
  */
 export async function quote(options: quote.Options): Promise<quote.Result> {
   const {
@@ -326,7 +325,6 @@ export declare namespace quote {
  *
  * @throws Will throw an error if there is an issue fetching the quote.
  * @bridge Buy
- * @beta
  */
 export async function prepare(
   options: prepare.Options,

package/src/react/core/hooks/useTransactionDetails.ts

@@ -14,6 +14,8 @@ import type { PreparedTransaction } from "../../../transaction/prepare-transacti
 import { getTransactionGasCost } from "../../../transaction/utils.js";
 import { resolvePromisedValue } from "../../../utils/promise/resolve-promised-value.js";
 import { toTokens } from "../../../utils/units.js";
+import type { Wallet } from "../../../wallets/interfaces/wallet.js";
+import { hasSponsoredTransactionsEnabled } from "../../../wallets/smart/is-smart-wallet.js";
 import {
   formatCurrencyAmount,
   formatTokenAmount,
@@ -40,6 +42,7 @@ interface TransactionDetails {
 interface UseTransactionDetailsOptions {
   transaction: PreparedTransaction;
   client: ThirdwebClient;
+  wallet: Wallet | undefined;
 }
 
 /**
@@ -49,8 +52,10 @@ interface UseTransactionDetailsOptions {
 export function useTransactionDetails({
   transaction,
   client,
+  wallet,
 }: UseTransactionDetailsOptions) {
   const chainMetadata = useChainMetadata(transaction.chain);
+  const hasSponsoredTransactions = hasSponsoredTransactionsEnabled(wallet);
 
   return useQuery({
     enabled: !!transaction.to && !!chainMetadata.data,
@@ -76,7 +81,9 @@ export function useTransactionDetails({
           erc20Value ? erc20Value.tokenAddress : NATIVE_TOKEN_ADDRESS,
           transaction.chain.id,
         ).catch(() => null),
-        getTransactionGasCost(transaction).catch(() => null),
+        hasSponsoredTransactions
+          ? 0n
+          : getTransactionGasCost(transaction).catch(() => null),
       ]);
 
       // Process function info from ABI if available
@@ -172,6 +179,7 @@ export function useTransactionDetails({
       transaction.to,
       transaction.chain.id,
       transaction.erc20Value?.toString(),
+      hasSponsoredTransactions,
     ],
   });
 }

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

@@ -217,6 +217,7 @@ export function BridgeOrchestrator({
       {/* Error Banner */}
       {state.value === "error" && state.context.currentError && (
         <ErrorBanner
+          client={client}
           error={state.context.currentError}
           onCancel={onCancel}
           onRetry={handleRetry}
@@ -282,6 +283,7 @@ export function BridgeOrchestrator({
             amount={state.context.destinationAmount}
             client={client}
             destinationToken={state.context.destinationToken}
+            mode={uiOptions.mode}
             onBack={() => {
               send({ type: "BACK" });
             }}
@@ -332,6 +334,7 @@ export function BridgeOrchestrator({
         state.context.quote &&
         state.context.completedStatuses && (
           <SuccessScreen
+            client={client}
             completedStatuses={state.context.completedStatuses}
             onDone={handleBuyComplete}
             preparedQuote={state.context.quote}

package/src/react/web/ui/Bridge/BuyWidget.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";
@@ -260,14 +261,24 @@ type UIOptionsResult =
  *
  * Refer to the [`BuyWidgetConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/BuyWidgetConnectOptions) type for more details.
  *
- * @bridge
- * @beta
- * @react
+ * @bridge Widgets
  */
 export function BuyWidget(props: BuyWidgetProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
   const theme = props.theme || "dark";
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client: props.client,
+        event: "ub:ui:buy_widget:render",
+        toChainId: props.chain.id,
+        toToken: props.tokenAddress,
+      });
+    },
+    queryKey: ["buy_widget:render"],
+  });
+
   const bridgeDataQuery = useQuery({
     queryFn: async (): Promise<UIOptionsResult> => {
       if (
@@ -343,7 +354,13 @@ export function BuyWidget(props: BuyWidgetProps) {
     );
   } 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/CheckoutWidget.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";
@@ -243,14 +244,24 @@ type UIOptionsResult =
  *
  * Refer to the [`CheckoutWidgetConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/CheckoutWidgetConnectOptions) type for more details.
  *
- * @bridge
- * @beta
- * @react
+ * @bridge Widgets
  */
 export function CheckoutWidget(props: CheckoutWidgetProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
   const theme = props.theme || "dark";
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client: props.client,
+        event: "ub:ui:checkout_widget:render",
+        toChainId: props.chain.id,
+        toToken: props.tokenAddress,
+      });
+    },
+    queryKey: ["checkout_widget:render"],
+  });
+
   const bridgeDataQuery = useQuery({
     queryFn: async (): Promise<UIOptionsResult> => {
       const token = await getToken(
@@ -306,7 +317,13 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
     );
   } 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/ErrorBanner.tsx

@@ -1,5 +1,8 @@
 "use client";
 import { CrossCircledIcon } from "@radix-ui/react-icons";
+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 { iconSize } from "../../../core/design-system/index.js";
 import { useBridgeError } from "../../../core/hooks/useBridgeError.js";
@@ -22,13 +25,30 @@ interface ErrorBannerProps {
    * Called when user wants to cancel
    */
   onCancel?: () => void;
+  client: ThirdwebClient;
 }
 
-export function ErrorBanner({ error, onRetry, onCancel }: ErrorBannerProps) {
+export function ErrorBanner({
+  error,
+  onRetry,
+  onCancel,
+  client,
+}: ErrorBannerProps) {
   const theme = useCustomTheme();
 
   const { userMessage } = useBridgeError({ error });
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client,
+        error: error.message,
+        event: "ub:ui:error",
+      });
+    },
+    queryKey: ["error_banner", userMessage],
+  });
+
   return (
     <Container flex="column" fullHeight gap="md" p="lg">
       {/* Error Icon and Message */}

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

@@ -1,5 +1,7 @@
 "use client";
+import { useQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
+import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Token } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
@@ -79,9 +81,11 @@ interface QuoteLoaderProps {
    * Fee payer for direct transfers (defaults to sender)
    */
   feePayer?: "sender" | "receiver";
+  mode: "fund_wallet" | "direct_payment" | "transaction";
 }
 
 export function QuoteLoader({
+  mode,
   destinationToken,
   paymentMethod,
   amount,
@@ -109,6 +113,26 @@ export function QuoteLoader({
   });
   const prepareQuery = useBridgePrepare(request);
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        chainId:
+          paymentMethod.type === "wallet"
+            ? paymentMethod.originToken.chainId
+            : undefined,
+        client,
+        event: `ub:ui:loading_quote:${mode}`,
+        fromToken:
+          paymentMethod.type === "wallet"
+            ? paymentMethod.originToken.address
+            : undefined,
+        toChainId: destinationToken.chainId,
+        toToken: destinationToken.address,
+      });
+    },
+    queryKey: ["loading_quote", paymentMethod.type],
+  });
+
   // Handle successful quote
   useEffect(() => {
     if (prepareQuery.data) {

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

@@ -15,6 +15,7 @@ import {
 import { useChainMetadata } from "../../../core/hooks/others/useChainQuery.js";
 import { useTransactionDetails } from "../../../core/hooks/useTransactionDetails.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
 import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
 import { Container, Line } from "../components/basic.js";
@@ -57,6 +58,7 @@ export function TransactionPayment({
 }: TransactionPaymentProps) {
   const theme = useCustomTheme();
   const activeAccount = useActiveAccount();
+  const wallet = useActiveWallet();
 
   // Get chain metadata for native currency symbol
   const chainMetadata = useChainMetadata(uiOptions.transaction.chain);
@@ -65,6 +67,7 @@ export function TransactionPayment({
   const transactionDataQuery = useTransactionDetails({
     client,
     transaction: uiOptions.transaction,
+    wallet,
   });
 
   const contractName =

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-details/PaymentOverview.tsx

@@ -188,6 +188,7 @@ export function PaymentOverview(props: {
         {props.uiOptions.mode === "transaction" && (
           <TransactionOverViewCompact
             client={props.client}
+            paymentMethod={props.paymentMethod}
             uiOptions={props.uiOptions}
           />
         )}
@@ -198,12 +199,14 @@ export function PaymentOverview(props: {
 
 const TransactionOverViewCompact = (props: {
   uiOptions: Extract<UIOptions, { mode: "transaction" }>;
+  paymentMethod: PaymentMethod;
   client: ThirdwebClient;
 }) => {
   const theme = useCustomTheme();
   const txInfo = useTransactionDetails({
     client: props.client,
     transaction: props.uiOptions.transaction,
+    wallet: props.paymentMethod.payerWallet,
   });
 
   if (!txInfo.data) {

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>
   );
 };