Make RPC optional in chain infrastructure checkout (#7867)

Author: jnsdls

apps/dashboard/src/@/analytics/report.ts

@@ -526,3 +526,24 @@ export function reportTokenUpsellClicked(params: {
 }) {
   posthog.capture("token upsell clicked", params);
 }
+
+// ----------------------------
+// CHAIN INFRASTRUCTURE CHECKOUT
+// ----------------------------
+/**
+ * ### Why do we need to report this event?
+ * - To record explicit user acknowledgement when proceeding to checkout without RPC
+ * - To measure how often customers choose to omit RPC while purchasing Insight and/or Account Abstraction
+ * - To correlate potential support issues arising from missing RPC
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ */
+export function reportChainInfraRpcOmissionAgreed(properties: {
+  chainId: number;
+  frequency: "monthly" | "annual";
+  includeInsight: boolean;
+  includeAccountAbstraction: boolean;
+}) {
+  posthog.capture("chain infra checkout rpc omission agreed", properties);
+}

apps/dashboard/src/@/components/project/create-project-modal/index.tsx

@@ -1,5 +1,4 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DialogDescription } from "@radix-ui/react-dialog";
 import { useMutation } from "@tanstack/react-query";
 import type { ProjectService } from "@thirdweb-dev/service-utils";
 import { SERVICES } from "@thirdweb-dev/service-utils";
@@ -18,6 +17,7 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/deploy/_components/deploy-infrastructure-form.client.tsx

@@ -1,11 +1,20 @@
 "use client";
 
 import { useQueryState } from "nuqs";
-import { useMemo, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 import { toast } from "sonner";
 import { getChainInfraCheckoutURL } from "@/actions/billing";
+import { reportChainInfraRpcOmissionAgreed } from "@/analytics/report";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
 import { InsightIcon } from "@/icons/InsightIcon";
 import { RPCIcon } from "@/icons/RPCIcon";
@@ -44,7 +53,7 @@ const SERVICE_CONFIG = {
     icon: "RPCIcon",
     label: "RPC",
     monthlyPrice: 1500,
-    required: true,
+    required: false,
     sku: "chain:infra:rpc" as const,
   },
 } satisfies Record<
@@ -80,19 +89,26 @@ export function DeployInfrastructureForm(props: {
     searchParams.addons.withOptions({ history: "replace", startTransition }),
   );
 
+  const [rpcParam, setRpcParam] = useQueryState(
+    "rpc",
+    searchParams.rpc.withOptions({ history: "replace", startTransition }),
+  );
+
   const addons = useMemo(() => {
     return addonsStr ? addonsStr.split(",").filter(Boolean) : [];
   }, [addonsStr]);
 
   const includeInsight = addons.includes("insight");
   const includeAA = addons.includes("aa");
+  const includeRPC = rpcParam === "on";
 
   const selectedOrder = useMemo(() => {
-    const arr: (keyof typeof SERVICE_CONFIG)[] = ["rpc"];
+    const arr: (keyof typeof SERVICE_CONFIG)[] = [];
+    if (includeRPC) arr.push("rpc");
     if (includeInsight) arr.push("insight");
     if (includeAA) arr.push("accountAbstraction");
     return arr;
-  }, [includeInsight, includeAA]);
+  }, [includeInsight, includeAA, includeRPC]);
 
   // NEW: count selected services and prepare bundle discount hint
   const selectedCount = selectedOrder.length;
