[Dashboard] Refactor team engines UI

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

@@ -5,7 +5,6 @@ import { TabPathLinks } from "@/components/ui/tabs";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { AnnouncementBanner } from "components/notices/AnnouncementBanner";
 import { redirect } from "next/navigation";
-import { Badge } from "../../../../../@/components/ui/badge";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import {
   getAuthToken,
@@ -75,15 +74,6 @@ export default async function TeamLayout(props: {
               path: `/team/${params.team_slug}/~/analytics`,
               name: "Analytics",
             },
-            {
-              path: `/team/${params.team_slug}/~/engine`,
-              name: (
-                <span className="flex items-center gap-2">
-                  Engines
-                  <Badge variant="warning">Legacy</Badge>
-                </span>
-              ),
-            },
             {
               path: `/team/${params.team_slug}/~/ecosystem`,
               name: "Ecosystems",

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

@@ -12,7 +12,6 @@ import { EngineIcon } from "../../../../(dashboard)/(chain)/components/server/ic
 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: {
@@ -63,11 +62,7 @@ export function ProjectSidebarLayout(props: {
         },
         {
           href: `${layoutPath}/engine`,
-          label: (
-            <span>
-              Engine <Badge>Beta</Badge>
-            </span>
-          ),
+          label: "Engine",
           icon: EngineIcon,
           tracking: tracking("engine"),
         },

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/filter.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/filter.tsx

@@ -5,8 +5,8 @@ import {
   useResponsiveSearchParams,
   useSetResponsiveSearchParams,
 } from "responsive-rsc";
-import { DateRangeSelector } from "../../../../../../../components/analytics/date-range-selector";
-import { IntervalSelector } from "../../../../../../../components/analytics/interval-selector";
+import { DateRangeSelector } from "../../../../../../../../components/analytics/date-range-selector";
+import { IntervalSelector } from "../../../../../../../../components/analytics/interval-selector";
 import { getTxAnalyticsFiltersFromSearchParams } from "../lib/utils";
 
 export function TransactionAnalyticsFilter() {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/ftux.client.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/ftux.client.tsx

@@ -3,7 +3,7 @@ import type { Project } from "@/api/projects";
 import { type Step, StepsCard } from "components/dashboard/StepsCard";
 import Link from "next/link";
 import { useMemo, useState } from "react";
-import { Button } from "../../../../../../../@/components/ui/button";
+import { Button } from "../../../../../../../../@/components/ui/button";
 import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import CreateVaultAccountButton from "../vault/components/create-vault-account.client";

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-table/tx-table-ui.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-table/tx-table-ui.tsx

@@ -37,7 +37,7 @@ import { useAllChainsData } from "hooks/chains/allChains";
 import { ExternalLinkIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import { ChainIconClient } from "../../../../../../../../components/icons/ChainIcon";
+import { ChainIconClient } from "../../../../../../../../../components/icons/ChainIcon";
 import type { Wallet } from "../../server-wallets/wallet-table/types";
 import type {
   Transaction,

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/layout.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/layout.tsx

@@ -1,38 +1,18 @@
-import { getProject } from "@/api/projects";
-import { getTeamBySlug } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
-import { CloudIcon } from "lucide-react";
 import Link from "next/link";
-import { redirect } from "next/navigation";
-import { Button } from "../../../../../../@/components/ui/button";
+import { EngineIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
   children: React.ReactNode;
 }) {
   const { team_slug, project_slug } = await props.params;
 
-  const [team, project] = await Promise.all([
-    getTeamBySlug(team_slug),
-    getProject(team_slug, project_slug),
-  ]);
-
-  if (!team) {
-    redirect("/team");
-  }
-
-  if (!project) {
-    redirect(`/team/${team_slug}`);
-  }
-
   return (
-    <TransactionsLayout
-      projectSlug={project.slug}
-      teamSlug={team_slug}
-      clientId={project.publishableKey}
-    >
+    <TransactionsLayout projectSlug={project_slug} teamSlug={team_slug}>
       {props.children}
     </TransactionsLayout>
   );
@@ -41,10 +21,10 @@ export default async function Page(props: {
 function TransactionsLayout(props: {
   projectSlug: string;
   teamSlug: string;
-  clientId: string;
   children: React.ReactNode;
 }) {
-  const engineLayoutSlug = `/team/${props.teamSlug}/${props.projectSlug}/engine`;
+  const engineBaseSlug = `/team/${props.teamSlug}/${props.projectSlug}/engine`;
+  const engineLayoutSlug = `${engineBaseSlug}/cloud`;
 
   return (
     <div className="flex grow flex-col">
@@ -54,8 +34,14 @@ function TransactionsLayout(props: {
         <div className="container flex max-w-7xl flex-col gap-4">
           <div className="flex flex-row items-center justify-between">
             <div className="flex flex-col">
-              <h1 className="mb-0.5 font-semibold text-2xl tracking-tight lg:text-3xl">
-                Engine
+              <h1 className="mb-0.5 flex items-center gap-2 font-semibold text-3xl tracking-tight">
+                Engine{" "}
+                <Badge
+                  variant="success"
+                  className="mt-0.5 flex items-center gap-2 text-sm"
+                >
+                  <EngineIcon className="size-4" /> Cloud
+                </Badge>
               </h1>
               <div className="flex items-center gap-2">
                 <Link
@@ -65,14 +51,10 @@ function TransactionsLayout(props: {
                 >
                   {THIRDWEB_ENGINE_CLOUD_URL}
                 </Link>
-                <Badge variant="success" className="flex items-center gap-2">
-                  <CloudIcon className="h-4 w-4" />
-                  Cloud
-                </Badge>
               </div>
             </div>
-            <Link href={`/team/${props.teamSlug}/~/engine`} target="_blank">
-              <Button variant="outline">Looking for legacy engines?</Button>
+            <Link href={`${engineBaseSlug}/dedicated`}>
+              <Button variant="outline">Switch to dedicated engines</Button>
             </Link>
           </div>
         </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/analytics.ts → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/lib/analytics.ts

@@ -1,6 +1,6 @@
 import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
-import type { TransactionStats } from "../../../../../../../types/analytics";
-import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import type { TransactionStats } from "../../../../../../../../types/analytics";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
 
 // Define the structure of the data we expect back from our fetch function
 export type TransactionSummaryData = {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/vault.client.ts → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/lib/vault.client.ts

@@ -7,7 +7,7 @@ import {
   createAccessToken,
   createVaultClient,
 } from "@thirdweb-dev/vault-sdk";
-import { updateProjectClient } from "../../../../../../../@3rdweb-sdk/react/hooks/useApi";
+import { updateProjectClient } from "../../../../../../../../@3rdweb-sdk/react/hooks/useApi";
 
 const SERVER_WALLET_ACCESS_TOKEN_PURPOSE =
   "Access Token for All Server Wallets";

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

@@ -0,0 +1,103 @@
+import { getProject } from "@/api/projects";
+import { THIRDWEB_VAULT_URL } from "@/constants/env";
+import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import { notFound, redirect } from "next/navigation";
+import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { TransactionsAnalyticsPageContent } from "./analytics/analytics-page";
+import { EngineChecklist } from "./analytics/ftux.client";
+import { TransactionAnalyticsSummary } from "./analytics/summary";
+import {
+  type TransactionSummaryData,
+  getTransactionAnalyticsSummary,
+} from "./lib/analytics";
+import type { Wallet } from "./server-wallets/wallet-table/types";
+
+export default async function TransactionsAnalyticsPage(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+  searchParams: Promise<{
+    from?: string | string[] | undefined;
+    to?: string | string[] | undefined;
+    interval?: string | string[] | undefined;
+  }>;
+}) {
+  const [params, searchParams, authToken] = await Promise.all([
+    props.params,
+    props.searchParams,
+    getAuthToken(),
+  ]);
+
+  if (!authToken) {
+    notFound();
+  }
+
+  const [vaultClient, project] = await Promise.all([
+    createVaultClient({
+      baseUrl: THIRDWEB_VAULT_URL,
+    }).catch(() => undefined),
+    getProject(params.team_slug, params.project_slug),
+  ]);
+
+  if (!project) {
+    redirect(`/team/${params.team_slug}`);
+  }
+
+  if (!vaultClient) {
+    return <div>Error: Failed to connect to Vault</div>;
+  }
+
+  const projectEngineCloudService = project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+
+  const managementAccessToken =
+    projectEngineCloudService?.managementAccessToken;
+
+  const eoas = managementAccessToken
+    ? await listEoas({
+        client: vaultClient,
+        request: {
+          auth: {
+            accessToken: managementAccessToken,
+          },
+          options: {},
+        },
+      })
+    : { data: { items: [] }, error: null, success: true };
+
+  const wallets = eoas.data?.items as Wallet[] | undefined;
+
+  let initialData: TransactionSummaryData | undefined;
+  if (wallets && wallets.length > 0) {
+    const summary = await getTransactionAnalyticsSummary({
+      teamId: project.teamId,
+      clientId: project.publishableKey,
+    }).catch(() => undefined);
+    initialData = summary;
+  }
+  const hasTransactions = initialData ? initialData.totalCount > 0 : false;
+
+  return (
+    <div className="flex grow flex-col">
+      <EngineChecklist
+        managementAccessToken={managementAccessToken ?? undefined}
+        hasTransactions={hasTransactions}
+        project={project}
+        wallets={wallets ?? []}
+      />
+      {hasTransactions && (
+        <TransactionAnalyticsSummary
+          initialData={initialData}
+          teamId={project.teamId}
+          clientId={project.publishableKey}
+        />
+      )}
+      <div className="h-10" />
+      <TransactionsAnalyticsPageContent
+        searchParams={searchParams}
+        project={project}
+        hasTransactions={hasTransactions}
+        wallets={wallets}
+      />
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/try-it-out.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/components/try-it-out.tsx

@@ -1,10 +1,10 @@
 "use client";
+import { Button } from "@/components/ui/button";
+import { CodeClient } from "@/components/ui/code/code.client";
+import { TabButtons } from "@/components/ui/tabs";
 import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
 import Link from "next/link";
 import { useState } from "react";
-import { Button } from "../../../../../../../../@/components/ui/button";
-import { CodeClient } from "../../../../../../../../@/components/ui/code/code.client";
-import { TabButtons } from "../../../../../../../../@/components/ui/tabs";
 import type { Wallet } from "../wallet-table/types";
 
 export function TryItOut(props: {
@@ -94,22 +94,12 @@ export function TryItOut(props: {
         <div className="flex flex-row justify-end gap-4">
           <Button variant={"secondary"} asChild>
             <Link
-              href={`/team/${props.team_slug}/${props.project_slug}/engine/explorer`}
+              href={`/team/${props.team_slug}/${props.project_slug}/engine/cloud/explorer`}
               rel="noreferrer"
             >
               View API reference
             </Link>
           </Button>
-          {props.wallet && (
-            <Button variant={"primary"} asChild>
-              <Link
-                href={`/team/${props.team_slug}/${props.project_slug}/engine?expand_test_tx=true`}
-                rel="noreferrer"
-              >
-                Send a test transaction
-              </Link>
-            </Button>
-          )}
         </div>
       </div>
     </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/page.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/page.tsx

@@ -1,8 +1,8 @@
 import { getProject } from "@/api/projects";
 import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
 import { notFound } from "next/navigation";
-import { THIRDWEB_VAULT_URL } from "../../../../../../../@/constants/env";
-import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { THIRDWEB_VAULT_URL } from "../../../../../../../../@/constants/env";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
 import { TryItOut } from "./components/try-it-out";
 import type { Wallet } from "./wallet-table/types";
 import { ServerWalletsTable } from "./wallet-table/wallet-table";

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/wallet-table-ui.client.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx

@@ -2,6 +2,9 @@
 
 import type { Project } from "@/api/projects";
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
 import {
   Table,
   TableBody,
@@ -21,10 +24,7 @@ import {
   DEFAULT_ACCOUNT_FACTORY_V0_7,
   predictSmartAccountAddress,
 } from "thirdweb/wallets/smart";
-import { Badge } from "../../../../../../../../@/components/ui/badge";
-import { Skeleton } from "../../../../../../../../@/components/ui/skeleton";
-import { Switch } from "../../../../../../../../@/components/ui/switch";
-import { useV5DashboardChain } from "../../../../../../../../lib/v5-adapter";
+import { useV5DashboardChain } from "../../../../../../../../../lib/v5-adapter";
 import CreateServerWallet from "../components/create-server-wallet.client";
 import type { Wallet } from "./types";