feat: adds ub widget tracking

gregfromstl · gregfromstl · commit 031e629658e5 · 2025-06-23T16:26:22.000-07:00
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx b/packages/thirdweb/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}
@@ -332,6 +333,7 @@ export function BridgeOrchestrator({
         state.context.quote &&
         state.context.completedStatuses && (
           <SuccessScreen
+            client={client}
             completedStatuses={state.context.completedStatuses}
             onDone={handleBuyComplete}
             preparedQuote={state.context.quote}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx b/packages/thirdweb/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";
@@ -268,6 +269,18 @@ export function BuyWidget(props: BuyWidgetProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
   const theme = props.theme || "dark";
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client: props.client,
+        event: "buy_widget:render",
+        toChainId: props.chain.id,
+        toToken: props.tokenAddress,
+      });
+    },
+    queryKey: ["buy_widget:render"],
+  });
+
   const bridgeDataQuery = useQuery({
     queryFn: async (): Promise<UIOptionsResult> => {
       if (
@@ -343,7 +356,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 = (
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx b/packages/thirdweb/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";
@@ -251,6 +252,18 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
   const theme = props.theme || "dark";
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client: props.client,
+        event: "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 +319,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 = (
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx b/packages/thirdweb/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: "error",
+      });
+    },
+    queryKey: ["error_banner", userMessage],
+  });
+
   return (
     <Container flex="column" fullHeight gap="md" p="lg">
       {/* Error Icon and Message */}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx b/packages/thirdweb/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";
@@ -109,6 +111,26 @@ export function QuoteLoader({
   });
   const prepareQuery = useBridgePrepare(request);
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        chainId:
+          paymentMethod.type === "wallet"
+            ? paymentMethod.originToken.chainId
+            : undefined,
+        client,
+        event: "loading_quote",
+        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) {
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx b/packages/thirdweb/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";
@@ -275,6 +276,18 @@ 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: "transaction_widget:render",
+        toToken: props.tokenAddress,
+      });
+    },
+    queryKey: ["transaction_widget:render"],
+  });
+
   const bridgeDataQuery = useQuery({
     queryFn: async (): Promise<UIOptionsResult> => {
       let erc20Value = props.transaction.erc20Value;
@@ -331,7 +344,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 = (
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx b/packages/thirdweb/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,17 +14,31 @@ export interface UnsupportedTokenScreenProps {
    * The chain the token is on
    */
   chain: Chain;
+  client: ThirdwebClient;
+  tokenAddress?: string;
 }
 
 /**
  * Screen displayed when a specified token is not supported by the Bridge API
  * @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: "unsupported_token",
+        fromToken: tokenAddress,
+      });
+    },
+    queryKey: ["unsupported_token"],
+  });
+
   if (chainMetadata?.testnet) {
     return (
       <Container
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx b/packages/thirdweb/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,22 @@ export function PaymentDetails({
     }
   };
 
+  useQuery({
+    queryFn: () => {
+      if (preparedQuote.type === "buy" || preparedQuote.type === "sell") {
+        trackPayEvent({
+          chainId: preparedQuote.intent.originChainId,
+          client,
+          event: "payment_details",
+          fromToken: preparedQuote.intent.originTokenAddress,
+          toChainId: preparedQuote.intent.destinationChainId,
+          toToken: preparedQuote.intent.destinationTokenAddress,
+        });
+      }
+    },
+    queryKey: ["payment_details", preparedQuote.type],
+  });
+
   // Extract common data based on quote type
   const getDisplayData = () => {
     switch (preparedQuote.type) {
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx b/packages/thirdweb/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
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx b/packages/thirdweb/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: "success_screen",
+          fromToken: preparedQuote.intent.originTokenAddress,
+          toChainId: preparedQuote.intent.destinationChainId,
+          toToken: preparedQuote.intent.destinationTokenAddress,
+        });
+      }
+    },
+    queryKey: ["success_screen", preparedQuote.type],
+  });
+
   if (viewState === "detail") {
     return (
       <PaymentReceipt
diff --git a/packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx b/packages/thirdweb/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>
   );
 };
diff --git a/packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx b/packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx
diff --git a/packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx b/packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx
diff --git a/packages/thirdweb/test/src/test-clients.js b/packages/thirdweb/test/src/test-clients.js
diff --git a/packages/thirdweb/test/src/test-clients.js.map b/packages/thirdweb/test/src/test-clients.js.map
