[MNY-92] Dashboard: Add tokens section in explore #7812
Merged
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
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis update introduces a new "TokensSection" UI to the dashboard's explore page, enabling users to access token creation options for coins and NFTs, with analytics tracking for user interactions. A promotional banner for token creation is also added on specific published contract pages. Several supporting components and utility functions are added or updated. Additionally, project/team selector components and related pages are refactored for improved import paths and optional descriptions, and a new team-project selection page is implemented. The dismissible alert component is enhanced to support optional localStorage-based state persistence. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ExplorePage
participant TokensSection
participant CardLink
participant Analytics
User->>ExplorePage: Loads Explore page
ExplorePage->>TokensSection: Renders TokensSection
TokensSection->>User: Displays token creation options (Coin, NFT)
User->>CardLink: Clicks on a token card link
CardLink->>Analytics: reportTokenUpsellClicked({ assetType, pageType: "explore" })
CardLink->>User: Navigates to token creation page
sequenceDiagram
participant User
participant DeployForm
participant TokenBanner
participant Analytics
User->>DeployForm: Loads deploy form for published contract
DeployForm->>TokenBanner: Renders TokenBanner if publisher and contract match
User->>TokenBanner: Clicks upsell link
TokenBanner->>Analytics: reportTokenUpsellClicked({ assetType, pageType: "deploy-contract" })
TokenBanner->>User: Opens token creation page in new tab
sequenceDiagram
participant User
participant ProjectSelectionPage
participant Auth
participant TeamData
participant Projects
participant GenericProjectSelector
User->>ProjectSelectionPage: Loads team-project selection page
ProjectSelectionPage->>Auth: Fetch auth token and account
ProjectSelectionPage->>TeamData: Fetch teams
Auth-->>ProjectSelectionPage: Returns token/account
TeamData-->>ProjectSelectionPage: Returns team list
ProjectSelectionPage->>Projects: Fetch projects for each team
Projects-->>ProjectSelectionPage: Returns projects
ProjectSelectionPage->>GenericProjectSelector: Renders with teams/projects data
User->>GenericProjectSelector: Selects project/team
GenericProjectSelector->>User: Navigates to selected project/team
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15–25 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes detected. All code changes align with the objectives of adding token creation upsell features and related refactors. Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (2)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (12)
🚧 Files skipped from review as they are similar to previous changes (12)
⏰ 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). (5)
✨ 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. 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. |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx
Outdated
Show resolved
Hide resolved
apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx
Outdated
Show resolved
Hide resolved
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7812 +/- ##
=======================================
Coverage 56.33% 56.33%
=======================================
Files 905 905
Lines 58809 58809
Branches 4147 4147
=======================================
Hits 33131 33131
Misses 25573 25573
Partials 105 105
🚀 New features to boost your workflow:
|
![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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/dashboard/src/@/analytics/report.ts(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsx(2 hunks)apps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx(2 hunks)apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx(1 hunks)
🧰 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/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/@/analytics/report.tsapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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)/team/~/[[...paths]]/page.tsxapps/dashboard/src/@/analytics/report.tsapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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)/team/~/[[...paths]]/page.tsxapps/dashboard/src/@/analytics/report.tsapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx
🧠 Learnings (53)
📓 Common learnings
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`)
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: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
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`.
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
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: 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: .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`.
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.
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.
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: 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 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)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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 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)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.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} : 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)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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 apps/{dashboard,playground-web}/**/*.{ts,tsx} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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/**/index.ts : Group related components in their own folder and expose a single barrel `index.ts` where necessary.
Applied to files:
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.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/*.{tsx,jsx} : Place the file close to its feature: `feature/components/MyComponent.tsx`.
Applied to files:
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.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)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
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/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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 : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx
📚 Learning: 2025-05-30T17:14:25.332Z
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/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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/app/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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 : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/@/analytics/report.tsapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
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/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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 : Components that listen to user events, animations or live updates.
Applied to files:
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.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/@/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: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 : 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/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-06-13T13:50:08.622Z
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: 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/**/*.{ts,tsx} : Heavy data fetching that should not ship to the client (e.g. analytics, billing).
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 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/@/analytics/report.tsapps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.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: Inform #eng-core-services before renaming/removing analytics events
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-06-09T15:15:02.350Z
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.
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/**/*.{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)/explore/page.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} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.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)/explore/page.tsx
📚 Learning: 2025-05-26T16:28:50.772Z
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)/explore/page.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsxapps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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} : Responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, `xl`).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx
📚 Learning: 2025-06-24T21:38:03.155Z
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)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx
📚 Learning: 2025-06-10T00:46:58.580Z
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:155-160
Timestamp: 2025-06-10T00:46:58.580Z
Learning: In the dashboard application, the route structure for team and project navigation is `/team/[team_slug]/[project_slug]/...` without a `/project/` segment. Contract links should be formatted as `/team/${teamSlug}/${projectSlug}/contract/${chainId}/${contractAddress}`.
Applied to files:
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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 apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.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/**/api/**/*.{ts,tsx} : Prefix files with `import "server-only";` so they never end up in the client bundle.
Applied to files:
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx
📚 Learning: 2025-05-26T16:29:54.317Z
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)/team/~/~/contract/[chain]/[contractAddress]/page.tsx
📚 Learning: 2025-05-26T16:28:10.079Z
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/page.tsx:2-10
Timestamp: 2025-05-26T16:28:10.079Z
Learning: In Next.js 14+, the `params` object in page components is always a Promise that needs to be awaited, so the correct typing is `params: Promise<ParamsType>` rather than `params: ParamsType`.
Applied to files:
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.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} : Accept a typed `props` object and export a named function (`export function MyComponent()`).
Applied to files:
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsxapps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
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)/team/~/_components/TeamAndProjectSelectorCard.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: Surface breaking changes prominently in PR descriptions
Applied to files:
apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.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 apps/{dashboard,playground-web}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsx
📚 Learning: 2025-06-17T18:30:52.976Z
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/(app)/team/~/_components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/_components/project-selector.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 apps/{dashboard,playground-web}/**/*.{ts,tsx} : Return typed results (e.g., `Project[]`, `User[]`) – avoid `any`
Applied to files:
apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.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/**/*.{ts,tsx} : Redirect logic using `redirect()` from `next/navigation`.
Applied to files:
apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx
📚 Learning: 2025-05-26T16:26:58.068Z
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/nfts/page.tsx:20-20
Timestamp: 2025-05-26T16:26:58.068Z
Learning: In team/project contract pages under routes like `/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/*`, users are always logged in by design. The hardcoded `isLoggedIn={true}` prop in these pages is intentional and correct, not a bug to be fixed.
Applied to files:
apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.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 : Prefer API routes or server actions to keep tokens secret; the browser only sees relative paths.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.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 apps/{dashboard,playground-web}/**/*.{ts,tsx} : Keep tokens secret via internal API routes or server actions
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx
📚 Learning: 2025-05-29T00:46:09.063Z
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)/explore/tokens-section.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} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx
⏰ 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). (8)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (20)
apps/dashboard/src/@/analytics/report.ts (1)
507-518: LGTM! Analytics function follows established patterns.The new analytics function is well-implemented:
- Follows naming convention
report<Subject><Verb>- Includes proper JSDoc with Why and Who sections
- Uses appropriate TypeScript typing for the asset type parameter
- Consistent with existing patterns in the file
apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx (4)
7-7: LGTM! Clean import addition.The import follows established patterns and is placed appropriately with other component imports.
26-26: LGTM! Consistent width constraint applied.Adding
max-w-7xlfollows the coding guidelines for page width consistency across the dashboard.
38-40: LGTM! Well-structured container for new section.The container follows established patterns with:
- Consistent
max-w-7xlwidth constraint- Appropriate vertical padding (
py-10)- Logical placement between header and contract categories
42-42: LGTM! Consistent layout structure maintained.The container styling is consistent with the newly added container above, maintaining design coherence.
apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx (5)
1-9: LGTM! Clean imports and proper client directive.The imports follow established patterns:
- Proper "use client" directive for interactive component
- UI primitives from
@/components/ui/*as per guidelines- Icons from
lucide-react- Clean import structure
10-33: LGTM! Well-structured section header with decorative elements.The header implementation follows design system guidelines:
- Uses design tokens (
bg-card,border,text-border)- Proper responsive padding and positioning
- GridPattern component used appropriately for background decoration
- Badge component from UI primitives
35-42: LGTM! Clear content structure and typography.The content follows established patterns:
- Consistent typography with design tokens (
text-muted-foreground)- Responsive text sizing
- Clear hierarchy with heading and description
44-62: LGTM! Responsive grid layout for token options.The grid implementation is well-structured:
- Responsive grid (
grid-cols-1 md:grid-cols-3)- Proper component reuse with CardLink
- Clear asset type differentiation
- Appropriate href paths for token creation
65-98: LGTM! Well-implemented CardLink component with proper analytics.The CardLink component follows best practices:
- Proper TypeScript typing with union types
- Uses design tokens consistently
- Analytics integration with proper event tracking
- Accessible link structure with Next.js Link component
- Proper hover states and styling
The analytics call on line 89 correctly uses the newly added
reportExploreTokenCardClickedfunction.apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx (1)
8-8: LGTM! Import path refactoring looks good.The import path change reflects proper component organization by moving shared components to a centralized
_componentsdirectory.apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx (1)
17-20: LGTM! Consistent import path refactoring.The import path update aligns with the component consolidation pattern seen across the codebase, moving shared components to the
_componentsdirectory for better organization.apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsx (2)
19-19: LGTM! Optional description prop increases component flexibility.Making the
descriptionprop optional allows the component to be used in scenarios where no description is needed.
34-41: LGTM! Proper conditional rendering and layout structure.The conditional rendering prevents empty elements and the div wrapper with
space-y-0.5provides consistent vertical spacing between the heading and optional description.apps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx (2)
8-8: LGTM! Import path simplified with component consolidation.The import path change reflects the component being moved to the same directory, simplifying the import structure.
82-104: LGTM! Well-structured generic project selector component.The
GenericProjectSelectorcomponent follows established patterns:
- Proper TypeScript typing for all props
- Correct usage of
useDashboardRouterfor navigation- Dynamic URL construction with optional path segments
- Reuses the existing
ProjectAndTeamSelectorCardcomponent appropriatelyThe URL construction logic correctly handles optional paths with proper joining.
apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx (4)
12-28: LGTM! Proper async data fetching and error handling.The component correctly:
- Awaits the
paramsPromise (following Next.js 14+ pattern)- Uses
Promise.allfor parallel data fetching- Handles authentication failures with
loginRedirect- Constructs the page path dynamically
35-42: LGTM! Robust error handling for project fetching.The parallel project fetching with
.catch(() => [])gracefully handles failures by returning empty project arrays, preventing the entire page from failing if individual team project fetches fail.
44-58: LGTM! Clean conditional logic and component integration.The conditional description based on the path segments provides context-aware messaging, and the component properly passes all required props to
GenericProjectSelector.
60-76: LGTM! Consistent layout structure with design system compliance.The
ProjectSelectionLayoutcomponent follows established patterns:
- Uses design system tokens (
bg-card,border-b)- Proper responsive classes and spacing
- Consistent with other similar layout components
- Uses appropriate UI primitives (
TeamHeader,DotsBackgroundPattern,AppFooter)
MananTank
force-pushed
the
08-07-dashboard_add_tokens_section_in_explore
branch
from
f29cbfd to
0bb87e0
Compare
Contributor
size-limit report 📦
|
MananTank
force-pushed
the
08-07-dashboard_add_tokens_section_in_explore
branch
from
0bb87e0 to
f389194
Compare
MananTank
force-pushed
the
08-07-dashboard_add_tokens_section_in_explore
branch
from
f389194 to
e2c746c
Compare
MananTank
force-pushed
the
08-07-dashboard_add_tokens_section_in_explore
branch
from
bac2612 to
3a67fc7
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/dashboard/src/@/components/blocks/dismissible-alert.tsx (1)
62-92: Verify accessibility and consider extracting magic values.The shared UI component looks good overall, but consider these improvements:
- The close button has proper
aria-labelwhich is excellent for accessibility- Consider extracting the hardcoded padding values (
p-4 lg:p-6) to design tokensApply this diff to use more semantic spacing:
- <div className="relative rounded-lg border border-border bg-card p-4 lg:p-6 overflow-hidden"> + <div className="relative rounded-lg border border-border bg-card p-6 overflow-hidden">apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx (2)
103-106: Consider making the publisher address configurable.The hardcoded publisher address creates a maintenance burden and reduces flexibility. Consider moving this to a configuration constant or environment variable.
Apply this diff to improve maintainability:
+const THIRDWEB_PUBLISHER_ADDRESS = "0xdd99b75f095d0c4d5112aCe938e4e6ed962fb024"; + - const isTWPublisher = - contractMetadata?.publisher === - "0xdd99b75f095d0c4d5112aCe938e4e6ed962fb024"; + const isTWPublisher = contractMetadata?.publisher === THIRDWEB_PUBLISHER_ADDRESS;
123-139: Optimize contract name matching with a lookup approach.The repeated contract name checks can be simplified and made more maintainable using a lookup pattern.
Apply this diff to improve readability and maintainability:
+ const TOKEN_TYPE_MAPPING = { + DropERC20: "erc20", + TokenERC20: "erc20", + DropERC721: "erc721", + TokenERC721: "erc721", + DropERC1155: "erc1155", + TokenERC1155: "erc1155", + } as const; + + const tokenType = isTWPublisher && contractMetadata?.name + ? TOKEN_TYPE_MAPPING[contractMetadata.name as keyof typeof TOKEN_TYPE_MAPPING] + : null; - {isTWPublisher && - (contractMetadata.name === "DropERC20" || - contractMetadata.name === "TokenERC20") && ( - <TokenBanner type="erc20" /> - )} - {isTWPublisher && - (contractMetadata.name === "DropERC721" || - contractMetadata.name === "TokenERC721") && ( - <TokenBanner type="erc721" /> - )} - - {isTWPublisher && - (contractMetadata.name === "DropERC1155" || - contractMetadata.name === "TokenERC1155") && ( - <TokenBanner type="erc1155" /> - )} + {tokenType && <TokenBanner type={tokenType} />}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/dashboard/src/@/analytics/report.ts(1 hunks)apps/dashboard/src/@/components/blocks/dismissible-alert.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx(5 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsx(2 hunks)apps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx(2 hunks)apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx
🚧 Files skipped from review as they are similar to previous changes (7)
- apps/dashboard/src/@/analytics/report.ts
- apps/dashboard/src/app/(app)/team/
//contract/[chain]/[contractAddress]/page.tsx - apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsx
- apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx
- apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx
- apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx
- apps/dashboard/src/app/(app)/team/~/_components/project-selector.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/(app)/team/[team_slug]/(team)/page.tsxapps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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)/team/[team_slug]/(team)/page.tsxapps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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)/team/[team_slug]/(team)/page.tsxapps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
🧠 Learnings (35)
📓 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: 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`)
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} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
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: .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`.
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: 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.
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.
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`.
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: 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.
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: 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} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsxapps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
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)/team/[team_slug]/(team)/page.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
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/(app)/team/[team_slug]/(team)/page.tsxapps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
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/(app)/team/[team_slug]/(team)/page.tsx
📚 Learning: 2025-06-18T02:13:34.500Z
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/(app)/team/[team_slug]/(team)/page.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 : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsxapps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-05-26T16:26:58.068Z
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/nfts/page.tsx:20-20
Timestamp: 2025-05-26T16:26:58.068Z
Learning: In team/project contract pages under routes like `/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/*`, users are always logged in by design. The hardcoded `isLoggedIn={true}` prop in these pages is intentional and correct, not a bug to be fixed.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.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} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsxapps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsxapps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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 apps/{dashboard,playground-web}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.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: Surface breaking changes prominently in PR descriptions
Applied to files:
apps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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 : Components that listen to user events, animations or live updates.
Applied to files:
apps/dashboard/src/@/components/blocks/dismissible-alert.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/@/components/blocks/dismissible-alert.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} : Merge class names with `cn` from `@/lib/utils` to keep conditional logic readable.
Applied to files:
apps/dashboard/src/@/components/blocks/dismissible-alert.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 : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
apps/dashboard/src/@/components/blocks/dismissible-alert.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
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/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-05-29T10:49:52.981Z
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx:26-43
Timestamp: 2025-05-29T10:49:52.981Z
Learning: In React image components, conditional rendering of the entire image container (e.g., `{props.image && <Img />}`) serves a different purpose than fallback handling. The conditional prevents rendering any image UI when no image metadata exists, while the fallback prop handles cases where image metadata exists but the image fails to load. This pattern is intentional to distinguish between "no image intended" vs "image intended but failed to load".
Applied to files:
apps/dashboard/src/@/components/blocks/dismissible-alert.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} : Accept a typed `props` object and export a named function (`export function MyComponent()`).
Applied to files:
apps/dashboard/src/@/components/blocks/dismissible-alert.tsxapps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-05-26T16:28:50.772Z
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)/published-contract/components/publish-based-deploy.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 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)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-06-24T21:38:03.155Z
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)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-06-13T13:50:08.622Z
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/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.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 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)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-06-18T04:27:16.172Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:27:16.172Z
Learning: Next.js Link component supports external URLs without throwing errors. When used with absolute URLs (like https://...), it behaves like a regular anchor tag without client-side routing, but does not cause runtime crashes or errors as previously believed.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-06-18T04:30:04.326Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:30:04.326Z
Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-06-17T18:30:52.976Z
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/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-05-26T16:30:24.965Z
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/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-05-27T19:54:55.885Z
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/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
📚 Learning: 2025-05-26T16:29:54.317Z
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)/published-contract/components/publish-based-deploy.tsx
⏰ 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). (7)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/@/components/blocks/dismissible-alert.tsx (3)
8-30: Well-designed discriminated union for flexible state management.The refactor successfully creates a clean API that supports both localStorage persistence and transient state management through a discriminated union. The conditional rendering pattern ensures type safety while maintaining a simple public interface.
32-48: LGTM! Clean implementation with proper hook usage.The localStorage variant correctly uses the
useLocalStoragehook with appropriate default values and properly passes props through to the shared UI component.
50-60: LGTM! Simple state variant implementation.The non-persistent variant correctly uses
useStatefor transient visibility management and follows the same pattern as the localStorage variant.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx (1)
69-75: LGTM! Proper usage of new dismissible alert API.The update correctly uses the new
preserveState={true}prop with an appropriatelocalStorageIdthat includes the team ID for scoping. This ensures the alert's dismissed state is remembered per-team across user sessions.apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx (1)
152-196: LGTM! Well-structured token banner component.The
TokenBannercomponent follows good patterns:
- Uses discriminated union for type safety
- Dynamic content based on token type
- Proper use of design system components
- Clean conditional logic for content selection
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
Outdated
Show resolved
Hide resolved
MananTank
force-pushed
the
08-07-dashboard_add_tokens_section_in_explore
branch
from
3a67fc7 to
4abc60c
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx (1)
10-10: Consider using a union type alias for better maintainabilityThe inline union type works but could be improved with a type alias for better reusability and maintainability.
+type TokenType = "erc20" | "erc721" | "erc1155"; + -export function TokenBanner(props: { type: "erc20" | "erc721" | "erc1155" }) { +export function TokenBanner(props: { type: TokenType }) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/dashboard/src/@/analytics/report.ts(1 hunks)apps/dashboard/src/@/components/blocks/dismissible-alert.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsx(2 hunks)apps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx(2 hunks)apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx
🚧 Files skipped from review as they are similar to previous changes (10)
- apps/dashboard/src/app/(app)/team/
//contract/[chain]/[contractAddress]/page.tsx - apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx
- apps/dashboard/src/@/analytics/report.ts
- apps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx
- apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsx
- apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx
- apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
- apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx
- apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx
- apps/dashboard/src/@/components/blocks/dismissible-alert.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/(app)/(dashboard)/published-contract/components/token-banner.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)/published-contract/components/token-banner.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)/published-contract/components/token-banner.tsx
🧠 Learnings (16)
📓 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: .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`.
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`)
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} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
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: 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.
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.
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`.
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: 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.
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: 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} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.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 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)/published-contract/components/token-banner.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 : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx
📚 Learning: 2025-06-13T13:50:08.622Z
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/app/(app)/(dashboard)/published-contract/components/token-banner.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} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.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} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
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/(app)/(dashboard)/published-contract/components/token-banner.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} : Accept a typed `props` object and export a named function (`export function MyComponent()`).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.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/**/api/**/*.{ts,tsx} : Pass the token in the `Authorization: Bearer` header – never embed it in the URL.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.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 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)/published-contract/components/token-banner.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} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.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} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.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/app/(app)/(dashboard)/published-contract/components/token-banner.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 : Components that listen to user events, animations or live updates.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx
📚 Learning: 2025-05-26T16:28:50.772Z
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)/published-contract/components/token-banner.tsx
⏰ 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). (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx (4)
1-8: Proper client component setup with appropriate importsThe "use client" directive is correctly placed and all imports follow the established patterns. UI primitives are imported from the designated paths as per coding guidelines.
11-24: LGTM - Clean conditional logic for content generationThe conditional logic properly maps token types to appropriate titles, descriptions, and URLs. The content is contextually relevant for each token type.
51-56: Analytics implementation follows established patternsThe analytics tracking correctly uses the asset type mapping and page type as per the team's event tracking conventions observed in previous learnings.
27-41: Confirm DismissibleAlert persistence behaviorIn apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx (lines 27–41), you’ve set
preserveState={false}, which means the alert usesDismissibleAlertWithoutLocalStorageand will re-show on every page reload.
- If you intend the banner to reset on each refresh, no changes are needed.
- If you’d rather hide it permanently once dismissed, switch to
preserveState={true}and supply a uniquelocalStorageId.
apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx
Show resolved
Hide resolved
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 improving the project selection and token creation flow within the dashboard application. It includes the addition of new components, updates to existing ones, and enhancements to user notifications and alerts.
### Detailed summary
- Updated import paths for `project-selector` and `team-selector`.
- Added `TokenBanner` component for displaying token creation options.
- Enhanced `DismissibleAlert` to support conditional rendering based on visibility state.
- Introduced `GenericProjectSelector` for improved project selection.
- Modified `ExplorePage` layout and styling for better presentation.
- Added `TokensSection` component with links for launching tokens and NFTs.
- Updated `reportTokenUpsellClicked` function for event tracking.
- Improved UI elements for better user experience and responsiveness.
> ✨ 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
* **New Features**
* Introduced a "Tokens" section on the Explore page, showcasing options for creating ERC-20 tokens (Coins) and NFT Collections.
* Added a promotional token banner on deploy pages for select published token contracts.
* Launched a new project selection page within the team context, streamlining project navigation and selection.
* Added a generic project selector component to enhance project selection flexibility.
* Added tracking for clicks on token creation cards and token upsell banner interactions to improve analytics.
* **Improvements**
* Enhanced layout and styling of the Explore page for better readability and organization.
* Updated project and team selector components for more flexible descriptions and improved navigation.
* Updated team page alert to preserve dismissal state across sessions.
* **Chores**
* Refined import paths for improved code organization and maintainability.
* Refactored dismissible alert component to support optional state persistence.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
08-07-dashboard_add_tokens_section_in_explore
branch
from
4abc60c to
d812cc3
Compare
graphite-app
bot
deleted the
08-07-dashboard_add_tokens_section_in_explore
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 project and team selection functionality within the dashboard by refactoring components, improving UI elements, and adding new features for token creation and upsell tracking.
Detailed summary
project-selectorandteam-selectorcomponents.DismissibleAlertto support optional local storage.GenericProjectSelectorfor improved project selection.TokenBannerfor token creation upsell.TokensSectionfor launching tokens with detailed options.Summary by CodeRabbit
New Features
Improvements
Chores