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
@@ -530,6 +544,17 @@ export function reportAssetPageview(properties: {
   posthog.capture("asset pageview", properties);
 }
 
+/**
+ * ### Why do we need to report this event?
+ * - To understand which chains are being viewed the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportChainPageview(properties: { chainId: number }) {
+  posthog.capture("chain pageview", properties);
+}
+
 /**
  * ### Why do we need to report this event?
  * - To track the usage of fund wallet modal

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">

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsx

@@ -0,0 +1,13 @@
+"use client";
+import { reportChainPageview } from "@/analytics/report";
+import { useEffectOnce } from "@/hooks/useEffectOnce";
+
+export function ChainPageView(props: { chainId: number }) {
+  useEffectOnce(() => {
+    reportChainPageview({
+      chainId: props.chainId,
+    });
+  });
+
+  return null;
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -24,6 +24,7 @@ import { TeamHeader } from "../../../../team/components/TeamHeader/team-header";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";
 import { AddChainToWallet } from "./components/client/add-chain-to-wallet";
+import { ChainPageView } from "./components/client/chain-pageview";
 import { ChainHeader } from "./components/server/chain-header";
 
 // TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
@@ -71,6 +72,7 @@ export default async function ChainPageLayout(props: {
 
   return (
     <div className="flex grow flex-col">
+      <ChainPageView chainId={chain.chainId} />
       <div className="border-border border-b bg-card">
         <TeamHeader />
       </div>