Dashboard: Add tracking for SwapWidget impression

Author: MananTank

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

@@ -255,6 +255,20 @@ export function reportTokenSwapSuccessful(properties: TokenSwapParams) {
   posthog.capture("token swap successful", properties);
 }
 
+/**
+ * ### Why do we need to report this event?
+ * - To track impressions of the swap widget
+ * - To create a funnel "swap widget shown" -> "swap widget successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportSwapWidgetShown(properties: {
+  pageType: "asset" | "bridge" | "chain";
+}) {
+  posthog.capture("swap widget shown", properties);
+}
+
 /**
  * ### Why do we need to report this event?
  * - To track number of failed token swaps from the token page

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

@@ -1,13 +1,14 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Chain, ThirdwebClient } from "thirdweb";
 import { BuyWidget, SwapWidget } from "thirdweb/react";
 import {
   reportAssetBuyCancelled,
   reportAssetBuyFailed,
   reportAssetBuySuccessful,
+  reportSwapWidgetShown,
   reportTokenSwapCancelled,
   reportTokenSwapFailed,
   reportTokenSwapSuccessful,
@@ -27,6 +28,19 @@ export function BuyAndSwapEmbed(props: {
   const { theme } = useTheme();
   const [tab, setTab] = useState<"buy" | "swap">("swap");
   const themeObj = getSDKTheme(theme === "light" ? "light" : "dark");
+  const isMounted = useRef(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (isMounted.current) {
+      return;
+    }
+    isMounted.current = true;
+    reportSwapWidgetShown({
+      pageType: props.pageType,
+    });
+  }, [props.pageType]);
+
   return (
     <div className="bg-card rounded-2xl border overflow-hidden flex flex-col">
       <div className="flex gap-2.5 p-4 border-b border-dashed">