[Dashboard] Display eip7702 support status #8060
Conversation
Co-authored-by: joaquim.verges <[email protected]>
|
Cursor Agent can help with this pull request. Just |
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds EIP-7702 support detection to ChainLiveStats via a new internal hook that probes RPCs with an eth_estimateGas call, normalizes RPC URLs, updates UI labels, replaces Block Gas Limit with an EIP-7702 status section, and tweaks skeleton widths. No public API signature changes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant C as ChainLiveStats
participant H as useEIP7702Support
participant N as RPC Normalizer
participant R as RPC Endpoint
participant Q as React Query
U->>C: Open chain page
C->>H: init with rpc
H->>N: normalize rpc URL (inject clientId, env redirect)
N-->>H: normalizedRpc
H->>Q: query(["eip-7702-support",{rpcUrl}])
alt cached
Q-->>H: isSupported
else
H->>R: JSON-RPC eth_estimateGas
alt success
R-->>H: result
H-->>Q: store true/false
else error
R--x H: error
H-->>Q: store false
end
Q-->>H: isSupported
end
H-->>C: {isSupported, isLoading, isError}
C-->>U: render EIP-7702 badge/skeleton and Latest Block
note over H,Q: query key ["eip-7702-support",{rpcUrl}] — no refetchOnWindowFocus
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
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. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8060 +/- ##
=======================================
Coverage 56.51% 56.51%
=======================================
Files 904 904
Lines 58865 58865
Branches 4170 4170
=======================================
Hits 33269 33269
Misses 25491 25491
Partials 105 105
🚀 New features to boost your workflow:
|
size-limit report 📦
|
Co-authored-by: joaquim.verges <[email protected]>
![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 (4)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx (4)
63-122: Harden the 7702 probe: type return, add headers/timeout, handle JSON‑RPC errors, and cache long.
- Add explicit return type for the hook.
- Send Content-Type header and use an AbortController timeout to avoid hanging queries.
- Treat JSON-RPC error objects explicitly; check result type is hex string.
- Since support is static, set a long staleTime and disable retries; optionally extend cache/gc time.
Apply:
-function useEIP7702Support(_rpcUrl: string) { +import type { UseQueryResult } from "@tanstack/react-query"; + +function useEIP7702Support(_rpcUrl: string): UseQueryResult<{ isSupported: boolean }, unknown> { let rpcUrl = _rpcUrl.replace( @@ return useQuery({ enabled: !!rpcUrl, queryFn: async () => { - try { - const res = await fetch(rpcUrl, { - body: JSON.stringify({ + const controller = new AbortController(); + const timer = setTimeout(() => controller.abort(), 12_000); + try { + const res = await fetch(rpcUrl, { + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ id: 1, jsonrpc: "2.0", method: "eth_estimateGas", params: [ { from: "0xdeadbeef00000000000000000000000000000000", to: "0xdeadbeef00000000000000000000000000000000", data: "0x0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000", value: "0x0" }, "latest", { "0xdeadbeef00000000000000000000000000000000": { code: "0xef01000000000000000000000000000000000000000001" } } ], }), method: "POST", + signal: controller.signal, }); - const json = await res.json(); - - // If the response has a valid result object, EIP-7702 is enabled - return { - isSupported: !!json.result, - }; + const json: { result?: unknown; error?: unknown } = await res.json(); + const okHex = typeof json.result === "string" && /^0x[0-9a-f]+$/i.test(json.result); + if (!res.ok || json && "error" in json) { + return { isSupported: false }; + } + return { isSupported: okHex }; } catch { // If the request fails or errors, EIP-7702 is not supported return { isSupported: false, }; } + finally { + clearTimeout(timer); + } }, queryKey: ["eip-7702-support", { rpcUrl }], - refetchInterval: false, // Don't refetch this as it's unlikely to change + refetchInterval: false, // static per chain + staleTime: 24 * 60 * 60 * 1000, + retry: false, refetchOnWindowFocus: false, }); }
63-77: Deduplicate RPC URL normalization into a small util.Both hooks repeat the same env/clientId logic. Extract to avoid drift.
Add:
// helper (place near top of file or shared util) function normalizeRpcUrlForEnv(raw: string): string { let url = raw.replace("${THIRDWEB_API_KEY}", NEXT_PUBLIC_DASHBOARD_CLIENT_ID); if (hostnameEndsWith(url, "rpc.thirdweb.com") && !isProd) { url = url.replace("rpc.thirdweb.com", "rpc.thirdweb-dev.com"); } return url; }Then change:
- let rpcUrl = _rpcUrl.replace( /* ... */ ); - // env switch ... + const rpcUrl = normalizeRpcUrlForEnv(_rpcUrl);You can optionally apply the same to useChainStatswithRPC for consistency.
171-173: Format block number for readability.Thousand separators improve scanability without changing meaning.
- <p className="fade-in-0 animate-in">{stats.data.blockNumber}</p> + <p className="fade-in-0 animate-in">{stats.data.blockNumber.toLocaleString()}</p>
184-197: Consider not conflating network errors with “Disabled”.If the RPC is down, labeling as “Disabled” may be misleading. Optional: show “Unknown” with a neutral badge on isError.
- {eip7702Support.isError ? ( - <Badge variant="destructive">Disabled</Badge> - ) : eip7702Support.data ? ( + {eip7702Support.isError ? ( + <Badge variant="secondary">Unknown</Badge> + ) : eip7702Support.data ? ( <Badge variant={eip7702Support.data.isSupported ? "success" : "destructive"}> {eip7702Support.data.isSupported ? "Enabled" : "Disabled"} </Badge>
📜 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 (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
🧠 Learnings (8)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Components that listen to user events, animations or live updates.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`tanstack/react-query`) for all client data fetching.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card)
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`tanstack/react-query`)
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx (2)
apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_DASHBOARD_CLIENT_ID(1-2)apps/dashboard/src/@/constants/env-utils.ts (1)
isProd(1-3)
🔇 Additional comments (3)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx (3)
5-5: Correct UI import path for Badge.Matches dashboard UI import guidelines. No issues.
126-126: Hook usage looks good.Query key is stable via rpcUrl, and the UI handles loading/error states.
184-191: Verify Badge supports variant="success".If the Badge variants are limited to default/secondary/destructive/outline, “success” will render incorrectly.
Would you confirm the Badge variant union? If needed, swap to
variant="default"and addclassName="bg-success text-success-foreground"via tokens.
joaquim-verges
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx (2)
63-77: Deduplicate RPC URL normalizationThis logic duplicates Lines 15–27. Extract a shared helper to avoid drift between hooks.
Apply within this range:
-function useEIP7702Support(_rpcUrl: string) { - let rpcUrl = _rpcUrl.replace( - // eslint-disable-next-line no-template-curly-in-string - // biome-ignore lint/suspicious/noTemplateCurlyInString: this is expected in this case - "${THIRDWEB_API_KEY}", - NEXT_PUBLIC_DASHBOARD_CLIENT_ID, - ); - - // based on the environment hit dev or production - if (hostnameEndsWith(rpcUrl, "rpc.thirdweb.com")) { - if (!isProd) { - rpcUrl = rpcUrl.replace("rpc.thirdweb.com", "rpc.thirdweb-dev.com"); - } - } +function useEIP7702Support(_rpcUrl: string) { + const rpcUrl = normalizeRpcUrlForDashboard(_rpcUrl);Add once (outside this hunk), near the top of the file:
function normalizeRpcUrlForDashboard(url: string): string { let rpcUrl = url.replace( "${THIRDWEB_API_KEY}", NEXT_PUBLIC_DASHBOARD_CLIENT_ID, ); if (hostnameEndsWith(rpcUrl, "rpc.thirdweb.com") && !isProd) { rpcUrl = rpcUrl.replace("rpc.thirdweb.com", "rpc.thirdweb-dev.com"); } return rpcUrl; }
78-122: Harden query: headers, abort, typing, and cache policy
- Send Content-Type header and respect React Query abort signal.
- Treat non-2xx as errors; check for json.error.
- Add sensible staleTime (static property) and explicit return type.
Apply within this range:
- return useQuery({ + return useQuery({ enabled: !!rpcUrl, - queryFn: async () => { + queryFn: async ({ signal }) => { try { - const res = await fetch(rpcUrl, { + const res = await fetch(rpcUrl, { body: JSON.stringify({ id: 1, jsonrpc: "2.0", method: "eth_estimateGas", params: [ { from: "0xdeadbeef00000000000000000000000000000000", to: "0xdeadbeef00000000000000000000000000000000", data: "0x0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000", value: "0x0", }, "latest", { "0xdeadbeef00000000000000000000000000000000": { code: "0xef01000000000000000000000000000000000000000001", }, }, ], }), method: "POST", + headers: { "Content-Type": "application/json" }, + signal, }); - const json = await res.json(); - - // If the response has a valid result object, EIP-7702 is enabled - return { - isSupported: !!json.result, - }; + if (!res.ok) { + throw new Error(`RPC ${res.status}`); + } + const json: { result?: unknown; error?: unknown } = await res.json(); + const hasResult = typeof json.result === "string"; + return { isSupported: hasResult }; } catch { // If the request fails or errors, EIP-7702 is not supported return { isSupported: false, }; } }, queryKey: ["eip-7702-support", { rpcUrl }], - refetchInterval: false, // Don't refetch this as it's unlikely to change + staleTime: 24 * 60 * 60 * 1000, // static per chain + refetchInterval: false, // Don't refetch this as it's unlikely to change refetchOnWindowFocus: false, });Add explicit typing (outside this hunk):
- import { useQuery } from "@tanstack/react-query"; + import { useQuery, type UseQueryResult } from "@tanstack/react-query";And annotate the hook signature (within Line 63):
-function useEIP7702Support(_rpcUrl: string) { +type EIP7702Support = { isSupported: boolean }; +function useEIP7702Support(_rpcUrl: string): UseQueryResult<EIP7702Support, Error> {
📜 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 (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
🧠 Learnings (7)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`tanstack/react-query`) for all client data fetching.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card)
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`tanstack/react-query`)
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx (2)
apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_DASHBOARD_CLIENT_ID(1-2)apps/dashboard/src/@/constants/env-utils.ts (1)
isProd(1-3)
⏰ 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). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx (4)
5-5: Good: design‑system Badge importMatches dashboard UI guidelines; keeps primitives consistent.
126-126: Hook usage looks goodStable queryKey and no refetch aligns with “static property” intent.
171-172: UI copy: LGTM“Latest Block” is clearer than “Block Height.”
184-201: Badge 'success' variant is supported — no change required.
BadgeProps in apps/wallet-ui/src/components/ui/badge.tsx (and the nebula mirror) include "success" and TeamPlanBadge already uses it; the optional "Unknown" change for network errors is fine if you want to distinguish errors.
joaquim-verges
deleted the
cursor/display-eip7702-support-status-cd7c
branch
[Dashboard] Feature: Add EIP-7702 Support detection to Chain Overview
AI-32
Notes for the reviewer
This PR replaces the "Block Gas Limit" stat in the Chain Overview card with "EIP-7702 Support".
useEIP7702Supporthook was created to detect support by sending a specificeth_estimateGasRPC request, as outlined in the task.result, EIP-7702 is considered "Enabled" (green badge); otherwise, it's "Disabled" (red badge).How to test
/dashboard/avalanche-c).Slack Thread
PR-Codex overview
This PR focuses on enhancing the
ChainLiveStatscomponent by adding support for EIP-7702 and refactoring existing code to remove the block gas limit display. It introduces a new function to check EIP-7702 support via RPC and updates the UI accordingly.Detailed summary
blockGasLimitfrom the return object.useEIP7702Supportfunction to check EIP-7702 support via RPC.ChainLiveStatsto include EIP-7702 support status.Summary by CodeRabbit
New Features
Style
Chores