[TOOL-3337] Dashboard: Engine cloud - DO NOT MERGE (#6639)

Co-authored-by: Prithvish Baidya <deformercoding@gmail.com>
Co-authored-by: Joaquim Verges <joaquim.verges@gmail.com>

Author: 3 people

.changeset/big-cases-wish.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/vault-sdk": patch
+---
+
+Introducing vault sdk

.gitignore

@@ -30,4 +30,5 @@ packages/*/typedoc/*
 storybook-static
 .aider*
 
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+.cursor

apps/dashboard/.env.example

@@ -104,4 +104,8 @@ ANALYTICS_SERVICE_URL=""
 NEXT_PUBLIC_NEBULA_URL=""
 
 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
-STRIPE_SECRET_KEY=""
+STRIPE_SECRET_KEY=""
+
+# required for server wallet management
+NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
+NEXT_PUBLIC_ENGINE_CLOUD_URL=""

apps/dashboard/knip.json

@@ -12,6 +12,7 @@
   "ignoreDependencies": [
     "@storybook/blocks",
     "@thirdweb-dev/service-utils",
+    "@thirdweb-dev/vault-sdk",
     "@types/color",
     "fast-xml-parser"
   ]

apps/dashboard/package.json

@@ -45,11 +45,13 @@
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-switch": "^1.2.2",
     "@radix-ui/react-tooltip": "1.2.3",
+    "@scalar/api-reference-react": "^0.6.19",
     "@sentry/nextjs": "9.13.0",
     "@shazow/whatsabi": "0.21.0",
     "@tanstack/react-query": "5.74.4",
     "@tanstack/react-table": "^8.21.3",
     "@thirdweb-dev/service-utils": "workspace:*",
+    "@thirdweb-dev/vault-sdk": "workspace:*",
     "@vercel/functions": "2.0.0",
     "@vercel/og": "^0.6.8",
     "abitype": "1.0.8",

apps/dashboard/src/@/actions/proxies.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { API_SERVER_URL, THIRDWEB_ENGINE_CLOUD_URL } from "../constants/env";
 
 type ProxyActionParams = {
   pathname: string;
@@ -79,6 +79,10 @@ export async function apiServerProxy<T>(params: ProxyActionParams) {
   return proxy<T>(API_SERVER_URL, params);
 }
 
+export async function engineCloudProxy<T>(params: ProxyActionParams) {
+  return proxy<T>(THIRDWEB_ENGINE_CLOUD_URL, params);
+}
+
 export async function payServerProxy<T>(params: ProxyActionParams) {
   return proxy<T>(
     process.env.NEXT_PUBLIC_PAY_URL

apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

@@ -95,7 +95,7 @@ export function FullWidthSidebarLayout(props: {
           links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
         />
 
-        <main className="z-0 flex min-w-0 grow flex-col max-sm:w-full">
+        <main className="flex min-w-0 grow flex-col max-sm:w-full">
           {children}
         </main>
         <AppFooter containerClassName="max-w-7xl" />

apps/dashboard/src/@/components/blocks/select-with-search.tsx

@@ -129,7 +129,9 @@ export const SelectWithSearch = React.forwardRef<
                   selectedOption && "text-foreground",
                 )}
               >
-                {selectedOption?.label || placeholder}
+                {renderOption && selectedOption
+                  ? renderOption(selectedOption)
+                  : selectedOption?.label || placeholder}
               </span>
               <ChevronDownIcon className="size-4 cursor-pointer text-muted-foreground" />
             </div>

apps/dashboard/src/@/components/ui/button.tsx

@@ -22,7 +22,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline text-semibold",
         pink: "border border-nebula-pink-foreground !text-nebula-pink-foreground bg-[hsl(var(--nebula-pink-foreground)/5%)] hover:bg-nebula-pink-foreground/10 dark:!text-foreground dark:bg-nebula-pink-foreground/10 dark:hover:bg-nebula-pink-foreground/20",
         upsell:
-          "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
+          "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
       },
       size: {
         default: "h-10 px-4 py-2",

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -10,7 +10,7 @@ import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 
 export type TabLink = {
-  name: string;
+  name: React.ReactNode;
   href: string;
   isActive: boolean;
   isDisabled?: boolean;
@@ -43,7 +43,7 @@ export function TabLinks(props: {
             return (
               <Button
                 asChild
-                key={tab.name}
+                key={tab.href}
                 disabled={tab.isDisabled}
                 variant="ghost"
               >
@@ -206,7 +206,7 @@ function useUnderline<El extends HTMLElement>() {
 
 export function TabPathLinks(props: {
   links: {
-    name: string;
+    name: React.ReactNode;
     path: string;
     exactMatch?: boolean;
     isDisabled?: boolean;

apps/dashboard/src/@/constants/env.ts

@@ -9,6 +9,12 @@ export const NEXT_PUBLIC_NEBULA_APP_CLIENT_ID =
 
 export const NEBULA_APP_SECRET_KEY = process.env.NEBULA_APP_SECRET_KEY || "";
 
+export const THIRDWEB_VAULT_URL =
+  process.env.NEXT_PUBLIC_THIRDWEB_VAULT_URL || "";
+
+export const THIRDWEB_ENGINE_CLOUD_URL =
+  process.env.NEXT_PUBLIC_ENGINE_CLOUD_URL || "";
+
 export const THIRDWEB_API_SECRET = process.env.API_SERVER_SECRET || "";
 
 export const IPFS_GATEWAY_URL =

apps/dashboard/src/@/lib/time.ts

@@ -0,0 +1,55 @@
+import { differenceInCalendarDays } from "date-fns";
+import {
+  type DurationId,
+  type Range,
+  getLastNDaysRange,
+} from "../../components/analytics/date-range-selector";
+
+export function normalizeTime(date: Date) {
+  const newDate = new Date(date);
+  newDate.setHours(1, 0, 0, 0);
+  return newDate;
+}
+
+export function normalizeTimeISOString(date: Date) {
+  return normalizeTime(date).toISOString();
+}
+
+export function getFiltersFromSearchParams(params: {
+  from: string | undefined | string[];
+  to: string | undefined | string[];
+  interval: string | undefined | string[];
+  defaultRange: DurationId;
+}) {
+  const fromStr = params.from;
+  const toStr = params.to;
+  const defaultRange = getLastNDaysRange(params.defaultRange);
+
+  const range: Range =
+    fromStr && toStr && typeof fromStr === "string" && typeof toStr === "string"
+      ? {
+          from: normalizeTime(new Date(fromStr)),
+          to: normalizeTime(new Date(toStr)),
+          type: "custom",
+        }
+      : {
+          from: normalizeTime(defaultRange.from),
+          to: normalizeTime(defaultRange.to),
+          type: defaultRange.type,
+        };
+
+  const defaultInterval =
+    differenceInCalendarDays(range.to, range.from) > 30
+      ? "week"
+      : ("day" as const);
+
+  return {
+    range,
+    interval:
+      params.interval === "day"
+        ? ("day" as const)
+        : params.interval === "week"
+          ? ("week" as const)
+          : defaultInterval,
+  };
+}

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -7,12 +7,12 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import type { ResultItem } from "app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes";
 import type { EngineBackendWalletType } from "lib/engine";
 import { useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import type { EngineStatus } from "../../../app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table";
+import type { ResultItem } from "../../../app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/StatusCodes";
+import type { EngineStatus } from "../../../app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table";
 import { engineKeys } from "../cache-keys";
 
 // Engine instances
@@ -1641,15 +1641,19 @@ interface EngineResourceMetrics {
   };
 }
 
-export function useEngineSystemMetrics(engineId: string, teamIdOrSlug: string) {
+export function useEngineSystemMetrics(
+  engineId: string,
+  teamIdOrSlug: string,
+  projectSlug: string,
+) {
   const [enabled, setEnabled] = useState(true);
 
   return useQuery({
     queryKey: engineKeys.systemMetrics(engineId),
     queryFn: async () => {
       const res = await apiServerProxy({
         method: "GET",
-        pathname: `/v1/teams/${teamIdOrSlug}/engine/${engineId}/metrics`,
+        pathname: `/v1/teams/${teamIdOrSlug}/${projectSlug}/engine/dedicated/${engineId}/metrics`,
       });
 
       if (!res.ok) {

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx

@@ -74,10 +74,6 @@ export default async function TeamLayout(props: {
               path: `/team/${params.team_slug}/~/analytics`,
               name: "Analytics",
             },
-            {
-              path: `/team/${params.team_slug}/~/engine`,
-              name: "Engines",
-            },
             {
               path: `/team/${params.team_slug}/~/ecosystem`,
               name: "Ecosystems",

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/layout.tsx

@@ -3,7 +3,7 @@ import { getTeamBySlug } from "@/api/team";
 import { getTeamSubscriptions } from "@/api/team-subscription";
 import { fetchRPCUsage } from "@/api/usage/rpc";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
-import { normalizeTimeISOString } from "lib/time";
+import { normalizeTimeISOString } from "@/lib/time";
 import { redirect } from "next/navigation";
 import { getValidAccount } from "../../../../../account/settings/getAccount";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx

@@ -234,7 +234,7 @@ function ProductsSection(props: {
       title: "Engine",
       description:
         "Scale your application with a backend server to read, write, and deploy contracts at production-grade.",
-      href: `/team/${props.teamSlug}/~/engine`,
+      href: `/team/${props.teamSlug}/${props.projectSlug}/engine`,
       icon: EngineIcon,
       trackingLabel: "engine",
     },

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

@@ -8,9 +8,11 @@ import {
   WalletIcon,
 } from "lucide-react";
 import { ContractIcon } from "../../../../(dashboard)/(chain)/components/server/icons/ContractIcon";
+import { EngineIcon } from "../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
 import { InsightIcon } from "../../../../(dashboard)/(chain)/components/server/icons/InsightIcon";
 import { PayIcon } from "../../../../(dashboard)/(chain)/components/server/icons/PayIcon";
 import { SmartAccountIcon } from "../../../../(dashboard)/(chain)/components/server/icons/SmartAccountIcon";
+import { Badge } from "../../../../../../@/components/ui/badge";
 import { NebulaIcon } from "../../../../../nebula-app/(app)/icons/NebulaIcon";
 
 export function ProjectSidebarLayout(props: {
@@ -60,17 +62,27 @@ export function ProjectSidebarLayout(props: {
           tracking: tracking("contracts"),
         },
         {
-          href: `${layoutPath}/nebula`,
-          label: "Nebula",
-          icon: NebulaIcon,
-          tracking: tracking("nebula"),
+          href: `${layoutPath}/engine`,
+          label: (
+            <span className="flex items-center gap-2">
+              Engine <Badge>New</Badge>
+            </span>
+          ),
+          icon: EngineIcon,
+          tracking: tracking("engine"),
         },
         {
           href: `${layoutPath}/insight`,
           label: "Insight",
           icon: InsightIcon,
           tracking: tracking("insight"),
         },
+        {
+          href: `${layoutPath}/nebula`,
+          label: "Nebula",
+          icon: NebulaIcon,
+          tracking: tracking("nebula"),
+        },
       ]}
       footerSidebarLinks={[
         {

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

@@ -75,7 +75,7 @@ export default async function Page(props: {
   });
 
   return (
-    <div>
+    <div className="flex grow flex-col">
       <AccountAbstractionSummary
         teamId={project.teamId}
         projectId={project.id}