Dashboard: Add tracking for SwapWidget impression, chain pageview #8071
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughAdds two analytics reporters— Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant R as React (BuyAndSwapEmbed)
participant AR as reportSwapWidgetShown
participant PH as PostHog
R->>R: mount()
Note over R: useEffect runs once (guarded by isMounted)
R->>AR: reportSwapWidgetShown({ pageType })
AR->>PH: posthog.capture("swap widget shown", { pageType })
PH-->>AR: ack
sequenceDiagram
autonumber
participant L as Layout (chain page)
participant C as ChainPageView
participant AR2 as reportChainPageview
participant PH as PostHog
L->>C: render with chainId
C->>C: mount()
C->>AR2: reportChainPageview({ chainId })
AR2->>PH: posthog.capture("chain pageview", { chainId })
PH-->>AR2: ack
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8071 +/- ##
=======================================
Coverage 56.35% 56.35%
=======================================
Files 906 906
Lines 59168 59168
Branches 4172 4172
=======================================
Hits 33342 33342
Misses 25720 25720
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/dashboard/src/@/analytics/report.ts (1)
266-270: Reuse existing PageType union and add an explicit return type.Keep types DRY and meet the “explicit return type” guideline.
Apply this diff:
-export function reportSwapWidgetShown(properties: { - pageType: "asset" | "bridge" | "chain"; -}) { - posthog.capture("swap widget shown", properties); -} +export function reportSwapWidgetShown(properties: { + pageType: TokenSwapParams["pageType"]; +}): void { + posthog.capture("swap widget shown", properties); +}apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (1)
31-43: Gate the impression to when the Swap tab is actually visible; drop the lint suppression.Currently this fires on initial mount even if the tab default changes later. Track once when Swap is shown and remove the eslint disable.
Apply this diff:
- 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]); + const hasTrackedSwapShown = useRef(false); + + useEffect(() => { + if (hasTrackedSwapShown.current || tab !== "swap") { + return; + } + hasTrackedSwapShown.current = true; + reportSwapWidgetShown({ pageType: props.pageType }); + }, [tab, props.pageType]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
apps/dashboard/src/@/analytics/report.ts(1 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/@/analytics/report.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/@/analytics/report.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/analytics/report.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/analytics/report.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/src/@/analytics/report.ts
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/src/@/analytics/report.ts: Checkreport.tsbefore adding a new analytics event to avoid duplicates
Analytics naming: event name as<subject> <verb>; helper function asreport<Subject><Verb>(PascalCase)
Each analytics helper must include a JSDoc header (Why/Owner), accept a single typedpropertiesobject, and forward it unchanged toposthog.capture
Files:
apps/dashboard/src/@/analytics/report.ts
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧠 Learnings (12)
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/src/@/analytics/report.ts : Check `report.ts` before adding a new analytics event to avoid duplicates
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/src/@/analytics/report.ts : Each analytics helper must include a JSDoc header (Why/Owner), accept a single typed `properties` object, and forward it unchanged to `posthog.capture`
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/@/analytics/report.ts : Review `src/@/analytics/report.ts` before adding analytics events to check for duplicates
Applied to files:
apps/dashboard/src/@/analytics/report.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/src/@/analytics/report.ts : Analytics naming: event name as `<subject> <verb>`; helper function as `report<Subject><Verb>` (PascalCase)
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/src/@/analytics/report.ts : Typed properties: accept a single `properties` object and pass it unchanged to `posthog.capture`.
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/@/analytics/report.ts : Analytics event name: human-readable `<subject> <verb>` (e.g., "contract deployed"); function: `report<Subject><Verb>` (PascalCase)
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/src/@/analytics/report.ts : Mandatory JSDoc: explain Why the event exists and Who owns it (`username`).
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/src/@/analytics/report.ts : Reporting helper: `report<Subject><Verb>` (PascalCase); all live in `src/@/analytics/report.ts`.
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-09-17T11:14:35.659Z
Learnt from: MananTank
PR: thirdweb-dev/js#8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx:919-930
Timestamp: 2025-09-17T11:14:35.659Z
Learning: In the thirdweb codebase, useCustomTheme() hook can be used inside styled-components callbacks, contrary to the general React Rules of Hooks. This is a valid pattern in their implementation.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (1)
apps/dashboard/src/@/analytics/report.ts (1)
reportSwapWidgetShown(266-270)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/@/analytics/report.ts (2)
258-270: Event helper aligns with our analytics conventions.
- Good JSDoc (Why/Owner), single typed properties object, correct naming ("swap widget shown"/reportSwapWidgetShown), forwards properties unchanged.
258-270: Duplicate check — no other "swap widget shown" events foundOnly occurrences: apps/dashboard/src/@/analytics/report.ts (definition) and apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (import + call).
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (2)
4-4: Import additions look correct.useEffect/useRef are needed for the one-time impression guard.
11-11: Correct reporter import.Matches the new helper and local usage.
MananTank
force-pushed
the
09-19-dashboard_add_tracking_for_swapwidget_impression
branch
from
7db060a to
ce6c4c6
Compare
MananTank
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (2)
31-42: Replace manual mount guard with useEffectOnce; drop eslint-disable.Cleaner and consistent with our hooks library. Avoids the local ref and linter override.
-import { useEffect, useRef, useState } from "react"; +import { useRef, useState } from "react"; +import { useEffectOnce } from "@/hooks/useEffectOnce"; @@ - 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]); + useEffectOnce(() => { + reportSwapWidgetShown({ pageType: props.pageType }); + });Also applies to: 4-4
33-42: Optional: Track only when the Swap tab is actually visible.If “impression” means visible widget (not merely mount), gate on the active tab and fire once.
- // eslint-disable-next-line no-restricted-syntax - useEffect(() => { - if (isMounted.current) { - return; - } - isMounted.current = true; - reportSwapWidgetShown({ - pageType: props.pageType, - }); - }, [props.pageType]); + const hasTrackedSwapShown = useRef(false); + useEffect(() => { + if (tab !== "swap" || hasTrackedSwapShown.current) return; + hasTrackedSwapShown.current = true; + reportSwapWidgetShown({ pageType: props.pageType }); + }, [tab, props.pageType]);Also applies to: 29-29
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx (1)
27-27: Mark this layout as server-only.Prevents accidental client bundling per our guidelines for server components.
+import "server-only";apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsx (1)
1-13: Add explicit return type and a named props alias.Aligns with our TS guidelines; improves readability.
"use client"; -import { reportChainPageview } from "@/analytics/report"; +import { reportChainPageview } from "@/analytics/report"; +import type { ReactElement } from "react"; import { useEffectOnce } from "@/hooks/useEffectOnce"; -export function ChainPageView(props: { chainId: number }) { +type ChainPageViewProps = { chainId: number }; + +export function ChainPageView(props: ChainPageViewProps): ReactElement | null { useEffectOnce(() => { reportChainPageview({ chainId: props.chainId, }); }); return null; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
apps/dashboard/src/@/analytics/report.ts(2 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/@/analytics/report.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧠 Learnings (7)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
PR: thirdweb-dev/js#7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/@/analytics/report.ts : Review `src/@/analytics/report.ts` before adding analytics events to check for duplicates
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-09-17T11:14:35.659Z
Learnt from: MananTank
PR: thirdweb-dev/js#8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx:919-930
Timestamp: 2025-09-17T11:14:35.659Z
Learning: In the thirdweb codebase, useCustomTheme() hook can be used inside styled-components callbacks, contrary to the general React Rules of Hooks. This is a valid pattern in their implementation.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧬 Code graph analysis (3)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsx (2)
apps/dashboard/src/@/hooks/useEffectOnce.ts (1)
useEffectOnce(5-14)apps/dashboard/src/@/analytics/report.ts (1)
reportChainPageview(554-556)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsx (1)
ChainPageView(5-13)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (1)
apps/dashboard/src/@/analytics/report.ts (1)
reportSwapWidgetShown(266-270)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (2)
11-11: Import + usage look correct.Event payload type aligns with reporter signature.
39-42: Event-name uniqueness verified — single "swap widget shown" reporter & single callreportSwapWidgetShown is defined once (apps/dashboard/src/@/analytics/report.ts lines 266–269) using posthog.capture("swap widget shown") and is only invoked from apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (line 39); no duplicate captures found.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx (1)
27-27: LGTM: Client tracker is imported and rendered early.Placing ChainPageView first ensures pageview fires on mount.
Also applies to: 75-75
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/chain-pageview.tsx (1)
5-10: LGTM: One-time pageview with useEffectOnce.Matches the reporter’s contract; no UI side effects.
Merge activity
|
) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR introduces analytics tracking for chain page views and enhances the reporting for swap widgets in the dashboard application. ### Detailed summary - Added `ChainPageView` component to track impressions of chain pages. - Integrated `reportChainPageview` function in the analytics module. - Enhanced `BuyAndSwapEmbed` to report when the swap widget is shown. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - Chores - Added one-time telemetry when the Swap widget is displayed to improve usage insights. - Tracks the page context (asset, bridge, or chain) when the widget first appears. - Added one-time telemetry to record chain pageviews (captures the chain identifier) when visiting chain pages. - Integrated with existing UI; no impact on behavior, user action, or performance. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
09-19-dashboard_add_tracking_for_swapwidget_impression
branch
from
ce6c4c6 to
f3b3b89
Compare
graphite-app
bot
deleted the
09-19-dashboard_add_tracking_for_swapwidget_impression
branch
vercel
bot
temporarily deployed
to
Production – thirdweb_playground
PR-Codex overview
This PR focuses on enhancing analytics tracking by adding a new component,
ChainPageView, to report page views for specific chains, and integrating it into theChainPageLayout. It also introduces additional reporting functionality for swap widgets.Detailed summary
ChainPageViewcomponent to report chain page views.ChainPageViewinChainPageLayout.reportChainPageviewfunction inreport.tsfor analytics.BuyAndSwapEmbedto report when the swap widget is shown.Summary by CodeRabbit