[PRO-98] Update Project FTUX UI #8418
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughRemoved left-sidebar top padding; added optional header/container className props; introduced several brand SVG icon components; refactored ProjectFTUX (adds projectWalletSection, CodeShowcase, IconCard use); made ProjectWalletSection layout-configurable and updated page composition, stories, and sidebar/footer icon swaps. Changes
Sequence Diagram(s)sequenceDiagram
participant Page as page.tsx
participant FTUX as ProjectFTUX
participant Wallet as ProjectWalletSection
participant Analytics as ProjectAnalytics
Note over Page: Render branch chosen by project active state
Page->>Page: determine isActive
alt isActive == true
Page->>Wallet: render Wallet(layout="column")
Page->>Analytics: render Analytics(project, range, searchParams)
else isActive == false
Page->>Wallet: create Wallet(layout="row") as node
Page->>FTUX: render FTUX(projectWalletSection=node)
FTUX->>Wallet: render embedded Wallet (row)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 2 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8418 +/- ##
=======================================
Coverage 54.85% 54.85%
=======================================
Files 919 919
Lines 60853 60853
Branches 4142 4142
=======================================
Hits 33378 33378
Misses 27373 27373
Partials 102 102
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx (1)
1-21: Consider removing fixed width and height from SVG.The SVG has fixed
width="800px"andheight="800px"attributes, which may prevent proper scaling when the component is used with different sizes via theclassNameprop. Modern SVG best practices recommend omitting explicit width/height attributes and relying solely on theviewBoxfor aspect ratio, allowing the SVG to scale responsively based on container size or CSS.Apply this diff to improve scalability:
<svg - width="800px" - height="800px" viewBox="0 -12.5 256 256" xmlns="http://www.w3.org/2000/svg"apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx (1)
12-45: Consider validation for edge cases.The component implementation is clean, but a few edge cases could be handled more robustly:
- Empty tabs array: If
props.tabsis empty, the component will render a non-functional Select with no placeholder selected and no content.- Duplicate labels: The array doesn't enforce unique labels, which could cause selection confusion.
- Unmatched selection: If
selectedTabdoesn't match anytab.label, nothing renders silently.Consider adding validation or fallback UI for these cases:
export function CodeShowcase(props: { title: string; tabs: Array<{ label: string; code: React.ReactNode; }>; }) { + if (!props.tabs.length) { + return null; + } + const [selectedTab, setSelectedTab] = useState(props.tabs[0]?.label || "");Alternatively, enforce non-empty tabs in the type signature if this component should never receive an empty array.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (15)
apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx(1 hunks)apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx(1 hunks)apps/dashboard/src/@/components/blocks/project-page/project-page.tsx(2 hunks)apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx(7 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (16)
📓 Common learnings
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout PR #7888.
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/page.tsx:1-1
Timestamp: 2025-08-20T10:37:10.123Z
Learning: In apps/dashboard, prefer importing UI components from "workspace/ui/components/*" where possible, as per jnsdls preference, rather than from "@/components/ui/*".
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
Repo: thirdweb-dev/js PR: 7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsxapps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsxapps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsxapps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
📚 Learning: 2025-05-26T16:28:50.772Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Applied to files:
apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsxapps/dashboard/src/@/components/blocks/project-page/project-page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/dashboard/src/@/components/blocks/project-page/project-page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsxapps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-06-18T02:01:06.006Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7363
File: apps/dashboard/src/app/(app)/layout.tsx:63-74
Timestamp: 2025-06-18T02:01:06.006Z
Learning: In Next.js applications, instrumentation files (instrumentation.ts or instrumentation-client.ts) placed in the src/ directory are automatically handled by the framework and included in the client/server bundles without requiring manual imports. The framework injects these files as part of the build process.
Applied to files:
apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-10-22T15:45:54.726Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8291
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx:100-114
Timestamp: 2025-10-22T15:45:54.726Z
Learning: The `managementAccessToken` from `project.services.engineCloud.managementAccessToken` in the dashboard codebase is not a secret token and can be safely included in React Query keys and props without security concerns.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout PR #7888.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-05-29T00:46:09.063Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-08-20T10:37:10.123Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/page.tsx:1-1
Timestamp: 2025-08-20T10:37:10.123Z
Learning: In apps/dashboard, prefer importing UI components from "workspace/ui/components/*" where possible, as per jnsdls preference, rather than from "@/components/ui/*".
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
📚 Learning: 2025-09-17T11:02:13.528Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts:15-17
Timestamp: 2025-09-17T11:02:13.528Z
Learning: The thirdweb `client` object is serializable and can safely be used in React Query keys, similar to the `contract` object.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
🧬 Code graph analysis (4)
apps/dashboard/src/@/components/blocks/project-page/project-page.tsx (1)
apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx (1)
ProjectPageHeader(74-155)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx (1)
apps/playground-web/src/components/ui/select.tsx (5)
Select(152-152)SelectTrigger(155-155)SelectValue(154-154)SelectContent(156-156)SelectItem(158-158)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (5)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx (1)
CodeShowcase(12-45)apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx (1)
NextjsIcon(1-59)apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx (1)
ViteIcon(1-23)apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx (1)
ExpoIcon(1-21)apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx (1)
NodeJSIcon(1-20)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx (1)
ProjectWalletSection(343-360)apps/dashboard/src/@/components/analytics/responsive-time-filters.tsx (1)
ResponsiveTimeFilters(14-55)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
ProjectFTUX(28-46)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (23)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx (1)
6-9: LGTM! Clean styling refinements.The updated spacing and typography classes improve visual hierarchy. The increased bottom margin (mb-2 → mb-3) provides better separation between the description and the copy button below.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsx (2)
16-17: LGTM! Typography and spacing improvements.The updated heading weight and adjusted margins improve the visual hierarchy by tightening the heading-to-description spacing while adding more breathing room before the interactive controls.
23-24: LGTM! Improved responsive layout.The increased container width and the switch from fixed width to
growfor the key display area create a more flexible, responsive layout. Thegrowclass allows the secret key box to fill available space while maintaining proper alignment with the rotation button.apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx (1)
70-70: LGTM - Sidebar padding adjustment.Removing the top padding (
pt-2) from the Sidebar component is a minor styling change that aligns with layout adjustments across the PR.apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx (1)
1-23: LGTM - Well-structured brand icon component.The ViteIcon component correctly omits fixed width/height attributes, allowing responsive scaling. The use of
currentColorand CSS variables (hsl(var(--background))) ensures proper theming support.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx (3)
5-5: LGTM - Improved semantic icon choice.Changing the import from
RssIcontoDoorOpenIconimproves semantic clarity for the Gateway submenu.
87-87: LGTM - Gateway icon updated.The
DoorOpenIconis more semantically appropriate for a "Gateway" concept than the previous RSS icon.
113-130: LGTM - Simplified footer navigation.The footer navigation has been streamlined to include only Webhooks and Project Settings, removing Documentation and Playground entries. This simplification improves focus and reduces navigation clutter.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (1)
180-180: LGTM - Consistent padding adjustment.Increasing the padding from
p-4top-5on both container divs provides slightly more breathing room in the wallet details UI, aligning with the layout refinements across the PR.Also applies to: 203-203
apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx (1)
69-69: LGTM - Clean API enhancement for external styling.Adding the optional
classNameprop and applying it via thecn()utility enables external styling customization while maintaining the component's base styles. This is a clean, non-breaking enhancement that follows React best practices.Also applies to: 76-78
apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx (1)
1-20: LGTM - Well-structured brand icon component.The NodeJSIcon component follows best practices by omitting fixed dimensions, using
currentColorfor theming support, and including appropriate accessibility attributes.apps/dashboard/src/@/components/blocks/project-page/project-page.tsx (1)
16-16: LGTM!The addition of the
containerClassNameprop and dynamic header padding based on tab presence provides good layout flexibility. The conditional className logic is implemented correctly, and the changes integrate well with the existing component structure.Also applies to: 23-28, 37-41
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx (2)
275-322: LGTM!The layout-driven rendering is well-implemented:
- Clean separation between
"row"and"column"layout modes- Conditional API Reference button for row layout provides good UX
- Type-safe prop definitions
- Proper integration with the existing component structure
The layout prop is correctly propagated through the component hierarchy.
136-142: Minor visual adjustments noted.The visual changes (padding increase from
p-4top-5, icon size fromsize-5tosize-4, heading fromtext-lgtotext-base) are consistent with the broader UI refresh in this PR. These changes maintain visual harmony with the updated layout.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (5)
28-46: LGTM! Clean composition pattern.The addition of the
projectWalletSectionprop enables flexible composition of the FTUX layout, allowing different rendering modes (row/column) to be controlled at the page level. The increased gap fromgap-10togap-14provides better visual spacing for the updated layout.
92-153: Well-structured multi-language code showcase.The
GetStartedSectioneffectively demonstrates API usage with code examples in curl, JavaScript, and Python. The integration with the newCodeShowcasecomponent provides good UX for developers.
208-275: Excellent refactoring with IconCard generalization.The consolidation of product cards, SDK cards, and starter kit cards into a single
IconCardcomponent follows DRY principles and improves maintainability. The conditionaltarget="_blank"logic for external links (line 355) provides good UX.A few observations:
- The
descriptionprop is optional (string | undefined), which correctly handles cases where SDK and starter kit items don't need descriptions.- Products now include updated icons and descriptions that align with the current product offerings.
Also applies to: 279-366
397-432: Terminology update noted.The section heading changed from "Starter Kits" to "Starters" with an updated description. This is a minor branding/terminology update that improves clarity.
155-204: No issues found—masked secret key usage is intentional and consistent.The codebase consistently uses
project.secretKeys[0]?.maskedacross multiple components (ProjectGeneralSettingsPage and ProjectFTUX), with appropriate fallback placeholders (<YOUR_SECRET_KEY>) in code examples. This pattern is safe and aligns with best practices for FTUX flows.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (4)
122-122: Minor avatar size adjustment.The ProjectAvatar size reduced from
size-12tosize-11provides a subtle visual refinement consistent with the overall UI refresh in this PR.
133-154: Layout restructuring in active view.The active view now uses a two-section layout:
ProjectWalletSectionwithlayout="column"- A new container with
ResponsiveTimeFiltersandProjectAnalyticsThis provides a cleaner visual hierarchy. The
ProjectAnalyticscomponent now receives additional props (project,range,searchParams) which are used by child components likeAsyncAppHighlightsCard.
155-171: Improved composition in inactive view.The inactive view now composes the
ProjectWalletSectioninline withlayout="row"and passes it toProjectFTUXvia theprojectWalletSectionprop. This enables better layout control and follows React composition patterns effectively.The wrapping
divwithpt-6provides consistent spacing.
177-185: All new props are actively used—verification confirms the code changes are correct.The
project,range, andsearchParamsprops are all properly consumed throughout the component tree.projectandrangeare passed to multiple child components and accessed for properties (project.id, project.teamId, range.from, range.to), whilesearchParamsis checked for specific keys (appHighlights, client_transactions, totalSponsored). No unnecessary data is being passed.
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx (1)
14-55: Hardcoded SVG IDs can collide across multiple instancesThe gradients and clipPath use fixed IDs (
paint0_linear_53_108vsxrmxu21,paint1_linear_53_108vsxrmxu21,clip0_53_108). If multipleNextjsIconinstances render on the same page, these IDs will collide and only the first definition will be used, which can break gradients/clip paths for later instances. This was already flagged in a previous review and still applies.Consider generating unique IDs per instance (e.g., via
useId) and wiring them through theid/url(#...)references.Example refactor:
+import { useId } from "react"; + export function NextjsIcon(props: { className?: string }) { - return ( + const id = useId(); + const strokeGradientId = `${id}-nextjs-stroke`; + const fillGradientId = `${id}-nextjs-fill`; + const clipPathId = `${id}-nextjs-clip`; + + return ( <svg @@ - <g clipPath="url(#clip0_53_108)"> + <g clipPath={`url(#${clipPathId})`}> <path d="M10.63 11V5" - stroke="url(#paint0_linear_53_108vsxrmxu21)" + stroke={`url(#${strokeGradientId})`} @@ <path @@ - fill="url(#paint1_linear_53_108vsxrmxu21)" + fill={`url(#${fillGradientId})`} /> </g> <defs> <linearGradient - id="paint0_linear_53_108vsxrmxu21" + id={strokeGradientId} @@ <linearGradient - id="paint1_linear_53_108vsxrmxu21" + id={fillGradientId} @@ - <clipPath id="clip0_53_108"> + <clipPath id={clipPathId}> <rect width={16} height={16} fill="red" /> </clipPath> </defs> </svg> ); }
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsx (1)
52-132: Consider adding layout diversity for better Storybook coverage.All stories now use
layout: "column". While this consistency is good, Storybook serves as both visual documentation and a testing tool. Consider creating at least one additional story (or modifying an existing one) to showcaselayout: "row"so that developers and designers can see and test both layout modes.For example, you could add a new story or modify one of the existing ones:
+export const ProjectWalletSetSingleServerWalletRowLayout: Story = { + args: { + layout: "row", + project: projectWithManagedAccessToken, + teamSlug: "bar", + projectWallet: projectWallet1, + client: storybookThirdwebClient, + getProjectServerWallets: async () => { + await new Promise((resolve) => setTimeout(resolve, 1000)); + return [projectWallet1]; + }, + }, +};
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (17)
apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx(1 hunks)apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx(1 hunks)apps/dashboard/src/@/components/blocks/project-page/project-page.tsx(2 hunks)apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx(7 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (11)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx
- apps/dashboard/src/@/components/blocks/project-page/project-page.tsx
- apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx
- apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx
- apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx
- apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx
🧰 Additional context used
🧠 Learnings (11)
📓 Common learnings
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout PR #7888.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-05-29T00:46:09.063Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: 2025-05-26T16:28:50.772Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
Repo: thirdweb-dev/js PR: 7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx
📚 Learning: 2025-06-18T02:01:06.006Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7363
File: apps/dashboard/src/app/(app)/layout.tsx:63-74
Timestamp: 2025-06-18T02:01:06.006Z
Learning: In Next.js applications, instrumentation files (instrumentation.ts or instrumentation-client.ts) placed in the src/ directory are automatically handled by the framework and included in the client/server bundles without requiring manual imports. The framework injects these files as part of the build process.
Applied to files:
apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx (1)
CodeShowcase(12-45)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx (1)
ProjectWalletSection(343-360)apps/dashboard/src/@/components/analytics/responsive-time-filters.tsx (1)
ResponsiveTimeFilters(14-55)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
ProjectFTUX(28-46)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (14)
apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx (1)
70-70: LGTM! Cleaner sidebar spacing.Removing the top padding from the Sidebar wrapper creates a tighter, more uniform layout while the SidebarContent on line 71 still provides appropriate internal padding via
p-2.apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx (1)
1-13: Component API and basic SVG setup look goodThe icon component shape, props typing, currentColor usage, and aria-hidden flag are all consistent and reasonable for a decorative brand icon.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx (1)
27-27: LGTM! Story properly exposes the new prop.The addition of
projectWalletSection: undefinedcorrectly reflects the new optional prop on theProjectFTUXcomponent, allowing story authors to test different wallet section configurations.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (3)
122-122: Minor visual refinement.The avatar size reduction from
size-12tosize-11is a small UI adjustment with no functional impact.
134-154: Well-structured layout refactoring for active projects.The updated layout correctly:
- Passes
layout="column"toProjectWalletSectionfor vertical presentation- Wraps analytics in a flex container for proper spacing
- Threads the required props (
project,range,searchParams) toProjectAnalyticsAll prop signatures match their function definitions.
156-170: Inactive view correctly integrates wallet section into FTUX.The new composition passes
ProjectWalletSectionwithlayout="row"toProjectFTUXvia theprojectWalletSectionprop, enabling a horizontal presentation for inactive projects. The wrapper padding provides appropriate spacing.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (8)
28-36: Well-designed prop injection for wallet section.The
projectWalletSectionprop is correctly typed asReact.ReactNodeand rendered between the API key integration and getting started sections, providing flexibility in layout composition. The increased gap (gap-14) improves visual spacing.
55-90: Improved layout and guidance for API keys section.The restructured two-column grid provides better visual hierarchy with:
- Descriptive content and external link in the left column
- API keys grouped in a bordered card on the right
The "Learn more about API keys" link helps users understand the feature better.
92-153: Excellent addition of executable code examples.The new "Get Started" section provides practical, multi-language examples (cURL, JavaScript, Python) using the
CodeShowcasecomponent. The two-column layout matches the pattern established in the API keys section for visual consistency.The "View API Reference" link provides additional resources for developers.
208-275: Well-organized products section with consistent iconography.The products section effectively showcases 6 core features with:
- Semantic icons matching each product type
- Concise descriptions
- Consistent navigation patterns
- Responsive grid layout (1/2/3 columns)
The use of the reusable
IconCardcomponent maintains visual consistency.
344-366: IconCard component is well-implemented.The
IconCardcomponent provides a clean, reusable pattern for rendering items with:
- Icon, name, and optional description
- Conditional description rendering (lines 360-362)
- Proper accessibility with
before:absolute before:inset-0for clickable area- External link detection via
href.startsWith("http")The component effectively handles both items with descriptions (products) and without (SDKs, starters).
286-342: SDK section provides comprehensive coverage of supported platforms.The section effectively showcases 6 client SDKs with appropriate brand icons and links to documentation. The omission of descriptions (
description: undefined) is appropriate since SDK names are self-explanatory.
370-432: Starters section effectively promotes quick-start templates.The section provides 4 popular starter kits with:
- Clear heading and description explaining their purpose
- "View all" link for discoverability of additional templates
- Consistent layout and iconography
- Links to GitHub example repositories
The layout mirrors the SDK section pattern for visual consistency.
155-204: API endpoint verified as correct.The endpoint
POST https://api.thirdweb.com/v1/transactionsis the correct API endpoint for thirdweb project wallet transactions, as documented in the official thirdweb resources. The code examples properly handle secret key authentication and are consistent across all three languages (curl, fetch, and Python).
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsx (1)
52-52: Consistent layout prop addition looks good.All six stories now include the
layout: "column"property, which aligns with the new layout-driven ProjectWallet UI.Consider adding stories that demonstrate the
"row"layout variant as well. This would provide complete visual documentation of both layout modes and make it easier for developers to see how the component behaves in different configurations.For example, you could add:
export const NoProjectWalletSetNoManagedAccessTokenRow: Story = { args: { layout: "row", project: projectWithoutManagedAccessToken, client: storybookThirdwebClient, teamSlug: "bar", projectWallet: undefined, getProjectServerWallets: async () => { await new Promise((resolve) => setTimeout(resolve, 1000)); return []; }, }, };Also applies to: 66-66, 80-80, 94-94, 108-108, 122-122
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx (1)
19-19: Consider handling empty tabs array.If
props.tabsis empty,selectedTabwill be an empty string and the component will render without functional content. While unlikely in current usage, defensive handling would improve robustness.Apply this diff to add a guard:
export function CodeShowcase(props: { title: string; tabs: Array<{ label: string; code: React.ReactNode; }>; }) { const [selectedTab, setSelectedTab] = useState(props.tabs[0]?.label || ""); + + if (props.tabs.length === 0) { + return null; + } return (
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (24)
apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx(1 hunks)apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx(1 hunks)apps/dashboard/src/@/components/blocks/project-page/project-page.tsx(2 hunks)apps/dashboard/src/@/icons/NebulaIcon.tsx(0 hunks)apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatSidebar.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/Chats.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx(7 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/src/@/icons/NebulaIcon.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx
🚧 Files skipped from review as they are similar to previous changes (9)
- apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
- apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
- apps/dashboard/src/@/components/blocks/project-page/project-page.tsx
- apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx
🧰 Additional context used
🧠 Learnings (13)
📓 Common learnings
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
Repo: thirdweb-dev/js PR: 7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatSidebar.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsxapps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/Chats.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout PR #7888.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatSidebar.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/Chats.tsx
📚 Learning: 2025-08-20T10:37:10.123Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/page.tsx:1-1
Timestamp: 2025-08-20T10:37:10.123Z
Learning: In apps/dashboard, prefer importing UI components from "workspace/ui/components/*" where possible, as per jnsdls preference, rather than from "@/components/ui/*".
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatSidebar.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/Chats.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-05-26T16:28:50.772Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Applied to files:
apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-05-29T00:46:09.063Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsx
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/Chats.tsx
🧬 Code graph analysis (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx (1)
CodeShowcase(12-45)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx (1)
apps/playground-web/src/components/ui/select.tsx (5)
Select(152-152)SelectTrigger(155-155)SelectValue(154-154)SelectContent(156-156)SelectItem(158-158)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx (1)
ProjectWalletSection(343-360)apps/dashboard/src/@/components/analytics/responsive-time-filters.tsx (1)
ResponsiveTimeFilters(14-55)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
ProjectFTUX(28-46)
⏰ 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: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (16)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsx (2)
3-3: LGTM - Icon import follows repository conventions.The
BotIconimport correctly uses the "Icon" suffix as required by the repository's linting rules for lucide-react icons.
109-109: LGTM - Semantically appropriate icon choice.The replacement of
NebulaIconwithBotIconis semantically fitting for AI-related content and aligns with the PR's broader icon update initiative.apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx (1)
1-20: LGTM! Clean icon component implementation.The component follows best practices: uses
currentColorfor easy theming, properly applies the className prop, and correctly marks the SVG as decorative witharia-hidden="true". The implementation is consistent with the other brand icon components added in this PR.apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx (1)
70-70: LGTM! Sidebar padding refinement.Removing the static
pt-2contributes to more uniform vertical spacing across the dashboard layout, consistent with the broader UI spacing updates in this PR.apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx (1)
69-69: LGTM! Well-implemented className prop.The addition of the optional
classNameprop follows a standard React pattern for component flexibility. The implementation correctly uses thecn()utility to merge base classes with custom classes, enabling dynamic styling based on context (e.g., tab presence) as indicated in the related project-page.tsx changes.Also applies to: 76-78
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatSidebar.tsx (2)
3-3: LGTM!The BotIcon import follows the repository convention for lucide-react icons with the "Icon" suffix.
55-55: LGTM!The icon replacement from NebulaIcon to BotIcon is appropriate for the AI chat interface, and the accessibility attribute is properly maintained.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/Chats.tsx (2)
3-3: LGTM: Icon import follows repository conventions.The import correctly uses the "Icon" suffix as required by the repository's linting rules for lucide-react icons.
240-245: LGTM: Icon migration executed cleanly.The replacement of
NebulaIconwithBotIconfor both presence and assistant message types is consistent with the codebase-wide migration mentioned in the PR context. The styling and functionality remain intact.apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts (1)
1-1: LGTM! Icon replacement follows repository conventions.The replacement of
NebulaIconwith lucide-react'sBotIconis semantically appropriate for the AI product and correctly uses the "Icon" suffix as required by the repository's linting rules. The change is consistent with the broader refactoring noted in the PR summary whereNebulaIconis being removed from the codebase.Based on learnings
Also applies to: 55-55
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsx (2)
61-61: LGTM! Icon prop updated consistently.The icon change in the header is consistent with the import update and maintains the same structure.
1-1: LGTM! Icon import updated appropriately.The change from
NebulaIcontoBotIconis well-suited for the AI Analytics page and correctly follows the lucide-react import convention with the "Icon" suffix. This is a scoped change to the dashboard app's AI analytics page;NebulaIconremains appropriately used in other apps (nebula, portal) and does not require global updates.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (3)
28-46: LGTM! Clean component composition.The new
projectWalletSectionprop allows flexible wallet section rendering based on context (active vs inactive views), maintaining good separation of concerns.
155-204: LGTM! Well-structured code examples with proper secret masking.The code examples correctly handle secret key masking using optional chaining and fallback values, preventing exposure of actual secrets while maintaining useful examples.
344-366: LGTM! Solid external link handling.The
target="_blank"conditional based on URL scheme ensures external links open in new tabs while internal navigation remains in-page. The optional description rendering is also well-handled.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (1)
133-170: LGTM! Well-structured conditional layout.The differentiation between active and inactive views is clear and purposeful:
- Active projects display the wallet section prominently in column layout alongside analytics
- Inactive projects integrate the wallet section into the FTUX flow with a compact row layout
The prop passing is consistent and correct across both paths.
Merge activity
|
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR primarily focuses on updating the UI components by replacing the `NebulaIcon` with `BotIcon`, enhancing styling, and refactoring code for better readability and functionality across various components.
### Detailed summary
- Replaced `NebulaIcon` with `BotIcon` in multiple components.
- Improved styles for headings and paragraphs in `ClientIDSection` and `SecretKeySection`.
- Updated layout properties in `ProjectWalletSection` and other components.
- Added a new `CodeShowcase` component to display code examples.
- Enhanced `ProjectFTUX` to accept a `projectWalletSection` prop.
- Refactored several components for better structure and readability.
- Adjusted margins and paddings for improved UI consistency.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Multi-language code showcase with a language selector for integration examples
* Configurable wallet layouts and ability to inject a wallet area into onboarding/FTUX
* **UI/UX Improvements**
* Refined spacing, typography, and responsive layouts across project pages and sidebar
* Added popular framework/product brand icons; replaced several AI/sidebar icons with a unified Bot icon
* Simplified sidebar footer links and adjusted paddings and avatar sizes
* **Chores**
* Updated story examples to include new layout args
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
pro-98
branch
from
ad8126a to
5080b47
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx (1)
54-54: Optional: ClipPath fill color is cosmetic.The
fill="red"on the clipPath rect doesn't affect rendering (clipPaths only use the alpha channel), though it's typically set to "white" or omitted for clarity. This is purely cosmetic and can be left as-is.Apply this diff if you'd like to follow typical SVG conventions:
- <clipPath id="clip0_53_108"> - <rect width={16} height={16} fill="red" /> - </clipPath> + <clipPath id="clip0_53_108"> + <rect width={16} height={16} fill="white" /> + </clipPath>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (24)
apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx(1 hunks)apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx(1 hunks)apps/dashboard/src/@/components/blocks/project-page/project-page.tsx(2 hunks)apps/dashboard/src/@/icons/NebulaIcon.tsx(0 hunks)apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx(1 hunks)apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatSidebar.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/Chats.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx(7 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/src/@/icons/NebulaIcon.tsx
🚧 Files skipped from review as they are similar to previous changes (15)
- apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx
- apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx
- apps/dashboard/src/@/components/blocks/project-page/project-page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatSidebar.tsx
- apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts
- apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsx
- apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/Chats.tsx
🧰 Additional context used
🧠 Learnings (15)
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsxapps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-10-22T15:45:54.726Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8291
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx:100-114
Timestamp: 2025-10-22T15:45:54.726Z
Learning: The `managementAccessToken` from `project.services.engineCloud.managementAccessToken` in the dashboard codebase is not a secret token and can be safely included in React Query keys and props without security concerns.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
Repo: thirdweb-dev/js PR: 7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsxapps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx
📚 Learning: 2025-06-18T02:01:06.006Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7363
File: apps/dashboard/src/app/(app)/layout.tsx:63-74
Timestamp: 2025-06-18T02:01:06.006Z
Learning: In Next.js applications, instrumentation files (instrumentation.ts or instrumentation-client.ts) placed in the src/ directory are automatically handled by the framework and included in the client/server bundles without requiring manual imports. The framework injects these files as part of the build process.
Applied to files:
apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout PR #7888.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-08-20T10:37:10.123Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/page.tsx:1-1
Timestamp: 2025-08-20T10:37:10.123Z
Learning: In apps/dashboard, prefer importing UI components from "workspace/ui/components/*" where possible, as per jnsdls preference, rather than from "@/components/ui/*".
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-05-26T16:28:50.772Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
📚 Learning: 2025-05-29T00:46:09.063Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/CodeSelector.tsx (1)
CodeShowcase(12-45)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx (1)
ProjectWalletSection(343-360)apps/dashboard/src/@/components/analytics/responsive-time-filters.tsx (1)
ResponsiveTimeFilters(14-55)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
ProjectFTUX(28-46)
⏰ 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). (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (14)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx (2)
4-6: LGTM! Clean import additions.The new icon imports (
BotIconandDoorOpenIcon) are correctly formatted with the "Icon" suffix as required by the project's linting rules, and both are standard lucide-react icons.
82-87: LGTM! Icon replacements improve semantic clarity.The icon changes are semantically appropriate:
BotIconfor the AI menu item better represents AI functionality than the previousNebulaIcon.DoorOpenIconfor the Gateway submenu is more intuitive as a gateway/entry point metaphor thanRssIcon.These changes align with the broader PR objective to update iconography across the dashboard and are purely visual improvements with no functional impact.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx (1)
3-3: LGTM! Icon replacement follows project conventions.The import and usage of
BotIconfrom lucide-react correctly follows the required "Icon" suffix naming convention per project linting rules. The icon replacement from NebulaIcon to BotIcon is clean and maintains visual consistency.Based on learnings.
Also applies to: 35-35
apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx (1)
1-13: LGTM! Clean component structure.The component follows React best practices with proper prop typing, className forwarding, and appropriate accessibility attributes (
aria-hidden="true"for a decorative icon).apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/SecretKeySection.tsx (1)
16-24: LGTM! Typography and layout improvements are consistent.The updated typography classes align with the styling changes across other FTUX sections, and the increased container width with
growprovides better responsive behavior.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (1)
134-170: LGTM! Layout restructuring is well-organized.The changes correctly implement the new two-view layout:
- Active view:
ProjectWalletSectionwithlayout="column"followed by analytics- Inactive (FTUX) view:
ProjectFTUXwith an injectedProjectWalletSectionusinglayout="row"The prop passing aligns with the component signatures shown in the relevant code snippets.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx (1)
6-7: LGTM! Typography updates are consistent.The styling changes match the pattern applied across other FTUX sections.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx (1)
27-27: LGTM! Story args updated correctly.The addition of
projectWalletSection: undefinedaligns with the new prop in theProjectFTUXcomponent signature.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (6)
28-46: LGTM! Component signature and layout flow are well-structured.The addition of the
projectWalletSectionprop provides a clean injection point for wallet content, and the section ordering (API Keys → Wallet → Get Started → Products → SDKs → Starters) creates a logical onboarding flow.
50-90: LGTM! Improved layout with clear documentation link.The grid layout and card-based presentation improve visual hierarchy, and the "Learn more about API keys" link provides helpful context for new users.
229-229: Verify the product name "x402".The product title "x402" (line 229) appears unusual. Please confirm whether this is the correct public-facing name for this product or if it should be something more descriptive like "Pay" or "Payments".
208-275: LGTM! Product section refactored to use generalized IconCard.The migration to
IconCardand the addition of Gateway, Tokens, and AI products expand the product showcase. The consistent card-based presentation improves maintainability.
279-366: LGTM! IconCard component is well-designed.The generalized
IconCardcomponent with optional description provides good flexibility for both products and SDKs. The hover states and link handling are appropriate.
370-432: LGTM! Starter kits section is well-structured.The updated layout with brand icons (NextjsIcon, ViteIcon, ExpoIcon, NodeJSIcon) and the "View all" link to the GitHub examples repository provide a clear path for developers to get started.
| function GetStartedSection({ project }: { project: Project }) { | ||
| return ( | ||
| <section className="grid grid-cols-1 gap-4 lg:grid-cols-2"> | ||
| <div> | ||
| <h2 className="mb-1 font-semibold text-xl tracking-tight"> | ||
| Get Started | ||
| </h2> | ||
| <p className="text-muted-foreground text-sm mb-4"> | ||
| Send a test transaction using your project wallet | ||
| </p> | ||
|
|
||
| <Button | ||
| variant="outline" | ||
| className="bg-card rounded-lg gap-2" | ||
| size="sm" | ||
| asChild | ||
| > | ||
| <Link href="https://portal.thirdweb.com/reference" target="_blank"> | ||
| View API Reference | ||
| <ArrowUpRightIcon className="size-4" /> | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <CodeShowcase | ||
| title="POST /v1/auth/initiate" | ||
| tabs={[ | ||
| { | ||
| label: "Curl", | ||
| code: ( | ||
| <CodeServer | ||
| code={curlCodeExample(project)} | ||
| lang="bash" | ||
| className="border-t-0 rounded-t-none" | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| label: "JavaScript", | ||
| code: ( | ||
| <CodeServer | ||
| code={fetchJSCodeExample(project)} | ||
| lang="js" | ||
| className="border-t-0 rounded-t-none" | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| label: "Python", | ||
| code: ( | ||
| <CodeServer | ||
| code={pythonCodeExample(project)} | ||
| lang="python" | ||
| className="border-t-0 rounded-t-none" | ||
| /> | ||
| ), | ||
| }, | ||
| ]} | ||
| /> | ||
| </section> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Fix endpoint mismatch in code example title.
The title at line 117 shows "POST /v1/auth/initiate", but all three code examples (curl at line 156, JavaScript at line 173, and Python at line 191) use the endpoint https://api.thirdweb.com/v1/transactions. This mismatch will confuse developers trying to follow the examples.
Apply this diff to fix the title:
<CodeShowcase
- title="POST /v1/auth/initiate"
+ title="POST /v1/transactions"
tabs={[Also applies to: 155-204
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
around lines 92-153 (and also update the similar block around 155-204), the code
example title currently reads "POST /v1/auth/initiate" while the example
snippets call https://api.thirdweb.com/v1/transactions; change the title to
"POST /v1/transactions" (or otherwise match the transactions endpoint) in both
places so the displayed title matches the actual endpoints used in the Curl,
JavaScript, and Python examples.
vercel
bot
temporarily deployed
to
Production – thirdweb_playground
PR-Codex overview
This PR primarily focuses on updating UI components and replacing instances of
NebulaIconwithBotIcon. It also enhances styling, adds new functionalities, and refines existing components for improved user experience.Detailed summary
NebulaIconand replaced it withBotIconin multiple files.projectWalletSectionprop toProjectFTUX.ProjectWalletSectionlayout options.CodeShowcasecomponent for code examples.ProductsSectionandSDKSectionfor better organization.Summary by CodeRabbit
New Features
UI/UX Improvements
Chores