pass quote to callbacks, add events

MananTank · MananTank · commit 0d2d39de251a · 2025-09-17T17:54:35.000+05:30
diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts
@@ -250,6 +250,53 @@ export function reportAssetBuySuccessful(properties: {
   });
 }
 
+type TokenSwapParams = {
+  buyTokenChainId: number;
+  buyTokenAddress: string;
+  sellTokenChainId: number;
+  sellTokenAddress: string;
+};
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of successful token swaps from the token page
+ * - To track which tokens are being swapped the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenSwapSuccessful(properties: TokenSwapParams) {
+  posthog.capture("token swap successful", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of failed token swaps from the token page
+ * - To track which tokens are being swapped the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenSwapFailed(
+  properties: TokenSwapParams & {
+    errorMessage: string;
+  },
+) {
+  posthog.capture("token swap failed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of cancelled token swaps from the token page
+ * - To track which tokens are being swapped the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenSwapCancelled(properties: TokenSwapParams) {
+  posthog.capture("token swap cancelled", properties);
+}
+
 /**
  * ### Why do we need to report this event?
  * - To track number of failed asset purchases from the token page
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx
@@ -7,6 +7,9 @@ import { BuyWidget, SwapWidget } from "thirdweb/react";
 import {
   reportAssetBuyFailed,
   reportAssetBuySuccessful,
+  reportTokenSwapCancelled,
+  reportTokenSwapFailed,
+  reportTokenSwapSuccessful,
 } from "@/analytics/report";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -82,6 +85,31 @@ export function BuyTokenEmbed(props: {
               chainId: props.chain.id,
             },
           }}
+          onError={(error, quote) => {
+            reportTokenSwapFailed({
+              errorMessage: error.message,
+              buyTokenChainId: quote.intent.destinationChainId,
+              buyTokenAddress: quote.intent.destinationTokenAddress,
+              sellTokenChainId: quote.intent.originChainId,
+              sellTokenAddress: quote.intent.originTokenAddress,
+            });
+          }}
+          onSuccess={(quote) => {
+            reportTokenSwapSuccessful({
+              buyTokenChainId: quote.intent.destinationChainId,
+              buyTokenAddress: quote.intent.destinationTokenAddress,
+              sellTokenChainId: quote.intent.originChainId,
+              sellTokenAddress: quote.intent.originTokenAddress,
+            });
+          }}
+          onCancel={(quote) => {
+            reportTokenSwapCancelled({
+              buyTokenChainId: quote.intent.destinationChainId,
+              buyTokenAddress: quote.intent.destinationTokenAddress,
+              sellTokenChainId: quote.intent.originChainId,
+              sellTokenAddress: quote.intent.originTokenAddress,
+            });
+          }}
         />
       )}
     </div>
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
@@ -9,10 +9,7 @@ import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { getAddress } from "../../../../../utils/address.js";
 import { CustomThemeProvider } from "../../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../../core/design-system/index.js";
-import type {
-  BridgePrepareRequest,
-  BridgePrepareResult,
-} from "../../../../core/hooks/useBridgePrepare.js";
+import type { BridgePrepareRequest } from "../../../../core/hooks/useBridgePrepare.js";
 import type { CompletedStatusResult } from "../../../../core/hooks/useStepExecutor.js";
 import { webWindowAdapter } from "../../../adapters/WindowAdapter.js";
 import { EmbedContainer } from "../../ConnectWallet/Modal/ConnectEmbed.js";
@@ -24,7 +21,11 @@ import { StepRunner } from "../StepRunner.js";
 import { useActiveWalletInfo } from "./hooks.js";
 import { getLastUsedTokens, setLastUsedTokens } from "./storage.js";
 import { SwapUI } from "./swap-ui.js";
-import type { SwapWidgetConnectOptions, TokenSelection } from "./types.js";
+import type {
+  SwapPreparedQuote,
+  SwapWidgetConnectOptions,
+  TokenSelection,
+} from "./types.js";
 import { useBridgeChains } from "./use-bridge-chains.js";
 
 export type SwapWidgetProps = {
@@ -44,54 +45,6 @@ export type SwapWidgetProps = {
    * ```
    */
   client: ThirdwebClient;
-  /**
-   * Set the theme for the `SwapWidget` component. By default it is set to `"dark"`
-   *
-   * theme can be set to either `"dark"`, `"light"` or a custom theme object.
-   * You can also import [`lightTheme`](https://portal.thirdweb.com/references/typescript/v5/lightTheme)
-   * or [`darkTheme`](https://portal.thirdweb.com/references/typescript/v5/darkTheme)
-   * functions from `thirdweb/react` to use the default themes as base and overrides parts of it.
-   * @example
-   * ```ts
-   * import { lightTheme } from "thirdweb/react";
-   *
-   * const customTheme = lightTheme({
-   *  colors: {
-   *    modalBg: 'red'
-   *  }
-   * })
-   *
-   * function Example() {
-   *  return <SwapWidget client={client} theme={customTheme} />
-   * }
-   * ```
-   */
-  theme?: "light" | "dark" | Theme;
-  className?: string;
-  /**
-   * The currency to use for the payment.
-   * @default "USD"
-   */
-  currency?: SupportedFiatCurrency;
-  style?: React.CSSProperties;
-  /**
-   * Whether to show thirdweb branding in the widget.
-   * @default true
-   */
-  showThirdwebBranding?: boolean;
-  /**
-   * Callback to be called when the swap is successful.
-   */
-  onSuccess?: () => void;
-  /**
-   * Callback to be called when user encounters an error when swapping.
-   */
-  onError?: (error: Error) => void;
-  /**
-   * Callback to be called when the user cancels the purchase.
-   */
-  onCancel?: () => void;
-  connectOptions?: SwapWidgetConnectOptions;
   /**
    * The prefill Buy and/or Sell tokens for the swap widget. If `tokenAddress` is not provided, the native token will be used
    *
@@ -153,6 +106,54 @@ export type SwapWidgetProps = {
       amount?: string;
     };
   };
+  /**
+   * Set the theme for the `SwapWidget` component. By default it is set to `"dark"`
+   *
+   * theme can be set to either `"dark"`, `"light"` or a custom theme object.
+   * You can also import [`lightTheme`](https://portal.thirdweb.com/references/typescript/v5/lightTheme)
+   * or [`darkTheme`](https://portal.thirdweb.com/references/typescript/v5/darkTheme)
+   * functions from `thirdweb/react` to use the default themes as base and overrides parts of it.
+   * @example
+   * ```ts
+   * import { lightTheme } from "thirdweb/react";
+   *
+   * const customTheme = lightTheme({
+   *  colors: {
+   *    modalBg: 'red'
+   *  }
+   * })
+   *
+   * function Example() {
+   *  return <SwapWidget client={client} theme={customTheme} />
+   * }
+   * ```
+   */
+  theme?: "light" | "dark" | Theme;
+  /**
+   * The currency to use for the payment.
+   * @default "USD"
+   */
+  currency?: SupportedFiatCurrency;
+  connectOptions?: SwapWidgetConnectOptions;
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
+  /**
+   * Callback to be called when the swap is successful.
+   */
+  onSuccess?: (quote: SwapPreparedQuote) => void;
+  /**
+   * Callback to be called when user encounters an error when swapping.
+   */
+  onError?: (error: Error, quote: SwapPreparedQuote) => void;
+  /**
+   * Callback to be called when the user cancels the purchase.
+   */
+  onCancel?: (quote: SwapPreparedQuote) => void;
+  style?: React.CSSProperties;
+  className?: string;
 };
 
 /**
@@ -274,7 +275,7 @@ type SwapWidgetScreen =
     }
   | {
       id: "2:preview";
-      preparedQuote: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
+      preparedQuote: SwapPreparedQuote;
       request: BridgePrepareRequest;
       quote: Buy.quote.Result | Sell.quote.Result;
       buyToken: TokenWithPrices;
@@ -286,7 +287,7 @@ type SwapWidgetScreen =
       id: "3:execute";
       request: BridgePrepareRequest;
       quote: Buy.quote.Result | Sell.quote.Result;
-      preparedQuote: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
+      preparedQuote: SwapPreparedQuote;
       buyToken: TokenWithPrices;
       sellToken: TokenWithPrices;
       sellTokenBalance: bigint;
@@ -295,12 +296,13 @@ type SwapWidgetScreen =
   | {
       id: "4:success";
       completedStatuses: CompletedStatusResult[];
-      preparedQuote: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
+      preparedQuote: SwapPreparedQuote;
       buyToken: TokenWithPrices;
       sellToken: TokenWithPrices;
     }
   | {
       id: "error";
+      preparedQuote: SwapPreparedQuote;
       error: Error;
     };
 
@@ -377,11 +379,12 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   useBridgeChains(props.client);
 
   const handleError = useCallback(
-    (error: Error) => {
+    (error: Error, quote: SwapPreparedQuote) => {
       console.error(error);
-      props.onError?.(error);
+      props.onError?.(error, quote);
       setScreen({
         id: "error",
+        preparedQuote: quote,
         error,
       });
     },
@@ -439,7 +442,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
             id: "3:execute",
           });
         }}
-        onError={handleError}
+        onError={(error) => handleError(error, screen.preparedQuote)}
         paymentMethod={{
           quote: screen.quote,
           type: "wallet",
@@ -471,9 +474,9 @@ function SwapWidgetContent(props: SwapWidgetProps) {
             sellTokenBalance: screen.sellTokenBalance,
           });
         }}
-        onCancel={props.onCancel}
+        onCancel={() => props.onCancel?.(screen.preparedQuote)}
         onComplete={(completedStatuses) => {
-          props.onSuccess?.();
+          props.onSuccess?.(screen.preparedQuote);
           setScreen({
             ...screen,
             id: "4:success",
@@ -519,7 +522,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
         error={screen.error}
         onCancel={() => {
           setScreen({ id: "1:swap-ui" });
-          props.onCancel?.();
+          props.onCancel?.(screen.preparedQuote);
         }}
         onRetry={() => {
           setScreen({ id: "1:swap-ui" });
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
@@ -30,10 +30,7 @@ import {
   type Theme,
 } from "../../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
-import type {
-  BridgePrepareRequest,
-  BridgePrepareResult,
-} from "../../../../core/hooks/useBridgePrepare.js";
+import type { BridgePrepareRequest } from "../../../../core/hooks/useBridgePrepare.js";
 import { ConnectButton } from "../../ConnectWallet/ConnectButton.js";
 import { ArrowUpDownIcon } from "../../ConnectWallet/icons/ArrowUpDownIcon.js";
 import { WalletDotIcon } from "../../ConnectWallet/icons/WalletDotIcon.js";
@@ -51,6 +48,7 @@ import { DecimalRenderer } from "./common.js";
 import { SelectToken } from "./select-token-ui.js";
 import type {
   ActiveWalletInfo,
+  SwapPreparedQuote,
   SwapWidgetConnectOptions,
   TokenSelection,
 } from "./types.js";
@@ -65,8 +63,8 @@ type SwapUIProps = {
   currency: SupportedFiatCurrency;
   showThirdwebBranding: boolean;
   onSwap: (data: {
-    result: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
-    request: Extract<BridgePrepareRequest, { type: "buy" | "sell" }>;
+    result: SwapPreparedQuote;
+    request: BridgePrepareRequest;
     buyToken: TokenWithPrices;
     sellTokenBalance: bigint;
     sellToken: TokenWithPrices;
@@ -439,7 +437,7 @@ function useSwapQuote(params: {
     queryFn: async (): Promise<
       | {
           type: "preparedResult";
-          result: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
+          result: SwapPreparedQuote;
           request: Extract<BridgePrepareRequest, { type: "buy" | "sell" }>;
         }
       | {
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts
@@ -7,6 +7,7 @@ import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../../wallets/types.js";
 import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButton_connectModalOptions } from "../../../../core/hooks/connection/ConnectButtonProps.js";
+import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
 
 /**
  * Connection options for the `SwapWidget` component
@@ -149,3 +150,8 @@ export type TokenSelection = {
   tokenAddress: string;
   chainId: number;
 };
+
+export type SwapPreparedQuote = Extract<
+  BridgePrepareResult,
+  { type: "buy" | "sell" }
+>;
