cleanup

Author: MananTank

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

@@ -320,6 +320,26 @@ export function reportAssetBuyFailed(properties: {
   });
 }
 
+/**
+ * ### Why do we need to report this event?
+ * - To track number of cancelled asset purchases from the token page
+ * - To track the errors that users encounter when trying to purchase an asset
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportAssetBuyCancelled(properties: {
+  chainId: number;
+  contractType: AssetContractType;
+  assetType: "nft" | "coin";
+}) {
+  posthog.capture("asset buy cancelled", {
+    assetType: properties.assetType,
+    chainId: properties.chainId,
+    contractType: properties.contractType,
+  });
+}
+
 // Assets Landing Page ----------------------------
 
 /**

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

@@ -5,6 +5,7 @@ import { useState } from "react";
 import type { Chain, ThirdwebClient } from "thirdweb";
 import { BuyWidget, SwapWidget } from "thirdweb/react";
 import {
+  reportAssetBuyCancelled,
   reportAssetBuyFailed,
   reportAssetBuySuccessful,
   reportTokenSwapCancelled,
@@ -62,6 +63,15 @@ export function BuyAndSwapEmbed(props: {
               });
             }
           }}
+          onCancel={() => {
+            if (props.pageType === "asset") {
+              reportAssetBuyCancelled({
+                assetType: "coin",
+                chainId: props.chain.id,
+                contractType: "DropERC20",
+              });
+            }
+          }}
           onSuccess={() => {
             if (props.pageType === "asset") {
               reportAssetBuySuccessful({
@@ -92,8 +102,9 @@ export function BuyAndSwapEmbed(props: {
             },
           }}
           onError={(error, quote) => {
+            const errorMessage = parseError(error);
             reportTokenSwapFailed({
-              errorMessage: error.message,
+              errorMessage: errorMessage,
               buyTokenChainId: quote.intent.destinationChainId,
               buyTokenAddress: quote.intent.destinationTokenAddress,
               sellTokenChainId: quote.intent.originChainId,

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx

@@ -263,48 +263,30 @@ export function SwapWidgetContainer(props: {
   );
 }
 
+type SelectionInfo = {
+  preparedQuote: SwapPreparedQuote;
+  request: BridgePrepareRequest;
+  quote: Buy.quote.Result | Sell.quote.Result;
+  buyToken: TokenWithPrices;
+  sellToken: TokenWithPrices;
+  sellTokenBalance: bigint;
+  mode: "buy" | "sell";
+};
+
+type Join<T, U> = T & U;
+
 type SwapWidgetScreen =
   | { id: "1:swap-ui" }
-  | {
-      id: "2:loading-quote";
-      quote: Buy.quote.Result | Sell.quote.Result;
-      buyToken: TokenWithPrices;
-      sellToken: TokenWithPrices;
-      sellTokenBalance: bigint;
-      mode: "buy" | "sell";
-    }
-  | {
-      id: "2:preview";
-      preparedQuote: SwapPreparedQuote;
-      request: BridgePrepareRequest;
-      quote: Buy.quote.Result | Sell.quote.Result;
-      buyToken: TokenWithPrices;
-      sellToken: TokenWithPrices;
-      sellTokenBalance: bigint;
-      mode: "buy" | "sell";
-    }
-  | {
-      id: "3:execute";
-      request: BridgePrepareRequest;
-      quote: Buy.quote.Result | Sell.quote.Result;
-      preparedQuote: SwapPreparedQuote;
-      buyToken: TokenWithPrices;
-      sellToken: TokenWithPrices;
-      sellTokenBalance: bigint;
-      mode: "buy" | "sell";
-    }
-  | {
-      id: "4:success";
-      completedStatuses: CompletedStatusResult[];
-      preparedQuote: SwapPreparedQuote;
-      buyToken: TokenWithPrices;
-      sellToken: TokenWithPrices;
-    }
-  | {
-      id: "error";
-      preparedQuote: SwapPreparedQuote;
-      error: Error;
-    };
+  | Join<{ id: "2:preview" }, SelectionInfo>
+  | Join<{ id: "3:execute" }, SelectionInfo>
+  | Join<
+      {
+        id: "4:success";
+        completedStatuses: CompletedStatusResult[];
+      },
+      SelectionInfo
+    >
+  | { id: "error"; error: Error; preparedQuote: SwapPreparedQuote };
 
 function SwapWidgetContent(props: SwapWidgetProps) {
   const [screen, setScreen] = useState<SwapWidgetScreen>({ id: "1:swap-ui" });