consolidate gateway navbar

Author: jnsdls

apps/dashboard/redirects.js

@@ -115,6 +115,16 @@ const projectPageRedirects = [
     permanent: false,
     source: `${projectRoute}/connect/analytics`,
   },
+  {
+    destination: `${projectRoute}/insight/:path*`,
+    permanent: false,
+    source: `${projectRoute}/gateway/indexer/:path*`,
+  },
+  {
+    destination: `${projectRoute}/rpc/:path*`,
+    permanent: false,
+    source: `${projectRoute}/gateway/rpc/:path*`,
+  },
 ];
 
 const teamPageRedirects = [

apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts

@@ -1,7 +1,6 @@
 import { ConnectSDKIcon } from "@/icons/ConnectSDKIcon";
 import { ContractIcon } from "@/icons/ContractIcon";
 import { EngineIcon } from "@/icons/EngineIcon";
-import { InsightIcon } from "@/icons/InsightIcon";
 import { NebulaIcon } from "@/icons/NebulaIcon";
 import { PayIcon } from "@/icons/PayIcon";
 import { RPCIcon } from "@/icons/RPCIcon";
@@ -51,13 +50,6 @@ export const products = [
     link: "https://portal.thirdweb.com/payments",
     name: "Payments",
   },
-  {
-    description: "Query and analyze blockchain data",
-    icon: InsightIcon,
-    id: "insight",
-    link: "https://thirdweb.com/insight",
-    name: "Insight",
-  },
   {
     description: "The most powerful AI for interacting with the blockchain",
     icon: NebulaIcon,

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx

@@ -13,7 +13,6 @@ import { TypeScriptIcon } from "@/icons/brand-icons/TypeScriptIcon";
 import { UnityIcon } from "@/icons/brand-icons/UnityIcon";
 import { UnrealIcon } from "@/icons/brand-icons/UnrealIcon";
 import { ContractIcon } from "@/icons/ContractIcon";
-import { InsightIcon } from "@/icons/InsightIcon";
 import { PayIcon } from "@/icons/PayIcon";
 import { ClientIDSection } from "./ClientIDSection";
 import { SecretKeySection } from "./SecretKeySection";
@@ -111,13 +110,6 @@ function ProductsSection(props: { teamSlug: string; projectSlug: string }) {
       icon: ContractIcon,
       title: "Contracts",
     },
-    {
-      description:
-        "Add indexing capabilities to retrieve real-time onchain data",
-      href: `/team/${props.teamSlug}/${props.projectSlug}/insight`,
-      icon: InsightIcon,
-      title: "Insight",
-    },
     {
       description:
         "Bridge, swap, and purchase cryptocurrencies with any fiat options or tokens via cross-chain routing",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx

@@ -15,7 +15,6 @@ import {
 } from "@/components/blocks/full-width-sidebar-layout";
 import { BridgeIcon } from "@/icons/BridgeIcon";
 import { ContractIcon } from "@/icons/ContractIcon";
-import { InsightIcon } from "@/icons/InsightIcon";
 import { NebulaIcon } from "@/icons/NebulaIcon";
 import { PayIcon } from "@/icons/PayIcon";
 import { TokenIcon } from "@/icons/TokenIcon";
@@ -24,6 +23,7 @@ import { WalletProductIcon } from "@/icons/WalletProductIcon";
 export function ProjectSidebarLayout(props: {
   layoutPath: string;
   children: React.ReactNode;
+  hasEngines: boolean;
 }) {
   const contentSidebarLinks = [
     {
@@ -104,14 +104,20 @@ export function ProjectSidebarLayout(props: {
       group: "Scale",
       links: [
         {
-          href: `${props.layoutPath}/insight`,
-          icon: InsightIcon,
-          label: "Insight",
-        },
-        {
-          href: `${props.layoutPath}/rpc`,
-          icon: RssIcon,
-          label: "RPC",
+          subMenu: {
+            icon: RssIcon,
+            label: "Gateway",
+          },
+          links: [
+            {
+              href: `${props.layoutPath}/gateway/rpc`,
+              label: "RPC",
+            },
+            {
+              href: `${props.layoutPath}/gateway/indexer`,
+              label: "Indexer",
+            },
+          ],
         },
         // linkely want to move this to `team` level eventually
         {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/overview/engine-instances-table.tsx

@@ -6,23 +6,17 @@ import {
   ArrowRightIcon,
   CheckIcon,
   CircleAlertIcon,
-  DatabaseIcon,
-  InfinityIcon,
   InfoIcon,
   MoreHorizontalIcon,
   PencilIcon,
-  PlusIcon,
-  ShieldCheckIcon,
   Trash2Icon,
-  WalletIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import type { Team } from "@/api/team/get-team";
-import { CheckoutButton } from "@/components/billing/billing";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge, type BadgeProps } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -31,20 +25,10 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer";
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -72,7 +56,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Textarea } from "@/components/ui/textarea";
-import { useIsMobile } from "@/hooks/use-mobile";
 import {
   type DeleteCloudHostedEngineParams,
   deleteCloudHostedEngine,
@@ -84,7 +67,6 @@ import {
 } from "@/hooks/useEngine";
 import { EngineIcon } from "@/icons/EngineIcon";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { cn } from "@/lib/utils";
 
 type DeletedCloudHostedEngine = (
   params: DeleteCloudHostedEngineParams,
@@ -126,96 +108,6 @@ export function EngineInstancesTable(props: {
   );
 }
 
-export function DedicatedEngineSubscriptionButton(props: { team: Team }) {
-  const [open, setOpen] = useState(false);
-  const isMobile = useIsMobile();
-
-  const trigger = (
-    <Button className="gap-2 rounded-full" size="sm">
-      <PlusIcon className="size-3.5" />
-      Deploy Dedicated Engine
-    </Button>
-  );
-
-  const title = (
-    <div className="flex flex-row items-center gap-2">
-      <div className="grid size-8 place-items-center rounded-full bg-warning-text">
-        <DatabaseIcon className="size-4 text-white" />
-      </div>
-      <span className="font-semibold text-lg">Dedicated Engine</span>
-    </div>
-  );
-
-  const content = (
-    <div className="flex flex-col items-start justify-center gap-4 px-4 md:px-0">
-      <ul className="flex flex-col gap-1 self-start text-muted-foreground text-sm">
-        <li className="flex items-center gap-2">
-          <ShieldCheckIcon className="size-4 text-foreground" />
-          Isolated environment
-        </li>
-        <li className="flex items-center gap-2">
-          <WalletIcon className="size-4 text-foreground" />
-          EOA or Smart Wallets
-        </li>
-        <li className="flex items-center gap-2">
-          <InfinityIcon className="size-4 text-foreground" />
-          No transaction usage limits or charges
-        </li>
-      </ul>
-    </div>
-  );
-
-  if (isMobile) {
-    return (
-      <Drawer onOpenChange={setOpen} open={open}>
-        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[90vh]">
-          <DrawerHeader>
-            <DrawerTitle>{title}</DrawerTitle>
-            <DrawerDescription>
-              Instantly deploy a dedicated engine instance for your team.
-            </DrawerDescription>
-          </DrawerHeader>
-          {content}
-          <DrawerFooter>
-            <CheckoutButton
-              billingStatus={props.team.billingStatus}
-              sku="product:engine_standard"
-              teamSlug={props.team.slug}
-            >
-              Deploy Now · $299 / month
-            </CheckoutButton>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    );
-  }
-
-  return (
-    <Dialog onOpenChange={setOpen} open={open}>
-      <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>
-            Instantly deploy a dedicated engine instance for your team.
-          </DialogDescription>
-        </DialogHeader>
-        {content}
-        <DialogFooter>
-          <CheckoutButton
-            billingStatus={props.team.billingStatus}
-            sku="product:engine_standard"
-            teamSlug={props.team.slug}
-          >
-            Deploy Now · $299 / month
-          </CheckoutButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
 export function EngineInstancesTableUI(props: {
   instances: EngineInstance[];
   engineLinkPrefix: string;
@@ -896,10 +788,6 @@ function DeleteEngineSubscriptionModalContent(props: {
 }
 
 function EmptyEngineState(props: { team: Team; projectSlug: string }) {
-  const [selectedTab, setSelectedTab] = useState<
-    "self-hosted" | "cloud-hosted"
-  >("cloud-hosted");
-
   return (
     <div className="flex flex-col items-center justify-center rounded-lg border bg-card px-4 py-12 lg:px-6">
       <div className="mb-4 rounded-full border bg-card p-2">
@@ -908,75 +796,34 @@ function EmptyEngineState(props: { team: Team; projectSlug: string }) {
 
       <h2 className="mb-1 font-semibold text-xl">No Engine instances found</h2>
       <p className="mb-6 max-w-lg text-center text-muted-foreground text-sm">
-        Get started with one of the options below to add your first engine
-        instance.
+        Import an Engine instance running on your own infrastructure.
       </p>
 
       <div className="w-full max-w-md">
-        <div className="mx-auto max-w-sm">
-          <div className="grid grid-cols-2 gap-1 rounded-lg border p-1">
-            <Button
-              className={cn(selectedTab === "cloud-hosted" && "bg-accent")}
-              onClick={() => setSelectedTab("cloud-hosted")}
-              size="sm"
-              variant="ghost"
-            >
-              Managed
-            </Button>
+        <div className="h-5" />
 
+        <div className="flex flex-col text-center">
+          <h3 className="mb-0.5 font-semibold text-base">Self-Hosted Engine</h3>
+          <p className="text-muted-foreground text-sm">
+            Add engine instance running on your own infrastructure.
+          </p>
+          <div className="h-4" />
+          <div className="mt-auto">
             <Button
-              className={cn(selectedTab === "self-hosted" && "bg-accent")}
-              onClick={() => setSelectedTab("self-hosted")}
+              asChild
+              className="w-full gap-2"
               size="sm"
-              variant="ghost"
+              variant="default"
             >
-              Self-hosted
+              <Link
+                href={`/team/${props.team.slug}/${props.projectSlug}/engine`}
+              >
+                Import self-hosted Engine
+                <ArrowRightIcon size={16} />
+              </Link>
             </Button>
           </div>
         </div>
-
-        <div className="h-5" />
-
-        {selectedTab === "self-hosted" && (
-          <div className="flex flex-col text-center">
-            <h3 className="mb-0.5 font-semibold text-base">
-              Self-Hosted Engine
-            </h3>
-            <p className="text-muted-foreground text-sm">
-              Add engine instance running on your own infrastructure.
-            </p>
-            <div className="h-4" />
-            <div className="mt-auto">
-              <Button
-                asChild
-                className="w-full gap-2"
-                size="sm"
-                variant="default"
-              >
-                <Link
-                  href={`/team/${props.team.slug}/${props.projectSlug}/engine`}
-                >
-                  Import self-hosted Engine
-                  <ArrowRightIcon size={16} />
-                </Link>
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {selectedTab === "cloud-hosted" && (
-          <div className="flex flex-col text-center">
-            <h3 className="mb-0.5 font-semibold text-base">Managed Engine</h3>
-            <p className="text-muted-foreground text-sm">
-              Deploy a managed engine instance to your team. <br /> We recommend
-              using Engine Cloud in most cases.
-            </p>
-            <div className="h-4" />
-            <div className="mt-auto">
-              <DedicatedEngineSubscriptionButton team={props.team} />
-            </div>
-          </div>
-        )}
       </div>
 
       <div className="mt-4 text-center text-muted-foreground text-sm">

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/page.tsx

@@ -7,7 +7,6 @@ import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { loginRedirect } from "@/utils/redirects";
 import { getEngineInstances } from "../_utils/getEngineInstances";
 import { ImportEngineButton } from "./import/import-engine-dialog";
-import { DedicatedEngineSubscriptionButton } from "./overview/engine-instances-table";
 import { EngineInstancesList } from "./overview/engine-list";
 
 export default async function Page(props: {
@@ -61,9 +60,6 @@ export default async function Page(props: {
         title: "Engine",
         description: "Manage your deployed Engine instances.",
         actions: {
-          primary: {
-            component: <DedicatedEngineSubscriptionButton team={team} />,
-          },
           secondary: {
             component: (
               <ImportEngineButton

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/components/InsightAnalytics.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/gateway/indexer/components/InsightAnalytics.tsx

@@ -13,7 +13,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { CardHeading } from "../../payments/components/common";
+import { CardHeading } from "../../../payments/components/common";
 
 export function TopInsightChainsTable(props: {
   data: InsightChainStats[];