[MNY-253] Dashboard: Add tracking for token row in /tokens page, SDK: BridgeWidget component (#8254)

Author: MananTank

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);
+}

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>
 

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() ===

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