Skip to content

Conversation

@jnsdls
Copy link
Member

@jnsdls jnsdls commented Aug 18, 2025

TL;DR

Made RPC optional in the Chain Infrastructure checkout flow, with a warning dialog when proceeding without it.

What changed?

  • Made RPC service optional instead of required in the Chain Infrastructure deployment form
  • Added a warning dialog that appears when users try to proceed to checkout with Insight or Account Abstraction but without RPC
  • Added analytics tracking for when users acknowledge the warning and proceed without RPC
  • Updated the checkout logic to handle RPC as an optional service
  • Added a new URL search parameter rpc to track the RPC selection state

How to test?

  1. Navigate to the Chain Infrastructure deployment page
  2. Toggle off RPC while having Insight and/or Account Abstraction selected
  3. Click "Proceed to Checkout"
  4. Verify the warning dialog appears explaining the risks of proceeding without RPC
  5. Confirm the dialog and verify the checkout process continues
  6. Verify that selecting no services disables the checkout button

Why make this change?

While RPC is recommended for optimal functionality of Insight and Account Abstraction services, some users may have their own RPC solutions or specific requirements. This change gives users more flexibility in their infrastructure choices while clearly communicating the potential risks and limitations of omitting RPC from their setup.

Summary by CodeRabbit

  • New Features

    • RPC service is now optional with a toggle and updated labeling.
    • RPC selection persists via a URL parameter for easier sharing and revisit.
    • Pricing and discounts update dynamically based on selected addons, with bundle and annual discounts applied.
    • Checkout includes only chosen addons; a warning dialog appears if proceeding with other addons but without RPC, with an option to continue.
    • “Proceed to Checkout” is disabled when no services are selected.
    • UI copy updated to reflect RPC optionality.
    • Added analytics tracking when a user confirms proceeding without RPC.
  • Chores

    • Unified dialog component imports to the project UI wrapper.

@changeset-bot
Copy link

changeset-bot bot commented Aug 18, 2025

⚠️ No Changeset found

Latest commit: cea80d6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Aug 18, 2025

Walkthrough

Makes RPC optional in the deploy flow with URL-persisted state, updates selection/pricing/checkout logic, adds a warning modal when proceeding without RPC (which logs an analytics event), adds an analytics reporter, and introduces an rpc deploy search param. Also standardizes DialogDescription imports to the local UI wrapper.

Changes

