Playground: Revamp #7768
Merged
Playground: Revamp #7768
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 ↗︎
1 Skipped Deployment
|
|
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. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7768 +/- ##
=======================================
Coverage 56.42% 56.43%
=======================================
Files 904 904
Lines 58674 58674
Branches 4139 4136 -3
=======================================
+ Hits 33108 33110 +2
+ Misses 25461 25459 -2
Partials 105 105
🚀 New features to boost your workflow:
|
MananTank
force-pushed
the
07-31-playground_revamp
branch
from
afbf120 to
9cbd674
Compare
WalkthroughThis update introduces a comprehensive refactor of the playground web app's navigation, metadata, and layout systems. It replaces the sidebar and related navigation logic with a new, modular, and context-driven sidebar architecture, adds new layout and navigation components, centralizes and standardizes metadata handling, and updates or removes several feature pages and supporting files. The changes also include numerous styling, icon, and utility enhancements, as well as the addition of several new UI and hook modules. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SidebarProvider
participant FullWidthSidebarLayout
participant NavLink
participant PageComponent
User->>SidebarProvider: Loads app
SidebarProvider->>FullWidthSidebarLayout: Provides sidebar state/context
FullWidthSidebarLayout->>NavLink: Renders navigation links
NavLink->>SidebarProvider: Checks active path
FullWidthSidebarLayout->>PageComponent: Renders page content
User->>SidebarProvider: Toggles sidebar (desktop/mobile)
SidebarProvider->>FullWidthSidebarLayout: Updates sidebar open/collapsed state
Estimated code review effort🎯 5 (Critical) | ⏱️ ~90+ minutes Suggested labels
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
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: 13
🔭 Outside diff range comments (3)
apps/playground-web/src/components/code/code-example.tsx (2)
1-1: Missing'use client';directive – component will be treated as a server componentThis file renders interactive UI (
ClientOnly) and must start with the'use client';pragma to opt-into the client-component bundle. Without it Next JS will server-render the file and strip interactivity.+'use client'; + import { Code2Icon, EyeIcon } from "lucide-react";
7-15: ExposeclassNameprop and merge withcn()for design-system overridesMost playground components expose a
classNameso callers can tweak spacing / layout. Adding it keeps this component consistent with the guidelines (“ExposeclassNameprop on root element”).-import { Code2Icon, EyeIcon } from "lucide-react"; +import { Code2Icon, EyeIcon } from "lucide-react"; +import { cn } from "@/lib/utils"; type CodeExampleProps = { preview: JSX.Element; code: string; lang: BundledLanguage; header?: { title: React.ReactNode; description?: React.ReactNode; }; + className?: string; }; export const CodeExample: React.FC<CodeExampleProps> = ({ code, lang, preview, - header, + header, + className, }) => { return ( - <div className="relative z-0"> + <div className={cn("relative z-0", className)}>Also applies to: 17-24
apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx (1)
55-72:<h1>contains a<div>– invalid heading contentHTML headings must contain only phrasing content;
divis flow content and invalid inside<h1>.
Replace the wrapper with aspanor move theh1outside the flex container.-<h1 className="mt-3 mb-6 font-semibold text-2xl tracking-tight"> - <div className="flex items-center gap-2"> +<div className="mt-3 mb-6 flex items-center gap-2"> + <h1 className="font-semibold text-2xl tracking-tight"> {/* … */} - </div> -</h1> +</h1> +</div>
🧹 Nitpick comments (14)
apps/playground-web/src/components/code/code-example.tsx (1)
47-48: Nestedbg-cardis redundantThe parent grid already sets
bg-card; repeating it on the preview container adds an extra layer to the paint stack without visual gain.- className="relative grid h-full min-h-[300px] place-items-center bg-card py-20" + className="relative grid h-full min-h-[300px] place-items-center py-20"apps/playground-web/package.json (1)
6-7: Version-range inconsistency for newly added Radix deps
@radix-ui/react-collapsibleis pinned with a caret while@radix-ui/react-dialogis locked to an exact version. The rest of the Radix set in this manifest is split between caret (^) and exact pins, which makes automated upgrades brittle and complicates reproducible installs.Consider standardising on either caret or exact versions across the whole Radix family (preferably exact to keep UI primitives in lock-step).
- "@radix-ui/react-dialog": "1.1.14", + "@radix-ui/react-dialog": "^1.1.14",apps/playground-web/src/hooks/full-path.ts (1)
5-11: Minor: memoise the derived string to avoid needless re-computations
usePathname()anduseSearchParams()already trigger re-renders when they change, so wrapping the concatenation +decodeURIComponentinuseMemoavoids recomputing the same string on every render while keeping semantics intact.export function useFullPath() { const pathname = usePathname(); const searchParams = useSearchParams(); - const searchParamsString = searchParams.toString(); - return decodeURIComponent( - `${pathname}${searchParamsString ? `?${searchParamsString}` : ""}`, - ); + return useMemo(() => { + const searchParamsString = searchParams.toString(); + return decodeURIComponent( + `${pathname}${searchParamsString ? `?${searchParamsString}` : ""}`, + ); + }, [pathname, searchParams]); }apps/playground-web/src/icons/InsightIcon.tsx (1)
1-21: Duplication: reuse the existingInsightIconinstead of re-definingA functionally identical icon already lives in
apps/portal/src/icons/products/InsightIcon.tsx. Re-exporting that module (or moving it to a shared@/iconsbarrel) eliminates duplication and keeps future tweaks in one place.-export function InsightIcon(props: { className?: string }) { - return ( - <svg …> - … - </svg> - ); -} +// re-export – avoids duplication +export { InsightIcon } from "@portal/icons/products/InsightIcon";apps/playground-web/src/app/payments/backend/reference/page.tsx (1)
38-45: Hard-coded max-width may fight the global layout systemAdding
max-w-[1400px]directly on the page container bypasses the sharedcontainerutility breakpoint logic. Consider moving the width cap into the reusablePageHeader/ layout component (or extend the Tailwind theme) so every page stays consistent.apps/playground-web/src/components/ThemeToggle.tsx (1)
17-25: Consider extracting button styling to improve readability.The button has extensive inline styling that could be simplified or extracted.
Consider creating a variant or extracting common classes:
+const themeButtonClasses = "w-full text-muted-foreground hover:text-foreground px-2 py-1.5 text-left justify-start gap-2 capitalize h-auto font-normal"; <Button aria-label="Toggle theme" - className="w-full text-muted-foreground hover:text-foreground px-2 py-1.5 text-left justify-start gap-2 capitalize h-auto font-normal" + className={themeButtonClasses} onClick={() => { setTheme(theme === "dark" ? "light" : "dark"); }} size="sm" variant="ghost" >apps/playground-web/src/app/api/og/route.tsx (1)
9-12: Extract magic numbers to named constants.The image dimensions and positioning calculations use magic numbers that could be extracted for better maintainability.
const width = 1200; const height = 630; +const PADDING = 60; +const ICON_OFFSET_DIVISOR = 20; +const ICON_VERTICAL_OFFSET_DIVISOR = 1.5; const iconSize = 400;Then update the positioning:
- padding: "80px 60px", + padding: `80px ${PADDING}px`,- right: width / 20, - top: height / 2 - iconSize / 1.5, + right: width / ICON_OFFSET_DIVISOR, + top: height / 2 - iconSize / ICON_VERTICAL_OFFSET_DIVISOR,Also applies to: 88-89
apps/playground-web/src/app/payments/ui-components/page.tsx (1)
7-12: Clarify the need for two description constants.Having both
descriptionandogDescriptionsuggests different content for UI display vs. Open Graph metadata. Consider adding comments to clarify their intended usage.+// Description shown in the page UI const description = "Onramp, swap, & bridge over 1,000+ tokens to enable seamless crypto payments, checkouts, and transactions"; +// More detailed description for Open Graph/social sharing const ogDescription = "Onramp, swap, and bridge cryptocurrency with easy to implement components for purchasing crypto, checking out physical or digital goods and services, and executing onchain transactions.";apps/playground-web/src/app/wallets/headless/chain-components/page.tsx (1)
13-20: Consider the metadata image icon value.The
image.iconis set to"wallets"for a chain components page. While this might be intentional due to the page being in the wallets section, consider if"chains"or a similar value would be more semantically appropriate.apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx (1)
12-53: Consider extracting default options to a separate module.The
defaultConnectOptionsobject is comprehensive and well-structured, but its size (40+ lines) might benefit from extraction to a separate configuration file for better maintainability.You could extract this to a separate file like
connect-options-defaults.ts:+// connect-options-defaults.ts +export const defaultInAppLoginMethods: ConnectPlaygroundOptions["inAppWallet"]["methods"] = [ + "google", + "discord", + // ... rest of methods +]; + +export const defaultConnectOptions: ConnectPlaygroundOptions = { + // ... all default options +};Then import in this file:
-const defaultInAppLoginMethods: ConnectPlaygroundOptions["inAppWallet"]["methods"] = [ - // ... methods -]; - -const defaultConnectOptions: ConnectPlaygroundOptions = { - // ... options -}; +import { defaultConnectOptions } from './connect-options-defaults';apps/playground-web/src/icons/ThirdwebMiniLogo.tsx (2)
3-5: Consider extracting the utility function.The
prefixIdfunction could be extracted to a shared utilities file since it's a generic helper that could be reused across other icon components.-function prefixId(id: string, prefix?: string) { - return prefix ? `${prefix}_${id}` : id; -}And import it from a utilities file:
import { prefixId } from "@/lib/svg-utils";
7-10: Add explicit return type annotation and consider naming consistency.Following TypeScript best practices, add an explicit return type. Also, consider consistency with the dashboard app's naming convention (
ThirdwebMiniLogo).-export function ThirdwebIcon(props: { +export function ThirdwebIcon(props: { className?: string; isMonoChrome?: boolean; -}) { +}): React.JSX.Element {apps/playground-web/src/app/page.tsx (1)
239-260: Consider more specific type for icon prop.The
FeatureCardcomponent uses a generic React.FC type for the icon prop. Consider using a more specific type that matches lucide-react's icon interface.- icon: React.FC<{ className?: string }>; + icon: React.ComponentType<{ className?: string }>;This provides better type safety and aligns with how lucide-react exports their icons.
apps/playground-web/src/components/ui/skeleton.tsx (1)
15-48: Simplify SkeletonContainer structureThe component has redundant opacity handling and excessive nesting. The invisible wrapper and separate opacity transition div create unnecessary complexity.
Consider simplifying the structure:
function SkeletonContainer<T>(props: { loadedData?: T; skeletonData: T; className?: string; render: (data: T) => React.ReactNode; style?: React.CSSProperties; }) { const isLoading = props.loadedData === undefined; return ( <div aria-hidden={isLoading ? "true" : "false"} className={cn( - isLoading && "inline-block animate-pulse rounded-lg bg-muted", + "transition-opacity duration-300", + isLoading ? "animate-pulse" : "opacity-100", props.className, )} style={props.style} > - <div className={cn(isLoading && "invisible")}> - <div - className={cn( - "transition-opacity duration-300", - isLoading ? "opacity-0" : "opacity-100", - )} - > - {props.render( - props.loadedData === undefined - ? props.skeletonData - : props.loadedData, - )} - </div> - </div> + {props.render(isLoading ? props.skeletonData : props.loadedData)} </div> ); }
MananTank
force-pushed
the
07-31-playground_revamp
branch
from
9cbd674 to
4418ad8
Compare
github-actions
bot
added
the
Portal
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/playground-web/src/components/ui/sidebar.tsx (1)
1-1: Address the FIXME for cookie handlingThe biome-ignore comment with FIXME indicates technical debt. Direct
document.cookiemanipulation should be replaced with a proper cookie handling approach.Consider using a cookie library like
js-cookieor moving cookie operations to server-side actions. Would you like me to open an issue to track this technical debt?Also applies to: 93-94
🧹 Nitpick comments (4)
apps/playground-web/src/components/pay/direct-payment.tsx (3)
6-7: Add an explicit return type to align with repo TypeScript guidelines
BuyMerchPreviewis missing an explicit return type (JSX.Element). The coding-guidelines for all*.{ts,tsx}files require explicit function return types.-export function BuyMerchPreview() { +export function BuyMerchPreview(): JSX.Element {
8-19: Prefer numeric literal foramountto avoid unintended string coercion
CheckoutWidgetexpects aBigNumberish/number-like prop. Passing"2"works but incurs an avoidable runtime string-to-number coercion. Supplying a numeric literal keeps the prop type intent clear.- amount={"2"} + amount={2}
17-18: Consider externalising hard-coded addresses & images
seller,tokenAddress, and the Unsplash URL are hard-coded inline. Moving them to a constants file (or env variables where appropriate) improves maintainability and avoids accidental leakage if these ever become environment-specific.apps/playground-web/src/app/page.tsx (1)
243-243: Remove unnecessary TODO commentThe
hrefprop is already required in the type definition, so this TODO comment is outdated and should be removed.- href: string; // todo make this required + href: string;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
apps/playground-web/public/og/background-1.jpgis excluded by!**/*.jpgapps/playground-web/public/og/icons/insight.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/payments.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/transactions.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/wallets.svgis excluded by!**/*.svgapps/playground-web/src/app/api/og/inter/700.ttfis excluded by!**/*.ttfapps/playground-web/src/app/opengraph-image.jpgis excluded by!**/*.jpgapps/playground-web/src/app/payments/opengraph-image.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (76)
apps/playground-web/next.config.mjs(1 hunks)apps/playground-web/package.json(1 hunks)apps/playground-web/src/app/AppSidebar.tsx(1 hunks)apps/playground-web/src/app/MobileHeader.tsx(0 hunks)apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/native-aa/page.tsx(1 hunks)apps/playground-web/src/app/api/og/route.tsx(1 hunks)apps/playground-web/src/app/globals.css(2 hunks)apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx(1 hunks)apps/playground-web/src/app/insight/layout.tsx(1 hunks)apps/playground-web/src/app/layout.tsx(2 hunks)apps/playground-web/src/app/login/_sdk_.ts(0 hunks)apps/playground-web/src/app/login/layout.tsx(0 hunks)apps/playground-web/src/app/login/page.tsx(0 hunks)apps/playground-web/src/app/navLinks.ts(1 hunks)apps/playground-web/src/app/otherLinks.ts(0 hunks)apps/playground-web/src/app/page.tsx(1 hunks)apps/playground-web/src/app/payments/backend/layout.tsx(1 hunks)apps/playground-web/src/app/payments/backend/page.tsx(3 hunks)apps/playground-web/src/app/payments/backend/reference/page.tsx(1 hunks)apps/playground-web/src/app/payments/commerce/page.tsx(1 hunks)apps/playground-web/src/app/payments/fund-wallet/page.tsx(1 hunks)apps/playground-web/src/app/payments/transactions/page.tsx(1 hunks)apps/playground-web/src/app/payments/ui-components/page.tsx(1 hunks)apps/playground-web/src/app/token-selector-demo/page.tsx(0 hunks)apps/playground-web/src/app/tokens/nft-components/page.tsx(2 hunks)apps/playground-web/src/app/tokens/token-components/page.tsx(1 hunks)apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/mint-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/webhooks/page.tsx(1 hunks)apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx(0 hunks)apps/playground-web/src/app/wallets/auth/page.tsx(1 hunks)apps/playground-web/src/app/wallets/blockchain-api/page.tsx(1 hunks)apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/account-components/page.tsx(2 hunks)apps/playground-web/src/app/wallets/headless/chain-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx(0 hunks)apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/button/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/embed/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/headless/page.tsx(1 hunks)apps/playground-web/src/app/wallets/social/page.tsx(1 hunks)apps/playground-web/src/components/ThemeToggle.tsx(1 hunks)apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx(0 hunks)apps/playground-web/src/components/blocks/APIHeader.tsx(3 hunks)apps/playground-web/src/components/blocks/NetworkSelectors.tsx(1 hunks)apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx(1 hunks)apps/playground-web/src/components/blocks/multi-select.tsx(1 hunks)apps/playground-web/src/components/code/RenderCode.tsx(1 hunks)apps/playground-web/src/components/code/code-example.tsx(2 hunks)apps/playground-web/src/components/headless-ui/wallet-previews.tsx(0 hunks)apps/playground-web/src/components/pay/direct-payment.tsx(1 hunks)apps/playground-web/src/components/ui/NavLink.tsx(1 hunks)apps/playground-web/src/components/ui/TokenSelector.tsx(1 hunks)apps/playground-web/src/components/ui/collapsible.tsx(1 hunks)apps/playground-web/src/components/ui/select.tsx(2 hunks)apps/playground-web/src/components/ui/sheet.tsx(1 hunks)apps/playground-web/src/components/ui/sidebar.tsx(1 hunks)apps/playground-web/src/components/ui/skeleton.tsx(1 hunks)apps/playground-web/src/hooks/full-path.ts(1 hunks)apps/playground-web/src/hooks/use-mobile.tsx(1 hunks)apps/playground-web/src/icons/InsightIcon.tsx(1 hunks)apps/playground-web/src/icons/PayIcon.tsx(1 hunks)apps/playground-web/src/icons/SmartAccountIcon.tsx(1 hunks)apps/playground-web/src/icons/ThirdwebMiniLogo.tsx(1 hunks)apps/playground-web/src/lib/env.ts(1 hunks)apps/playground-web/src/lib/metadata.ts(1 hunks)apps/playground-web/tailwind.config.ts(1 hunks)apps/portal/src/app/page.tsx(2 hunks)apps/portal/src/lib/getBaseUrl.ts(1 hunks)
💤 Files with no reviewable changes (10)
- apps/playground-web/src/app/otherLinks.ts
- apps/playground-web/src/app/login/layout.tsx
- apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx
- apps/playground-web/src/components/headless-ui/wallet-previews.tsx
- apps/playground-web/src/app/login/page.tsx
- apps/playground-web/src/app/token-selector-demo/page.tsx
- apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx
- apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx
- apps/playground-web/src/app/MobileHeader.tsx
- apps/playground-web/src/app/login/sdk.ts
✅ Files skipped from review due to trivial changes (10)
- apps/playground-web/package.json
- apps/playground-web/src/components/code/RenderCode.tsx
- apps/playground-web/src/components/blocks/multi-select.tsx
- apps/playground-web/src/components/code/code-example.tsx
- apps/playground-web/src/icons/InsightIcon.tsx
- apps/playground-web/src/hooks/use-mobile.tsx
- apps/playground-web/src/components/ui/NavLink.tsx
- apps/playground-web/src/icons/SmartAccountIcon.tsx
- apps/playground-web/src/components/ui/collapsible.tsx
- apps/playground-web/src/app/api/og/route.tsx
🚧 Files skipped from review as they are similar to previous changes (50)
- apps/playground-web/src/app/payments/backend/reference/page.tsx
- apps/playground-web/src/components/blocks/NetworkSelectors.tsx
- apps/playground-web/src/components/ui/TokenSelector.tsx
- apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx
- apps/playground-web/src/app/globals.css
- apps/playground-web/src/app/payments/backend/page.tsx
- apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx
- apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
- apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx
- apps/playground-web/src/icons/PayIcon.tsx
- apps/playground-web/src/app/tokens/token-components/page.tsx
- apps/playground-web/src/components/ui/select.tsx
- apps/playground-web/src/hooks/full-path.ts
- apps/playground-web/src/app/wallets/headless/chain-components/page.tsx
- apps/playground-web/src/lib/metadata.ts
- apps/playground-web/src/app/layout.tsx
- apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx
- apps/playground-web/src/app/account-abstraction/native-aa/page.tsx
- apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx
- apps/playground-web/src/app/tokens/nft-components/page.tsx
- apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx
- apps/playground-web/src/app/payments/ui-components/page.tsx
- apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx
- apps/playground-web/tailwind.config.ts
- apps/playground-web/src/app/wallets/blockchain-api/page.tsx
- apps/playground-web/src/app/AppSidebar.tsx
- apps/playground-web/src/app/payments/backend/layout.tsx
- apps/playground-web/src/app/insight/layout.tsx
- apps/playground-web/src/app/transactions/mint-tokens/page.tsx
- apps/playground-web/src/app/wallets/auth/page.tsx
- apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
- apps/playground-web/src/app/payments/commerce/page.tsx
- apps/playground-web/src/app/wallets/social/page.tsx
- apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx
- apps/playground-web/src/components/ThemeToggle.tsx
- apps/playground-web/src/app/wallets/sign-in/headless/page.tsx
- apps/playground-web/next.config.mjs
- apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx
- apps/playground-web/src/app/transactions/webhooks/page.tsx
- apps/playground-web/src/app/payments/transactions/page.tsx
- apps/playground-web/src/components/blocks/APIHeader.tsx
- apps/playground-web/src/app/wallets/in-app-wallet/page.tsx
- apps/playground-web/src/app/wallets/headless/account-components/page.tsx
- apps/playground-web/src/icons/ThirdwebMiniLogo.tsx
- apps/playground-web/src/components/ui/skeleton.tsx
- apps/playground-web/src/app/payments/fund-wallet/page.tsx
- apps/playground-web/src/lib/env.ts
- apps/playground-web/src/components/ui/sheet.tsx
- apps/playground-web/src/app/wallets/sign-in/button/page.tsx
- apps/playground-web/src/components/blocks/full-width-sidebar-layout.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/portal/src/lib/getBaseUrl.tsapps/portal/src/app/page.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsxapps/playground-web/src/components/pay/direct-payment.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/portal/src/lib/getBaseUrl.tsapps/portal/src/app/page.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsxapps/playground-web/src/components/pay/direct-payment.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.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsxapps/playground-web/src/components/pay/direct-payment.tsx
🧠 Learnings (50)
📓 Common learnings
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 `NavLink` for internal navigation with automatic active states 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: 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: .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`).
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 Tailwind CSS only – no inline styles or CSS modules
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.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx:29-39
Timestamp: 2025-05-27T20:10:47.245Z
Learning: MananTank prefers adding error handling (try-catch) directly inside utility functions like `shouldRenderNewPublicPage` rather than requiring callers to wrap the function calls in try-catch blocks. This centralizes error handling and benefits all callers automatically.
📚 Learning: applies to dashboard/**/*.{ts,tsx} : accessing server-only environment variables or secrets....
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} : Accessing server-only environment variables or secrets.
Applied to files:
apps/portal/src/lib/getBaseUrl.ts
📚 Learning: when reviewing hooks that use environment variables like next_public_dashboard_thirdweb_client_id fo...
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts:41-44
Timestamp: 2025-05-27T19:56:16.920Z
Learning: When reviewing hooks that use environment variables like NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID for API calls, MananTank prefers not to add explicit validation checks for these variables, trusting they will be set in the deployment environment.
Applied to files:
apps/portal/src/lib/getBaseUrl.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : import ui primitives from `@/components/u...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsxapps/playground-web/src/components/pay/direct-payment.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `navlink` for internal navigation wit...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : prefer composable primitives over custom markup: `button`, `in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsxapps/playground-web/src/components/pay/direct-payment.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : always import from the central ui library under `@/components/...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : server components (node edge): start file...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{tsx} : expose `classname` prop on root element of c...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/components/pay/direct-payment.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : reuse core ui primitives; avoid re-implementing buttons, cards...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/components/ui/sidebar.tsxapps/playground-web/src/components/pay/direct-payment.tsx
📚 Learning: in the thirdweb-dev/js repository, lucide-react icons must be imported with the "icon" suffix (e.g.,...
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/portal/src/app/page.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use `navlink` (`@/components/ui/navlink`) for internal navigat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : client components (browser): begin files ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : icons come from `lucide-react` or the project-specific `…/icon...
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/portal/src/app/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: configuration files that import and reference react components (like icon components from lucide-rea...
Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.722Z
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/portal/src/app/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : interactive ui that relies on hooks (`usestate`, `useeffect`, ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsxapps/playground-web/src/components/pay/direct-payment.tsx
📚 Learning: the modulecarduiprops interface already includes a client prop of type thirdwebclient, so when compo...
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
apps/portal/src/app/page.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use design system tokens (e.g., `bg-card`...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Applied to files:
apps/portal/src/app/page.tsx
📚 Learning: applies to dashboard/**/*client.tsx : anything that consumes hooks from `@tanstack/react-query` or t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : for notices & skeletons rely on `announcementbanner`, `generic...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/portal/src/app/page.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{ts,tsx} : redirect logic using `redirect()` from `next/navigation`....
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Redirect logic using `redirect()` from `next/navigation`.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/layout.tsx : building layout shells (`layout.tsx`) and top-level pages that ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : pages requiring fast transitions where data is prefetched on t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/feature/components/** : group feature-specific compone...
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: in the thirdweb dashboard codebase, when `redirecttocontractlandingpage()` is called, an explicit re...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx:43-49
Timestamp: 2025-05-26T16:31:02.480Z
Learning: In the thirdweb dashboard codebase, when `redirectToContractLandingPage()` is called, an explicit return statement is not required afterward because the function internally calls Next.js's `redirect()` which throws an error to halt execution.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: in the thirdweb dashboard next.js app, when using loginredirect() in server components, ensure to ad...
Learnt from: MananTank
PR: thirdweb-dev/js#7285
File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx:57-57
Timestamp: 2025-06-05T13:59:49.886Z
Learning: In the thirdweb dashboard Next.js app, when using loginRedirect() in server components, ensure to add a return statement after the redirect call to prevent further code execution and potential security issues.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: in the dashboard codebase, the `loginredirect` function performs an actual page redirect that automa...
Learnt from: MananTank
PR: thirdweb-dev/js#7228
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/settings/page.tsx:23-25
Timestamp: 2025-05-30T18:14:57.074Z
Learning: In the dashboard codebase, the `loginRedirect` function performs an actual page redirect that automatically stops execution, similar to Next.js `redirect()`. No return statement is needed after calling `loginRedirect` as it handles flow control internally.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : layouts should reuse `sidebarlayout` / `fullwidthsidebarlayout...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Applied to files:
apps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `cn()` from `@/lib/utils` for conditi...
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 `cn()` from `@/lib/utils` for conditional class logic
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/components/**/index.ts : group related components in their own folder and ex...
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/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/api/**/*.{ts,tsx} : co-locate data helpers under `@/api/**` and mark them wi...
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} : Co-locate data helpers under `@/api/**` and mark them with "server-only".
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/components/*.client.tsx : client components must start with `'use client';` ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{ts,tsx} : export default async functions without `'use client';` – they r...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Export default async functions without `'use client';` – they run on the Node edge.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : prefer api routes or server actions to keep tokens secret; the...
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/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : wrap client-side data fetching calls in r...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
Applied to files:
apps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/pay/direct-payment.tsx
📚 Learning: applies to dashboard/**/*client.tsx : use react query (`@tanstack/react-query`) for all client data ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`@tanstack/react-query`) for all client data fetching.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : components that listen to user events, animations or live upda...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Components that listen to user events, animations or live updates.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to src/exports/react.native.ts : react native specific exports are in `src/exports/react.nat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsxapps/playground-web/src/components/pay/direct-payment.tsx
📚 Learning: applies to dashboard/**/*.{ts,tsx} : reading cookies/headers with `next/headers` (`getauthtoken()`, ...
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} : Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : always call `getauthtoken()` to retrieve ...
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} : Always call `getAuthToken()` to retrieve JWT from cookies on server side
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : create light wrappers (e.g. `fetchjson`) that automatically at...
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 : Create light wrappers (e.g. `fetchJson`) that automatically attach the JWT from cookies/session when calling internal API routes.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : configure `staletime`/`cachetime` in reac...
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} : Configure `staleTime`/`cacheTime` in React Query based on freshness (default ≥ 60s)
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : when you need access to browser apis (localstorage, window, in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/api/**/*.{ts,tsx} : always call `getauthtoken()` to get the jwt from cookies...
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} : Always call `getAuthToken()` to get the JWT from cookies.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : configure `staletime` / `cachetime` according to freshness req...
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 : Configure `staleTime` / `cacheTime` according to freshness requirements.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: next.js link component supports external urls without throwing errors. when used with absolute urls ...
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/components/ui/sidebar.tsx
📚 Learning: next.js link component fully supports both internal and external urls and works appropriately with a...
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/ui/sidebar.tsx
📚 Learning: the `projectmeta` prop is not required for the server-rendered `contractdirectlistingspage` componen...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/shared-direct-listings-page.tsx:47-52
Timestamp: 2025-05-26T16:29:54.317Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractDirectListingsPage` component in the direct listings shared page, following the same pattern as other server components in the codebase where `projectMeta` is only needed for client components.
Applied to files:
apps/playground-web/src/components/pay/direct-payment.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use tailwind css only – no inline styles ...
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 Tailwind CSS only – no inline styles or CSS modules
Applied to files:
apps/playground-web/src/components/pay/direct-payment.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : keep components pure; fetch data outside (server component or ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Keep components pure; fetch data outside (server component or hook) and pass it down via props.
Applied to files:
apps/playground-web/src/components/pay/direct-payment.tsx
🪛 Gitleaks (8.27.2)
apps/playground-web/src/components/pay/direct-payment.tsx
18-18: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ 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: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/portal/src/lib/getBaseUrl.ts (1)
2-2: Good fix! Corrected environment variable casing for proper Vercel detection.The change from
process.env.verceltoprocess.env.VERCELfixes a critical bug. Vercel sets theVERCELenvironment variable (uppercase) automatically during deployment, so the lowercase version would never be truthy, causing incorrect environment detection and potentially always returning "development" mode.apps/portal/src/app/page.tsx (3)
1-1: LGTM! Icon import follows naming convention.The
ArrowUpRightIconimport correctly uses the "Icon" suffix as required by the project's linting rules for lucide-react icons.
6-6: LGTM! Proper UI component import.The Button import follows the established pattern of importing from the shared UI library at
@/components/ui/*.
48-60: LGTM! Well-implemented playground button.The new playground button implementation follows best practices:
- Uses the shared
Buttoncomponent with proper variant and styling- Implements
asChildpattern correctly for the Link wrapper- Includes appropriate icon with consistent sizing
- Proper gap spacing between buttons
- External link opens in same tab (appropriate for playground navigation)
The addition aligns well with the PR's objective to improve navigation between portal and playground apps.
apps/playground-web/src/app/navLinks.ts (1)
34-238: Well-structured navigation configurationThe navigation structure is well-organized with consistent use of icons, proper grouping, and dynamic generation of insight links. The use of the
ShadcnSidebarLinktype ensures type safety.
MananTank
force-pushed
the
07-31-playground_revamp
branch
from
4418ad8 to
1f85d95
Compare
MananTank
force-pushed
the
07-31-playground_revamp
branch
from
69ce513 to
215433a
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (4)
apps/playground-web/src/app/navLinks.ts (1)
1-36: LGTM - Client directive and imports are correctly implementedThe "use client" directive is appropriately used here since the file references React icon components that need client-side execution. The imports are well-organized and follow established patterns.
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx (2)
182-184: Fix partial path matching issueThe current
pathname.startsWith(link.href)check can incorrectly match partial paths. This issue was previously identified and needs to be addressed.
209-211: Fix duplicate partial path matching issueThis hook has the same partial path matching issue as identified in past reviews. The fix should be applied consistently across both hooks.
apps/playground-web/src/components/ui/sidebar.tsx (1)
93-94: Address cookie handling technical debtThe direct
document.cookiemanipulation with the FIXME comment represents technical debt that was previously identified. Consider using a proper cookie handling library or server-side cookie management.
🧹 Nitpick comments (2)
apps/playground-web/src/app/wallets/sign-in/button/page.tsx (2)
1-2: Add server-only import for server component.According to the coding guidelines, server components should start with
import "server-only";to ensure they don't accidentally run on the client.+import "server-only"; import { createMetadata } from "@/lib/metadata"; import { ConnectButtonPage } from "./connect-button-page";
19-31: Add explicit return type annotation.The component logic and Next.js app router patterns are correctly implemented. The defensive tab parameter normalization is good practice.
Consider adding an explicit return type annotation per TypeScript guidelines:
-export default async function Page(props: { +export default async function Page(props: { searchParams: Promise<{ tab: string | undefined | string[] }>; -}) { +}): Promise<JSX.Element> {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
apps/playground-web/public/og/background-1.jpgis excluded by!**/*.jpgapps/playground-web/public/og/icons/contract.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/insight.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/payments.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/transactions.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/wallets.svgis excluded by!**/*.svgapps/playground-web/src/app/api/og/inter/700.ttfis excluded by!**/*.ttfapps/playground-web/src/app/opengraph-image.jpgis excluded by!**/*.jpgapps/playground-web/src/app/payments/opengraph-image.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (81)
apps/playground-web/next.config.mjs(1 hunks)apps/playground-web/package.json(1 hunks)apps/playground-web/src/app/AppSidebar.tsx(1 hunks)apps/playground-web/src/app/MobileHeader.tsx(0 hunks)apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/native-aa/page.tsx(1 hunks)apps/playground-web/src/app/api/og/route.tsx(1 hunks)apps/playground-web/src/app/contracts/events/page.tsx(1 hunks)apps/playground-web/src/app/contracts/extensions/page.tsx(1 hunks)apps/playground-web/src/app/contracts/read/page.tsx(1 hunks)apps/playground-web/src/app/contracts/write/page.tsx(1 hunks)apps/playground-web/src/app/globals.css(2 hunks)apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx(1 hunks)apps/playground-web/src/app/insight/layout.tsx(1 hunks)apps/playground-web/src/app/layout.tsx(2 hunks)apps/playground-web/src/app/login/_sdk_.ts(0 hunks)apps/playground-web/src/app/login/layout.tsx(0 hunks)apps/playground-web/src/app/login/page.tsx(0 hunks)apps/playground-web/src/app/navLinks.ts(1 hunks)apps/playground-web/src/app/otherLinks.ts(0 hunks)apps/playground-web/src/app/page.tsx(1 hunks)apps/playground-web/src/app/payments/backend/layout.tsx(1 hunks)apps/playground-web/src/app/payments/backend/page.tsx(3 hunks)apps/playground-web/src/app/payments/backend/reference/page.tsx(1 hunks)apps/playground-web/src/app/payments/commerce/page.tsx(1 hunks)apps/playground-web/src/app/payments/fund-wallet/page.tsx(1 hunks)apps/playground-web/src/app/payments/transactions/page.tsx(1 hunks)apps/playground-web/src/app/payments/ui-components/page.tsx(1 hunks)apps/playground-web/src/app/token-selector-demo/page.tsx(0 hunks)apps/playground-web/src/app/tokens/nft-components/page.tsx(2 hunks)apps/playground-web/src/app/tokens/token-components/page.tsx(1 hunks)apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/mint-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/webhooks/page.tsx(1 hunks)apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx(0 hunks)apps/playground-web/src/app/wallets/auth/page.tsx(1 hunks)apps/playground-web/src/app/wallets/blockchain-api/page.tsx(0 hunks)apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/account-components/page.tsx(2 hunks)apps/playground-web/src/app/wallets/headless/chain-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx(0 hunks)apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/button/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/embed/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/headless/page.tsx(1 hunks)apps/playground-web/src/app/wallets/social/page.tsx(1 hunks)apps/playground-web/src/components/ThemeToggle.tsx(1 hunks)apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx(0 hunks)apps/playground-web/src/components/blocks/APIHeader.tsx(3 hunks)apps/playground-web/src/components/blocks/NetworkSelectors.tsx(1 hunks)apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx(1 hunks)apps/playground-web/src/components/blocks/multi-select.tsx(1 hunks)apps/playground-web/src/components/code/RenderCode.tsx(1 hunks)apps/playground-web/src/components/code/code-example.tsx(2 hunks)apps/playground-web/src/components/headless-ui/wallet-previews.tsx(0 hunks)apps/playground-web/src/components/pay/direct-payment.tsx(1 hunks)apps/playground-web/src/components/ui/NavLink.tsx(1 hunks)apps/playground-web/src/components/ui/TokenSelector.tsx(1 hunks)apps/playground-web/src/components/ui/collapsible.tsx(1 hunks)apps/playground-web/src/components/ui/select.tsx(2 hunks)apps/playground-web/src/components/ui/sheet.tsx(1 hunks)apps/playground-web/src/components/ui/sidebar.tsx(1 hunks)apps/playground-web/src/components/ui/skeleton.tsx(1 hunks)apps/playground-web/src/hooks/full-path.ts(1 hunks)apps/playground-web/src/hooks/use-mobile.tsx(1 hunks)apps/playground-web/src/icons/ContractIcon.tsx(1 hunks)apps/playground-web/src/icons/InsightIcon.tsx(1 hunks)apps/playground-web/src/icons/PayIcon.tsx(1 hunks)apps/playground-web/src/icons/SmartAccountIcon.tsx(1 hunks)apps/playground-web/src/icons/ThirdwebMiniLogo.tsx(1 hunks)apps/playground-web/src/lib/env.ts(1 hunks)apps/playground-web/src/lib/metadata.ts(1 hunks)apps/playground-web/tailwind.config.ts(1 hunks)apps/portal/src/app/page.tsx(2 hunks)apps/portal/src/lib/getBaseUrl.ts(1 hunks)
💤 Files with no reviewable changes (11)
- apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx
- apps/playground-web/src/app/otherLinks.ts
- apps/playground-web/src/components/headless-ui/wallet-previews.tsx
- apps/playground-web/src/app/login/layout.tsx
- apps/playground-web/src/app/login/page.tsx
- apps/playground-web/src/app/token-selector-demo/page.tsx
- apps/playground-web/src/app/MobileHeader.tsx
- apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx
- apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx
- apps/playground-web/src/app/wallets/blockchain-api/page.tsx
- apps/playground-web/src/app/login/sdk.ts
✅ Files skipped from review due to trivial changes (7)
- apps/playground-web/src/components/blocks/multi-select.tsx
- apps/portal/src/lib/getBaseUrl.ts
- apps/playground-web/src/icons/InsightIcon.tsx
- apps/playground-web/src/app/contracts/read/page.tsx
- apps/playground-web/src/components/ui/skeleton.tsx
- apps/playground-web/src/app/api/og/route.tsx
- apps/playground-web/src/components/code/code-example.tsx
🚧 Files skipped from review as they are similar to previous changes (59)
- apps/playground-web/src/app/payments/backend/reference/page.tsx
- apps/playground-web/src/components/pay/direct-payment.tsx
- apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx
- apps/playground-web/package.json
- apps/playground-web/src/components/code/RenderCode.tsx
- apps/playground-web/src/components/blocks/NetworkSelectors.tsx
- apps/playground-web/src/hooks/full-path.ts
- apps/playground-web/src/hooks/use-mobile.tsx
- apps/playground-web/src/icons/SmartAccountIcon.tsx
- apps/playground-web/src/app/tokens/token-components/page.tsx
- apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx
- apps/playground-web/src/components/ui/select.tsx
- apps/playground-web/tailwind.config.ts
- apps/playground-web/src/app/AppSidebar.tsx
- apps/playground-web/src/components/ui/TokenSelector.tsx
- apps/playground-web/src/app/account-abstraction/native-aa/page.tsx
- apps/playground-web/src/app/wallets/in-app-wallet/page.tsx
- apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
- apps/playground-web/src/icons/PayIcon.tsx
- apps/playground-web/src/icons/ThirdwebMiniLogo.tsx
- apps/playground-web/src/app/insight/layout.tsx
- apps/playground-web/src/components/ui/NavLink.tsx
- apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx
- apps/playground-web/src/icons/ContractIcon.tsx
- apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx
- apps/playground-web/src/components/ui/sheet.tsx
- apps/playground-web/src/app/payments/fund-wallet/page.tsx
- apps/playground-web/src/app/layout.tsx
- apps/portal/src/app/page.tsx
- apps/playground-web/src/lib/metadata.ts
- apps/playground-web/src/app/wallets/headless/chain-components/page.tsx
- apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx
- apps/playground-web/next.config.mjs
- apps/playground-web/src/app/tokens/nft-components/page.tsx
- apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx
- apps/playground-web/src/app/globals.css
- apps/playground-web/src/lib/env.ts
- apps/playground-web/src/app/transactions/webhooks/page.tsx
- apps/playground-web/src/app/contracts/events/page.tsx
- apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
- apps/playground-web/src/components/ThemeToggle.tsx
- apps/playground-web/src/app/payments/backend/page.tsx
- apps/playground-web/src/components/ui/collapsible.tsx
- apps/playground-web/src/components/blocks/APIHeader.tsx
- apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx
- apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx
- apps/playground-web/src/app/payments/ui-components/page.tsx
- apps/playground-web/src/app/payments/backend/layout.tsx
- apps/playground-web/src/app/transactions/mint-tokens/page.tsx
- apps/playground-web/src/app/contracts/write/page.tsx
- apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx
- apps/playground-web/src/app/payments/transactions/page.tsx
- apps/playground-web/src/app/wallets/sign-in/headless/page.tsx
- apps/playground-web/src/app/wallets/headless/account-components/page.tsx
- apps/playground-web/src/app/payments/commerce/page.tsx
- apps/playground-web/src/app/page.tsx
- apps/playground-web/src/app/wallets/social/page.tsx
- apps/playground-web/src/app/contracts/extensions/page.tsx
- apps/playground-web/src/app/wallets/auth/page.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/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.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/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.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/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
🧠 Learnings (43)
📓 Common learnings
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} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
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: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use Tailwind CSS only – no inline styles or CSS modules
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
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`).
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.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx:29-39
Timestamp: 2025-05-27T20:10:47.245Z
Learning: MananTank prefers adding error handling (try-catch) directly inside utility functions like `shouldRenderNewPublicPage` rather than requiring callers to wrap the function calls in try-catch blocks. This centralizes error handling and benefits all callers automatically.
📚 Learning: applies to dashboard/**/*client.tsx : interactive ui that relies on hooks (`usestate`, `useeffect`, ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : import ui primitives from `@/components/u...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : client components (browser): begin files ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : server components (node edge): start file...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : pages requiring fast transitions where data is prefetched on t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : prefer composable primitives over custom markup: `button`, `in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : anything that consumes hooks from `@tanstack/react-query` or t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `navlink` for internal navigation wit...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{ts,tsx} : export default async functions without `'use client';` – they r...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Export default async functions without `'use client';` – they run on the Node edge.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to src/exports/react.native.ts : react native specific exports are in `src/exports/react.nat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: the `projectmeta` prop is not required for the server-rendered `contracttokenspage` component in the...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsx
📚 Learning: applies to dashboard/**/layout.tsx : building layout shells (`layout.tsx`) and top-level pages that ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: the modulecarduiprops interface already includes a client prop of type thirdwebclient, so when compo...
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsx
📚 Learning: the `fetchdashboardcontractmetadata` function from "@3rdweb-sdk/react/hooks/usedashboardcontractmeta...
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsx
📚 Learning: the `projectmeta` prop is not required for the server-rendered `contractdirectlistingspage` componen...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/shared-direct-listings-page.tsx:47-52
Timestamp: 2025-05-26T16:29:54.317Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractDirectListingsPage` component in the direct listings shared page, following the same pattern as other server components in the codebase where `projectMeta` is only needed for client components.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : for notices & skeletons rely on `announcementbanner`, `generic...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : when you need access to browser apis (localstorage, window, in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/page.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : layouts should reuse `sidebarlayout` / `fullwidthsidebarlayout...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Applied to files:
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use `navlink` (`@/components/ui/navlink`) for internal navigat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/components/**/index.ts : group related components in their own folder and ex...
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/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: next.js link component supports external urls without throwing errors. when used with absolute urls ...
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/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: next.js link component fully supports both internal and external urls and works appropriately with a...
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/full-width-sidebar-layout.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : prefer api routes or server actions to keep tokens secret; the...
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/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{ts,tsx} : redirect logic using `redirect()` from `next/navigation`....
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Redirect logic using `redirect()` from `next/navigation`.
Applied to files:
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: in next.js server components, the `params` object can sometimes be a promise that needs to be awaite...
Learnt from: jnsdls
PR: thirdweb-dev/js#6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `cn()` from `@/lib/utils` for conditi...
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 `cn()` from `@/lib/utils` for conditional class logic
Applied to files:
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : reuse core ui primitives; avoid re-implementing buttons, cards...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, ...
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/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use design system tokens (e.g., `bg-card`...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/components/*.client.tsx : client components must start with `'use client';` ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: configuration files that import and reference react components (like icon components from lucide-rea...
Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : wrap client-side data fetching calls in r...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : use react query (`@tanstack/react-query`) for all client data ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`@tanstack/react-query`) for all client data fetching.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : components that listen to user events, animations or live upda...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Components that listen to user events, animations or live updates.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : icons come from `lucide-react` or the project-specific `…/icon...
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/navLinks.ts
📚 Learning: applies to dashboard/**/*.{ts,tsx} : reading cookies/headers with `next/headers` (`getauthtoken()`, ...
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} : Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : always call `getauthtoken()` to retrieve ...
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} : Always call `getAuthToken()` to retrieve JWT from cookies on server side
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : create light wrappers (e.g. `fetchjson`) that automatically at...
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 : Create light wrappers (e.g. `fetchJson`) that automatically attach the JWT from cookies/session when calling internal API routes.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : configure `staletime`/`cachetime` in reac...
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} : Configure `staleTime`/`cacheTime` in React Query based on freshness (default ≥ 60s)
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/api/**/*.{ts,tsx} : always call `getauthtoken()` to get the jwt from cookies...
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} : Always call `getAuthToken()` to get the JWT from cookies.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : configure `staletime` / `cachetime` according to freshness req...
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 : Configure `staleTime` / `cacheTime` according to freshness requirements.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : always import from the central ui library under `@/components/...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
🧬 Code Graph Analysis (2)
apps/playground-web/src/app/navLinks.ts (2)
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx (1)
ShadcnSidebarLink(43-58)apps/playground-web/src/app/insight/insightBlueprints.ts (1)
insightBlueprints(4-239)
apps/playground-web/src/components/ui/sidebar.tsx (5)
apps/playground-web/src/hooks/use-mobile.tsx (1)
useIsMobile(5-21)apps/playground-web/src/lib/utils.ts (1)
cn(5-7)apps/playground-web/src/components/ui/sheet.tsx (5)
Sheet(133-133)SheetContent(138-138)SheetHeader(139-139)SheetTitle(141-141)SheetDescription(142-142)apps/portal/src/components/Document/index.ts (1)
Separator(29-29)apps/playground-web/src/components/ui/skeleton.tsx (1)
Skeleton(50-50)
⏰ 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: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (20)
apps/playground-web/src/app/wallets/sign-in/button/page.tsx (2)
4-8: LGTM! Well-structured metadata constants.The separation of
descriptionandogDescriptionallows for optimized messaging for different contexts (page content vs social sharing), which is a good SEO practice.
10-17: LGTM! Follows the new standardized metadata pattern.The use of
createMetadatacentralizes metadata handling and ensures consistency across the application. The image configuration with icon "wallets" aligns with the broader refactoring effort.apps/playground-web/src/app/navLinks.ts (4)
38-104: Well-structured wallets navigationThe wallets section is properly structured with appropriate icons and nested submenus. The use of
exactMatch: truefor the in-app-wallet link is a good practice to ensure precise matching.
106-239: Consistent and well-organized navigation sectionsAll navigation sections (contracts, tokens, accountAbstractions, payments, transactions) follow a consistent structure with appropriate icons and logical grouping. The implementation is clean and maintainable.
241-270: Excellent dynamic link generationThe dynamic generation of insight links from
insightBlueprintsis well-implemented. The href format with query parameters and the use ofexactMatch: trueensures precise routing. Combining static overview link with dynamic blueprint links provides good user experience.
272-280: Clean final export with logical orderingThe export structure includes all navigation sections in a logical order, prioritizing core functionality like wallets and transactions. This provides an intuitive navigation hierarchy.
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx (5)
1-58: Excellent TypeScript design with comprehensive importsThe
ShadcnSidebarLinkdiscriminated union type is well-designed, providing flexibility for different navigation structures (base links, groups, separators, submenus). The imports are comprehensive and appropriate for the component's functionality.
60-138: Well-architected responsive layout componentThe
FullWidthSidebarLayoutcomponent is well-structured with clear separation of concerns. The responsive design handles mobile and desktop scenarios appropriately, and the integration with the sidebar context provides good state management.
226-251: Clean component implementation with proper Suspense usageThe
RenderSidebarGroupcomponents follow React best practices with Suspense wrappers and proper semantic HTML structure. The implementation is clean and maintainable.
253-361: Complex but well-implemented collapsible submenu componentThe
RenderSidebarSubmenucomponents handle complex collapsible behavior with appropriate state management, defensive null checks, and proper accessibility considerations. The recursive rendering of nested items is well-implemented.
363-433: Comprehensive main rendering component with proper type handlingThe
RenderSidebarMenucomponent correctly handles all types in theShadcnSidebarLinkunion with appropriate null checks and proper delegation to specialized renderers. The implementation is robust and maintainable.apps/playground-web/src/components/ui/sidebar.tsx (9)
166-271: Sophisticated sidebar component with excellent responsive designThe main
Sidebarcomponent handles multiple variants and collapsible modes elegantly. The separation of mobile/desktop rendering and use of CSS custom properties for dynamic styling demonstrates excellent architecture.
273-326: Well-implemented trigger and rail components with good accessibilityBoth
SidebarTriggerandSidebarRailcomponents are properly implemented with appropriate accessibility attributes and sophisticated positioning logic for different sidebar configurations.
328-425: Consistent structural components with proper patternsThe structural components (
SidebarInset,SidebarInput,SidebarHeader, etc.) follow consistent patterns with properforwardRefusage, semantic HTML, and well-chosen Tailwind classes.
427-497: Well-designed group components with excellent composabilityThe group components use the Slot pattern effectively for composability and include thoughtful UX improvements like expanded mobile hit areas and proper accessibility considerations.
499-524: Clean foundational menu components with proper semanticsThe
SidebarMenuandSidebarMenuItemcomponents provide a solid foundation with proper semantic HTML structure and clean implementation.
525-604: Sophisticated menu button with excellent UX patternsThe
SidebarMenuButtoncomponent is well-architected with CVA variants, conditional tooltip functionality, and smart integration with sidebar state. The tooltip only showing when collapsed is an excellent UX pattern.
606-656: Detail-oriented components with sophisticated positioningThe
SidebarMenuActionandSidebarMenuBadgecomponents demonstrate excellent attention to detail with size-aware positioning, mobile UX improvements, and well-implemented interactive states.
658-694: Thoughtful skeleton component with realistic loading UXThe
SidebarMenuSkeletoncomponent provides excellent loading UX with randomized widths and optional icon support. The memoization and CSS custom properties usage is well-implemented.
696-774: Complete submenu system with comprehensive exportsThe submenu components provide proper hierarchical structure with good visual indicators. The comprehensive exports make all components available for use throughout the application.
MananTank
force-pushed
the
07-31-playground_revamp
branch
from
215433a to
280d6fe
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/playground-web/src/app/page.tsx (2)
273-294: Well-implemented FeatureCard component with good accessibility!The component uses proper hover states, design system tokens, and the absolute-positioned link pattern for full card clickability. Consider addressing the TODO comment about making
hrefrequired for better type safety.
273-294: Well-designed helper components!The
FeatureCardcomponent uses an effective click-target overlay pattern for accessibility, and both components are properly typed and reusable.Consider addressing the TODO comment about making
hrefrequired to improve type safety.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
apps/playground-web/public/og/background-1.jpgis excluded by!**/*.jpgapps/playground-web/public/og/icons/contract.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/insight.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/payments.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/transactions.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/wallets.svgis excluded by!**/*.svgapps/playground-web/src/app/api/og/inter/700.ttfis excluded by!**/*.ttfapps/playground-web/src/app/opengraph-image.jpgis excluded by!**/*.jpgapps/playground-web/src/app/payments/opengraph-image.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (88)
apps/dashboard/src/@/icons/TokenIcon.tsx(1 hunks)apps/dashboard/src/@/icons/WalletProductIcon.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/TeamSidebarLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(3 hunks)apps/playground-web/next.config.mjs(1 hunks)apps/playground-web/package.json(1 hunks)apps/playground-web/src/app/AppSidebar.tsx(1 hunks)apps/playground-web/src/app/MobileHeader.tsx(0 hunks)apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/native-aa/page.tsx(1 hunks)apps/playground-web/src/app/api/og/route.tsx(1 hunks)apps/playground-web/src/app/contracts/events/page.tsx(1 hunks)apps/playground-web/src/app/contracts/extensions/page.tsx(1 hunks)apps/playground-web/src/app/contracts/read/page.tsx(1 hunks)apps/playground-web/src/app/contracts/write/page.tsx(1 hunks)apps/playground-web/src/app/globals.css(2 hunks)apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx(1 hunks)apps/playground-web/src/app/insight/layout.tsx(1 hunks)apps/playground-web/src/app/layout.tsx(2 hunks)apps/playground-web/src/app/login/_sdk_.ts(0 hunks)apps/playground-web/src/app/login/layout.tsx(0 hunks)apps/playground-web/src/app/login/page.tsx(0 hunks)apps/playground-web/src/app/navLinks.ts(1 hunks)apps/playground-web/src/app/otherLinks.ts(0 hunks)apps/playground-web/src/app/page.tsx(1 hunks)apps/playground-web/src/app/payments/backend/layout.tsx(1 hunks)apps/playground-web/src/app/payments/backend/page.tsx(3 hunks)apps/playground-web/src/app/payments/backend/reference/page.tsx(1 hunks)apps/playground-web/src/app/payments/commerce/page.tsx(1 hunks)apps/playground-web/src/app/payments/fund-wallet/page.tsx(1 hunks)apps/playground-web/src/app/payments/transactions/page.tsx(1 hunks)apps/playground-web/src/app/payments/ui-components/page.tsx(1 hunks)apps/playground-web/src/app/token-selector-demo/page.tsx(0 hunks)apps/playground-web/src/app/tokens/nft-components/page.tsx(2 hunks)apps/playground-web/src/app/tokens/token-components/page.tsx(1 hunks)apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/mint-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/webhooks/page.tsx(1 hunks)apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx(0 hunks)apps/playground-web/src/app/wallets/auth/page.tsx(1 hunks)apps/playground-web/src/app/wallets/blockchain-api/page.tsx(0 hunks)apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/account-components/page.tsx(2 hunks)apps/playground-web/src/app/wallets/headless/chain-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx(0 hunks)apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/button/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/embed/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/headless/page.tsx(1 hunks)apps/playground-web/src/app/wallets/social/page.tsx(1 hunks)apps/playground-web/src/components/ThemeToggle.tsx(1 hunks)apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx(0 hunks)apps/playground-web/src/components/blocks/APIHeader.tsx(3 hunks)apps/playground-web/src/components/blocks/NetworkSelectors.tsx(1 hunks)apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx(1 hunks)apps/playground-web/src/components/blocks/multi-select.tsx(1 hunks)apps/playground-web/src/components/code/RenderCode.tsx(1 hunks)apps/playground-web/src/components/code/code-example.tsx(2 hunks)apps/playground-web/src/components/headless-ui/wallet-previews.tsx(0 hunks)apps/playground-web/src/components/pay/direct-payment.tsx(1 hunks)apps/playground-web/src/components/ui/NavLink.tsx(1 hunks)apps/playground-web/src/components/ui/TokenSelector.tsx(1 hunks)apps/playground-web/src/components/ui/collapsible.tsx(1 hunks)apps/playground-web/src/components/ui/select.tsx(2 hunks)apps/playground-web/src/components/ui/sheet.tsx(1 hunks)apps/playground-web/src/components/ui/sidebar.tsx(1 hunks)apps/playground-web/src/components/ui/skeleton.tsx(1 hunks)apps/playground-web/src/hooks/full-path.ts(1 hunks)apps/playground-web/src/hooks/use-mobile.tsx(1 hunks)apps/playground-web/src/icons/ContractIcon.tsx(1 hunks)apps/playground-web/src/icons/DashboardIcon.tsx(1 hunks)apps/playground-web/src/icons/InsightIcon.tsx(1 hunks)apps/playground-web/src/icons/PayIcon.tsx(1 hunks)apps/playground-web/src/icons/SmartAccountIcon.tsx(1 hunks)apps/playground-web/src/icons/ThirdwebMiniLogo.tsx(1 hunks)apps/playground-web/src/icons/TokenIcon.tsx(1 hunks)apps/playground-web/src/icons/WalletProductIcon.tsx(1 hunks)apps/playground-web/src/lib/env.ts(1 hunks)apps/playground-web/src/lib/metadata.ts(1 hunks)apps/playground-web/tailwind.config.ts(1 hunks)apps/portal/src/app/page.tsx(3 hunks)apps/portal/src/lib/getBaseUrl.ts(1 hunks)
💤 Files with no reviewable changes (11)
- apps/playground-web/src/components/headless-ui/wallet-previews.tsx
- apps/playground-web/src/app/otherLinks.ts
- apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx
- apps/playground-web/src/app/login/layout.tsx
- apps/playground-web/src/app/login/page.tsx
- apps/playground-web/src/app/token-selector-demo/page.tsx
- apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx
- apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx
- apps/playground-web/src/app/MobileHeader.tsx
- apps/playground-web/src/app/login/sdk.ts
- apps/playground-web/src/app/wallets/blockchain-api/page.tsx
✅ Files skipped from review due to trivial changes (14)
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/TeamSidebarLayout.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
- apps/dashboard/src/@/icons/TokenIcon.tsx
- apps/playground-web/src/components/blocks/multi-select.tsx
- apps/playground-web/src/icons/InsightIcon.tsx
- apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx
- apps/playground-web/src/icons/WalletProductIcon.tsx
- apps/portal/src/lib/getBaseUrl.ts
- apps/playground-web/src/components/code/code-example.tsx
- apps/dashboard/src/@/icons/WalletProductIcon.tsx
- apps/playground-web/src/icons/DashboardIcon.tsx
- apps/playground-web/src/app/contracts/read/page.tsx
- apps/playground-web/src/components/ui/skeleton.tsx
- apps/playground-web/src/icons/TokenIcon.tsx
🚧 Files skipped from review as they are similar to previous changes (59)
- apps/playground-web/src/components/pay/direct-payment.tsx
- apps/playground-web/src/components/ui/TokenSelector.tsx
- apps/playground-web/src/components/code/RenderCode.tsx
- apps/playground-web/src/components/blocks/NetworkSelectors.tsx
- apps/playground-web/src/app/payments/backend/reference/page.tsx
- apps/playground-web/package.json
- apps/playground-web/src/app/globals.css
- apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx
- apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
- apps/playground-web/src/hooks/use-mobile.tsx
- apps/playground-web/src/hooks/full-path.ts
- apps/playground-web/src/icons/SmartAccountIcon.tsx
- apps/playground-web/src/components/ui/collapsible.tsx
- apps/playground-web/src/components/ui/select.tsx
- apps/playground-web/src/icons/ContractIcon.tsx
- apps/portal/src/app/page.tsx
- apps/playground-web/src/app/insight/layout.tsx
- apps/playground-web/src/icons/PayIcon.tsx
- apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx
- apps/playground-web/src/app/account-abstraction/native-aa/page.tsx
- apps/playground-web/tailwind.config.ts
- apps/playground-web/src/app/tokens/token-components/page.tsx
- apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx
- apps/playground-web/src/app/api/og/route.tsx
- apps/playground-web/src/app/transactions/webhooks/page.tsx
- apps/playground-web/src/components/ThemeToggle.tsx
- apps/playground-web/src/app/payments/ui-components/page.tsx
- apps/playground-web/src/app/contracts/events/page.tsx
- apps/playground-web/next.config.mjs
- apps/playground-web/src/app/wallets/in-app-wallet/page.tsx
- apps/playground-web/src/app/contracts/write/page.tsx
- apps/playground-web/src/app/layout.tsx
- apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
- apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx
- apps/playground-web/src/components/ui/NavLink.tsx
- apps/playground-web/src/app/wallets/headless/chain-components/page.tsx
- apps/playground-web/src/lib/metadata.ts
- apps/playground-web/src/app/payments/backend/page.tsx
- apps/playground-web/src/app/payments/backend/layout.tsx
- apps/playground-web/src/app/wallets/auth/page.tsx
- apps/playground-web/src/app/payments/fund-wallet/page.tsx
- apps/playground-web/src/app/payments/transactions/page.tsx
- apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx
- apps/playground-web/src/app/transactions/mint-tokens/page.tsx
- apps/playground-web/src/components/blocks/APIHeader.tsx
- apps/playground-web/src/app/wallets/headless/account-components/page.tsx
- apps/playground-web/src/components/ui/sheet.tsx
- apps/playground-web/src/app/contracts/extensions/page.tsx
- apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx
- apps/playground-web/src/app/payments/commerce/page.tsx
- apps/playground-web/src/app/wallets/sign-in/headless/page.tsx
- apps/playground-web/src/icons/ThirdwebMiniLogo.tsx
- apps/playground-web/src/app/wallets/sign-in/button/page.tsx
- apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx
- apps/playground-web/src/app/wallets/social/page.tsx
- apps/playground-web/src/app/tokens/nft-components/page.tsx
- apps/playground-web/src/lib/env.ts
- apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx
- apps/playground-web/src/components/blocks/full-width-sidebar-layout.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/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.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/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.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/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
🧠 Learnings (44)
📓 Common learnings
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} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
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
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: .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`).
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 Tailwind CSS only – no inline styles or CSS modules
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.
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: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx:29-39
Timestamp: 2025-05-27T20:10:47.245Z
Learning: MananTank prefers adding error handling (try-catch) directly inside utility functions like `shouldRenderNewPublicPage` rather than requiring callers to wrap the function calls in try-catch blocks. This centralizes error handling and benefits all callers automatically.
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : layouts should reuse `sidebarlayout` / `fullwidthsidebarlayout...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `navlink` for internal navigation wit...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/layout.tsx : building layout shells (`layout.tsx`) and top-level pages that ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : import ui primitives from `@/components/u...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : prefer composable primitives over custom markup: `button`, `in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{tsx} : expose `classname` prop on root element of c...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/playground-web/src/app/AppSidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use `navlink` (`@/components/ui/navlink`) for internal navigat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : for notices & skeletons rely on `announcementbanner`, `generic...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use design system tokens (e.g., `bg-card`...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/feature/components/** : group feature-specific compone...
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/AppSidebar.tsxapps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/*client.tsx : interactive ui that relies on hooks (`usestate`, `useeffect`, ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : accept a typed `props` object and export a named function (`ex...
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/playground-web/src/app/AppSidebar.tsx
📚 Learning: applies to dashboard/**/*.{ts,tsx} : redirect logic using `redirect()` from `next/navigation`....
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Redirect logic using `redirect()` from `next/navigation`.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/*client.tsx : pages requiring fast transitions where data is prefetched on t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: in the thirdweb dashboard codebase, when `redirecttocontractlandingpage()` is called, an explicit re...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx:43-49
Timestamp: 2025-05-26T16:31:02.480Z
Learning: In the thirdweb dashboard codebase, when `redirectToContractLandingPage()` is called, an explicit return statement is not required afterward because the function internally calls Next.js's `redirect()` which throws an error to halt execution.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `cn()` from `@/lib/utils` for conditi...
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 `cn()` from `@/lib/utils` for conditional class logic
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: in the logout flow in apps/dashboard/src/app/(app)/account/components/accountheader.tsx, when `dolog...
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/*client.tsx : prefer api routes or server actions to keep tokens secret; the...
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/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to src/exports/react.native.ts : react native specific exports are in `src/exports/react.nat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: the thirdwebbarchart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(side...
Learnt from: arcoraven
PR: thirdweb-dev/js#7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : reuse core ui primitives; avoid re-implementing buttons, cards...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: in the thirdweb dashboard codebase, redirecttocontractlandingpage function already handles execution...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/components/**/index.ts : group related components in their own folder and ex...
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/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : client components (browser): begin files ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/components/*.client.tsx : client components must start with `'use client';` ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: configuration files that import and reference react components (like icon components from lucide-rea...
Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{ts,tsx} : export default async functions without `'use client';` – they r...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Export default async functions without `'use client';` – they run on the Node edge.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : server components (node edge): start file...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : anything that consumes hooks from `@tanstack/react-query` or t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : wrap client-side data fetching calls in r...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : use react query (`@tanstack/react-query`) for all client data ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`@tanstack/react-query`) for all client data fetching.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : components that listen to user events, animations or live upda...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Components that listen to user events, animations or live updates.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : icons come from `lucide-react` or the project-specific `…/icon...
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/navLinks.ts
📚 Learning: applies to dashboard/**/*.{ts,tsx} : reading cookies/headers with `next/headers` (`getauthtoken()`, ...
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} : Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : always call `getauthtoken()` to retrieve ...
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} : Always call `getAuthToken()` to retrieve JWT from cookies on server side
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : create light wrappers (e.g. `fetchjson`) that automatically at...
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 : Create light wrappers (e.g. `fetchJson`) that automatically attach the JWT from cookies/session when calling internal API routes.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : configure `staletime`/`cachetime` in reac...
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} : Configure `staleTime`/`cacheTime` in React Query based on freshness (default ≥ 60s)
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : when you need access to browser apis (localstorage, window, in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/api/**/*.{ts,tsx} : always call `getauthtoken()` to get the jwt from cookies...
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} : Always call `getAuthToken()` to get the JWT from cookies.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : configure `staletime` / `cachetime` according to freshness req...
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 : Configure `staleTime` / `cacheTime` according to freshness requirements.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: next.js link component supports external urls without throwing errors. when used with absolute urls ...
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/components/ui/sidebar.tsx
📚 Learning: next.js link component fully supports both internal and external urls and works appropriately with a...
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/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : always import from the central ui library under `@/components/...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/playground-web/src/components/ui/sidebar.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). (6)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (19)
apps/playground-web/src/app/AppSidebar.tsx (2)
8-38: Excellent refactor to the new sidebar architecture!The transformation from a fixed sidebar component to a layout wrapper using the new modular sidebar system is well-implemented. The component properly leverages
SidebarProviderandFullWidthSidebarLayout, and the inline footer links effectively replace the deletedotherLinksmodule.
8-38: Excellent architectural refactor!The transformation from
AppSidebartoAppSidebarLayoutreflects a clean separation of concerns. The use ofSidebarProviderfor context management andFullWidthSidebarLayoutfor rendering logic creates a more modular and maintainable sidebar system. The inline footer links with proper icons and UTM tracking parameters are well-structured.apps/playground-web/src/app/page.tsx (5)
25-48: Well-structured hero section with proper design tokens!The hero section effectively introduces the playground with appropriate typography hierarchy and proper use of design system tokens like
bg-card,text-muted-foreground, etc.
265-271: Clean and reusable SectionTitle component!Simple, well-typed helper component that maintains consistency across sections.
28-48: Well-structured hero section!Clean implementation with proper semantic structure, good visual hierarchy, and consistent use of design system tokens. The responsive container and typography choices create an effective landing page header.
52-92: LGTM!Consistent section structure with appropriate icons, responsive grid layout, and clear feature descriptions. The links align well with the navigation structure.
254-256: Link consistency confirmed!The href
/account-abstraction/native-aacorrectly matches the navigation link structure defined innavLinks.tsline 177. The previous inconsistency has been resolved.apps/playground-web/src/app/navLinks.ts (4)
39-305: Excellent refactor to a strongly typed, hierarchical navigation system!The transformation from a flat link array to a structured, modular system with proper TypeScript typing is impressive. Key improvements include:
- Strong typing with
ShadcnSidebarLink- Logical organization into themed sections
- Consistent icon usage throughout
- Dynamic insight links generation from blueprints
- Proper use of separators and styling
- Support for nested submenus (e.g., Headless Components)
This provides a much more maintainable and scalable navigation structure.
1-37: Excellent typing and structural improvements!The transition to strongly typed
ShadcnSidebarLinkinterfaces with proper icon integration creates a much more maintainable navigation structure. The "use client" directive is correctly placed for component references.
39-271: Well-architected modular navigation structure!The separation into individual section constants (
wallets,contracts,tokens, etc.) with consistentsubMenuandlinksproperties creates excellent maintainability. The support for nested submenus and dynamic generation of insight links demonstrates thoughtful design.
273-305: Clean final export with proper visual separation!The combination of all navigation sections with consistent dashed border separators creates excellent visual organization. The custom separator styling maintains consistency across the navigation.
apps/playground-web/src/components/ui/sidebar.tsx (8)
35-164: Well-architected sidebar context and provider system!Excellent implementation of the sidebar state management with:
- Proper TypeScript typing and context patterns
- Support for both controlled and uncontrolled modes
- Keyboard shortcut integration (Cmd/Ctrl+B)
- Mobile state management
- CSS custom properties for theming
- Proper cleanup of event listeners
The architecture provides a solid foundation for the modular sidebar system.
166-271: Sophisticated and flexible Sidebar component implementation!The main Sidebar component expertly handles multiple complex scenarios:
- Multiple variants (sidebar, floating, inset) with appropriate styling
- Different collapsible modes (offcanvas, icon, none)
- Responsive mobile behavior using Sheet component
- Complex but well-organized CSS transitions and positioning
- Proper use of data attributes for styling hooks
The complexity is justified by the flexibility and functionality provided.
499-747: Comprehensive and accessible menu component system!Excellent implementation of the sidebar menu system featuring:
- Complete component library (Menu, MenuItem, MenuButton, etc.)
- Variant system using class-variance-authority
- Proper accessibility with ARIA attributes and screen reader support
- Conditional tooltip support in collapsed mode
- Randomized skeleton loading states
- Nested submenu support with proper styling
- Consistent state management and active state handling
The menu system provides all necessary components for a flexible navigation experience.
35-164: Excellent context-driven architecture!The
SidebarContextandSidebarProvidercreate a robust state management system with mobile detection, keyboard shortcuts, and state persistence. The comprehensive state management supports complex sidebar behaviors.The cookie handling technical debt is already flagged for future improvement.
166-271: Comprehensive main sidebar component!Excellent handling of multiple rendering scenarios (mobile vs desktop), variants, and collapsible behaviors. The use of data attributes for styling states and smooth transitions creates a polished user experience.
273-326: Well-implemented interaction components!The
SidebarTriggerandSidebarRailprovide excellent user interaction with proper accessibility, keyboard support, and visual feedback. The rail component's cursor states enhance the resize interaction UX.
328-497: Comprehensive structural component library!The complete set of structural components (
SidebarInset,SidebarHeader,SidebarContent, etc.) provides excellent composability with consistent APIs, proper ref forwarding, and responsive behaviors. The group components with labels and actions add powerful organizational capabilities.
499-747: Complete and feature-rich menu component system!The menu components provide a comprehensive navigation system with variants, tooltips, active states, and submenu support. The skeleton component with randomized widths adds polished loading states, and the accessibility features are well-implemented throughout.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/playground-web/src/components/ui/sidebar.tsx (1)
1-1: Address the FIXME for cookie handling.The biome-ignore comment with FIXME indicates technical debt. Direct
document.cookiemanipulation should be replaced with a proper cookie handling approach.Consider using a cookie library like
js-cookieor moving cookie operations to server-side actions. Would you like me to open an issue to track this technical debt?Also applies to: 93-94
🧹 Nitpick comments (1)
apps/playground-web/src/app/navLinks.ts (1)
273-305: Consider reducing separator duplication.The separator objects are repeated with identical properties. Consider extracting to a constant:
+const sidebarSeparator: ShadcnSidebarLink = { + separator: true, + className: "my-1 bg-background border-t border-dashed", +}; + export const sidebarLinks: ShadcnSidebarLink[] = [ wallets, - { - separator: true, - className: "my-1 bg-background border-t border-dashed", - }, + sidebarSeparator, transactions, - { - separator: true, - className: "my-1 bg-background border-t border-dashed", - }, + sidebarSeparator, contracts, // ... continue pattern
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
apps/playground-web/public/og/background-1.jpgis excluded by!**/*.jpgapps/playground-web/public/og/icons/contract.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/insight.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/payments.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/transactions.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/wallets.svgis excluded by!**/*.svgapps/playground-web/src/app/api/og/inter/700.ttfis excluded by!**/*.ttfapps/playground-web/src/app/opengraph-image.jpgis excluded by!**/*.jpgapps/playground-web/src/app/payments/opengraph-image.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (88)
apps/dashboard/src/@/icons/TokenIcon.tsx(1 hunks)apps/dashboard/src/@/icons/WalletProductIcon.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/TeamSidebarLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(3 hunks)apps/playground-web/next.config.mjs(1 hunks)apps/playground-web/package.json(1 hunks)apps/playground-web/src/app/AppSidebar.tsx(1 hunks)apps/playground-web/src/app/MobileHeader.tsx(0 hunks)apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/native-aa/page.tsx(1 hunks)apps/playground-web/src/app/api/og/route.tsx(1 hunks)apps/playground-web/src/app/contracts/events/page.tsx(1 hunks)apps/playground-web/src/app/contracts/extensions/page.tsx(1 hunks)apps/playground-web/src/app/contracts/read/page.tsx(1 hunks)apps/playground-web/src/app/contracts/write/page.tsx(1 hunks)apps/playground-web/src/app/globals.css(2 hunks)apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx(1 hunks)apps/playground-web/src/app/insight/layout.tsx(1 hunks)apps/playground-web/src/app/layout.tsx(2 hunks)apps/playground-web/src/app/login/_sdk_.ts(0 hunks)apps/playground-web/src/app/login/layout.tsx(0 hunks)apps/playground-web/src/app/login/page.tsx(0 hunks)apps/playground-web/src/app/navLinks.ts(1 hunks)apps/playground-web/src/app/otherLinks.ts(0 hunks)apps/playground-web/src/app/page.tsx(1 hunks)apps/playground-web/src/app/payments/backend/layout.tsx(1 hunks)apps/playground-web/src/app/payments/backend/page.tsx(3 hunks)apps/playground-web/src/app/payments/backend/reference/page.tsx(1 hunks)apps/playground-web/src/app/payments/commerce/page.tsx(1 hunks)apps/playground-web/src/app/payments/fund-wallet/page.tsx(1 hunks)apps/playground-web/src/app/payments/transactions/page.tsx(1 hunks)apps/playground-web/src/app/payments/ui-components/page.tsx(1 hunks)apps/playground-web/src/app/token-selector-demo/page.tsx(0 hunks)apps/playground-web/src/app/tokens/nft-components/page.tsx(2 hunks)apps/playground-web/src/app/tokens/token-components/page.tsx(1 hunks)apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/mint-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/webhooks/page.tsx(1 hunks)apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx(0 hunks)apps/playground-web/src/app/wallets/auth/page.tsx(1 hunks)apps/playground-web/src/app/wallets/blockchain-api/page.tsx(0 hunks)apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/account-components/page.tsx(2 hunks)apps/playground-web/src/app/wallets/headless/chain-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx(0 hunks)apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/button/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/embed/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/headless/page.tsx(1 hunks)apps/playground-web/src/app/wallets/social/page.tsx(1 hunks)apps/playground-web/src/components/ThemeToggle.tsx(1 hunks)apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx(0 hunks)apps/playground-web/src/components/blocks/APIHeader.tsx(3 hunks)apps/playground-web/src/components/blocks/NetworkSelectors.tsx(1 hunks)apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx(1 hunks)apps/playground-web/src/components/blocks/multi-select.tsx(1 hunks)apps/playground-web/src/components/code/RenderCode.tsx(1 hunks)apps/playground-web/src/components/code/code-example.tsx(2 hunks)apps/playground-web/src/components/headless-ui/wallet-previews.tsx(0 hunks)apps/playground-web/src/components/pay/direct-payment.tsx(1 hunks)apps/playground-web/src/components/ui/NavLink.tsx(1 hunks)apps/playground-web/src/components/ui/TokenSelector.tsx(1 hunks)apps/playground-web/src/components/ui/collapsible.tsx(1 hunks)apps/playground-web/src/components/ui/select.tsx(2 hunks)apps/playground-web/src/components/ui/sheet.tsx(1 hunks)apps/playground-web/src/components/ui/sidebar.tsx(1 hunks)apps/playground-web/src/components/ui/skeleton.tsx(1 hunks)apps/playground-web/src/hooks/full-path.ts(1 hunks)apps/playground-web/src/hooks/use-mobile.tsx(1 hunks)apps/playground-web/src/icons/ContractIcon.tsx(1 hunks)apps/playground-web/src/icons/DashboardIcon.tsx(1 hunks)apps/playground-web/src/icons/InsightIcon.tsx(1 hunks)apps/playground-web/src/icons/PayIcon.tsx(1 hunks)apps/playground-web/src/icons/SmartAccountIcon.tsx(1 hunks)apps/playground-web/src/icons/ThirdwebMiniLogo.tsx(1 hunks)apps/playground-web/src/icons/TokenIcon.tsx(1 hunks)apps/playground-web/src/icons/WalletProductIcon.tsx(1 hunks)apps/playground-web/src/lib/env.ts(1 hunks)apps/playground-web/src/lib/metadata.ts(1 hunks)apps/playground-web/tailwind.config.ts(1 hunks)apps/portal/src/app/page.tsx(3 hunks)apps/portal/src/lib/getBaseUrl.ts(1 hunks)
💤 Files with no reviewable changes (11)
- apps/playground-web/src/app/login/layout.tsx
- apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx
- apps/playground-web/src/components/headless-ui/wallet-previews.tsx
- apps/playground-web/src/app/otherLinks.ts
- apps/playground-web/src/app/login/page.tsx
- apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx
- apps/playground-web/src/app/MobileHeader.tsx
- apps/playground-web/src/app/token-selector-demo/page.tsx
- apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx
- apps/playground-web/src/app/login/sdk.ts
- apps/playground-web/src/app/wallets/blockchain-api/page.tsx
✅ Files skipped from review due to trivial changes (12)
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/TeamSidebarLayout.tsx
- apps/playground-web/src/components/blocks/multi-select.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
- apps/playground-web/package.json
- apps/dashboard/src/@/icons/WalletProductIcon.tsx
- apps/playground-web/src/icons/WalletProductIcon.tsx
- apps/playground-web/src/components/code/code-example.tsx
- apps/dashboard/src/@/icons/TokenIcon.tsx
- apps/portal/src/lib/getBaseUrl.ts
- apps/playground-web/src/icons/InsightIcon.tsx
- apps/playground-web/src/icons/DashboardIcon.tsx
- apps/playground-web/src/icons/TokenIcon.tsx
🚧 Files skipped from review as they are similar to previous changes (61)
- apps/playground-web/src/components/ui/TokenSelector.tsx
- apps/playground-web/src/app/payments/backend/reference/page.tsx
- apps/playground-web/src/components/pay/direct-payment.tsx
- apps/playground-web/src/components/blocks/NetworkSelectors.tsx
- apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx
- apps/playground-web/src/components/code/RenderCode.tsx
- apps/playground-web/src/hooks/full-path.ts
- apps/playground-web/src/hooks/use-mobile.tsx
- apps/playground-web/src/icons/PayIcon.tsx
- apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
- apps/playground-web/src/app/globals.css
- apps/playground-web/src/icons/SmartAccountIcon.tsx
- apps/playground-web/src/icons/ContractIcon.tsx
- apps/playground-web/src/components/ThemeToggle.tsx
- apps/playground-web/src/app/layout.tsx
- apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx
- apps/playground-web/src/components/ui/select.tsx
- apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx
- apps/playground-web/src/app/account-abstraction/native-aa/page.tsx
- apps/portal/src/app/page.tsx
- apps/playground-web/src/app/contracts/read/page.tsx
- apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx
- apps/playground-web/src/app/payments/ui-components/page.tsx
- apps/playground-web/src/app/insight/layout.tsx
- apps/playground-web/src/app/api/og/route.tsx
- apps/playground-web/src/app/payments/transactions/page.tsx
- apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx
- apps/playground-web/src/app/payments/backend/page.tsx
- apps/playground-web/src/components/ui/collapsible.tsx
- apps/playground-web/src/components/ui/sheet.tsx
- apps/playground-web/src/lib/metadata.ts
- apps/playground-web/src/components/ui/NavLink.tsx
- apps/playground-web/src/app/contracts/events/page.tsx
- apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx
- apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx
- apps/playground-web/src/app/wallets/in-app-wallet/page.tsx
- apps/playground-web/next.config.mjs
- apps/playground-web/src/app/wallets/sign-in/headless/page.tsx
- apps/playground-web/src/app/payments/fund-wallet/page.tsx
- apps/playground-web/src/app/transactions/mint-tokens/page.tsx
- apps/playground-web/src/app/wallets/auth/page.tsx
- apps/playground-web/src/app/wallets/headless/account-components/page.tsx
- apps/playground-web/src/app/wallets/social/page.tsx
- apps/playground-web/src/app/payments/backend/layout.tsx
- apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
- apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx
- apps/playground-web/src/components/ui/skeleton.tsx
- apps/playground-web/src/components/blocks/APIHeader.tsx
- apps/playground-web/src/icons/ThirdwebMiniLogo.tsx
- apps/playground-web/src/app/tokens/token-components/page.tsx
- apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx
- apps/playground-web/src/app/wallets/headless/chain-components/page.tsx
- apps/playground-web/src/app/payments/commerce/page.tsx
- apps/playground-web/src/app/transactions/webhooks/page.tsx
- apps/playground-web/tailwind.config.ts
- apps/playground-web/src/app/contracts/write/page.tsx
- apps/playground-web/src/app/wallets/sign-in/button/page.tsx
- apps/playground-web/src/lib/env.ts
- apps/playground-web/src/app/tokens/nft-components/page.tsx
- apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
- apps/playground-web/src/app/contracts/extensions/page.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/playground-web/src/app/page.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.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.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.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.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
🧠 Learnings (44)
📓 Common learnings
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} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
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 Tailwind CSS only – no inline styles or CSS modules
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} : Configure `staleTime`/`cacheTime` in React Query based on freshness (default ≥ 60s)
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: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
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`).
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.
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: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx:29-39
Timestamp: 2025-05-27T20:10:47.245Z
Learning: MananTank prefers adding error handling (try-catch) directly inside utility functions like `shouldRenderNewPublicPage` rather than requiring callers to wrap the function calls in try-catch blocks. This centralizes error handling and benefits all callers automatically.
📚 Learning: applies to dashboard/**/*.{ts,tsx} : redirect logic using `redirect()` from `next/navigation`....
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Redirect logic using `redirect()` from `next/navigation`.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/*client.tsx : interactive ui that relies on hooks (`usestate`, `useeffect`, ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/layout.tsx : building layout shells (`layout.tsx`) and top-level pages that ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : pages requiring fast transitions where data is prefetched on t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `navlink` for internal navigation wit...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : for notices & skeletons rely on `announcementbanner`, `generic...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: in the thirdweb dashboard codebase, when `redirecttocontractlandingpage()` is called, an explicit re...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx:43-49
Timestamp: 2025-05-26T16:31:02.480Z
Learning: In the thirdweb dashboard codebase, when `redirectToContractLandingPage()` is called, an explicit return statement is not required afterward because the function internally calls Next.js's `redirect()` which throws an error to halt execution.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/feature/components/** : group feature-specific compone...
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.tsxapps/playground-web/src/app/AppSidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : import ui primitives from `@/components/u...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : prefer composable primitives over custom markup: `button`, `in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use `navlink` (`@/components/ui/navlink`) for internal navigat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `cn()` from `@/lib/utils` for conditi...
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 `cn()` from `@/lib/utils` for conditional class logic
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: in the logout flow in apps/dashboard/src/app/(app)/account/components/accountheader.tsx, when `dolog...
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/*client.tsx : prefer api routes or server actions to keep tokens secret; the...
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/playground-web/src/app/page.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: the thirdwebbarchart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(side...
Learnt from: arcoraven
PR: thirdweb-dev/js#7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to src/exports/react.native.ts : react native specific exports are in `src/exports/react.nat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : reuse core ui primitives; avoid re-implementing buttons, cards...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/playground-web/src/app/page.tsxapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: in the thirdweb dashboard codebase, redirecttocontractlandingpage function already handles execution...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Applied to files:
apps/playground-web/src/app/page.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : layouts should reuse `sidebarlayout` / `fullwidthsidebarlayout...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{tsx} : expose `classname` prop on root element of c...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/playground-web/src/app/AppSidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use design system tokens (e.g., `bg-card`...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Applied to files:
apps/playground-web/src/app/AppSidebar.tsxapps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : accept a typed `props` object and export a named function (`ex...
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/playground-web/src/app/AppSidebar.tsx
📚 Learning: applies to dashboard/**/components/**/index.ts : group related components in their own folder and ex...
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/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : client components (browser): begin files ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/components/*.client.tsx : client components must start with `'use client';` ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: configuration files that import and reference react components (like icon components from lucide-rea...
Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{ts,tsx} : export default async functions without `'use client';` – they r...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Export default async functions without `'use client';` – they run on the Node edge.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : server components (node edge): start file...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : anything that consumes hooks from `@tanstack/react-query` or t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : wrap client-side data fetching calls in r...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : use react query (`@tanstack/react-query`) for all client data ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`@tanstack/react-query`) for all client data fetching.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*client.tsx : components that listen to user events, animations or live upda...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Components that listen to user events, animations or live updates.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : icons come from `lucide-react` or the project-specific `…/icon...
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/navLinks.ts
📚 Learning: applies to dashboard/**/*.{ts,tsx} : reading cookies/headers with `next/headers` (`getauthtoken()`, ...
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} : Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : always call `getauthtoken()` to retrieve ...
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} : Always call `getAuthToken()` to retrieve JWT from cookies on server side
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : create light wrappers (e.g. `fetchjson`) that automatically at...
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 : Create light wrappers (e.g. `fetchJson`) that automatically attach the JWT from cookies/session when calling internal API routes.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : configure `staletime`/`cachetime` in reac...
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} : Configure `staleTime`/`cacheTime` in React Query based on freshness (default ≥ 60s)
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : when you need access to browser apis (localstorage, window, in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/api/**/*.{ts,tsx} : always call `getauthtoken()` to get the jwt from cookies...
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} : Always call `getAuthToken()` to get the JWT from cookies.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : configure `staletime` / `cachetime` according to freshness req...
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 : Configure `staleTime` / `cacheTime` according to freshness requirements.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: next.js link component supports external urls without throwing errors. when used with absolute urls ...
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/components/ui/sidebar.tsx
📚 Learning: next.js link component fully supports both internal and external urls and works appropriately with a...
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/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : always import from the central ui library under `@/components/...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
🧬 Code Graph Analysis (1)
apps/playground-web/src/app/page.tsx (10)
apps/playground-web/src/app/payments/commerce/page.tsx (1)
Page(23-36)apps/playground-web/src/app/payments/transactions/page.tsx (1)
Page(26-41)apps/playground-web/src/app/payments/fund-wallet/page.tsx (1)
Page(23-36)apps/playground-web/src/app/payments/ui-components/page.tsx (1)
Page(22-37)apps/playground-web/src/app/transactions/webhooks/page.tsx (1)
Page(22-35)apps/playground-web/src/app/wallets/auth/page.tsx (1)
Page(24-42)apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx (1)
Page(22-37)apps/playground-web/src/app/wallets/in-app-wallet/page.tsx (1)
Page(23-38)apps/playground-web/src/icons/ThirdwebMiniLogo.tsx (1)
ThirdwebIcon(7-90)apps/playground-web/src/icons/InsightIcon.tsx (1)
InsightIcon(1-21)
⏰ 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, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (8)
apps/playground-web/src/app/AppSidebar.tsx (1)
1-39: Clean sidebar layout implementation!The refactored
AppSidebarLayoutproperly leverages the new modular sidebar system with context providers and structured link configuration. The separation of content and footer links, along with UTM tracking parameters, demonstrates good architectural design.apps/playground-web/src/app/page.tsx (2)
265-294: Well-structured helper components!The
SectionTitleandFeatureCardcomponents follow good practices:
- Clean separation of concerns
- Proper TypeScript typing for the icon prop
- Clever use of
before:absolute before:inset-0pattern for full-card clickability- Consistent styling with design tokens
25-264: Excellent landing page implementation!The page effectively serves as a navigable interface to all playground features with:
- Clear section organization matching the sidebar structure
- Consistent use of semantic HTML elements
- Responsive grid layouts with proper breakpoints
- Comprehensive feature coverage with appropriate icons and descriptions
apps/playground-web/src/app/navLinks.ts (2)
242-271: Smart dynamic link generation for Insight section!The dynamic generation of sidebar links from
insightBlueprintsis well-implemented:
- Maintains consistency with the blueprint data source
- Properly constructs URLs with query parameters
- Correctly uses
exactMatch: trueto prevent false active states on query-based routes
155-183: Well-structured account abstraction section!The section properly organizes AA-related links with:
- Clear EIP number labeling
- Consistent use of
ShieldIconfor visual coherence- Correct href paths that match the main page navigation
apps/playground-web/src/components/ui/sidebar.tsx (3)
56-164: Excellent SidebarProvider implementation!The provider demonstrates several best practices:
- Proper controlled/uncontrolled component pattern
- Keyboard accessibility with Cmd/Ctrl+B shortcut
- Responsive behavior with mobile detection
- Clean effect cleanup for event listeners
- Well-structured context value with memoization
547-604: Smart tooltip handling in SidebarMenuButton!The component shows excellent UX considerations:
- Tooltips only display when sidebar is collapsed or on mobile
- Proper use of CVA for variant management
- Clean composition pattern with Slot support
- Accessibility-friendly with data attributes for state
658-694: Creative loading state implementation!The
SidebarMenuSkeletoncomponent shows attention to UX detail:
- Random width generation (50-90%) creates more realistic loading states
- Proper memoization prevents width changes during re-renders
- Optional icon skeleton for flexibility
MananTank
force-pushed
the
07-31-playground_revamp
branch
from
280d6fe to
1deb44e
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/playground-web/src/components/ui/sidebar.tsx (1)
1-1: Cookie handling technical debt trackedThe FIXME comment for cookie handling has been previously identified and should be addressed as noted in earlier reviews.
🧹 Nitpick comments (1)
apps/playground-web/src/components/ui/sidebar.tsx (1)
664-667: Optimize random width generation in skeleton componentThe random width calculation in
SidebarMenuSkeletoncould be optimized for better performance.The current implementation uses
useMemobut still generates a new random value on each component instance. Consider usinguseReffor truly stable random values:- const width = React.useMemo(() => { - return `${Math.floor(Math.random() * 40) + 50}%`; - }, []); + const width = React.useRef(`${Math.floor(Math.random() * 40) + 50}%`).current;This ensures the width remains consistent for the component's lifetime and avoids any potential recalculation.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
apps/playground-web/public/og/background-1.jpgis excluded by!**/*.jpgapps/playground-web/public/og/icons/contract.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/insight.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/payments.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/transactions.svgis excluded by!**/*.svgapps/playground-web/public/og/icons/wallets.svgis excluded by!**/*.svgapps/playground-web/src/app/api/og/inter/700.ttfis excluded by!**/*.ttfapps/playground-web/src/app/opengraph-image.jpgis excluded by!**/*.jpgapps/playground-web/src/app/payments/opengraph-image.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (88)
apps/dashboard/src/@/icons/TokenIcon.tsx(1 hunks)apps/dashboard/src/@/icons/WalletProductIcon.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/TeamSidebarLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(3 hunks)apps/playground-web/next.config.mjs(1 hunks)apps/playground-web/package.json(1 hunks)apps/playground-web/src/app/AppSidebar.tsx(1 hunks)apps/playground-web/src/app/MobileHeader.tsx(0 hunks)apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx(1 hunks)apps/playground-web/src/app/account-abstraction/native-aa/page.tsx(1 hunks)apps/playground-web/src/app/api/og/route.tsx(1 hunks)apps/playground-web/src/app/contracts/events/page.tsx(1 hunks)apps/playground-web/src/app/contracts/extensions/page.tsx(1 hunks)apps/playground-web/src/app/contracts/read/page.tsx(1 hunks)apps/playground-web/src/app/contracts/write/page.tsx(1 hunks)apps/playground-web/src/app/globals.css(2 hunks)apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx(1 hunks)apps/playground-web/src/app/insight/layout.tsx(1 hunks)apps/playground-web/src/app/layout.tsx(2 hunks)apps/playground-web/src/app/login/_sdk_.ts(0 hunks)apps/playground-web/src/app/login/layout.tsx(0 hunks)apps/playground-web/src/app/login/page.tsx(0 hunks)apps/playground-web/src/app/navLinks.ts(1 hunks)apps/playground-web/src/app/otherLinks.ts(0 hunks)apps/playground-web/src/app/page.tsx(1 hunks)apps/playground-web/src/app/payments/backend/layout.tsx(1 hunks)apps/playground-web/src/app/payments/backend/page.tsx(3 hunks)apps/playground-web/src/app/payments/backend/reference/page.tsx(1 hunks)apps/playground-web/src/app/payments/commerce/page.tsx(1 hunks)apps/playground-web/src/app/payments/fund-wallet/page.tsx(1 hunks)apps/playground-web/src/app/payments/transactions/page.tsx(1 hunks)apps/playground-web/src/app/payments/ui-components/page.tsx(1 hunks)apps/playground-web/src/app/token-selector-demo/page.tsx(0 hunks)apps/playground-web/src/app/tokens/nft-components/page.tsx(2 hunks)apps/playground-web/src/app/tokens/token-components/page.tsx(1 hunks)apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/mint-tokens/page.tsx(1 hunks)apps/playground-web/src/app/transactions/webhooks/page.tsx(1 hunks)apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx(0 hunks)apps/playground-web/src/app/wallets/auth/page.tsx(1 hunks)apps/playground-web/src/app/wallets/blockchain-api/page.tsx(0 hunks)apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/account-components/page.tsx(2 hunks)apps/playground-web/src/app/wallets/headless/chain-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/page.tsx(1 hunks)apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx(0 hunks)apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/button/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/embed/page.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/headless/page.tsx(1 hunks)apps/playground-web/src/app/wallets/social/page.tsx(1 hunks)apps/playground-web/src/components/ThemeToggle.tsx(1 hunks)apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx(0 hunks)apps/playground-web/src/components/blocks/APIHeader.tsx(3 hunks)apps/playground-web/src/components/blocks/NetworkSelectors.tsx(1 hunks)apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx(1 hunks)apps/playground-web/src/components/blocks/multi-select.tsx(1 hunks)apps/playground-web/src/components/code/RenderCode.tsx(1 hunks)apps/playground-web/src/components/code/code-example.tsx(2 hunks)apps/playground-web/src/components/headless-ui/wallet-previews.tsx(0 hunks)apps/playground-web/src/components/pay/direct-payment.tsx(1 hunks)apps/playground-web/src/components/ui/NavLink.tsx(1 hunks)apps/playground-web/src/components/ui/TokenSelector.tsx(1 hunks)apps/playground-web/src/components/ui/collapsible.tsx(1 hunks)apps/playground-web/src/components/ui/select.tsx(2 hunks)apps/playground-web/src/components/ui/sheet.tsx(1 hunks)apps/playground-web/src/components/ui/sidebar.tsx(1 hunks)apps/playground-web/src/components/ui/skeleton.tsx(1 hunks)apps/playground-web/src/hooks/full-path.ts(1 hunks)apps/playground-web/src/hooks/use-mobile.tsx(1 hunks)apps/playground-web/src/icons/ContractIcon.tsx(1 hunks)apps/playground-web/src/icons/DashboardIcon.tsx(1 hunks)apps/playground-web/src/icons/InsightIcon.tsx(1 hunks)apps/playground-web/src/icons/PayIcon.tsx(1 hunks)apps/playground-web/src/icons/SmartAccountIcon.tsx(1 hunks)apps/playground-web/src/icons/ThirdwebMiniLogo.tsx(1 hunks)apps/playground-web/src/icons/TokenIcon.tsx(1 hunks)apps/playground-web/src/icons/WalletProductIcon.tsx(1 hunks)apps/playground-web/src/lib/env.ts(1 hunks)apps/playground-web/src/lib/metadata.ts(1 hunks)apps/playground-web/tailwind.config.ts(1 hunks)apps/portal/src/app/page.tsx(3 hunks)apps/portal/src/lib/getBaseUrl.ts(1 hunks)
💤 Files with no reviewable changes (11)
- apps/playground-web/src/components/headless-ui/wallet-previews.tsx
- apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx
- apps/playground-web/src/app/login/page.tsx
- apps/playground-web/src/app/login/layout.tsx
- apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx
- apps/playground-web/src/app/MobileHeader.tsx
- apps/playground-web/src/app/otherLinks.ts
- apps/playground-web/src/app/token-selector-demo/page.tsx
- apps/playground-web/src/app/login/sdk.ts
- apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx
- apps/playground-web/src/app/wallets/blockchain-api/page.tsx
✅ Files skipped from review due to trivial changes (8)
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/TeamSidebarLayout.tsx
- apps/playground-web/package.json
- apps/playground-web/src/icons/TokenIcon.tsx
- apps/playground-web/src/components/blocks/multi-select.tsx
- apps/dashboard/src/@/icons/TokenIcon.tsx
- apps/playground-web/src/app/api/og/route.tsx
- apps/playground-web/src/icons/InsightIcon.tsx
- apps/playground-web/src/components/code/code-example.tsx
🚧 Files skipped from review as they are similar to previous changes (68)
- apps/playground-web/src/components/code/RenderCode.tsx
- apps/playground-web/src/components/pay/direct-payment.tsx
- apps/playground-web/src/app/payments/backend/reference/page.tsx
- apps/playground-web/src/components/blocks/NetworkSelectors.tsx
- apps/playground-web/src/components/ui/TokenSelector.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
- apps/dashboard/src/@/icons/WalletProductIcon.tsx
- apps/playground-web/src/icons/ContractIcon.tsx
- apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx
- apps/playground-web/src/app/globals.css
- apps/playground-web/src/icons/DashboardIcon.tsx
- apps/playground-web/src/icons/SmartAccountIcon.tsx
- apps/playground-web/src/components/ui/select.tsx
- apps/playground-web/src/icons/WalletProductIcon.tsx
- apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
- apps/playground-web/src/app/payments/ui-components/page.tsx
- apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx
- apps/playground-web/src/app/payments/backend/page.tsx
- apps/playground-web/src/hooks/full-path.ts
- apps/playground-web/src/app/insight/layout.tsx
- apps/portal/src/app/page.tsx
- apps/playground-web/src/app/layout.tsx
- apps/playground-web/src/components/ui/collapsible.tsx
- apps/playground-web/src/icons/PayIcon.tsx
- apps/playground-web/src/app/account-abstraction/native-aa/page.tsx
- apps/playground-web/src/components/ui/sheet.tsx
- apps/playground-web/src/app/wallets/headless/chain-components/page.tsx
- apps/playground-web/src/app/tokens/token-components/page.tsx
- apps/playground-web/src/app/wallets/in-app-wallet/page.tsx
- apps/playground-web/src/app/account-abstraction/eip-5792/page.tsx
- apps/playground-web/next.config.mjs
- apps/playground-web/src/app/wallets/ecosystem-wallet/page.tsx
- apps/playground-web/src/app/AppSidebar.tsx
- apps/playground-web/src/app/contracts/write/page.tsx
- apps/playground-web/src/app/transactions/mint-tokens/page.tsx
- apps/playground-web/src/app/contracts/read/page.tsx
- apps/playground-web/src/app/wallets/sign-in/headless/page.tsx
- apps/playground-web/src/app/payments/backend/layout.tsx
- apps/playground-web/src/app/tokens/nft-components/page.tsx
- apps/playground-web/src/app/payments/transactions/page.tsx
- apps/playground-web/src/app/page.tsx
- apps/playground-web/src/app/wallets/auth/page.tsx
- apps/playground-web/src/components/ThemeToggle.tsx
- apps/playground-web/src/app/wallets/social/page.tsx
- apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx
- apps/playground-web/src/app/wallets/sign-in/button/connect-button-page.tsx
- apps/playground-web/src/app/account-abstraction/eip-4337/page.tsx
- apps/portal/src/lib/getBaseUrl.ts
- apps/playground-web/src/app/account-abstraction/eip-7702/page.tsx
- apps/playground-web/src/app/contracts/events/page.tsx
- apps/playground-web/src/app/contracts/extensions/page.tsx
- apps/playground-web/src/components/ui/NavLink.tsx
- apps/playground-web/src/app/wallets/headless/account-components/page.tsx
- apps/playground-web/src/lib/metadata.ts
- apps/playground-web/src/lib/env.ts
- apps/playground-web/src/components/blocks/APIHeader.tsx
- apps/playground-web/src/app/payments/fund-wallet/page.tsx
- apps/playground-web/tailwind.config.ts
- apps/playground-web/src/app/wallets/sign-in/button/page.tsx
- apps/playground-web/src/hooks/use-mobile.tsx
- apps/playground-web/src/app/payments/commerce/page.tsx
- apps/playground-web/src/app/navLinks.ts
- apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
- apps/playground-web/src/app/transactions/webhooks/page.tsx
- apps/playground-web/src/icons/ThirdwebMiniLogo.tsx
- apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
- apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx
- apps/playground-web/src/components/ui/skeleton.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/playground-web/src/components/ui/sidebar.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/components/ui/sidebar.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/components/ui/sidebar.tsx
🧠 Learnings (24)
📓 Common learnings
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} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
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} : Configure `staleTime`/`cacheTime` in React Query based on freshness (default ≥ 60s)
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: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use Tailwind CSS only – no inline styles or CSS modules
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
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`).
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.
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: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx:29-39
Timestamp: 2025-05-27T20:10:47.245Z
Learning: MananTank prefers adding error handling (try-catch) directly inside utility functions like `shouldRenderNewPublicPage` rather than requiring callers to wrap the function calls in try-catch blocks. This centralizes error handling and benefits all callers automatically.
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : layouts should reuse `sidebarlayout` / `fullwidthsidebarlayout...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : prefer composable primitives over custom markup: `button`, `in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `navlink` for internal navigation wit...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : import ui primitives from `@/components/u...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use `navlink` (`@/components/ui/navlink`) for internal navigat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : interactive ui that relies on hooks (`usestate`, `useeffect`, ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/layout.tsx : building layout shells (`layout.tsx`) and top-level pages that ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : for notices & skeletons rely on `announcementbanner`, `generic...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : reuse core ui primitives; avoid re-implementing buttons, cards...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/components/**/index.ts : group related components in their own folder and ex...
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/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{ts,tsx} : reading cookies/headers with `next/headers` (`getauthtoken()`, ...
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} : Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : always call `getauthtoken()` to retrieve ...
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} : Always call `getAuthToken()` to retrieve JWT from cookies on server side
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : prefer api routes or server actions to keep tokens secret; the...
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/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : client components (browser): begin files ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : create light wrappers (e.g. `fetchjson`) that automatically at...
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 : Create light wrappers (e.g. `fetchJson`) that automatically attach the JWT from cookies/session when calling internal API routes.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : configure `staletime`/`cachetime` in reac...
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} : Configure `staleTime`/`cacheTime` in React Query based on freshness (default ≥ 60s)
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : when you need access to browser apis (localstorage, window, in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/api/**/*.{ts,tsx} : always call `getauthtoken()` to get the jwt from cookies...
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} : Always call `getAuthToken()` to get the JWT from cookies.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*client.tsx : configure `staletime` / `cachetime` according to freshness req...
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 : Configure `staleTime` / `cacheTime` according to freshness requirements.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: next.js link component supports external urls without throwing errors. when used with absolute urls ...
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/components/ui/sidebar.tsx
📚 Learning: next.js link component fully supports both internal and external urls and works appropriately with a...
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/ui/sidebar.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : always import from the central ui library under `@/components/...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
📚 Learning: applies to src/exports/react.native.ts : react native specific exports are in `src/exports/react.nat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
apps/playground-web/src/components/ui/sidebar.tsx
🧬 Code Graph Analysis (1)
apps/playground-web/src/components/ui/sidebar.tsx (5)
apps/playground-web/src/hooks/use-mobile.tsx (1)
useIsMobile(5-21)apps/playground-web/src/lib/utils.ts (1)
cn(5-7)apps/playground-web/src/components/ui/sheet.tsx (5)
Sheet(133-133)SheetContent(138-138)SheetHeader(139-139)SheetTitle(141-141)SheetDescription(142-142)apps/portal/src/components/Document/index.ts (1)
Separator(29-29)apps/playground-web/src/components/ui/skeleton.tsx (1)
Skeleton(50-50)
⏰ 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: 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: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (7)
apps/playground-web/src/components/ui/sidebar.tsx (7)
35-164: Excellent context architecture and state managementThe
SidebarContextandSidebarProviderimplementation demonstrates solid React patterns:
- Proper error handling in the
useSidebarhook- Comprehensive state management for both mobile and desktop modes
- Keyboard shortcut integration with cleanup
- Proper memoization to prevent unnecessary re-renders
- Well-typed TypeScript interfaces
The provider effectively manages complex sidebar state while maintaining good performance characteristics.
166-271: Comprehensive and well-architected sidebar componentThe
Sidebarcomponent demonstrates excellent design:
- Proper
forwardRefimplementation for ref forwarding- Flexible variant system with support for different sides, variants, and collapsible modes
- Mobile-responsive implementation using the
Sheetcomponent- Accessibility considerations with screen reader content in mobile mode
- Effective use of data attributes for styling hooks
- Clean separation between mobile and desktop rendering logic
The component follows design system guidelines and provides a solid foundation for the sidebar system.
273-425: Well-designed supporting components with good accessibilityThe supporting components (
SidebarTrigger,SidebarRail,SidebarInset, etc.) demonstrate excellent implementation:
- Consistent
forwardRefpatterns throughout- Proper accessibility features (aria-labels, screen reader text)
- Effective use of design system tokens and Tailwind classes
- Good responsive design considerations
- Clear separation of concerns and single responsibilities
These components provide a solid foundation for building complex sidebar layouts.
427-524: Excellent menu system architecture with composable designThe sidebar menu system demonstrates outstanding design:
- Well-structured component hierarchy with clear responsibilities
- Consistent
forwardRefpatterns and proper TypeScript typing- Effective use of the
asChildpattern for flexible composition- Good accessibility features throughout (aria-labels, focus management)
- Proper responsive behavior with collapsible icon mode handling
The group and menu item components provide a solid foundation for complex navigation structures.
525-604: Robust menu button implementation with excellent variant systemThe
SidebarMenuButtoncomponent showcases excellent design patterns:
- Well-structured CVA variants for consistent styling across different sizes and states
- Intelligent tooltip integration that conditionally shows based on sidebar state
- Proper accessibility with data attributes for active states
- Flexible composition with
asChildpattern support- Good performance with proper context usage
The variant system provides comprehensive styling options while maintaining consistency.
696-747: Well-implemented submenu system with proper nestingThe submenu components (
SidebarMenuSub,SidebarMenuSubItem,SidebarMenuSubButton) provide excellent support for nested navigation:
- Proper visual hierarchy with border and indentation
- Consistent styling patterns with the main menu system
- Good accessibility with proper data attributes
- Responsive behavior that hides appropriately in icon mode
- Flexible sizing options for different use cases
The submenu system integrates seamlessly with the overall sidebar architecture.
749-774: Comprehensive and well-organized component exportsThe export structure demonstrates excellent organization:
- All components are properly exported for external consumption
- Clear alphabetical ordering for easy reference
- Comprehensive coverage of all sidebar functionality
- Includes both structural and interactive components
This export structure provides a complete toolkit for building complex sidebar interfaces while maintaining good developer experience.
joaquim-verges
approved these changes
Jul 31, 2025
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 primarily focuses on code refactoring, enhancing component functionality, and improving UI elements across various modules in the
playground-webanddashboardapplications. It includes updates to styles, component imports, and layout adjustments.Detailed summary
playground-web.onVercelenvironment variable usage ingetBaseUrl.ts.page.tsxfiles, adjusting container widths and padding.createMetadata.ThemeTogglecomponent for improved theme management.Summary by CodeRabbit
New Features
Enhancements
Bug Fixes / Removals
Chores
Style