[MNY-106] Playground: Add overview pages for all sections in sidebar #7977
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
|
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. WalkthroughAdds centralized feature-card metadata, reusable OverviewPage and FeatureCard components, metadata-driven home and multiple new section overview pages with navigation updates, plus a small styling tweak to the AI chat input. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant Router
participant OverviewPage
participant FeatureCard
User->>Router: Navigate to /{section} (e.g., /wallets or /ai)
Router->>OverviewPage: Render(icon, title, description, featureCards)
OverviewPage->>FeatureCard: map featureCards -> render each card
FeatureCard->>User: Display card with Link (href)
User->>FeatureCard: Click card -> Router navigate to card.link
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
the
Playground
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
MananTank
force-pushed
the
09-04-_mny-106_playground_add_overview_pages_for_all_sections_in_sidebar
branch
from
4d34610 to
31a3f1b
Compare
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7977 +/- ##
=======================================
Coverage 56.53% 56.53%
=======================================
Files 904 904
Lines 58626 58626
Branches 4146 4146
=======================================
Hits 33145 33145
Misses 25375 25375
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/playground-web/src/app/data/pages-metadata.ts (1)
90-96: Differentiate Account vs Wallet component descriptions.This mirrors a prior suggestion; applying it improves clarity.
{ icon: CircleUserIcon, title: "Account Components", link: "/wallets/headless/account-components", - description: "Components for rendering various wallet related information", + description: "Components for rendering user account information and account-related functionality", },
🧹 Nitpick comments (32)
apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx (4)
99-99: Remove stray console.log.Avoid shipping debug logs in the UI bundle.
- console.log("---sign_swap", part);
180-183: Use Tailwind classes instead of inline styles.Repo guideline: Tailwind only; no inline styles in these apps.
- <TransactionButton - style={{ - width: "100%", - }} + <TransactionButton + className="w-full"(repeat the same change for the second TransactionButton)
Also applies to: 251-253
202-205: Resolve tool call on errors to prevent stuck conversations.If the AI runtime expects a tool result (success or error), also call addToolResult on failure so lastAssistantMessageIsCompleteWithToolCalls can progress.
- onError={(error) => { - sendMessage({ text: `Transaction failed: ${error.message}` }); - }} + onError={(error) => { + // mark tool call as completed with an error payload + addToolResult({ + tool: "sign_transaction", + toolCallId, + output: { error: String(error?.message || error) }, + }); + sendMessage({ text: `Transaction failed: ${error.message}` }); + }}- onError={(error) => { - sendMessage({ text: `Transaction failed: ${error.message}` }); - }} + onError={(error) => { + addToolResult({ + tool: "sign_swap", + toolCallId, + output: { error: String(error?.message || error) }, + }); + sendMessage({ text: `Transaction failed: ${error.message}` }); + }}Also applies to: 273-276
36-36: Add explicit return types to exported components.Keeps TS intent clear and matches repo guideline for explicit returns.
-export function ChatContainer() { +export function ChatContainer(): JSX.Element {-const SignTransactionButton = (props: SignTransactionButtonProps) => { +const SignTransactionButton = (props: SignTransactionButtonProps): JSX.Element => {-const SignSwapButton = (props: SignSwapButtonProps) => { +const SignSwapButton = (props: SignSwapButtonProps): JSX.Element => {Also applies to: 156-156, 225-225
apps/playground-web/src/components/blocks/FeatureCard.tsx (3)
3-8: Define and export a named props type.Improves reuse and discoverability across OverviewPage and other callers.
-export function FeatureCard(props: { - title: string; - description: string; - icon: React.FC<{ className?: string }>; - href: string; -}) { +export type FeatureCardProps = { + title: string; + description: string; + icon: React.FC<{ className?: string }>; + href: string; +}; + +export function FeatureCard(props: FeatureCardProps): JSX.Element {
10-24: Make the whole card a semantic link (optional).Wrapping the card with Link improves focus/hover states and a11y versus a pseudo-element overlay.
- return ( - <div className="rounded-xl border bg-card p-4 hover:border-active-border relative"> + return ( + <Link href={props.href} className="block rounded-xl border bg-card p-4 hover:border-active-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"> <div className="flex mb-4"> <div className="p-2 rounded-full border bg-background"> <props.icon className="size-4 text-muted-foreground" /> </div> </div> <h3 className="font-medium mb-0.5 text-lg tracking-tight"> - <Link className="before:absolute before:inset-0" href={props.href}> - {props.title} - </Link> + {props.title} </h3> <p className="text-sm text-muted-foreground text-pretty"> {props.description} </p> - </div> + </Link> );
1-1: Use NavLink for internal navigation
Swap theLinkimport in FeatureCard.tsx to the app’sNavLinkcomponent for internal routes to ensure consistent active-state behavior.- import Link from "next/link"; + import { NavLink } from "@/components/ui/NavLink";apps/playground-web/src/app/tokens/page.tsx (2)
1-1: Mark as a Server Component.Add the sentinel import to prevent accidental client-only deps.
+import "server-only"; import { OverviewPage } from "@/components/blocks/OverviewPage";
5-14: Add explicit return type to the page component.Aligns with repo’s TS guideline.
-export default function Page() { +export default function Page(): JSX.Element {apps/playground-web/src/app/wallets/headless/page.tsx (2)
1-1: Mark as a Server Component.+import "server-only"; import { BoxIcon } from "lucide-react";
5-14: Add explicit return type to the page component.-export default function Page() { +export default function Page(): JSX.Element {apps/playground-web/src/app/contracts/page.tsx (2)
1-1: Mark as a Server Component.+import "server-only"; import { OverviewPage } from "@/components/blocks/OverviewPage";
5-14: Add explicit return type to the page component.-export default function Page() { +export default function Page(): JSX.Element {apps/playground-web/src/app/ai/page.tsx (2)
5-5: Add explicit return type to align with TS guidelinesAnnotate the component’s return type.
-export default function Page() { +export default function Page(): JSX.Element {
3-3: Use path alias for consistency and resiliencePrefer "@/app/..." over relative path.
-import { aiFeatureCards } from "../data/pages-metadata"; +import { aiFeatureCards } from "@/app/data/pages-metadata";apps/playground-web/src/app/account-abstraction/page.tsx (3)
5-5: Add explicit return typeKeep page components explicitly typed.
-export default function Page() { +export default function Page(): JSX.Element {
2-3: Prefer alias imports over relative pathsUnify to "@/..." like other files.
-import { SmartAccountIcon } from "../../icons/SmartAccountIcon"; -import { accountAbstractionsFeatureCards } from "../data/pages-metadata"; +import { SmartAccountIcon } from "@/icons/SmartAccountIcon"; +import { accountAbstractionsFeatureCards } from "@/app/data/pages-metadata";
12-14: Nit: spell out EIPs consistentlyMinor copy edit for clarity.
- utilizing EIP-4337 and 7702 specs + utilizing EIP-4337 and EIP-7702 specsapps/playground-web/src/app/wallets/page.tsx (2)
5-5: Add explicit return typeAnnotate return type per codebase guidelines.
-export default function Page() { +export default function Page(): JSX.Element {
2-3: Use "@/..." aliases for importsAlign with other pages for consistency.
-import { WalletProductIcon } from "../../icons/WalletProductIcon"; -import { walletsFeatureCards } from "../data/pages-metadata"; +import { WalletProductIcon } from "@/icons/WalletProductIcon"; +import { walletsFeatureCards } from "@/app/data/pages-metadata";apps/playground-web/src/app/payments/page.tsx (2)
5-5: Add explicit return typeAnnotate the component’s return type.
-export default function Page() { +export default function Page(): JSX.Element {
2-3: Switch to alias importsConsistent with project import style.
-import { PayIcon } from "../../icons/PayIcon"; -import { paymentsFeatureCards } from "../data/pages-metadata"; +import { PayIcon } from "@/icons/PayIcon"; +import { paymentsFeatureCards } from "@/app/data/pages-metadata";apps/playground-web/src/app/transactions/page.tsx (2)
2-3: Unify to alias importsAvoid brittle relative paths.
-import { OverviewPage } from "../../components/blocks/OverviewPage"; -import { transactionsFeatureCards } from "../data/pages-metadata"; +import { OverviewPage } from "@/components/blocks/OverviewPage"; +import { transactionsFeatureCards } from "@/app/data/pages-metadata";
5-5: Add explicit return typeType the page component.
-export default function Page() { +export default function Page(): JSX.Element {apps/playground-web/src/components/blocks/OverviewPage.tsx (3)
4-9: Add explicit return type to comply with TS/TSX guidelines.Declare the component’s return type.
-export function OverviewPage(props: { +export function OverviewPage(props: { featureCards: FeatureCardMetadata[]; title: string; description: React.ReactNode; icon: React.FC<{ className?: string }>; -}) { +}): JSX.Element {
28-35: Use a stable, unique key.Titles can collide; the link is unique per card.
- <FeatureCard - key={card.title} + <FeatureCard + key={card.link} description={card.description} href={card.link} icon={card.icon} title={card.title} />
15-17: Mark decorative icon as hidden from assistive tech.Prevents noise for screen readers.
- <props.icon className="size-6 text-muted-foreground" /> + <props.icon aria-hidden="true" className="size-6 text-muted-foreground" />apps/playground-web/src/app/data/pages-metadata.ts (2)
149-153: Normalize casing: “Pre-built Extensions” (match nav).Keeps titles consistent across UI.
- title: "Pre-Built Extensions", + title: "Pre-built Extensions",
110-117: Polish grammar for Airdrop description.Small readability tweak.
- "Airdrop any token with a few lines of code with gas sponsorship, optional.", + "Airdrop any token with a few lines of code, with optional gas sponsorship.",apps/playground-web/src/app/page.tsx (3)
13-16: Mark as server-only per guideline.This page is server by default; add the directive.
+import "server-only"; import { FeatureCard } from "@/components/blocks/FeatureCard"; import { ThirdwebIcon } from "../icons/ThirdwebMiniLogo";
13-15: Add explicit return type to Page().Aligns with the TS guideline.
-export default function Page() { +export default function Page(): JSX.Element {
59-62: Add explicit return type to FeatureSection and consider extracting it.Keeps this file single‑responsibility and typed.
-function FeatureSection(props: { +function FeatureSection(props: { featureCards: FeatureCardMetadata[]; title: string; -}) { +}): JSX.Element {If preferred, move FeatureSection to
apps/playground-web/src/components/blocks/FeatureSection.tsxand export it there.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (14)
apps/playground-web/src/app/account-abstraction/page.tsx(1 hunks)apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx(1 hunks)apps/playground-web/src/app/ai/page.tsx(1 hunks)apps/playground-web/src/app/contracts/page.tsx(1 hunks)apps/playground-web/src/app/data/pages-metadata.ts(1 hunks)apps/playground-web/src/app/navLinks.ts(8 hunks)apps/playground-web/src/app/page.tsx(2 hunks)apps/playground-web/src/app/payments/page.tsx(1 hunks)apps/playground-web/src/app/tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/page.tsx(1 hunks)apps/playground-web/src/app/wallets/page.tsx(1 hunks)apps/playground-web/src/components/blocks/FeatureCard.tsx(1 hunks)apps/playground-web/src/components/blocks/OverviewPage.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
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/playground-web/src/app/wallets/page.tsxapps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsxapps/playground-web/src/app/contracts/page.tsxapps/playground-web/src/app/wallets/headless/page.tsxapps/playground-web/src/components/blocks/OverviewPage.tsxapps/playground-web/src/app/transactions/page.tsxapps/playground-web/src/app/payments/page.tsxapps/playground-web/src/app/tokens/page.tsxapps/playground-web/src/app/account-abstraction/page.tsxapps/playground-web/src/app/ai/page.tsxapps/playground-web/src/components/blocks/FeatureCard.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/app/data/pages-metadata.tsapps/playground-web/src/app/page.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/playground-web/src/app/wallets/page.tsxapps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsxapps/playground-web/src/app/contracts/page.tsxapps/playground-web/src/app/wallets/headless/page.tsxapps/playground-web/src/components/blocks/OverviewPage.tsxapps/playground-web/src/app/transactions/page.tsxapps/playground-web/src/app/payments/page.tsxapps/playground-web/src/app/tokens/page.tsxapps/playground-web/src/app/account-abstraction/page.tsxapps/playground-web/src/app/ai/page.tsxapps/playground-web/src/components/blocks/FeatureCard.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/app/data/pages-metadata.tsapps/playground-web/src/app/page.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/playground-web/src/app/wallets/page.tsxapps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsxapps/playground-web/src/app/contracts/page.tsxapps/playground-web/src/app/wallets/headless/page.tsxapps/playground-web/src/components/blocks/OverviewPage.tsxapps/playground-web/src/app/transactions/page.tsxapps/playground-web/src/app/payments/page.tsxapps/playground-web/src/app/tokens/page.tsxapps/playground-web/src/app/account-abstraction/page.tsxapps/playground-web/src/app/ai/page.tsxapps/playground-web/src/components/blocks/FeatureCard.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/app/data/pages-metadata.tsapps/playground-web/src/app/page.tsx
🧠 Learnings (9)
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
PR: thirdweb-dev/js#7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/playground-web/src/app/contracts/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: Applies to apps/{dashboard,playground-web}/**/feature/components/** : Group feature-specific components under `feature/components/*` with barrel `index.ts`
Applied to files:
apps/playground-web/src/components/blocks/OverviewPage.tsxapps/playground-web/src/components/blocks/FeatureCard.tsxapps/playground-web/src/app/page.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/playground-web/src/app/payments/page.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout PR #7888.
Applied to files:
apps/playground-web/src/app/payments/page.tsx
📚 Learning: 2025-08-07T17:24:31.965Z
Learnt from: MananTank
PR: thirdweb-dev/js#7812
File: apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx:1-11
Timestamp: 2025-08-07T17:24:31.965Z
Learning: In Next.js App Router, page components (page.tsx files) are server components by default and do not require the "server-only" import directive. The "server-only" directive is primarily used for utility functions, API helpers, and data access modules that should never be included in the client bundle.
Applied to files:
apps/playground-web/src/app/ai/page.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/playground-web/src/components/blocks/FeatureCard.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/playground-web/src/app/navLinks.ts
📚 Learning: 2025-08-07T20:43:21.864Z
Learnt from: MananTank
PR: thirdweb-dev/js#7812
File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx:48-60
Timestamp: 2025-08-07T20:43:21.864Z
Learning: In the TokenBanner component at apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx, the Link components use target="_blank" with internal application routes (starting with "/") to open pages in new tabs within the same application. These internal links do not require rel="noopener noreferrer" security attributes, which are only needed for external URLs.
Applied to files:
apps/playground-web/src/app/navLinks.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} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/playground-web/src/app/page.tsx
🧬 Code graph analysis (12)
apps/playground-web/src/app/wallets/page.tsx (2)
apps/playground-web/src/components/blocks/OverviewPage.tsx (1)
OverviewPage(4-40)apps/playground-web/src/app/data/pages-metadata.ts (1)
walletsFeatureCards(36-87)
apps/playground-web/src/app/contracts/page.tsx (3)
apps/playground-web/src/components/blocks/OverviewPage.tsx (1)
OverviewPage(4-40)apps/playground-web/src/app/data/pages-metadata.ts (1)
contractsFeatureCards(135-160)apps/playground-web/src/icons/ContractIcon.tsx (1)
ContractIcon(1-21)
apps/playground-web/src/app/wallets/headless/page.tsx (2)
apps/playground-web/src/components/blocks/OverviewPage.tsx (1)
OverviewPage(4-40)apps/playground-web/src/app/data/pages-metadata.ts (1)
headlessComponentsFeatureCards(89-108)
apps/playground-web/src/components/blocks/OverviewPage.tsx (2)
apps/playground-web/src/app/data/pages-metadata.ts (1)
FeatureCardMetadata(29-34)apps/playground-web/src/components/blocks/FeatureCard.tsx (1)
FeatureCard(3-26)
apps/playground-web/src/app/transactions/page.tsx (2)
apps/playground-web/src/components/blocks/OverviewPage.tsx (1)
OverviewPage(4-40)apps/playground-web/src/app/data/pages-metadata.ts (1)
transactionsFeatureCards(110-133)
apps/playground-web/src/app/payments/page.tsx (3)
apps/playground-web/src/components/blocks/OverviewPage.tsx (1)
OverviewPage(4-40)apps/playground-web/src/icons/PayIcon.tsx (1)
PayIcon(1-21)apps/playground-web/src/app/data/pages-metadata.ts (1)
paymentsFeatureCards(162-196)
apps/playground-web/src/app/tokens/page.tsx (2)
apps/playground-web/src/components/blocks/OverviewPage.tsx (1)
OverviewPage(4-40)apps/playground-web/src/app/data/pages-metadata.ts (1)
tokensFeatureCards(268-282)
apps/playground-web/src/app/account-abstraction/page.tsx (3)
apps/playground-web/src/components/blocks/OverviewPage.tsx (1)
OverviewPage(4-40)apps/playground-web/src/icons/SmartAccountIcon.tsx (1)
SmartAccountIcon(1-21)apps/playground-web/src/app/data/pages-metadata.ts (1)
accountAbstractionsFeatureCards(238-266)
apps/playground-web/src/app/ai/page.tsx (2)
apps/playground-web/src/components/blocks/OverviewPage.tsx (1)
OverviewPage(4-40)apps/playground-web/src/app/data/pages-metadata.ts (1)
aiFeatureCards(284-297)
apps/playground-web/src/components/blocks/FeatureCard.tsx (1)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Link(44-62)
apps/playground-web/src/app/data/pages-metadata.ts (1)
apps/playground-web/src/icons/InsightIcon.tsx (1)
InsightIcon(1-21)
apps/playground-web/src/app/page.tsx (2)
apps/playground-web/src/app/data/pages-metadata.ts (7)
walletsFeatureCards(36-87)transactionsFeatureCards(110-133)contractsFeatureCards(135-160)paymentsFeatureCards(162-196)insightFeatureCards(198-236)accountAbstractionsFeatureCards(238-266)FeatureCardMetadata(29-34)apps/playground-web/src/components/blocks/FeatureCard.tsx (1)
FeatureCard(3-26)
⏰ 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). (1)
- GitHub Check: Size
🔇 Additional comments (8)
apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx (1)
121-124: Styling tweak looks good.The PromptInput border/rounding adjustments align with the parent bordered container and avoid double side/bottom borders.
apps/playground-web/src/app/ai/page.tsx (1)
7-17: LGTM: Clear composition with OverviewPage and metadata-driven cardsMatches the shared pattern and design tokens usage via the block component.
apps/playground-web/src/app/wallets/page.tsx (1)
7-17: LGTMGood reuse of OverviewPage with walletsFeatureCards.
apps/playground-web/src/app/payments/page.tsx (1)
7-17: LGTMClear, concise Overview composition.
apps/playground-web/src/app/transactions/page.tsx (1)
7-12: LGTMConsistent with the new metadata-driven pattern.
apps/playground-web/src/app/navLinks.ts (2)
19-23: LGTM: Overview entries added consistently across sections.The structure and exactMatch usage look consistent with the new overview pages.
Also applies to: 41-45, 79-83, 107-111, 137-141, 159-163, 189-193, 223-227
19-23: All overview routes are present and export a default Page.apps/playground-web/src/app/data/pages-metadata.ts (1)
51-56: Import and use SquircleDashed instead of SquircleDashedIcon
In apps/playground-web/src/app/data/pages-metadata.ts (lines 51–56), update the icon import and reference to match the exported component:import { SquircleDashed } from "lucide-react"; { icon: SquircleDashed, title: "Headless Connect", link: "/wallets/sign-in/headless", description: "Customizable wallet connection components using React hooks", },⛔ Skipped due to learnings
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.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.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 appsLearnt from: CR PR: thirdweb-dev/js#0 File: AGENTS.md:0-0 Timestamp: 2025-08-29T15:37:38.513Z Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card)Learnt from: CR PR: thirdweb-dev/js#0 File: CLAUDE.md:0-0 Timestamp: 2025-07-18T19:19:55.613Z Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)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 appsLearnt from: jnsdls PR: thirdweb-dev/js#7888 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/page.tsx:1-1 Timestamp: 2025-08-20T10:37:10.123Z Learning: In apps/dashboard, prefer importing UI components from "workspace/ui/components/*" where possible, as per jnsdls preference, rather than from "@/components/ui/*".Learnt from: CR PR: thirdweb-dev/js#0 File: AGENTS.md:0-0 Timestamp: 2025-08-29T15:37:38.513Z Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Stick to design 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} : 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} : Client Components (browser): Begin files with `'use client';`Learnt from: CR PR: thirdweb-dev/js#0 File: .cursor/rules/dashboard.mdc:0-0 Timestamp: 2025-07-18T19:20:32.530Z Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
MananTank
force-pushed
the
09-04-_mny-106_playground_add_overview_pages_for_all_sections_in_sidebar
branch
from
31a3f1b to
ed67ae9
Compare
joaquim-verges
left a comment
joaquim-verges
left a comment
There was a problem hiding this comment.
any way we can make the overview show up when clicking the category row instead of adding an overview entry to each section?
joaquim-verges
left a comment
joaquim-verges
left a comment
There was a problem hiding this comment.
oh also @MananTank can you add an AI section in the main playground home page ? 🙏
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
apps/playground-web/src/app/page.tsx (3)
39-53: Reduce duplication by mapping over a typed sections arrayDrive these six sections from data to keep this file lean and consistent.
- <FeatureSection featureCards={walletsFeatureCards} title="Wallets" /> - <FeatureSection - featureCards={transactionsFeatureCards} - title="Transactions" - /> - <FeatureSection - featureCards={contractsFeatureCards} - title="Contracts" - /> - <FeatureSection featureCards={paymentsFeatureCards} title="Payments" /> - <FeatureSection featureCards={insightFeatureCards} title="Insight" /> - <FeatureSection - featureCards={accountAbstractionsFeatureCards} - title="Account Abstraction" - /> + {sections.map((s) => ( + <FeatureSection + key={s.title} + featureCards={s.cards} + title={s.title} + /> + ))}Add this just above the
returninsidePage:const sections: ReadonlyArray<{ title: string; cards: FeatureCardMetadata[] }> = [ { title: "Wallets", cards: walletsFeatureCards }, { title: "Transactions", cards: transactionsFeatureCards }, { title: "Contracts", cards: contractsFeatureCards }, { title: "Payments", cards: paymentsFeatureCards }, { title: "Insight", cards: insightFeatureCards }, { title: "Account Abstraction", cards: accountAbstractionsFeatureCards }, ];
59-81: Extract FeatureSection to a shared component and import itOne-component-per-file + reuse across overview pages.
Apply in this file:
+import { FeatureSection } from "@/components/blocks/FeatureSection"; @@ -function FeatureSection(props: { - featureCards: FeatureCardMetadata[]; - title: string; -}) { - return ( - <section> - <h2 className="font-semibold text-xl text-foreground tracking-tight mb-2"> - {props.title} - </h2> - <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> - {props.featureCards.slice(0, 6).map((card) => ( - <FeatureCard - key={card.title} - description={card.description} - href={card.link} - icon={card.icon} - title={card.title} - /> - ))} - </div> - </section> - ); -}New file:
apps/playground-web/src/components/blocks/FeatureSection.tsximport "server-only"; import { FeatureCard } from "@/components/blocks/FeatureCard"; import type { FeatureCardMetadata } from "@/app/data/pages-metadata"; export function FeatureSection(props: { featureCards: FeatureCardMetadata[]; title: string; maxCards?: number; }): JSX.Element { const { featureCards, title, maxCards = 6 } = props; return ( <section> <h2 className="font-semibold text-xl text-foreground tracking-tight mb-2"> {title} </h2> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> {featureCards.slice(0, maxCards).map((card) => ( <FeatureCard key={card.link} description={card.description} href={card.link} icon={card.icon} title={card.title} /> ))} </div> </section> ); }Happy to open a follow-up PR if you want.
69-77: Use a stable, unique React key
titlecan change;linkis more stable/unique.- key={card.title} + key={card.link}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (14)
apps/playground-web/src/app/account-abstraction/page.tsx(1 hunks)apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx(1 hunks)apps/playground-web/src/app/ai/page.tsx(1 hunks)apps/playground-web/src/app/contracts/page.tsx(1 hunks)apps/playground-web/src/app/data/pages-metadata.ts(1 hunks)apps/playground-web/src/app/navLinks.ts(8 hunks)apps/playground-web/src/app/page.tsx(2 hunks)apps/playground-web/src/app/payments/page.tsx(1 hunks)apps/playground-web/src/app/tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/page.tsx(1 hunks)apps/playground-web/src/app/wallets/page.tsx(1 hunks)apps/playground-web/src/components/blocks/FeatureCard.tsx(1 hunks)apps/playground-web/src/components/blocks/OverviewPage.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (13)
- apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx
- apps/playground-web/src/app/transactions/page.tsx
- apps/playground-web/src/app/data/pages-metadata.ts
- apps/playground-web/src/components/blocks/FeatureCard.tsx
- apps/playground-web/src/app/contracts/page.tsx
- apps/playground-web/src/app/wallets/headless/page.tsx
- apps/playground-web/src/components/blocks/OverviewPage.tsx
- apps/playground-web/src/app/ai/page.tsx
- apps/playground-web/src/app/account-abstraction/page.tsx
- apps/playground-web/src/app/tokens/page.tsx
- apps/playground-web/src/app/payments/page.tsx
- apps/playground-web/src/app/wallets/page.tsx
- apps/playground-web/src/app/navLinks.ts
🧰 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
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/playground-web/src/app/page.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/playground-web/src/app/page.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/playground-web/src/app/page.tsx
🧠 Learnings (1)
📚 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/playground-web/src/app/page.tsx
🧬 Code graph analysis (1)
apps/playground-web/src/app/page.tsx (2)
apps/playground-web/src/app/data/pages-metadata.ts (7)
walletsFeatureCards(36-87)transactionsFeatureCards(110-133)contractsFeatureCards(135-160)paymentsFeatureCards(162-196)insightFeatureCards(198-236)accountAbstractionsFeatureCards(238-266)FeatureCardMetadata(29-34)apps/playground-web/src/components/blocks/FeatureCard.tsx (1)
FeatureCard(3-26)
⏰ 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: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/playground-web/src/app/page.tsx (1)
64-68: LGTM: clear section heading semanticsGood use of h2 and design tokens.
MananTank
force-pushed
the
09-04-_mny-106_playground_add_overview_pages_for_all_sections_in_sidebar
branch
from
ed67ae9 to
cd80067
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/playground-web/src/app/page.tsx (1)
71-79: Ensure FeatureCard uses NavLink (repo guideline for internal nav).FeatureCard currently imports
Linkfromnext/link; switch toNavLinkfor active-state handling.Proposed change in
apps/playground-web/src/components/blocks/FeatureCard.tsx:-import Link from "next/link"; +import { NavLink } from "@/components/ui/NavLink"; @@ - <h3 className="font-medium mb-0.5 text-lg tracking-tight"> - <Link className="before:absolute before:inset-0" href={props.href}> - {props.title} - </Link> - </h3> + <h3 className="font-medium mb-0.5 text-lg tracking-tight"> + <NavLink className="before:absolute before:inset-0" href={props.href}> + {props.title} + </NavLink> + </h3>
🧹 Nitpick comments (4)
apps/playground-web/src/app/page.tsx (4)
39-55: Deduplicate section rendering by mapping over a config array.Minor readability/maintainability win and easier re-ordering.
Apply within this block:
- <FeatureSection featureCards={aiFeatureCards} title="AI" /> - <FeatureSection featureCards={walletsFeatureCards} title="Wallets" /> - <FeatureSection - featureCards={transactionsFeatureCards} - title="Transactions" - /> - <FeatureSection - featureCards={contractsFeatureCards} - title="Contracts" - /> - <FeatureSection featureCards={paymentsFeatureCards} title="Payments" /> - <FeatureSection featureCards={insightFeatureCards} title="Insight" /> - <FeatureSection - featureCards={accountAbstractionsFeatureCards} - title="Account Abstraction" - /> + {sections.map(({ title, cards }) => ( + <FeatureSection key={title} featureCards={cards} title={title} /> + ))}Place this inside
Page()before thereturn:const sections = [ { title: "AI", cards: aiFeatureCards }, { title: "Wallets", cards: walletsFeatureCards }, { title: "Transactions", cards: transactionsFeatureCards }, { title: "Contracts", cards: contractsFeatureCards }, { title: "Payments", cards: paymentsFeatureCards }, { title: "Insight", cards: insightFeatureCards }, { title: "Account Abstraction", cards: accountAbstractionsFeatureCards }, ] as const;
71-79: Use a stable, unique React key.
card.titlecan collide;card.linkis unique per item.- <FeatureCard - key={card.title} + <FeatureCard + key={card.link} description={card.description} href={card.link} icon={card.icon} title={card.title} />
71-72: Avoid the magic number; extract a constant.Improves clarity and makes the limit easy to tweak.
- {props.featureCards.slice(0, 6).map((card) => ( + {props.featureCards.slice(0, CARDS_PER_SECTION).map((card) => (Add near the top-level of this file (or alongside FeatureSection if extracted):
const CARDS_PER_SECTION = 6;
61-83: ExtractFeatureSectioninto a reusable block component.Keeps this page focused and makes the section reusable across the new overview pages introduced in this PR.
Remove this local component:
- function FeatureSection(props: { - featureCards: FeatureCardMetadata[]; - title: string; - }) { - return ( - <section> - <h2 className="font-semibold text-xl text-foreground tracking-tight mb-2"> - {props.title} - </h2> - <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> - {props.featureCards.slice(0, 6).map((card) => ( - <FeatureCard - key={card.title} - description={card.description} - href={card.link} - icon={card.icon} - title={card.title} - /> - ))} - </div> - </section> - ); - }Create
apps/playground-web/src/components/blocks/FeatureSection.tsx:import type { FeatureCardMetadata } from "@/app/data/pages-metadata"; import { FeatureCard } from "./FeatureCard"; type FeatureSectionProps = { featureCards: FeatureCardMetadata[]; title: string; }; export function FeatureSection({ featureCards, title }: FeatureSectionProps) { return ( <section> <h2 className="font-semibold text-xl text-foreground tracking-tight mb-2"> {title} </h2> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> {featureCards.slice(0, CARDS_PER_SECTION).map((card) => ( <FeatureCard key={card.link} description={card.description} href={card.link} icon={card.icon} title={card.title} /> ))} </div> </section> ); }Then import it at the top of this page:
import { FeatureSection } from "@/components/blocks/FeatureSection";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (14)
apps/playground-web/src/app/account-abstraction/page.tsx(1 hunks)apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx(1 hunks)apps/playground-web/src/app/ai/page.tsx(1 hunks)apps/playground-web/src/app/contracts/page.tsx(1 hunks)apps/playground-web/src/app/data/pages-metadata.ts(1 hunks)apps/playground-web/src/app/navLinks.ts(8 hunks)apps/playground-web/src/app/page.tsx(2 hunks)apps/playground-web/src/app/payments/page.tsx(1 hunks)apps/playground-web/src/app/tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/page.tsx(1 hunks)apps/playground-web/src/app/wallets/page.tsx(1 hunks)apps/playground-web/src/components/blocks/FeatureCard.tsx(1 hunks)apps/playground-web/src/components/blocks/OverviewPage.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (13)
- apps/playground-web/src/app/transactions/page.tsx
- apps/playground-web/src/app/payments/page.tsx
- apps/playground-web/src/app/account-abstraction/page.tsx
- apps/playground-web/src/app/wallets/headless/page.tsx
- apps/playground-web/src/app/wallets/page.tsx
- apps/playground-web/src/app/data/pages-metadata.ts
- apps/playground-web/src/app/contracts/page.tsx
- apps/playground-web/src/app/tokens/page.tsx
- apps/playground-web/src/components/blocks/FeatureCard.tsx
- apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx
- apps/playground-web/src/app/ai/page.tsx
- apps/playground-web/src/app/navLinks.ts
- apps/playground-web/src/components/blocks/OverviewPage.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
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/playground-web/src/app/page.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/playground-web/src/app/page.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/playground-web/src/app/page.tsx
🧠 Learnings (16)
📚 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}/**/feature/components/** : Group feature-specific components under `feature/components/*` with barrel `index.ts`
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Server Components must start with `import "server-only"`; use `next/headers`, server‑only env, heavy data fetching, and `redirect()` where appropriate
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: 2025-08-07T17:24:31.965Z
Learnt from: MananTank
PR: thirdweb-dev/js#7812
File: apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx:1-11
Timestamp: 2025-08-07T17:24:31.965Z
Learning: In Next.js App Router, page components (page.tsx files) are server components by default and do not require the "server-only" import directive. The "server-only" directive is primarily used for utility functions, API helpers, and data access modules that should never be included in the client bundle.
Applied to files:
apps/playground-web/src/app/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: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/playground-web/src/app/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/playground-web/src/app/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/playground-web/src/app/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/playground-web/src/app/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 : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: 2025-09-03T23:35:50.455Z
Learnt from: MananTank
PR: thirdweb-dev/js#7977
File: apps/playground-web/src/app/page.tsx:61-65
Timestamp: 2025-09-03T23:35:50.455Z
Learning: In the thirdweb-dev/js codebase, specifically for React components in **/*.{ts,tsx} files, do not suggest adding explicit return types like `: JSX.Element` or `: React.ReactElement` to function components. The project maintainer MananTank has explicitly declined these suggestions.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to **/*.{ts,tsx} : Use explicit function declarations and explicit return types in TypeScript
Applied to files:
apps/playground-web/src/app/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: Applies to **/*.{ts,tsx} : Write idiomatic TypeScript with explicit function declarations and return types
Applied to files:
apps/playground-web/src/app/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: 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/playground-web/src/app/page.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Use `NavLink` for internal navigation to get active state handling
Applied to files:
apps/playground-web/src/app/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} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/playground-web/src/app/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} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/playground-web/src/app/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/playground-web/src/app/page.tsx
🧬 Code graph analysis (1)
apps/playground-web/src/app/page.tsx (2)
apps/playground-web/src/app/data/pages-metadata.ts (8)
aiFeatureCards(284-297)walletsFeatureCards(36-87)transactionsFeatureCards(110-133)contractsFeatureCards(135-160)paymentsFeatureCards(162-196)insightFeatureCards(198-236)accountAbstractionsFeatureCards(238-266)FeatureCardMetadata(29-34)apps/playground-web/src/components/blocks/FeatureCard.tsx (1)
FeatureCard(3-26)
⏰ 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: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/playground-web/src/app/page.tsx (2)
1-1: Keep page.tsx withoutserver-only(App Router pages are server by default).No need to add
import "server-only";here; maintainers have clarified it’s unnecessary forpage.tsx. This is good as-is.
3-12: Type-only import is correct.Using
typeimport forFeatureCardMetadatakeeps the client bundle lean and matches TS best practices.
Merge activity
|
…7977) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on enhancing the UI components for various sections in a web application, particularly by introducing `OverviewPage` components for different features and updating the layout for better organization and presentation. ### Detailed summary - Updated `className` for `PromptInput` in `chat-container.tsx`. - Added `OverviewPage` components for `Tokens`, `AI`, `Contracts`, `Payments`, `Wallets`, `Transactions`, and `Account Abstraction`. - Introduced `FeatureCard` metadata for various features in `pages-metadata.ts`. - Refactored the main `Page` component to use `FeatureSection` for organized display. - Removed hardcoded feature cards from the main `Page` component. > ✨ 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 - Added overview pages for AI, Wallets, Headless Components, Transactions, Contracts, Payments, Tokens, and Account Abstraction. - Introduced reusable OverviewPage and FeatureCard components. - Centralized feature-card metadata for all categories. - Updated navigation to add “Overview” entries and renamed “AI SDK” to “AI SDK Integration”. - Refactor - Home page rewritten to a data-driven layout using shared components and metadata with consistent grid rendering. - Style - Tweaked AI chat input borders and top-edge rounding. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
09-04-_mny-106_playground_add_overview_pages_for_all_sections_in_sidebar
branch
from
cd80067 to
488a3af
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/playground-web/src/app/navLinks.ts (1)
189-193: Payments overview entry looks good; small naming nitOverview is correct. Minor consistency nit: later in this section the item “Onchain Transaction” (Lines 207-209) differs from metadata label “Transactions”. Consider aligning names.
apps/playground-web/src/app/page.tsx (2)
39-56: Sections wired from metadata — consider adding Tokens (optional)Great shift to data-driven sections. If you want parity with the sidebar, optionally include Tokens here too.
import { accountAbstractionsFeatureCards, aiFeatureCards, contractsFeatureCards, type FeatureCardMetadata, insightFeatureCards, paymentsFeatureCards, transactionsFeatureCards, walletsFeatureCards, + // Optional: include Tokens on the landing page as well + // tokensFeatureCards, } from "./data/pages-metadata"; @@ - <FeatureSection featureCards={walletsFeatureCards} title="Wallets" /> + <FeatureSection featureCards={walletsFeatureCards} title="Wallets" /> + {/* + Optional: uncomment to surface Tokens on the home page + <FeatureSection featureCards={tokensFeatureCards} title="Tokens" /> + */}
61-82: Extract props type + destructure; use stable keySmall readability/robustness improvements: define a props type alias, destructure props, and key by link (titles can collide).
-function FeatureSection(props: { - featureCards: FeatureCardMetadata[]; - title: string; -}) { +type FeatureSectionProps = { + featureCards: FeatureCardMetadata[]; + title: string; +}; +function FeatureSection({ featureCards, title }: FeatureSectionProps) { return ( - <section> - <h2 className="font-semibold text-xl text-foreground tracking-tight mb-2"> - {props.title} - </h2> - <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> - {props.featureCards.slice(0, 6).map((card) => ( + <section> + <h2 className="font-semibold text-xl text-foreground tracking-tight mb-2"> + {title} + </h2> + <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> + {featureCards.slice(0, 6).map((card) => ( <FeatureCard - key={card.title} + key={card.link} description={card.description} href={card.link} icon={card.icon} title={card.title} /> ))} </div> </section>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (14)
apps/playground-web/src/app/account-abstraction/page.tsx(1 hunks)apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx(1 hunks)apps/playground-web/src/app/ai/page.tsx(1 hunks)apps/playground-web/src/app/contracts/page.tsx(1 hunks)apps/playground-web/src/app/data/pages-metadata.ts(1 hunks)apps/playground-web/src/app/navLinks.ts(8 hunks)apps/playground-web/src/app/page.tsx(2 hunks)apps/playground-web/src/app/payments/page.tsx(1 hunks)apps/playground-web/src/app/tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/page.tsx(1 hunks)apps/playground-web/src/app/wallets/page.tsx(1 hunks)apps/playground-web/src/components/blocks/FeatureCard.tsx(1 hunks)apps/playground-web/src/components/blocks/OverviewPage.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (12)
- apps/playground-web/src/app/wallets/page.tsx
- apps/playground-web/src/app/tokens/page.tsx
- apps/playground-web/src/app/data/pages-metadata.ts
- apps/playground-web/src/components/blocks/FeatureCard.tsx
- apps/playground-web/src/app/transactions/page.tsx
- apps/playground-web/src/app/contracts/page.tsx
- apps/playground-web/src/app/account-abstraction/page.tsx
- apps/playground-web/src/app/wallets/headless/page.tsx
- apps/playground-web/src/components/blocks/OverviewPage.tsx
- apps/playground-web/src/app/ai/page.tsx
- apps/playground-web/src/app/payments/page.tsx
- apps/playground-web/src/app/ai/ai-sdk/components/chat-container.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
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/playground-web/src/app/navLinks.tsapps/playground-web/src/app/page.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/playground-web/src/app/navLinks.tsapps/playground-web/src/app/page.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/playground-web/src/app/navLinks.tsapps/playground-web/src/app/page.tsx
🧠 Learnings (18)
📚 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/playground-web/src/app/navLinks.tsapps/playground-web/src/app/page.tsx
📚 Learning: 2025-08-07T20:43:21.864Z
Learnt from: MananTank
PR: thirdweb-dev/js#7812
File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx:48-60
Timestamp: 2025-08-07T20:43:21.864Z
Learning: In the TokenBanner component at apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx, the Link components use target="_blank" with internal application routes (starting with "/") to open pages in new tabs within the same application. These internal links do not require rel="noopener noreferrer" security attributes, which are only needed for external URLs.
Applied to files:
apps/playground-web/src/app/navLinks.tsapps/playground-web/src/app/page.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Server Components must start with `import "server-only"`; use `next/headers`, server‑only env, heavy data fetching, and `redirect()` where appropriate
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: 2025-08-07T17:24:31.965Z
Learnt from: MananTank
PR: thirdweb-dev/js#7812
File: apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx:1-11
Timestamp: 2025-08-07T17:24:31.965Z
Learning: In Next.js App Router, page components (page.tsx files) are server components by default and do not require the "server-only" import directive. The "server-only" directive is primarily used for utility functions, API helpers, and data access modules that should never be included in the client bundle.
Applied to files:
apps/playground-web/src/app/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: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/playground-web/src/app/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/playground-web/src/app/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/playground-web/src/app/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/playground-web/src/app/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 : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: 2025-09-03T23:35:50.476Z
Learnt from: MananTank
PR: thirdweb-dev/js#7977
File: apps/playground-web/src/app/page.tsx:61-65
Timestamp: 2025-09-03T23:35:50.476Z
Learning: In the thirdweb-dev/js codebase, specifically for React components in **/*.{ts,tsx} files, do not suggest adding explicit return types like `: JSX.Element` or `: React.ReactElement` to function components. The project maintainer MananTank has explicitly declined these suggestions.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to **/*.{ts,tsx} : Use explicit function declarations and explicit return types in TypeScript
Applied to files:
apps/playground-web/src/app/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: Applies to **/*.{ts,tsx} : Write idiomatic TypeScript with explicit function declarations and return types
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Use `NavLink` for internal navigation to get active state handling
Applied to files:
apps/playground-web/src/app/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} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/playground-web/src/app/page.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/playground-web/src/app/page.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/playground-web/src/app/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} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/playground-web/src/app/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/playground-web/src/app/page.tsx
🧬 Code graph analysis (1)
apps/playground-web/src/app/page.tsx (2)
apps/playground-web/src/app/data/pages-metadata.ts (8)
aiFeatureCards(284-297)walletsFeatureCards(36-87)transactionsFeatureCards(110-133)contractsFeatureCards(135-160)paymentsFeatureCards(162-196)insightFeatureCards(198-236)accountAbstractionsFeatureCards(238-266)FeatureCardMetadata(29-34)apps/playground-web/src/components/blocks/FeatureCard.tsx (1)
FeatureCard(3-26)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (9)
apps/playground-web/src/app/navLinks.ts (8)
19-23: AI overview entry looks goodAdding the index route with exactMatch will ensure correct active state for /ai.
30-30: Label rename consistent“AI SDK Integration” aligns with metadata and page copy. No action needed.
41-45: Wallets overview entry looks goodCorrect placement at top and exactMatch=true for /wallets.
79-83: Headless Components overview added correctlyNested overview with exactMatch=true will fix active state for /wallets/headless.
107-111: Contracts overview entry looks goodIndex route + exactMatch=true is correct.
159-163: AA overview entry looks goodMatches new /account-abstraction overview page.
223-227: Transactions overview entry looks goodIndex route present with exactMatch=true.
137-141: /tokens route confirmed —apps/playground-web/src/app/tokens/page.tsxexists andtokensFeatureCardsexport inapps/playground-web/src/app/data/pages-metadata.tsis present.apps/playground-web/src/app/page.tsx (1)
1-12: Metadata-driven imports LGTMType-only import for FeatureCardMetadata keeps client bundle lean; grouping feature card datasets is clean.
graphite-app
bot
deleted the
09-04-_mny-106_playground_add_overview_pages_for_all_sections_in_sidebar
branch
PR-Codex overview
This PR introduces new
OverviewPagecomponents across various sections of the application, enhancing the presentation of feature cards related to AI, wallets, transactions, contracts, payments, insight, and account abstractions. It also refines styles and structure for better usability.Detailed summary
PromptInputstyles inchat-container.tsx.OverviewPagecomponents in:page.tsxfor AI, tokens, contracts, payments, wallets, transactions, and account abstraction.FeatureCardandFeatureSectioncomponents for feature presentation.Pagecomponent to utilizeFeatureSectionfor better organization.Summary by CodeRabbit