Cohort / File(s) Summary of changes
Analytics event reporter
apps/dashboard/src/@/analytics/report.ts
Adds reportChainInfraRpcOmissionAgreed(properties) to capture "chain infra checkout rpc omission agreed" via posthog.capture, forwarding chainId, frequency, includeInsight, and includeAccountAbstraction.
Deploy form logic and UI
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx
Makes RPC optional with URL-backed rpcParam state, updates includeRPC/includeInsight/includeAA flows, recalculates selected services, pricing, bundle/annual discounts, conditions SKU construction, disables checkout when no services selected, shows an RPC-omission warning dialog when proceeding without RPC while other addons are selected, logs analytics on confirm, and proceeds to checkout.
Search params
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts
Adds rpc: parseAsStringEnum(["on","off"]).withDefault("on") to exported searchParams.
DialogDescription import source updates
apps/dashboard/src/@/components/project/create-project-modal/index.tsx, apps/dashboard/src/app/(app)/team/[team_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx, apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/delete-webhook-modal.tsx
Replaces DialogDescription import from @radix-ui/react-dialog with the local UI wrapper import (@/components/ui/dialog) in three modal components; usage unchanged.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant F as DeployInfrastructureForm
  participant M as RPC Omission Modal
  participant A as Analytics
  participant C as Checkout/Router

  U->>F: Click "Proceed to Checkout"
  alt No addons selected
    F-->>U: Button disabled
  else Addons selected AND includeRPC true
    F->>C: Redirect with SKUs (including RPC)
  else Addons selected AND includeRPC false
    F->>M: Open warning dialog
    U->>M: Confirm proceed
    M->>A: reportChainInfraRpcOmissionAgreed(props)
    M->>F: Confirmed
    F->>C: Redirect with SKUs (RPC omitted)
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch Make_RPC_optional_in_chain_infrastructure_checkout

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@vercel vercel bot temporarily deployed to Preview – wallet-ui August 18, 2025 17:52 Inactive
@vercel
Copy link

vercel bot commented Aug 18, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
thirdweb-www Ready Ready Preview Comment Aug 18, 2025 6:22pm
4 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
docs-v2 Skipped Skipped Aug 18, 2025 6:22pm
nebula Skipped Skipped Aug 18, 2025 6:22pm
thirdweb_playground Skipped Skipped Aug 18, 2025 6:22pm
wallet-ui Skipped Skipped Aug 18, 2025 6:22pm

@vercel vercel bot temporarily deployed to Preview – docs-v2 August 18, 2025 17:52 Inactive
@vercel vercel bot temporarily deployed to Preview – nebula August 18, 2025 17:52 Inactive
@github-actions github-actions bot added the Dashboard Involves changes to the Dashboard. label Aug 18, 2025
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground August 18, 2025 17:52 Inactive
Copy link
Member Author

jnsdls commented Aug 18, 2025


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • merge-queue - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required 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.

@jnsdls jnsdls marked this pull request as ready for review August 18, 2025 17:53
@jnsdls jnsdls requested review from a team as code owners August 18, 2025 17:53
@codecov
Copy link

codecov bot commented Aug 18, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 56.54%. Comparing base (92896dd) to head (cea80d6).
⚠️ Report is 10 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7867   +/-   ##
=======================================
  Coverage   56.54%   56.54%           
=======================================
  Files         904      904           
  Lines       58586    58586           
  Branches     4140     4140           
=======================================
  Hits        33126    33126           
  Misses      25354    25354           
  Partials      106      106           
Flag Coverage Δ *Carryforward flag
packages 56.54% <ø> (ø) Carriedforward from 92896dd

*This pull request uses carry forward flags. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 18, 2025

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
thirdweb (esm) 64.06 KB (0%) 1.3 s (0%) 210 ms (+162.93% 🔺) 1.5 s
thirdweb (cjs) 357.05 KB (0%) 7.2 s (0%) 690 ms (+17.84% 🔺) 7.9 s
thirdweb (minimal + tree-shaking) 5.73 KB (0%) 115 ms (0%) 64 ms (+1164.23% 🔺) 178 ms
thirdweb/chains (tree-shaking) 526 B (0%) 11 ms (0%) 80 ms (+5545.76% 🔺) 91 ms
thirdweb/react (minimal + tree-shaking) 19.15 KB (0%) 383 ms (0%) 67 ms (+478.71% 🔺) 450 ms

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (5)
apps/dashboard/src/@/analytics/report.ts (1)

548-549: Nit: consider a clearer, more action-oriented event name

To align with our common “ ” style (e.g., “contract deployed”, “upsell clicked”), consider “chain infra checkout proceeded without rpc” or “chain infra checkout rpc omission confirmed”. This tends to read more naturally in funnels.

Apply this minimal change if you prefer “confirmed”:

-  posthog.capture("chain infra checkout rpc omission agreed", properties);
+  posthog.capture("chain infra checkout rpc omission confirmed", properties);
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx (4)

3-17: Use dashboard UI primitives for DialogDescription instead of Radix direct import

In dashboard apps, UI primitives should come from @/components/ui/*. Importing DialogDescription directly from @radix-ui/react-dialog breaks that convention and risks styling/behavior divergence.

Apply:

-import { DialogDescription } from "@radix-ui/react-dialog";
 ...
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";

222-230: Gate checkout when addons selected without RPC — UX and logic make sense

This matches the new policy by warning before allowing checkout without RPC. Nice.

Consider optionally reporting a separate “rpc omission modal shown” event to measure how often users reach the warning vs. confirm it.


240-257: Minor UX suggestion: explicitly label RPC as optional in the card

The comment mentions “RPC (now optional)”, but the visible label is still just “RPC”. If you want the UI to reinforce this change, update the label or add an “Optional” badge for clarity.

Example tweak:

- label={SERVICE_CONFIG.rpc.label}
+ label={`${SERVICE_CONFIG.rpc.label} (optional)`}

Or render a small “Optional” badge next to the label similar to “Always Included”.


396-444: Modal copy and analytics on confirm look good; add a Cancel for clearer affordance

The warning is clear and the confirm button correctly reports reportChainInfraRpcOmissionAgreed before proceeding.

Add a secondary “Cancel” button to improve the escape hatch and make the choice explicit:

           <DialogFooter className="gap-2">
+            <Button
+              variant="secondary"
+              onClick={() => setShowRpcWarning(false)}
+            >
+              Cancel
+            </Button>
             <Button
               onClick={() => {
                 reportChainInfraRpcOmissionAgreed({
                   chainId,
                   frequency: frequency === "annual" ? "annual" : "monthly",
                   includeInsight,
                   includeAccountAbstraction: includeAA,
                 });
                 setShowRpcWarning(false);
                 proceedToCheckout();
               }}
               variant="destructive"
             >
               I understand — proceed without RPC
             </Button>
           </DialogFooter>
📜 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 92896dd and 05485d3.

📒 Files selected for processing (3)
  • apps/dashboard/src/@/analytics/report.ts (1 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx (9 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts (1 hunks)
🧰 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 @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless 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/@/analytics/report.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.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/@/analytics/report.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.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
Use NavLink for internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Use cn() from @/lib/utils for conditional class logic
Use design system tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components (Node edge): Start files with import "server-only";
Client Components (browser): Begin files with 'use client';
Always call getAuthToken() to retrieve JWT from cookies on server side
Use Authorization: Bearer header – never embed tokens in URLs
Return typed results (e.g., Project[], User[]) – avoid any
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stable queryKeys for React Query cache hits
Configure staleTime/cacheTime in React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never import posthog-js in server components

Files:

  • apps/dashboard/src/@/analytics/report.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx
🧠 Learnings (6)
📚 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 src/@/analytics/report.ts : Review `src/@/analytics/report.ts` before adding analytics events to check for duplicates

Applied to files:

  • apps/dashboard/src/@/analytics/report.ts
📚 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 src/@/analytics/report.ts : Analytics event name: human-readable `<subject> <verb>` (e.g., "contract deployed"); function: `report<Subject><Verb>` (PascalCase)

Applied to files:

  • apps/dashboard/src/@/analytics/report.ts
📚 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/src/@/analytics/report.ts : Typed properties: accept a single `properties` object and pass it unchanged to `posthog.capture`.

Applied to files:

  • apps/dashboard/src/@/analytics/report.ts
📚 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/src/@/analytics/report.ts : Mandatory JSDoc: explain Why the event exists and Who owns it (`username`).

Applied to files:

  • apps/dashboard/src/@/analytics/report.ts
📚 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/src/@/analytics/report.ts : Reporting helper: `report<Subject><Verb>` (PascalCase); all live in `src/@/analytics/report.ts`.

Applied to files:

  • apps/dashboard/src/@/analytics/report.ts
📚 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.tsx
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts (1)
  • searchParams (3-7)
apps/dashboard/src/@/types/billing.ts (1)
  • ChainInfraSKU (18-21)
apps/dashboard/src/@/analytics/report.ts (1)
  • reportChainInfraRpcOmissionAgreed (542-549)
⏰ 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 (10)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts (1)

6-7: LGTM: Added rpc query param with safe default

Adding rpc as a "on" | "off" enum with default "on" integrates cleanly with nuqs and keeps existing behavior by default. No further concerns here.

apps/dashboard/src/@/analytics/report.ts (2)

529-550: Event helper looks consistent with our analytics conventions

  • Function name follows report<Subject><Verb> pattern.
  • Event name is human-readable.
  • Typed single properties object is forwarded unchanged to posthog.capture.
  • JSDoc includes “Why” and ownership.

No functional issues spotted.


529-550: No duplicate analytics event or helper found

  • Searched all .ts/.tsx files under apps/ for reportChainInfraRpcOmissionAgreed or "chain infra checkout rpc omission"; only occurrences are:
    • Definition in apps/dashboard/src/@/analytics/report.ts
    • Single import and usage in deploy-infrastructure-form.client.tsx
  • No other helpers or events with the same or similar name exist.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx (7)

56-58: RPC now optional in config — good change

Switching required to false for RPC aligns the config with the new optional flow.


92-96: URL-backed rpcParam state is correctly wired

Persisting the RPC toggle via useQueryState("rpc") with default “on” is consistent with the new searchParams and keeps state shareable/bookmarkable.


103-112: Selection flow correctly respects optional RPC

includeRPC drives both selected list and pricing via selectedOrder. This cleanly integrates with Insight/AA flags.


127-134: Selected services map includes rpc flag — consistent with pricing/totals

Good use of a single source of truth for the totals computation.


191-191: State for RPC warning modal

Modal state is localized and simple — no issues here.


193-221: Checkout URL creation and SKU composition look correct

  • SKUs include RPC only when selected.
  • Error/success paths are handled with toast and redirect.
  • Wrapped in startTransition to avoid blocking UI.

No functional issues spotted.


378-384: Disabling checkout when nothing is selected is correct

Prevents empty carts and aligns with SKU-building assumptions.

@jnsdls jnsdls force-pushed the Make_RPC_optional_in_chain_infrastructure_checkout branch from 05485d3 to cea80d6 Compare August 18, 2025 18:13
@vercel vercel bot temporarily deployed to Preview – docs-v2 August 18, 2025 18:13 Inactive
@vercel vercel bot temporarily deployed to Preview – nebula August 18, 2025 18:13 Inactive
@vercel vercel bot temporarily deployed to Preview – wallet-ui August 18, 2025 18:13 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground August 18, 2025 18:13 Inactive
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🔭 Outside diff range comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx (1)

26-29: Copy inconsistency: “Delete Alert” vs “Delete Webhook” and webhook mention

Title says “Delete Alert” but the description references “webhook” and the button says “Delete Webhook”. This is user-facing and confusing.

Apply this diff to align terminology with “Alert”:

-          <DialogDescription>
-            You will no longer receive notifications from this webhook.
-          </DialogDescription>
+          <DialogDescription>
+            You will no longer receive notifications from this alert.
+          </DialogDescription>
@@
-          <Button
+          <Button
             className="min-w-28 gap-2"
             onClick={props.onConfirm}
             variant="destructive"
           >
             {props.isPending && <Spinner className="size-4" />}
-            Delete Webhook
+            Delete Alert
           </Button>

Also applies to: 41-47

🧹 Nitpick comments (1)
apps/dashboard/src/@/components/project/create-project-modal/index.tsx (1)

1-9: Consider adding 'use client' — this file uses React hooks and React Query

This module uses useState, react-hook-form, React Query, and toasts, so it’s intended to run on the client. While it will work when imported by a client component, adding the directive makes intent explicit and avoids accidental server import regressions.

Apply at the top of the file:

+'use client';
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import type { ProjectService } from "@thirdweb-dev/service-utils";
📜 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 05485d3 and cea80d6.

📒 Files selected for processing (6)
  • apps/dashboard/src/@/analytics/report.ts (1 hunks)
  • apps/dashboard/src/@/components/project/create-project-modal/index.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx (9 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts (1 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/delete-webhook-modal.tsx (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/delete-webhook-modal.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/dashboard/src/@/analytics/report.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.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 @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless 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/@/components/project/create-project-modal/index.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts
**/*.{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/@/components/project/create-project-modal/index.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts
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
Use NavLink for internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Use cn() from @/lib/utils for conditional class logic
Use design system tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components (Node edge): Start files with import "server-only";
Client Components (browser): Begin files with 'use client';
Always call getAuthToken() to retrieve JWT from cookies on server side
Use Authorization: Bearer header – never embed tokens in URLs
Return typed results (e.g., Project[], User[]) – avoid any
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stable queryKeys for React Query cache hits
Configure staleTime/cacheTime in React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never import posthog-js in server components

Files:

  • apps/dashboard/src/@/components/project/create-project-modal/index.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts
🧠 Learnings (3)
📚 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/@/components/project/create-project-modal/index.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/@/components/project/create-project-modal/index.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/@/components/project/create-project-modal/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: Size
  • GitHub Check: E2E Tests (pnpm, webpack)
  • GitHub Check: Unit Tests
  • GitHub Check: E2E Tests (pnpm, vite)
  • GitHub Check: Build Packages
  • GitHub Check: Lint Packages
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/@/components/project/create-project-modal/index.tsx (1)

16-24: DialogDescription moved to local UI wrapper — aligned with dashboard UI guidelines

Good move importing DialogDescription from "@/components/ui/dialog" alongside the other dialog primitives. This keeps Dialog usage consistent and themeable via the shared wrapper.

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/search-params.ts (2)

3-7: Add rpc search param — defaults to "on" with strict enum parsing

The on/off enum with a sensible "on" default matches the new optional-RPC UX and keeps URLs stable. Looks good.


1-7: No client-side imports detected for the new server‐only parser

  • Ran a repo-wide search for imports of apps/dashboard/src/app/.../infrastructure/deploy/search-params.ts in .ts/.tsx files: none found.
  • The only imports from "nuqs/server" appear in App Router page.tsx files (server components by default) and use import type (erased at runtime).
  • No client components pull in this module, so there’s no bundling risk.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx (1)

1-9: DialogDescription import consolidated to local UI wrapper

Consistent with the design system usage in dashboard — good change.

@jnsdls jnsdls merged commit 6b80f75 into main Aug 18, 2025
25 checks passed
@jnsdls jnsdls deleted the Make_RPC_optional_in_chain_infrastructure_checkout branch August 18, 2025 18:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Dashboard Involves changes to the Dashboard.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants