Dashboard: Chain Infra pages UI improvements #7906
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughThe PR restructures infrastructure pages and deploy flows: updates header/layout styles, introduces breadcrumbs, revamps the deploy form UI, switches deploy routing to use chain slugs instead of numeric IDs, and removes the infrastructure layout that previously performed team prefetch/redirect. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant DeployIndex as Deploy Entry Page
participant ChainsData as useAllChainsData
participant Router
User->>DeployIndex: Open /~/infrastructure/deploy
DeployIndex->>ChainsData: idToChain map
User->>DeployIndex: Select chainId
DeployIndex->>DeployIndex: slug = idToChain.get(chainId)?.slug || chainId
User->>Router: Click Continue
Router->>Router: Navigate to /~/infrastructure/deploy/{slug}
sequenceDiagram
autonumber
actor User
participant InfraPage as Infrastructure Pages
note over InfraPage: Previous layout with prefetch/redirect removed
User->>InfraPage: Request page under /~/infrastructure/...
InfraPage->>InfraPage: Render with page-level logic only
note over InfraPage: No layout-level team lookup/redirect
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
MananTank
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7906 +/- ##
=======================================
Coverage 56.53% 56.53%
=======================================
Files 904 904
Lines 58592 58592
Branches 4143 4143
=======================================
Hits 33126 33126
Misses 25360 25360
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
MananTank
force-pushed
the
08-25-dashboard_chain_infra_pages_ui_improvement
branch
from
486c41c to
b29d447
Compare
Merge activity
|
graphite-app
bot
changed the base branch from
08-25-dashboard_various_ui_tweaks_in_project_pages
to
graphite-base/7906
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on improving the layout and user experience in the `Deploy Infrastructure` section of the application. It refines component styles, enhances breadcrumb navigation, and updates form elements for better accessibility and consistency.
### Detailed summary
- Adjusted spacing in the `InfraServiceCard` component.
- Enhanced typography and layout in various sections.
- Added breadcrumb navigation for better user context.
- Updated the `DeployInfrastructureForm` styles for consistency.
- Improved chain selection interface with better guidance.
- Refined the subscription summary layout.
- Enhanced accessibility features across components.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
08-25-dashboard_chain_infra_pages_ui_improvement
branch
from
b29d447 to
157f4b9
Compare
graphite-app
bot
deleted the
08-25-dashboard_chain_infra_pages_ui_improvement
branch
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (10)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsx (4)
101-107: Add parentheses to clarify nullish coalescing precedenceAs written,
===binds tighter than??, which is intended here, but easy to misread. Parentheses improve clarity and avoid future refactors breaking behavior.Apply this diff:
- const serviceEnabled = - chainService?.enabled ?? chainService?.status === "enabled"; + const serviceEnabled = + chainService?.enabled ?? (chainService?.status === "enabled");
95-102: Avoid per-iteration allocation of SKU → service key map
skuToServiceKeyis recreated for every product iteration. Hoist to a top-level constant and reuse.Within this segment, update to:
- // Map sku to chain service key - const skuToServiceKey: Record<string, string> = { - "chain:infra:account_abstraction": "account-abstraction", - "chain:infra:insight": "insight", - "chain:infra:rpc": "rpc-edge", - }; - - const serviceKey = skuToServiceKey[product.sku]; + const serviceKey = SKU_TO_SERVICE_KEY[product.sku];And add this top-level constant (outside this changed hunk):
const SKU_TO_SERVICE_KEY = { "chain:infra:account_abstraction": "account-abstraction", "chain:infra:insight": "insight", "chain:infra:rpc": "rpc-edge", } as const;
133-137: Trim stray space in heading stringMinor copy polish.
- <h3 className="text-lg font-semibold">Subscription details </h3> + <h3 className="text-lg font-semibold">Subscription details</h3>
84-87: Extract and centralizecleanChainNamehelper
ThecleanChainNamefunction is duplicated in multiple locations. Centralizing it in a shared utility will prevent drift and make future updates easier.Affected files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsxapps/dashboard/src/@/components/blocks/NetworkSelectors.tsxapps/nebula/src/@/components/blocks/NetworkSelectors.tsxSuggested refactor:
- Create a shared util file, e.g.
src/utils/cleanChainName.ts:// src/utils/cleanChainName.ts export function cleanChainName(chainName: string): string { return chainName.replace("Mainnet", ""); }- In each of the above files, replace the local definition with an import:
- function cleanChainName(chainName: string) { - return chainName.replace("Mainnet", ""); - } + import { cleanChainName } from "@/utils/cleanChainName";This optional refactor centralizes the logic and reduces duplication.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx (3)
118-127: Copy tweak: “add-on” vs “service”Small wording improvement so hints read naturally whether the first selection is RPC or an add-on.
- return "Add one more add-on to unlock a 10% bundle discount"; + return "Add one more service to unlock a 10% bundle discount"; @@ - return "Add another add-on to increase your bundle discount to 15%"; + return "Add another service to increase your bundle discount to 15%"; @@ - return "Congrats! You unlocked the maximum 15% bundle discount"; + return "Congrats! You unlocked the maximum 15% bundle discount";
309-313: Mark decorative icon as aria-hidden in AlertPrevents double-announcement for screen readers.
- <InfoIcon className="size-5" /> + <InfoIcon aria-hidden className="size-5" />
514-525: Hide check indicator from assistive tech; it’s redundant with button stateThe floating check is purely visual. Hide it from SRs and expose selection via
aria-pressedon the button.- {!disabled && ( - <span - className={cn( - "absolute top-4 right-4 size-6 rounded-full border-2 border-active-border flex items-center justify-center transition-colors", - selected && "border-foreground bg-foreground", - )} - > - {selected && ( - <CheckIcon className="size-4 text-inverted-foreground" /> - )} - </span> - )} + {!disabled && ( + <span + aria-hidden + className={cn( + "absolute top-4 right-4 size-6 rounded-full border-2 border-active-border flex items-center justify-center transition-colors", + selected && "border-foreground bg-foreground", + )} + > + {selected && ( + <CheckIcon aria-hidden className="size-4 text-inverted-foreground" /> + )} + </span> + )}Additionally (outside this hunk), on the button element add:
aria-pressed={!!selected}apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx (3)
53-69: Use aria-current for the current breadcrumb segmentFor the terminal crumb, add
aria-current="page"so SRs correctly announce it as the current page.- <BreadcrumbItem> - <BreadcrumbLink>{cleanChainName(chain.name)}</BreadcrumbLink> - </BreadcrumbItem> + <BreadcrumbItem> + <BreadcrumbLink aria-current="page"> + {cleanChainName(chain.name)} + </BreadcrumbLink> + </BreadcrumbItem>
49-49: Optional: mark this as a Server Component explicitlyTo prevent accidental client imports later, consider adding the server-only marker.
Outside this hunk, at the very top of the file:
import "server-only";
85-87: Centralize cleanChainName helperThe
cleanChainNamefunction is currently defined in at least six places across the monorepo, making it easy for them to drift apart. Extract it into a single shared utility (for example,src/utils/chain.ts) and import it wherever needed.Files to update:
apps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/dashboard/src/@/components/blocks/NetworkSelectors.tsxapps/dashboard/src/@/components/contract-components/tables/NetworkSelectDropdown.tsxapps/nebula/src/@/components/blocks/NetworkSelectors.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsxExample extraction:
+ // src/utils/chain.ts + export function cleanChainName(chainName: string): string { + return chainName.replace("Mainnet", ""); + }Then in each file:
- function cleanChainName(chainName: string) { /* … */ } + import { cleanChainName } from 'src/utils/chain';This avoids duplication and keeps the logic consistent if we ever need to update the replacement rules.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (6)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx(7 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/layout.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/layout.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
🧠 Learnings (14)
📚 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)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.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)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.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)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : 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)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx
🧬 Code graph analysis (4)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx (1)
apps/dashboard/src/@/components/ui/alert.tsx (2)
Alert(63-63)AlertTitle(63-63)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsx (2)
apps/playground-web/src/hooks/chains.ts (1)
useAllChainsData(17-39)apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (1)
SingleNetworkSelector(152-298)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsx (2)
apps/dashboard/src/@/icons/ChainIcon.tsx (1)
ChainIconClient(16-41)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsx (1)
InfraServiceCard(15-45)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx (2)
apps/dashboard/src/@/icons/ChainIcon.tsx (1)
ChainIconClient(16-41)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx (1)
DeployInfrastructureForm(76-454)
⏰ 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 (6)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsx (1)
17-22: Spacing and heading scale update looks goodThe reduced gaps and larger h3 improve hierarchy and readability of the card header without affecting semantics.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/page.tsx (1)
69-89: Header refactor improves visual hierarchy and consistencyBordered header + containerized layout aligns with the new dashboard patterns. No functional impact; nice cleanup.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsx (1)
31-39: Header structure and copy look goodConsistent with the new pattern introduced across infra pages; nice consolidation.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx (2)
151-189: Pricing math reads correctly and is easy to followSubtotal uses per-period price, annual discount applied against undiscounted monthly*months, bundle discount layered on top, and totals/savings reconcile. Nice.
498-513: Service icon block UI polish looks goodThe elevated icon affordance aligns with the rest of the redesign and improves scannability.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/[chain_id]/page.tsx (1)
72-89: Header layout and chain avatar presentation are solidMatches the infra index page’s new header; good consistency.
| <PopoverTrigger asChild> | ||
| <div className="text-muted-foreground hover:text-foreground cursor-pointer text-sm flex items-center gap-2"> | ||
| <BadgeQuestionMarkIcon className="w-4 h-4" /> | ||
| Can't find your chain? | ||
| </div> | ||
| </PopoverTrigger> | ||
| <PopoverContent align="start" className="!max-w-xl text-sm"> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Make the popover trigger a real button for accessibility
The trigger is a clickable div with no keyboard support. Use the Button primitive to ensure focus/keyboard/ARIA semantics.
- <PopoverTrigger asChild>
- <div className="text-muted-foreground hover:text-foreground cursor-pointer text-sm flex items-center gap-2">
- <BadgeQuestionMarkIcon className="w-4 h-4" />
- Can't find your chain?
- </div>
- </PopoverTrigger>
+ <PopoverTrigger asChild>
+ <Button
+ type="button"
+ variant="link"
+ size="sm"
+ className="p-0 h-auto text-muted-foreground hover:text-foreground text-sm flex items-center gap-2"
+ >
+ <BadgeQuestionMarkIcon className="w-4 h-4" aria-hidden />
+ <span>Can't find your chain?</span>
+ </Button>
+ </PopoverTrigger>📝 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.
| <PopoverTrigger asChild> | |
| <div className="text-muted-foreground hover:text-foreground cursor-pointer text-sm flex items-center gap-2"> | |
| <BadgeQuestionMarkIcon className="w-4 h-4" /> | |
| Can't find your chain? | |
| </div> | |
| </PopoverTrigger> | |
| <PopoverContent align="start" className="!max-w-xl text-sm"> | |
| <PopoverTrigger asChild> | |
| <Button | |
| type="button" | |
| variant="link" | |
| size="sm" | |
| className="p-0 h-auto text-muted-foreground hover:text-foreground text-sm flex items-center gap-2" | |
| > | |
| <BadgeQuestionMarkIcon className="w-4 h-4" aria-hidden /> | |
| <span>Can't find your chain?</span> | |
| </Button> | |
| </PopoverTrigger> | |
| <PopoverContent align="start" className="!max-w-xl text-sm"> |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsx
around lines 77-83 the PopoverTrigger is wrapped around a plain div which is not
keyboard-accessible; replace that div with the Button primitive (kept asChild on
PopoverTrigger) so it gains native keyboard/focus/ARIA semantics, apply the same
classes to the Button (or use an appropriate Button variant) and ensure the
Button has type="button" and an accessible label (visible text is fine) so the
popover trigger is operable via keyboard and screen readers.
| <Link | ||
| href={`/team/${team_slug}/~/infrastructure/deploy/${idToChain.get(chainId)?.slug || chainId}`} | ||
| > | ||
| Continue <ArrowRightIcon className="ml-2 w-4 h-4" /> | ||
| </Link> | ||
| </Button> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use NavLink for internal navigation (repo convention)
Dashboard apps should use NavLink to inherit active states and consistent styling.
Apply this diff within the changed block:
- <Button asChild className="w-fit rounded-full" size="sm">
- <Link
- href={`/team/${team_slug}/~/infrastructure/deploy/${idToChain.get(chainId)?.slug || chainId}`}
- >
- Continue <ArrowRightIcon className="ml-2 w-4 h-4" />
- </Link>
- </Button>
+ <Button asChild className="w-fit rounded-full" size="sm">
+ <NavLink
+ href={`/team/${team_slug}/~/infrastructure/deploy/${idToChain.get(chainId)?.slug || chainId}`}
+ >
+ Continue <ArrowRightIcon className="ml-2 w-4 h-4" />
+ </NavLink>
+ </Button>Also update imports (outside this hunk):
- import Link from "next/link";
+ import { NavLink } from "@/components/ui/NavLink";🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/page.tsx
around lines 127 to 133, replace the internal Next.js Link usage with the
project's NavLink component so the link inherits active states and styling;
change the JSX to render <NavLink
href={`/team/${team_slug}/~/infrastructure/deploy/${idToChain.get(chainId)?.slug
|| chainId}`}>Continue <ArrowRightIcon .../></NavLink> inside the Button and
update the top-level imports to remove `import Link from "next/link";` and add
`import { NavLink } from "@/components/ui/NavLink";`.
PR-Codex overview
This PR focuses on improving the layout and styling of the infrastructure deployment pages in the application. It enhances user experience by updating component structures, styles, and adding breadcrumb navigation for better accessibility.
Detailed summary
InfraServiceCardcomponent styles (spacing and font sizes).DeployInfrastructureOnChainPage.DeployInfrastructurePagewith updated headers and card designs.DeployInfrastructureFormstyling and layout.DeployInfrastructureForm.Summary by CodeRabbit
New Features
Style
Refactor