[MNY-61] Dashboard: Tokens and Payments tracking updates #7781
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Contributor
WalkthroughThe changes introduce new analytics event reporting functions for payment link and asset pageview tracking, remove obsolete asset creation start reporting, and update event names and parameters for payment link events. A new Changes
Sequence Diagram(s)Payment Link Creation and Analytics ReportingsequenceDiagram
participant User
participant UI (CreatePaymentLinkButton)
participant API (createPaymentLink)
participant Analytics
User->>UI (CreatePaymentLinkButton): Submit form
UI->>API (createPaymentLink): Create payment link
API-->>UI: Return PaymentLink data
UI->>Analytics: reportPaymentLinkCreated(linkId, clientId)
Asset Page View AnalyticssequenceDiagram
participant User
participant AssetPageView
participant Analytics
User->>AssetPageView: Page loads
AssetPageView->>Analytics: reportAssetPageview(assetType, chainId)
Payment Link Purchase Success/Failure AnalyticssequenceDiagram
participant User
participant PayPageWidget
participant Analytics
User->>PayPageWidget: Complete purchase
alt Success
PayPageWidget->>Analytics: reportPaymentLinkBuySuccessful(linkId, clientId)
else Failure
PayPageWidget->>Analytics: reportPaymentLinkBuyFailed(linkId, clientId, errorMessage)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Member
Author
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. |
MananTank
changed the base branch from
08-01-dashboard_remove_unused_envs_from_examples_and_turbo_config
to
graphite-base/7781
MananTank
force-pushed
the
08-02-dashboard_tokens_and_payments_tracking_updates
branch
from
37c798d to
f935ebc
Compare
MananTank
force-pushed
the
graphite-base/7781
branch
from
3c5b65b to
e1ad7da
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7781 +/- ##
=======================================
Coverage 56.34% 56.34%
=======================================
Files 905 905
Lines 58788 58788
Branches 4142 4142
=======================================
Hits 33122 33122
Misses 25561 25561
Partials 105 105
🚀 New features to boost your workflow:
|
gregfromstl
approved these changes
Aug 1, 2025
MananTank
changed the title
Contributor
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 focuses on enhancing the payment link functionality and analytics reporting within the application. It introduces new hooks, modifies existing components, and refines analytics events to improve tracking and user experience.
### Detailed summary
- Added `useEffectOnce` hook for single execution of effects.
- Implemented `AssetPageView` component to report asset page views.
- Updated `CreatePaymentLinkButton` to report link creation.
- Enhanced payment link reporting with success and failure events.
- Removed unused analytics functions related to asset creation.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
08-02-dashboard_tokens_and_payments_tracking_updates
branch
from
f935ebc to
c6849a8
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/dashboard/src/@/hooks/useEffectOnce.ts (1)
5-14: Good implementation with minor considerations for callback stability.The hook correctly implements single-execution semantics using a ref flag. The lint disables acknowledge the intentional empty dependency array.
Consider these improvements for robustness:
-export function useEffectOnce(effect: () => void) { +export function useEffectOnce(effect: () => void) { const hasCalledEffect = useRef(false); + const effectRef = useRef(effect); + effectRef.current = effect; // eslint-disable-next-line no-restricted-syntax useEffect(() => { if (hasCalledEffect.current) return; hasCalledEffect.current = true; - effect(); + effectRef.current(); }, []); }This ensures the latest callback is used while maintaining single-execution semantics. Alternatively, document that callers should memoize the callback with
useCallback.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx (1)
158-167: Consider consolidating success callback logic.The success callback correctly implements analytics tracking and UI state management. However, there are now two success handlers: one at the mutation level (lines 109-118) and one at the form submission level.
Consider consolidating this logic to avoid potential confusion, unless the dual callback pattern is intentional for specific reasons.
If consolidation is desired, you could move the analytics call to the mutation's
onSuccesscallback:onSuccess: (result) => { + reportPaymentLinkCreated({ + linkId: result.id, + clientId: props.clientId, + }); toast.success("Payment link created successfully."); return queryClient.invalidateQueries({ queryKey: ["payment-links", props.clientId, props.teamId], }); },And simplify the form submission:
createMutation.mutateAsync(values, { - onSuccess: (result) => { - reportPaymentLinkCreated({ - linkId: result.id, - clientId: props.clientId, - }); - + onSuccess: () => { setOpen(false); form.reset(); form.clearErrors(); }, }),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/dashboard/src/@/analytics/report.ts(2 hunks)apps/dashboard/src/@/api/universal-bridge/developer.ts(1 hunks)apps/dashboard/src/@/hooks/useEffectOnce.ts(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/RecentPaymentsSection.client.tsx(0 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx(0 hunks)apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx(2 hunks)apps/dashboard/src/app/pay/[id]/page.tsx(0 hunks)apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx(2 hunks)
💤 Files with no reviewable changes (3)
- apps/dashboard/src/app/pay/[id]/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/RecentPaymentsSection.client.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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
Files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/@/api/universal-bridge/developer.tsapps/dashboard/src/@/analytics/report.ts
**/*.{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/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/@/api/universal-bridge/developer.tsapps/dashboard/src/@/analytics/report.ts
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/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/@/api/universal-bridge/developer.tsapps/dashboard/src/@/analytics/report.ts
🧠 Learnings (56)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#7307
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:324-346
Timestamp: 2025-06-09T15:15:02.350Z
Learning: In the move-funds functionality, MananTank prefers having both individual toast.promise notifications for each token transfer AND batch summary toasts, even though this creates multiple notifications. This dual notification approach is acceptable for the move-funds user experience.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Surface breaking changes prominently in PR descriptions
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).
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
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Inform #eng-core-services before renaming/removing analytics events
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`).
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)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Only create analytics events that answer clear product/business questions
Learnt from: MananTank
PR: thirdweb-dev/js#7332
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nft-drop-claim.tsx:170-178
Timestamp: 2025-06-13T13:50:08.622Z
Learning: In event-tracking (`useTrack`) calls across the dashboard, the team intentionally keeps `contractType` generic as `"NFTCollection"` even for ERC-721 drops; contract differentiation is handled via the `ercType` field instead.
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 : Components that listen to user events, animations or live updates.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx:29-39
Timestamp: 2025-05-27T20:10:47.245Z
Learning: MananTank prefers adding error handling (try-catch) directly inside utility functions like `shouldRenderNewPublicPage` rather than requiring callers to wrap the function calls in try-catch blocks. This centralizes error handling and benefits all callers automatically.
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : local state or effects live inside; data fetching happens in h...
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} : Local state or effects live inside; data fetching happens in hooks.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.ts
📚 Learning: applies to dashboard/**/*client.tsx : interactive ui that relies on hooks (`usestate`, `useeffect`, ...
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/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to dashboard/**/*client.tsx : anything that consumes hooks from `@tanstack/react-query` or t...
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/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : server components (node edge): start file...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
📚 Learning: applies to dashboard/**/components/*.client.tsx : client components must start with `'use client';` ...
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/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : client components (browser): begin files ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : keep components pure; fetch data outside (server component or ...
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} : Keep components pure; fetch data outside (server component or hook) and pass it down via props.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsx
📚 Learning: applies to dashboard/**/*.{ts,tsx} : export default async functions without `'use client';` – they r...
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/**/*.{ts,tsx} : Export default async functions without `'use client';` – they run on the Node edge.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to dashboard/**/*client.tsx : components that listen to user events, animations or live upda...
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 : Components that listen to user events, animations or live updates.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : wrap client-side data fetching calls in r...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.ts
📚 Learning: applies to dashboard/**/*client.tsx : when you need access to browser apis (localstorage, window, in...
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 : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: the modulecarduiprops interface already includes a client prop of type thirdwebclient, so when compo...
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: configuration files that import and reference react components (like icon components from lucide-rea...
Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx
📚 Learning: in the thirdweb/js project, the react namespace is available for type annotations (like react.fc) wi...
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: applies to dashboard/**/*client.tsx : use react query (`@tanstack/react-query`) for all client data ...
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 : Use React Query (`@tanstack/react-query`) for all client data fetching.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/hooks/useEffectOnce.tsapps/dashboard/src/@/analytics/report.ts
📚 Learning: in next.js server components, the `params` object can sometimes be a promise that needs to be awaite...
Learnt from: jnsdls
PR: thirdweb-dev/js#6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
📚 Learning: applies to src/@/analytics/report.ts : review `src/@/analytics/report.ts` before adding analytics ev...
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/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to dashboard/**/*client.tsx : pages requiring fast transitions where data is prefetched on t...
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 : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to dashboard/src/@/analytics/report.ts : mandatory jsdoc: explain why the event exists and w...
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/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to dashboard/**/*.{ts,tsx} : heavy data fetching that should not ship to the client (e.g. an...
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/**/*.{ts,tsx} : Heavy data fetching that should not ship to the client (e.g. analytics, billing).
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : for notices & skeletons rely on `announcementbanner`, `generic...
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} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsx
📚 Learning: applies to dashboard/**/*.{ts,tsx} : redirect logic using `redirect()` from `next/navigation`....
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/**/*.{ts,tsx} : Redirect logic using `redirect()` from `next/navigation`.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx
📚 Learning: applies to dashboard/**/layout.tsx : building layout shells (`layout.tsx`) and top-level pages that ...
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/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use `navlink` (`@/components/ui/navlink`) for internal navigat...
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} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : reuse core ui primitives; avoid re-implementing buttons, cards...
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} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
📚 Learning: applies to **/*.test.{ts,tsx} : keep tests deterministic and side-effect free...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to **/*.test.{ts,tsx} : Keep tests deterministic and side-effect free
Applied to files:
apps/dashboard/src/@/hooks/useEffectOnce.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : import ui primitives from `@/components/u...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to 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
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: in the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractad...
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsx
📚 Learning: in the project-selector.tsx component for contract imports, the addtoproject.mutate() call is intent...
Learnt from: MananTank
PR: thirdweb-dev/js#7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : always import from the central ui library under `@/components/...
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} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : prefer composable primitives over custom markup: `button`, `in...
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} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use design system tokens (e.g., `bg-card`...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
📚 Learning: applies to src/extensions/** : auto-generated contracts from abi definitions in extensions...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/extensions/** : Auto-generated contracts from ABI definitions in extensions
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
📚 Learning: the `projectmeta` prop is not required for the server-rendered `contracttokenspage` component in the...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use the `container` class with a `max-w-7xl` cap for page widt...
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} : Use the `container` class with a `max-w-7xl` cap for page width consistency.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{tsx} : expose `classname` prop on root element of c...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: in the logout flow in apps/dashboard/src/app/(app)/account/components/accountheader.tsx, when `dolog...
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
Applied to files:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
📚 Learning: applies to src/@/analytics/report.ts : analytics event name: human-readable ` ` (e.g....
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/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to dashboard/src/@/analytics/report.ts : reporting helper: `report` (pascalca...
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/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: the `fetchdashboardcontractmetadata` function from "@3rdweb-sdk/react/hooks/usedashboardcontractmeta...
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
Applied to files:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: in the thirdweb dashboard codebase, redirecttocontractlandingpage function already handles execution...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Applied to files:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
📚 Learning: in the thirdweb dashboard codebase, when `redirecttocontractlandingpage()` is called, an explicit re...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx:43-49
Timestamp: 2025-05-26T16:31:02.480Z
Learning: In the thirdweb dashboard codebase, when `redirectToContractLandingPage()` is called, an explicit return statement is not required afterward because the function internally calls Next.js's `redirect()` which throws an error to halt execution.
Applied to files:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
📚 Learning: the thirdwebbarchart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(side...
Learnt from: arcoraven
PR: thirdweb-dev/js#7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : layouts should reuse `sidebarlayout` / `fullwidthsidebarlayout...
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]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-n...
Learnt from: MananTank
PR: thirdweb-dev/js#7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `navlink` for internal navigation wit...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsx
📚 Learning: the thirdweb `contract` object is serializable and can safely be used in contexts (e.g., react-query...
Learnt from: MananTank
PR: thirdweb-dev/js#7332
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nft-drop-claim.tsx:82-90
Timestamp: 2025-06-13T13:03:41.732Z
Learning: The thirdweb `contract` object is serializable and can safely be used in contexts (e.g., React-Query keys) that require serializable values.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: the `projectmeta` prop is not required for the server-rendered `contractdirectlistingspage` componen...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/shared-direct-listings-page.tsx:47-52
Timestamp: 2025-05-26T16:29:54.317Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractDirectListingsPage` component in the direct listings shared page, following the same pattern as other server components in the codebase where `projectMeta` is only needed for client components.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: applies to dashboard/src/@/analytics/report.ts : typed properties: accept a single `properties` obje...
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/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsxapps/dashboard/src/@/analytics/report.ts
📚 Learning: in the onramp webhook schema (`packages/thirdweb/src/bridge/webhook.ts`), the `currencyamount` field...
Learnt from: gregfromstl
PR: thirdweb-dev/js#7450
File: packages/thirdweb/src/bridge/Webhook.ts:57-81
Timestamp: 2025-06-26T19:46:04.024Z
Learning: In the onramp webhook schema (`packages/thirdweb/src/bridge/Webhook.ts`), the `currencyAmount` field is intentionally typed as `z.number()` while other amount fields use `z.string()` because `currencyAmount` represents fiat currency amounts in decimals (like $10.50), whereas other amount fields represent token amounts in wei (very large integers that benefit from bigint representation). The different naming convention (`currencyAmount` vs `amount`) reflects this intentional distinction.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
📚 Learning: inform #eng-core-services before renaming/removing analytics events...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Inform #eng-core-services before renaming/removing analytics events
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to dashboard/**/*.{ts,tsx} : client-side only: never import `posthog-js` in server component...
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/**/*.{ts,tsx} : Client-side only: never import `posthog-js` in server components.
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : never import `posthog-js` in server compo...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Never import `posthog-js` in server components
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: in event-tracking (`usetrack`) calls across the dashboard, the team intentionally keeps `contracttyp...
Learnt from: MananTank
PR: thirdweb-dev/js#7332
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nft-drop-claim.tsx:170-178
Timestamp: 2025-06-13T13:50:08.622Z
Learning: In event-tracking (`useTrack`) calls across the dashboard, the team intentionally keeps `contractType` generic as `"NFTCollection"` even for ERC-721 drops; contract differentiation is handled via the `ercType` field instead.
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: only create analytics events that answer clear product/business questions...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Only create analytics events that answer clear product/business questions
Applied to files:
apps/dashboard/src/@/analytics/report.ts
⏰ 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: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (17)
apps/dashboard/src/@/api/universal-bridge/developer.ts (1)
203-207: LGTM! Good improvement to API usability.The change properly returns the created payment link data instead of void, following the same pattern as other functions in this module. The error handling is maintained and TypeScript typing is correct.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx (2)
3-3: LGTM! Clean import integration.The AssetPageView import follows proper relative path conventions and integrates well with the existing imports.
20-20: LGTM! Proper analytics integration.The AssetPageView component is correctly placed at the beginning of the layout and uses appropriate props (
assetType="nft"andchainIdfrom component props). This ensures early analytics tracking for NFT page views.apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx (2)
12-12: LGTM! Correct import update.The import change from
useEffecttouseEffectOncealigns with the new single-execution pattern for analytics tracking.
26-28: LGTM! Proper useEffectOnce usage.The replacement of
useEffectwithuseEffectOncecorrectly implements single-execution semantics for the onboarding analytics event. Removing the dependency array is appropriate sinceuseEffectOncehandles this internally.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx (2)
7-7: LGTM! Consistent import pattern.The AssetPageView import follows the same relative path pattern used in the NFT layout and is properly placed with other component imports.
89-89: LGTM! Correct analytics integration for ERC20 assets.The AssetPageView component is properly integrated with
assetType="coin"(appropriate for ERC20 tokens) and correctchainIdprop. The placement at the beginning ensures early analytics tracking for coin asset page views.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx (2)
13-13: LGTM: Analytics import follows established patterns.The import for
reportPaymentLinkCreatedis correctly placed and follows the established naming convention.
95-107: LGTM: Mutation correctly captures and returns payment link data.The mutation function now properly captures and returns the result from
createPaymentLink, enabling access to the created payment link ID for analytics tracking.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/asset-page-view.tsx (1)
1-17: LGTM: Clean analytics tracking component implementation.The component follows best practices for analytics tracking components:
- Correct use of
"use client"directive- Well-typed props with appropriate union types
- Proper use of
useEffectOnceto ensure single execution- Appropriate return of
nullfor a side-effect-only component- Clean analytics call with necessary properties
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx (3)
8-11: LGTM: Analytics imports updated for improved granularity.The updated imports replace the single
reportPaymentLinkCompletedfunction with separate success and failure tracking functions, providing better analytics granularity.
68-72: LGTM: Success callback updated to use new analytics function.The success callback correctly uses the new
reportPaymentLinkBuySuccessfulfunction while maintaining the same conditional logic and parameters.
75-83: LGTM: Error callback provides valuable failure tracking.The new error callback correctly implements failure tracking with:
- Consistent conditional checks matching the success callback
- Proper error message inclusion for debugging
- Correct parameter structure following established patterns
This enhances the payment funnel analytics by capturing failure cases that were previously untracked.
apps/dashboard/src/@/analytics/report.ts (4)
1-1: LGTM: "use client" directive correctly added.The "use client" directive is appropriate since this file imports and uses posthog-js, which is a client-side library. This aligns with the coding guidelines about not importing posthog-js in server components.
418-459: LGTM: Payment link analytics functions follow established patterns.The three new payment link functions properly implement the analytics standards:
- Complete JSDoc documentation with "Why" and "Who" sections
- Correct naming convention (
report<Subject><Verb>)- Human-readable event names
- Typed properties passed unchanged to posthog.capture
- Error tracking includes message for debugging
These functions provide better granularity for payment funnel analysis compared to the previous single completion event.
461-474: LGTM: Asset pageview function properly implements analytics standards.The
reportAssetPageviewfunction correctly follows all established patterns:
- Complete JSDoc documentation explaining funnel tracking purpose
- Proper naming convention and human-readable event name
- Well-typed properties with appropriate union type for assetType
- Supports the new asset pageview tracking for conversion funnel analysis
418-474: Verify that #eng-core-services was informed about analytics event changes.These changes rename and remove analytics events, which constitute breaking changes:
reportPaymentLinkCompleted→reportPaymentLinkBuySuccessful/reportPaymentLinkBuyFailedreportAssetCreationStartedwas removedAccording to the retrieved learnings, #eng-core-services should be informed before renaming/removing analytics events to ensure existing dashboards and queries are updated accordingly.
Please confirm that #eng-core-services has been notified about these analytics event changes to prevent breaking existing PostHog dashboards or analytics queries.
Contributor
size-limit report 📦
|
graphite-app
bot
deleted the
08-02-dashboard_tokens_and_payments_tracking_updates
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR-Codex overview
This PR focuses on enhancing the payment link functionality in the application by improving reporting analytics, refactoring existing code, and introducing new components for better user experience.
Detailed summary
createPaymentLinkto return the result and report link creation.reportPaymentLinkCreated,reportPaymentLinkBuySuccessful, andreportPaymentLinkBuyFailedfunctions for analytics.useEffectOncehook for single execution effects.AssetPageViewcomponent in NFT and ERC20 pages.Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores