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." > -
{toEther(block.baseFeePerGas || 0n * receipt.gasUsed)}
++ {toEther((block.baseFeePerGas || 0n) * receipt.gasUsed)}{" "} + {chain.nativeCurrency?.symbol} +
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" > + 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 (