Dashboard: Project analytics code organization refactor #8487
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
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. |
WalkthroughAdds a modular analytics subsystem: new async chart card components (AI, RPC, Indexer, X402), a project highlights card, shared analytics types, and a composite server component ProjectAnalytics. Refactors the project dashboard page to delegate analytics rendering to ProjectAnalytics and removes local analytics type definitions and revalidate export. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8487 +/- ##
=======================================
Coverage 54.66% 54.66%
=======================================
Files 920 920
Lines 61106 61106
Branches 4143 4143
=======================================
Hits 33403 33403
Misses 27601 27601
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: 0
🧹 Nitpick comments (13)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx (2)
1-14: Missing"server-only"import for server component.Per coding guidelines, server component files should start with
import "server-only";to prevent accidental client bundling.+import "server-only"; import { ResponsiveSuspense } from "responsive-rsc"; import type { ThirdwebClient } from "thirdweb";
15-26: Consider adding explicit return type annotation.Per coding guidelines, explicit return types are preferred for clarity.
-export async function ProjectAnalytics(props: { +export async function ProjectAnalytics(props: { project: Project; params: PageParams; range: Range; interval: "day" | "week"; searchParams: PageSearchParams; client: ThirdwebClient; authToken: string; -}) { +}): Promise<React.JSX.Element> {apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsx (1)
1-4: Missing"server-only"import.This file contains an async server component (
AsyncX402RequestsChart). Per coding guidelines, add the server-only import to prevent accidental client bundling.+import "server-only"; import { ResponsiveSuspense } from "responsive-rsc";apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsx (1)
1-4: Missing"server-only"import.Per coding guidelines, server component files should include this import.
+import "server-only"; import { ResponsiveSuspense } from "responsive-rsc";apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsx (3)
1-4: Missing"server-only"import.Per coding guidelines, server component files should include this import.
+import "server-only"; import { ResponsiveSuspense } from "responsive-rsc";
5-38: Minor inconsistency: export function ordering differs from sibling files.In
x402-card.tsxandai-card.tsx, the async helper is defined first, then the exported component. Here it's reversed. Consider reordering for consistency across the analytics card files.
40-68: Data extraction handles API response wrapper correctly.The
"data" in requestsDatacheck correctly handles the API's{ data: [...] }response shape. However, the error handling pattern (.catch(() => undefined)) differs from sibling cards which use.catch(() => []). Consider aligning for consistency:const requestsData = await getInsightStatusCodeUsage( { from: props.from, period: props.interval, projectId: props.projectId, teamId: props.teamId, to: props.to, }, props.authToken, - ).catch(() => undefined); + ).catch((error) => { + console.error(error); + return { data: [] }; + }); return ( <RequestsByStatusGraph - data={requestsData && "data" in requestsData ? requestsData.data : []} + data={requestsData.data} isPending={false} viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/gateway/indexer`} /> );apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (1)
1-17: Missingimport "server-only"directive.As per the coding guidelines for server components in the dashboard app, this file should start with
import "server-only";to prevent accidental client bundling of server-side code that handles auth tokens and data fetching.+import "server-only"; import { redirect } from "next/navigation"; import { ResponsiveSearchParamsProvider } from "responsive-rsc";apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsx (3)
1-10: Missingimport "server-only"directive.This file contains an async server component (
AsyncAppHighlightsCard). Per coding guidelines, add the server-only import to prevent accidental client bundling.+import "server-only"; import { EmptyStateCard } from "app/(app)/team/components/Analytics/EmptyStateCard"; import { ResponsiveSuspense } from "responsive-rsc";
53-85: Silent failure on API errors - consider logging.
Promise.allSettledgracefully handles rejections, but failed API calls are silently ignored. Consider logging rejected promises to aid debugging in production.const [aggregatedUserStats, walletUserStatsTimeSeries, universalBridgeUsage] = await Promise.allSettled([ getInAppWalletUsage( { from: props.range.from, period: "all", projectId: props.project.id, teamId: props.project.teamId, to: props.range.to, }, props.authToken, ), // ... other calls ]); + + // Log any rejected promises for observability + for (const result of [aggregatedUserStats, walletUserStatsTimeSeries, universalBridgeUsage]) { + if (result.status === "rejected") { + console.error("Analytics API call failed:", result.reason); + } + }
102-111: Redundant status checks inside already-guarded block.At lines 102-106 and 107-111, the status is re-checked despite the outer
ifcondition on lines 87-90 already confirming both are"fulfilled". These ternaries will always evaluate to the truthy branch.userStats={ - walletUserStatsTimeSeries.status === "fulfilled" - ? walletUserStatsTimeSeries.value - : [] + walletUserStatsTimeSeries.value } volumeStats={ - universalBridgeUsage.status === "fulfilled" - ? universalBridgeUsage.value - : [] + universalBridgeUsage.value }apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsx (2)
1-4: Missingimport "server-only"directive.This file contains an async server component. Per coding guidelines, add the server-only import.
+import "server-only"; import { ResponsiveSuspense } from "responsive-rsc"; import { getRpcUsageByType } from "@/api/analytics";
15-24: Silent error swallowing - consider logging.The
.catch(() => undefined)pattern silently discards errors. While this provides graceful degradation, it makes debugging harder. Consider logging the error before returning undefined.const requestsData = await getRpcUsageByType( { from: props.from, period: props.interval, projectId: props.projectId, teamId: props.teamId, to: props.to, }, props.authToken, - ).catch(() => undefined); + ).catch((error) => { + console.error("Failed to fetch RPC usage data:", error); + return undefined; + });
📜 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 (8)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}: Import UI component primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Use Tailwind CSS only – no inline styles or CSS modules in dashboard and playground
Usecn()from@/lib/utilsfor conditional Tailwind class merging
Use design system tokens for styling (backgrounds:bg-card, borders:border-border, muted text:text-muted-foreground)
ExposeclassNameprop on root element for component overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/*.{ts,tsx}: UseNavLinkfor internal navigation with automatic active states in dashboard
Start server component files withimport "server-only";in Next.js
Read cookies/headers withnext/headersin server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic withredirect()fromnext/navigationin server components
Begin client component files with'use client';directive in Next.js
Handle interactive UI with React hooks (useState,useEffect, React Query, wallet hooks) in client components
Access browser APIs (localStorage,window,IntersectionObserver) in client components
Support fast transitions with prefetched data in client components
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader for API calls – never embed tokens in URLs
Return typed results (Project[],User[]) from server-side data fetches – avoidany
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysin React Query for cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components – only use analytics client-side
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under@/components/ui/*for reusable core UI components likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*,py-*,gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm,md,lg,xl)
Never hard-code colors; always use Tailwind variables
Combine class names viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/dashboard/**/*analytics*
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Use human-readable event names in
<subject> <verb>phrase format (e.g.,"contract deployed")
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx
apps/dashboard/**/page.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Use the
containerclass with amax-w-7xlcap for consistent page width
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
🧬 Code graph analysis (4)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsx (4)
apps/dashboard/src/@/api/analytics.ts (1)
getX402Settlements(1040-1042)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-requests-chart.tsx (1)
X402RequestsChartCardUI(8-46)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/analytics/Summary.tsx (1)
X402SummaryInner(11-47)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/analytics/x402-requests-chart.tsx (1)
X402RequestsChartCardUI(8-46)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsx (2)
apps/dashboard/src/@/api/analytics.ts (1)
getRpcUsageByType(563-568)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/gateway/rpc/components/RequestsGraph.tsx (1)
RPCRequestsChartUI(9-78)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/gateway/indexer/components/RequestsByStatusGraph.tsx (1)
RequestsByStatusGraph(16-123)apps/dashboard/src/@/api/analytics.ts (1)
getInsightStatusCodeUsage(921-926)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (2)
apps/dashboard/src/@/components/blocks/project-page/project-page.tsx (1)
ProjectPage(19-50)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). (4)
- GitHub Check: Vercel Agent Review
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (10)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.ts (1)
1-14: Type definitions look well-structured for route parameters.The union type
string | undefined | string[]correctly models Next.js search params behavior where values can be single strings, arrays (for repeated params), or undefined.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx (1)
27-127: Well-organized component composition.The layout uses consistent Tailwind spacing (
gap-6) and responsive grid patterns. TheResponsiveSuspensecorrectly declares its search param dependencies, and theselectedChartnarrowing handles thestring | string[]case appropriately.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsx (2)
5-46: Async data fetching pattern looks good.The error handling gracefully degrades to an empty state. The
isAllEmptycheck prevents rendering meaningless zero-data charts. Consider whether the empty array on error should be distinguished from genuinely empty data for observability purposes (e.g., structured logging with request context).
48-82: LGTM!The exported component follows the established suspense pattern consistently with other analytics cards.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsx (2)
5-37: Clean async data fetching implementation.Unlike
x402-card.tsxwhich filters out all-zero data, this passes stats directly to the UI. EnsureAiTokenUsageChartCardUIhandles empty arrays gracefully for consistency.
39-73: LGTM!The component follows the established suspense pattern and maintains consistent
viewMoreLinkvalues between loading and resolved states.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (2)
66-125: Clean refactor of conditional analytics rendering.The structure cleanly separates active project analytics from the FTUX onboarding flow. The use of
ResponsiveSearchParamsProviderscoped only to the active branch is appropriate, and the layout prop differentiation (columnvsrow) forProjectWalletSectionis consistent with the component's API.
35-41: No action needed –loginRedirectsafely terminates execution.
loginRedirecthas a return type ofneverand both code paths callredirect(), which throws. Execution cannot fall through, so the code is already safe.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsx (1)
11-41: LGTM - Clean suspense-based data fetching pattern.The
ProjectHighlightCardcomponent properly wraps async data fetching withResponsiveSuspense, provides an appropriate loading fallback, and correctly specifies the search params that trigger re-fetching.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsx (1)
35-67: LGTM - Consistent suspense pattern with appropriate fallback.The component follows the same pattern as other analytics cards in this PR. The fallback correctly shows a pending state with an empty dataset, and
searchParamsUsedproperly declares the dependencies.
size-limit report 📦
|
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 introduces several analytics components for a dashboard application, enhancing the project's data visualization capabilities. It includes new types for page parameters and search parameters, as well as multiple asynchronous chart components for different metrics.
### Detailed summary
- Added `PageParams` and `PageSearchParams` types for handling routing parameters.
- Implemented `AsyncRPCRequestsChartCard` and `RPCRequestsChartCard` for RPC usage analytics.
- Created `AsyncAiAnalytics` and `AIAnalyticsChartCard` for AI usage analytics.
- Introduced `AsyncIndexerRequestsChartCard` and `IndexerRequestsChartCard` for indexer request analytics.
- Developed `AsyncX402RequestsChart` and `X402RequestsChartCard` for x402 settlements analytics.
- Added `AsyncAppHighlightsCard` and `ProjectHighlightCard` for displaying project highlights.
- Refactored `ProjectAnalytics` function to integrate new chart components.
- Removed redundant code and improved structure for better maintainability.
> ✨ 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
## Release Notes
* **New Features**
* Added AI token volume analytics chart to project dashboard
* Added indexer/gateway request analytics chart
* Added RPC usage analytics chart
* Added X402 settlements analytics chart
* Introduced project highlights card displaying wallet and bridge usage metrics
* **Refactor**
* Reorganized project analytics dashboard structure for improved layout and user experience
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
12-03-dashboard_project_analytics_code_organization_refactor
branch
from
0f91d9a to
458246f
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsx (1)
50-67: Consider logging analytics fetch failures.The
.catch(() => undefined)silently swallows errors, which is acceptable for graceful degradation in analytics. However, logging the error would help with debugging production issues without affecting UX.const requestsData = await getInsightStatusCodeUsage( { from: props.from, period: props.interval, projectId: props.projectId, teamId: props.teamId, to: props.to, }, props.authToken, - ).catch(() => undefined); + ).catch((e) => { + console.error("Failed to fetch indexer status code usage", e); + return undefined; + });apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsx (1)
87-114: Redundant status checks inside the fulfilled branch.The outer condition on lines 88-89 already narrows the types, so the inner checks on lines 102-106 and 107-111 are unnecessary. TypeScript's control flow analysis ensures
.valueis accessible.if ( walletUserStatsTimeSeries.status === "fulfilled" && universalBridgeUsage.status === "fulfilled" ) { return ( <ProjectHighlightsCard aggregatedUserStats={ aggregatedUserStats.status === "fulfilled" ? aggregatedUserStats.value : [] } selectedChart={props.selectedChart} selectedChartQueryParam={props.selectedChartQueryParam} teamSlug={props.params.team_slug} projectSlug={props.params.project_slug} - userStats={ - walletUserStatsTimeSeries.status === "fulfilled" - ? walletUserStatsTimeSeries.value - : [] - } - volumeStats={ - universalBridgeUsage.status === "fulfilled" - ? universalBridgeUsage.value - : [] - } + userStats={walletUserStatsTimeSeries.value} + volumeStats={universalBridgeUsage.value} /> ); }
📜 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 (8)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.ts
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsx
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}: Import UI component primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Use Tailwind CSS only – no inline styles or CSS modules in dashboard and playground
Usecn()from@/lib/utilsfor conditional Tailwind class merging
Use design system tokens for styling (backgrounds:bg-card, borders:border-border, muted text:text-muted-foreground)
ExposeclassNameprop on root element for component overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/*.{ts,tsx}: UseNavLinkfor internal navigation with automatic active states in dashboard
Start server component files withimport "server-only";in Next.js
Read cookies/headers withnext/headersin server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic withredirect()fromnext/navigationin server components
Begin client component files with'use client';directive in Next.js
Handle interactive UI with React hooks (useState,useEffect, React Query, wallet hooks) in client components
Access browser APIs (localStorage,window,IntersectionObserver) in client components
Support fast transitions with prefetched data in client components
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader for API calls – never embed tokens in URLs
Return typed results (Project[],User[]) from server-side data fetches – avoidany
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysin React Query for cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components – only use analytics client-side
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under@/components/ui/*for reusable core UI components likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*,py-*,gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm,md,lg,xl)
Never hard-code colors; always use Tailwind variables
Combine class names viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
apps/dashboard/**/*analytics*
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Use human-readable event names in
<subject> <verb>phrase format (e.g.,"contract deployed")
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx
apps/dashboard/**/page.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Use the
containerclass with amax-w-7xlcap for consistent page width
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)/_analytics/indexer-card.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/gateway/indexer/components/RequestsByStatusGraph.tsx (1)
RequestsByStatusGraph(16-123)apps/dashboard/src/@/api/analytics.ts (1)
getInsightStatusCodeUsage(921-926)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (3)
apps/dashboard/src/@/components/blocks/project-page/project-page.tsx (1)
ProjectPage(19-50)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
ProjectFTUX(28-46)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx (1)
ProjectWalletSection(343-360)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Vercel Agent Review
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx (1)
15-129: Clean modular analytics composition.The component effectively consolidates multiple analytics cards into a single entry point with consistent prop passing and clear section organization. The grid layout and spacing follow design system conventions.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (2)
66-125: Well-structured page refactor.The composition cleanly separates active (analytics) and inactive (FTUX) states while reusing
ProjectWalletSectionwith appropriate layout variants. Delegating analytics rendering toProjectAnalyticsimproves maintainability and aligns with the modular analytics architecture.
35-41: No issue found withloginRedirectbehavior.The
loginRedirectfunction has aneverreturn type and calls Next.js'sredirect(), which throws an exception. This means execution never continues past theloginRedirectcall, making the missingreturnstatement irrelevant. The code works correctly as written.
| import { EmptyStateCard } from "app/(app)/team/components/Analytics/EmptyStateCard"; | ||
| import { ResponsiveSuspense } from "responsive-rsc"; | ||
| import type { ThirdwebClient } from "thirdweb"; | ||
| import { getInAppWalletUsage, getUniversalBridgeUsage } from "@/api/analytics"; | ||
| import type { Project } from "@/api/project/projects"; | ||
| import type { Range } from "@/components/analytics/date-range-selector"; | ||
| import { LoadingChartState } from "@/components/analytics/empty-chart-state"; | ||
| import { ProjectHighlightsCard } from "./highlights-card-ui"; | ||
| import type { PageParams, PageSearchParams } from "./types"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Missing server-only import for server component.
This file contains an async server component that performs data fetching. Add the server-only import to prevent accidental client bundling.
+import "server-only";
import { EmptyStateCard } from "app/(app)/team/components/Analytics/EmptyStateCard";
import { ResponsiveSuspense } from "responsive-rsc";🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsx
lines 1-9, this server component is missing the required server-only import; add
a top-level import 'server-only' (i.e., import 'server-only';) as the very first
line of the file to force server-only bundling and prevent accidental
client-side inclusion.
| import { ResponsiveSuspense } from "responsive-rsc"; | ||
| import { getInsightStatusCodeUsage } from "@/api/analytics"; | ||
| import { RequestsByStatusGraph } from "../gateway/indexer/components/RequestsByStatusGraph"; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Missing server-only import for server component.
This file contains an async server component (AsyncIndexerRequestsChartCard) that performs data fetching. Per coding guidelines, server component files should include the server-only import to prevent accidental client bundling.
+import "server-only";
import { ResponsiveSuspense } from "responsive-rsc";
import { getInsightStatusCodeUsage } from "@/api/analytics";
import { RequestsByStatusGraph } from "../gateway/indexer/components/RequestsByStatusGraph";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { ResponsiveSuspense } from "responsive-rsc"; | |
| import { getInsightStatusCodeUsage } from "@/api/analytics"; | |
| import { RequestsByStatusGraph } from "../gateway/indexer/components/RequestsByStatusGraph"; | |
| import "server-only"; | |
| import { ResponsiveSuspense } from "responsive-rsc"; | |
| import { getInsightStatusCodeUsage } from "@/api/analytics"; | |
| import { RequestsByStatusGraph } from "../gateway/indexer/components/RequestsByStatusGraph"; |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsx
lines 1-4, this async server component performs data fetching but is missing the
required "server-only" import; add import 'server-only'; as the very first line
of the file (before any other imports) to ensure the file is treated as a
server-only module and not bundled for the client.
| import { ResponsiveSuspense } from "responsive-rsc"; | ||
| import type { ThirdwebClient } from "thirdweb"; | ||
| import type { Project } from "@/api/project/projects"; | ||
| import type { Range } from "@/components/analytics/date-range-selector"; | ||
| import { LoadingChartState } from "@/components/analytics/empty-chart-state"; | ||
| import { TransactionsChartCardAsync } from "../components/Transactions"; | ||
| import { AIAnalyticsChartCard } from "./ai-card"; | ||
| import { AllWalletConnectionsChart } from "./all-wallet-connections-chart"; | ||
| import { ProjectHighlightCard } from "./highlights-card"; | ||
| import { IndexerRequestsChartCard } from "./indexer-card"; | ||
| import { RPCRequestsChartCard } from "./rpc-card"; | ||
| import type { PageParams, PageSearchParams } from "./types"; | ||
| import { X402RequestsChartCard } from "./x402-card"; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Missing server-only import for server component.
This async server component orchestrates multiple analytics cards and performs data fetching. Add the server-only import to prevent accidental client bundling.
+import "server-only";
import { ResponsiveSuspense } from "responsive-rsc";
import type { ThirdwebClient } from "thirdweb";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { ResponsiveSuspense } from "responsive-rsc"; | |
| import type { ThirdwebClient } from "thirdweb"; | |
| import type { Project } from "@/api/project/projects"; | |
| import type { Range } from "@/components/analytics/date-range-selector"; | |
| import { LoadingChartState } from "@/components/analytics/empty-chart-state"; | |
| import { TransactionsChartCardAsync } from "../components/Transactions"; | |
| import { AIAnalyticsChartCard } from "./ai-card"; | |
| import { AllWalletConnectionsChart } from "./all-wallet-connections-chart"; | |
| import { ProjectHighlightCard } from "./highlights-card"; | |
| import { IndexerRequestsChartCard } from "./indexer-card"; | |
| import { RPCRequestsChartCard } from "./rpc-card"; | |
| import type { PageParams, PageSearchParams } from "./types"; | |
| import { X402RequestsChartCard } from "./x402-card"; | |
| import "server-only"; | |
| import { ResponsiveSuspense } from "responsive-rsc"; | |
| import type { ThirdwebClient } from "thirdweb"; | |
| import type { Project } from "@/api/project/projects"; | |
| import type { Range } from "@/components/analytics/date-range-selector"; | |
| import { LoadingChartState } from "@/components/analytics/empty-chart-state"; | |
| import { TransactionsChartCardAsync } from "../components/Transactions"; | |
| import { AIAnalyticsChartCard } from "./ai-card"; | |
| import { AllWalletConnectionsChart } from "./all-wallet-connections-chart"; | |
| import { ProjectHighlightCard } from "./highlights-card"; | |
| import { IndexerRequestsChartCard } from "./indexer-card"; | |
| import { RPCRequestsChartCard } from "./rpc-card"; | |
| import type { PageParams, PageSearchParams } from "./types"; | |
| import { X402RequestsChartCard } from "./x402-card"; |
🤖 Prompt for AI Agents
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx
lines 1-14: this file is a server (async) React component that performs
server-side data fetching but is missing the required "use server-only" import;
add import "server-only" at the top of the file (as the first import) to mark
the module as server-only and prevent client-side bundling, then re-run
type/build to confirm no client imports remain.
PR-Codex overview
This PR introduces new analytics components and types for tracking various metrics in a project dashboard. It enhances the analytics capabilities by adding asynchronous data fetching and responsive UI components for RPC, AI, and transaction analytics.
Detailed summary
PageParamsandPageSearchParamstypes for better parameter management.AsyncRPCRequestsChartCardandRPCRequestsChartCardfor RPC analytics.AsyncAiAnalyticsandAIAnalyticsChartCardfor AI usage analytics.AsyncIndexerRequestsChartCardandIndexerRequestsChartCardfor indexer requests.AsyncX402RequestsChartandX402RequestsChartCardfor x402 settlements.AsyncAppHighlightsCardandProjectHighlightCardfor project highlights analytics.ProjectAnalyticsto integrate new analytics components and improve data fetching.Summary by CodeRabbit
New Features
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.