[MNY-204] Dashboard: Add tracking for BuyWidget, SDK: update callback types in BuyWidget (#8100)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `BuyWidget` and related components by updating the callback props to include a `quote` object, allowing for better tracking of token buy events and improving error handling.

### Detailed summary
- Updated `onSuccess`, `onError`, and `onCancel` props in `BuyWidget` to accept a `quote` object.
- Enhanced error reporting with detailed information in `reportTokenBuyFailed`, `reportTokenBuyCancelled`, and `reportTokenBuySuccessful`.
- Modified `BuyAndSwapEmbed` component to handle the new callback signatures.
- Adjusted `BridgeOrchestrator` to utilize the `quote` object in its flow.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- New Features
  - Buy and Bridge flows now provide quote details to success, error, and cancel callbacks.
  - Token-level analytics added for buy flows (success, failure, cancel).
- Breaking Changes
  - Callback signatures changed to include quote parameters; client implementations must be updated.
- Documentation
  - Examples updated to show new callback parameters and usage.
- Chores
  - Standardized analytics for asset purchases where contract type may be unspecified.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

.changeset/better-lines-rule.md

@@ -0,0 +1,13 @@
+---
+"thirdweb": patch
+---
+
+Update the `onSuccess`, `onError`, and `onCancel` callback props of the `BuyWidget` to be called with the `quote` object
+
+```tsx
+<BuyWidget
+  onSuccess={(quote) => console.log("Swap completed:", quote)}
+  onError={(error, quote) => console.error("Swap failed:", error, quote)}
+  onCancel={(quote) => console.log("Swap cancelled:", quote)}
+/>
+```

apps/dashboard/src/@/analytics/report.ts

@@ -225,7 +225,7 @@ type AssetContractType =
  */
 export function reportAssetBuySuccessful(properties: {
   chainId: number;
-  contractType: AssetContractType;
+  contractType: AssetContractType | undefined;
   assetType: "nft" | "coin";
 }) {
   posthog.capture("asset buy successful", {
@@ -243,9 +243,51 @@ type TokenSwapParams = {
   pageType: "asset" | "bridge" | "chain";
 };
 
+type TokenBuyParams = {
+  buyTokenChainId: number | undefined;
+  buyTokenAddress: string | undefined;
+  pageType: "asset" | "bridge" | "chain";
+};
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of successful token buys
+ * - To track which tokens are being bought the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuySuccessful(properties: TokenBuyParams) {
+  posthog.capture("token buy successful", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of failed token buys
+ * - To track which token buys are failing
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuyFailed(properties: TokenBuyParams) {
+  posthog.capture("token buy failed", properties);
+}
+
 /**
  * ### Why do we need to report this event?
- * - To track number of successful token swaps from the token page
+ * - To track number of cancelled token buys
+ * - To track which token buys are being cancelled
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuyCancelled(properties: TokenBuyParams) {
+  posthog.capture("token buy cancelled", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of successful token swaps
  * - To track which tokens are being swapped the most
  *
  * ### Who is responsible for this event?
@@ -271,7 +313,7 @@ export function reportSwapWidgetShown(properties: {
 
 /**
  * ### Why do we need to report this event?
- * - To track number of failed token swaps from the token page
+ * - To track number of failed token swaps
  * - To track which tokens are being swapped the most
  *
  * ### Who is responsible for this event?
@@ -287,7 +329,7 @@ export function reportTokenSwapFailed(
 
 /**
  * ### Why do we need to report this event?
- * - To track number of cancelled token swaps from the token page
+ * - To track number of cancelled token swaps
  * - To track which tokens are being swapped the most
  *
  * ### Who is responsible for this event?
@@ -299,15 +341,15 @@ export function reportTokenSwapCancelled(properties: TokenSwapParams) {
 
 /**
  * ### Why do we need to report this event?
- * - To track number of failed asset purchases from the token page
+ * - To track number of failed asset purchases
  * - To track the errors that users encounter when trying to purchase an asset
  *
  * ### Who is responsible for this event?
  * @MananTank
  */
 export function reportAssetBuyFailed(properties: {
   chainId: number;
-  contractType: AssetContractType;
+  contractType: AssetContractType | undefined;
   assetType: "nft" | "coin";
   error: string;
 }) {
@@ -329,7 +371,7 @@ export function reportAssetBuyFailed(properties: {
  */
 export function reportAssetBuyCancelled(properties: {
   chainId: number;
-  contractType: AssetContractType;
+  contractType: AssetContractType | undefined;
   assetType: "nft" | "coin";
 }) {
   posthog.capture("asset buy cancelled", {

apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx

@@ -9,6 +9,9 @@ import {
   reportAssetBuyFailed,
   reportAssetBuySuccessful,
   reportSwapWidgetShown,
+  reportTokenBuyCancelled,
+  reportTokenBuyFailed,
+  reportTokenBuySuccessful,
   reportTokenSwapCancelled,
   reportTokenSwapFailed,
   reportTokenSwapSuccessful,
@@ -66,32 +69,81 @@ export function BuyAndSwapEmbed(props: {
           connectOptions={{
             autoConnect: false,
           }}
-          onError={(e) => {
+          onError={(e, quote) => {
             const errorMessage = parseError(e);
+
+            reportTokenBuyFailed({
+              buyTokenChainId:
+                quote?.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote?.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote?.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote?.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
             if (props.pageType === "asset") {
               reportAssetBuyFailed({
                 assetType: "coin",
                 chainId: props.chain.id,
-                contractType: "DropERC20",
                 error: errorMessage,
+                contractType: undefined,
               });
             }
           }}
-          onCancel={() => {
+          onCancel={(quote) => {
+            reportTokenBuyCancelled({
+              buyTokenChainId:
+                quote?.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote?.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote?.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote?.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
             if (props.pageType === "asset") {
               reportAssetBuyCancelled({
                 assetType: "coin",
                 chainId: props.chain.id,
-                contractType: "DropERC20",
+                contractType: undefined,
               });
             }
           }}
-          onSuccess={() => {
+          onSuccess={(quote) => {
+            reportTokenBuySuccessful({
+              buyTokenChainId:
+                quote.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
             if (props.pageType === "asset") {
               reportAssetBuySuccessful({
                 assetType: "coin",
                 chainId: props.chain.id,
-                contractType: "DropERC20",
+                contractType: undefined,
               });
             }
           }}

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -82,17 +82,17 @@ export interface BridgeOrchestratorProps {
   /**
    * Called when the flow is completed successfully
    */
-  onComplete: () => void;
+  onComplete: (quote: BridgePrepareResult) => void;
 
   /**
    * Called when the flow encounters an error
    */
-  onError: (error: Error) => void;
+  onError: (error: Error, quote: BridgePrepareResult | undefined) => void;
 
   /**
    * Called when the user cancels the flow
    */
-  onCancel: () => void;
+  onCancel: (quote: BridgePrepareResult | undefined) => void;
 
   /**
    * Connect options for wallet connection
@@ -189,19 +189,22 @@ export function BridgeOrchestrator({
   }, [send, uiOptions.mode]);
 
   // Handle post-buy transaction completion
-  const handlePostBuyTransactionComplete = useCallback(() => {
-    onComplete?.();
-    send({ type: "RESET" });
-  }, [onComplete, send]);
+  const handlePostBuyTransactionComplete = useCallback(
+    (quote: BridgePrepareResult) => {
+      onComplete?.(quote);
+      send({ type: "RESET" });
+    },
+    [onComplete, send],
+  );
 
   // Handle errors
   const handleError = useCallback(
     (error: Error) => {
       console.error(error);
-      onError?.(error);
+      onError?.(error, state.context.quote);
       send({ error, type: "ERROR_OCCURRED" });
     },
-    [onError, send],
+    [onError, send, state.context.quote],
   );
 
   // Handle payment method selection
@@ -227,10 +230,13 @@ export function BridgeOrchestrator({
 
   // Handle execution complete
   const handleExecutionComplete = useCallback(
-    (completedStatuses: CompletedStatusResult[]) => {
+    (
+      completedStatuses: CompletedStatusResult[],
+      quote: BridgePrepareResult,
+    ) => {
       send({ completedStatuses, type: "EXECUTION_COMPLETE" });
       if (uiOptions.mode !== "transaction") {
-        onComplete?.();
+        onComplete?.(quote);
       }
     },
     [send, onComplete, uiOptions.mode],
@@ -241,6 +247,8 @@ export function BridgeOrchestrator({
     send({ type: "RETRY" });
   }, [send]);
 
+  const quote = state.context.quote;
+
   // Handle requirements resolved from FundWallet and DirectPayment
   const handleRequirementsResolved = useCallback(
     (amount: string, token: TokenWithPrices, receiverAddress: Address) => {
@@ -263,7 +271,7 @@ export function BridgeOrchestrator({
           error={state.context.currentError}
           onCancel={() => {
             send({ type: "RESET" });
-            onCancel?.();
+            onCancel?.(quote);
           }}
           onRetry={handleRetry}
         />
@@ -369,31 +377,33 @@ export function BridgeOrchestrator({
           />
         )}
 
-      {state.value === "execute" &&
-        state.context.quote &&
-        state.context.request && (
-          <StepRunner
-            autoStart={true}
-            client={client}
-            onBack={() => {
-              send({ type: "BACK" });
-            }}
-            onCancel={onCancel}
-            onComplete={handleExecutionComplete}
-            request={state.context.request}
-            wallet={state.context.selectedPaymentMethod?.payerWallet}
-            windowAdapter={webWindowAdapter}
-          />
-        )}
+      {state.value === "execute" && quote && state.context.request && (
+        <StepRunner
+          autoStart={true}
+          client={client}
+          onBack={() => {
+            send({ type: "BACK" });
+          }}
+          onCancel={() => {
+            onCancel(quote);
+          }}
+          onComplete={(completedStatuses) => {
+            handleExecutionComplete(completedStatuses, quote);
+          }}
+          request={state.context.request}
+          wallet={state.context.selectedPaymentMethod?.payerWallet}
+          windowAdapter={webWindowAdapter}
+        />
+      )}
 
       {state.value === "success" &&
-        state.context.quote &&
+        quote &&
         state.context.completedStatuses && (
           <SuccessScreen
             client={client}
             completedStatuses={state.context.completedStatuses}
             onDone={handleDoneOrContinueClick}
-            preparedQuote={state.context.quote}
+            preparedQuote={quote}
             uiOptions={uiOptions}
             windowAdapter={webWindowAdapter}
             hasPaymentId={!!paymentLinkId}
@@ -402,9 +412,10 @@ export function BridgeOrchestrator({
 
       {state.value === "post-buy-transaction" &&
         uiOptions.mode === "transaction" &&
+        quote &&
         uiOptions.transaction && (
           <ExecutingTxScreen
-            closeModal={handlePostBuyTransactionComplete}
+            closeModal={() => handlePostBuyTransactionComplete(quote)}
             onTxSent={() => {
               // Do nothing
             }}