@@ -112,9 +128,9 @@ export function DeployInfrastructureForm(props: {
     return {
       accountAbstraction: includeAA,
       insight: includeInsight,
-      rpc: true,
+      rpc: includeRPC,
     } as const;
-  }, [includeInsight, includeAA]);
+  }, [includeInsight, includeAA, includeRPC]);
 
   const pricePerService = useMemo(() => {
     const isAnnual = frequency === "annual";
@@ -172,10 +188,13 @@ export function DeployInfrastructureForm(props: {
 
   const chainId = props.chain.chainId;
 
-  const checkout = () => {
+  const [showRpcWarning, setShowRpcWarning] = useState(false);
+
+  const proceedToCheckout = () => {
     startTransition(async () => {
       try {
-        const skus: ChainInfraSKU[] = [SERVICE_CONFIG.rpc.sku];
+        const skus: ChainInfraSKU[] = [];
+        if (includeRPC) skus.push(SERVICE_CONFIG.rpc.sku);
         if (includeInsight) skus.push(SERVICE_CONFIG.insight.sku);
         if (includeAA) skus.push(SERVICE_CONFIG.accountAbstraction.sku);
 
@@ -186,11 +205,9 @@ export function DeployInfrastructureForm(props: {
           teamSlug: props.teamSlug,
         });
 
-        // If the action returns, it means redirect did not happen and we have an error
         if (res.status === "error") {
           toast.error(res.error);
         } else if (res.status === "success") {
-          // replace the current page with the checkout page (which will then redirect back to us)
           window.location.href = res.data;
         }
       } catch (err) {
@@ -202,6 +219,15 @@ export function DeployInfrastructureForm(props: {
     });
   };
 
+  const checkout = () => {
+    const hasAddons = includeInsight || includeAA;
+    if (!includeRPC && hasAddons) {
+      setShowRpcWarning(true);
+      return;
+    }
+    proceedToCheckout();
+  };
+
   const periodLabel = frequency === "annual" ? "/yr" : "/mo";
   const isAnnual = frequency === "annual";
 
@@ -211,21 +237,22 @@ export function DeployInfrastructureForm(props: {
       <div className="flex flex-col gap-4">
         <h3 className="text-lg font-semibold">Select Services</h3>
 
-        {/* Required service */}
+        {/* RPC (now optional) */}
         <div className="flex flex-col gap-2 mb-6">
           <ServiceCard
             description={SERVICE_CONFIG.rpc.description}
-            disabled
             icon={SERVICE_CONFIG.rpc.icon}
             label={SERVICE_CONFIG.rpc.label}
-            onToggle={() => {}}
+            onToggle={() => {
+              const newVal = !includeRPC;
+              setRpcParam(newVal ? "on" : "off");
+            }}
             originalPrice={
               isAnnual ? SERVICE_CONFIG.rpc.monthlyPrice * 12 : undefined
             }
             periodLabel={periodLabel}
             price={pricePerService.rpc}
-            required
-            selected
+            selected={includeRPC}
           />
         </div>
 
@@ -350,7 +377,11 @@ export function DeployInfrastructureForm(props: {
 
           <Button
             className="w-full"
-            disabled={isTransitionPending || !props.isOwner}
+            disabled={
+              isTransitionPending ||
+              !props.isOwner ||
+              selectedOrder.length === 0
+            }
             onClick={checkout}
           >
             Proceed to Checkout
@@ -362,6 +393,54 @@ export function DeployInfrastructureForm(props: {
           )}
         </div>
       </div>
+      {/* RPC Omission Warning Modal */}
+      <Dialog open={showRpcWarning} onOpenChange={setShowRpcWarning}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Proceed without RPC (not recommended)</DialogTitle>
+            <DialogDescription className="space-y-3">
+              <p>
+                RPC powers core functionality used by <strong>Insight</strong>{" "}
+                and <strong>Account Abstraction</strong>.
+              </p>
+              <div className="space-y-1">
+                <p>Without RPC, you may experience:</p>
+                <ul className="list-disc pl-5 space-y-1">
+                  <li>Delayed or missing data in Insight</li>
+                  <li>
+                    Transaction failures or degraded reliability for Account
+                    Abstraction
+                  </li>
+                  <li>Limited or unsupported features across both services</li>
+                </ul>
+              </div>
+              <p>
+                thirdweb <strong>cannot guarantee</strong> that Insight or
+                Account Abstraction will work as expected without RPC. To ensure
+                reliability, keep RPC enabled.
+              </p>
+              <p>If you still want to continue, confirm below.</p>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button
+              onClick={() => {
+                reportChainInfraRpcOmissionAgreed({
+                  chainId,
+                  frequency: frequency === "annual" ? "annual" : "monthly",
+                  includeInsight,
+                  includeAccountAbstraction: includeAA,
+                });
+                setShowRpcWarning(false);
+                proceedToCheckout();
+              }}
+              variant="destructive"
+            >
+              I understand — proceed without RPC
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

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

@@ -3,4 +3,5 @@ import { parseAsString, parseAsStringEnum } from "nuqs/server";
 export const searchParams = {
   addons: parseAsString.withDefault(""),
   freq: parseAsStringEnum(["monthly", "annual"]).withDefault("monthly"),
+  rpc: parseAsStringEnum(["on", "off"]).withDefault("on"),
 };

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx

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

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/delete-webhook-modal.tsx

@@ -1,11 +1,11 @@
-import { DialogDescription } from "@radix-ui/react-dialog";
 import { AlertTriangleIcon } from "lucide-react";
 import type { WebhookConfig } from "@/api/project/webhook-configs";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,