From 14df3be06641fc09c6e32fb6488b51198dab6877 Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Wed, 15 Oct 2025 00:54:41 +0530
Subject: [PATCH] [MNY-253] Dashboard: Add tracking for token row in /tokens
 page, SDK: BridgeWidget component

---
 apps/dashboard/src/@/analytics/report.ts          | 15 +++++++++++++++
 .../(chain)/[chain_id]/tx/[txHash]/page.tsx       |  5 ++++-
 .../tokens/components/tokens-table.tsx            |  7 +++++++
 .../web/ui/Bridge/bridge-widget/bridge-widget.tsx | 13 +++++++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts
index 44b1d68c758..0e7520d8f0f 100644
--- a/apps/dashboard/src/@/analytics/report.ts
+++ b/apps/dashboard/src/@/analytics/report.ts
@@ -687,3 +687,18 @@ export function reportBridgePageLinkClick(params: {
 }) {
   posthog.capture("bridge page link clicked", params);
 }
+
+/**
+ * ### Why do we need to report this event?
+ * - To track which tokens are users are clicking on in the token list page
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportTokenRowClicked(params: {
+  chainId: number;
+  tokenAddress: string;
+}) {
+  posthog.capture("token row clicked", params);
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
index 85c94ea603e..2025563d565 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
@@ -311,7 +311,10 @@ function GeneericTxDetails(props: {
           label="Burnt fees"
           tooltip="The amount of fees that were burnt by the transaction."
         >
-          <p>{toEther(block.baseFeePerGas || 0n * receipt.gasUsed)}</p>
+          <p>
+            {toEther((block.baseFeePerGas || 0n) * receipt.gasUsed)}{" "}
+            {chain.nativeCurrency?.symbol}
+          </p>
         </GridItem>
       </section>
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/tokens/components/tokens-table.tsx b/apps/dashboard/src/app/(app)/(dashboard)/tokens/components/tokens-table.tsx
index 473dc099542..3febedf77be 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/tokens/components/tokens-table.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/tokens/components/tokens-table.tsx
@@ -3,6 +3,7 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { type Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+import { reportTokenRowClicked } from "@/analytics/report";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -122,6 +123,12 @@ export function TokensTable(props: {
                             className="gap-2 rounded-full bg-card hover:border-foreground/50 text-muted-foreground hover:bg-inverted hover:text-inverted-foreground"
                           >
                             <Link
+                              onClick={() =>
+                                reportTokenRowClicked({
+                                  chainId: token.chainId,
+                                  tokenAddress: token.address,
+                                })
+                              }
                               aria-label={`Buy ${token.symbol}`}
                               href={
                                 token.address.toLowerCase() ===
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
index fb29fe8bd97..27e97f07446 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
@@ -1,4 +1,6 @@
+import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
@@ -242,6 +244,17 @@ export type BridgeWidgetProps = {
 export function BridgeWidget(props: BridgeWidgetProps) {
   const [tab, setTab] = useState<"swap" | "buy">("swap");
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client: props.client,
+        event: "ub:ui:bridge_widget:render",
+      });
+      return true;
+    },
+    queryKey: ["bridge_widget:render"],
+  });
+
   return (
     <CustomThemeProvider theme={props.theme}>
       <EmbedContainer