Dashboard: Move Engine pages

apps/dashboard/redirects.js

@@ -62,6 +62,51 @@ const legacyDashboardToTeamRedirects = [
   },
 ];
 
+const projectRoute = "/team/:team_slug/:project_slug";
+
+const projectPageRedirects = [
+  {
+    source: `${projectRoute}/connect/pay/:path*`,
+    destination: `${projectRoute}/universal-bridge/:path*`,
+    permanent: false,
+  },
+  {
+    source: `${projectRoute}/connect/universal-bridge/:path*`,
+    destination: `${projectRoute}/universal-bridge/:path*`,
+    permanent: false,
+  },
+  {
+    source: `${projectRoute}/connect/account-abstraction/:path*`,
+    destination: `${projectRoute}/account-abstraction/:path*`,
+    permanent: false,
+  },
+  {
+    source: `${projectRoute}/connect/in-app-wallets/:path*`,
+    destination: `${projectRoute}/wallets/:path*`,
+    permanent: false,
+  },
+  {
+    source: `${projectRoute}/engine/cloud/vault/:path*`,
+    destination: `${projectRoute}/vault/:path*`,
+    permanent: false,
+  },
+  {
+    source: `${projectRoute}/engine/cloud/:path*`,
+    destination: `${projectRoute}/transactions/:path*`,
+    permanent: false,
+  },
+  {
+    source: `${projectRoute}/assets/:path*`,
+    destination: `${projectRoute}/tokens/:path*`,
+    permanent: false,
+  },
+  {
+    source: `${projectRoute}/nebula/:path*`,
+    destination: projectRoute,
+    permanent: false,
+  },
+];
+
 /** @type {import('next').NextConfig['redirects']} */
 async function redirects() {
   return [
@@ -326,14 +371,6 @@ async function redirects() {
       destination: "/",
       permanent: false,
     },
-    // pay > universal-bridge redirect
-    {
-      source: "/team/:team_slug/:project_slug/connect/pay/:path*",
-      destination:
-        "/team/:team_slug/:project_slug/connect/universal-bridge/:path*",
-      permanent: false,
-    },
-
     // all /learn/tutorials (and sub-routes) -> /learn/guides
     {
       source: "/learn/tutorials/:path*",
@@ -382,8 +419,8 @@ async function redirects() {
       destination: "/transactions",
       permanent: false,
     },
-
     ...legacyDashboardToTeamRedirects,
+    ...projectPageRedirects,
   ];
 }
 

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

@@ -9,6 +9,7 @@ export type SidebarBaseLink = {
   label: React.ReactNode;
   exactMatch?: boolean;
   icon?: React.FC<{ className?: string }>;
+  isActive?: (pathname: string) => boolean;
 };
 
 export type SidebarLink =

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

@@ -123,6 +123,7 @@ function RenderSidebarGroup(props: {
                   className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
                   activeClassName="text-foreground bg-accent"
                   exactMatch={link.exactMatch}
+                  isActive={link.isActive}
                   onClick={() => {
                     sidebar.setOpenMobile(false);
                   }}

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

@@ -11,15 +11,18 @@ export type NavButtonProps = {
   href: string;
   exactMatch?: boolean;
   onClick?: () => void;
+  isActive?: (pathname: string) => boolean;
 };
 
 export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
   const pathname = usePathname();
-  const isActive = pathname
-    ? props.exactMatch
-      ? pathname === props.href
-      : pathname.startsWith(props.href)
-    : false;
+  const isActive = props.isActive
+    ? props.isActive(pathname)
+    : pathname
+      ? props.exactMatch
+        ? pathname === props.href
+        : pathname.startsWith(props.href)
+      : false;
   return (
     <Link
       href={props.href}

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

@@ -19,9 +19,10 @@ import { SmartAccountIcon } from "../../../../../(dashboard)/(chain)/components/
 
 export function ProjectSidebarLayout(props: {
   layoutPath: string;
+  engineLinkType: "cloud" | "dedicated";
   children: React.ReactNode;
 }) {
-  const { layoutPath, children } = props;
+  const { layoutPath, engineLinkType, children } = props;
 
   return (
     <FullWidthSidebarLayout
@@ -62,9 +63,18 @@ export function ProjectSidebarLayout(props: {
           icon: CoinsIcon,
         },
         {
-          href: `${layoutPath}/engine`,
+          href:
+            engineLinkType === "cloud"
+              ? `${layoutPath}/transactions`
+              : `${layoutPath}/engine/dedicated`,
           label: "Transactions",
           icon: ArrowLeftRightIcon,
+          isActive: (pathname) => {
+            return (
+              pathname.startsWith(`${layoutPath}/transactions`) ||
+              pathname.startsWith(`${layoutPath}/engine/dedicated`)
+            );
+          },
         },
         {
           href: `${layoutPath}/insight`,

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

@@ -95,7 +95,7 @@ function EngineLegacyBannerUI(props: {
         <div className="flex justify-start gap-3">
           <Button className="flex items-center gap-2" asChild size="sm">
             <Link
-              href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
+              href={`/team/${props.teamSlug}/${props.projectSlug}/transactions`}
             >
               <EngineIcon className="size-4" /> Try Engine Cloud
             </Link>

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

@@ -141,7 +141,8 @@ function BackendWalletsSection(props: {
                   chainId={chainId}
                   onChange={setChainId}
                   className="min-w-40 max-w-52 lg:max-w-60"
-                  popoverContentClassName="!w-[80vw] md:!w-[500px]"
+                  popoverContentClassName="!w-[80vw] md:!w-[400px]"
+                  disableChainId
                   align="end"
                   client={props.client}
                 />

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

@@ -1,4 +1,4 @@
-import { getProject, getProjects } from "@/api/projects";
+import { type Project, getProject, getProjects } from "@/api/projects";
 import { getTeamBySlug, getTeams } from "@/api/team";
 import { Button } from "@/components/ui/button";
 import { SidebarProvider } from "@/components/ui/sidebar";
@@ -16,6 +16,7 @@ import {
 import { TeamHeaderLoggedIn } from "../../../components/TeamHeader/team-header-logged-in.client";
 import { ProjectSidebarLayout } from "./components/ProjectSidebarLayout";
 import { SaveLastUsedProject } from "./components/SaveLastUsedProject";
+import { getEngineInstances } from "./engine/dedicated/_utils/getEngineInstances";
 
 export default async function ProjectLayout(props: {
   children: React.ReactNode;
@@ -59,6 +60,11 @@ export default async function ProjectLayout(props: {
     teamId: team.id,
   });
 
+  const engineLinkType = await getEngineLinkType({
+    authToken,
+    project,
+  });
+
   return (
     <SidebarProvider>
       <div className="flex h-dvh min-w-0 grow flex-col">
@@ -88,7 +94,10 @@ export default async function ProjectLayout(props: {
             client={client}
           />
         </div>
-        <ProjectSidebarLayout layoutPath={layoutPath}>
+        <ProjectSidebarLayout
+          layoutPath={layoutPath}
+          engineLinkType={engineLinkType}
+        >
           {props.children}
         </ProjectSidebarLayout>
       </div>
@@ -109,3 +118,32 @@ export default async function ProjectLayout(props: {
     </SidebarProvider>
   );
 }
+
+async function getEngineLinkType(params: {
+  authToken: string;
+  project: Project;
+}) {
+  const projectEngineCloudService = params.project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+
+  const engineCloudToken = projectEngineCloudService?.managementAccessToken;
+
+  // if we have a management access token, link to engine cloud page
+  let engineLinkType: "cloud" | "dedicated" = "cloud";
+
+  // if we don't have a engine cloud management access token, check if there are any legacy engine instances
+  if (!engineCloudToken) {
+    const engineInstances = await getEngineInstances({
+      authToken: params.authToken,
+      teamIdOrSlug: params.project.teamId,
+    });
+
+    // if we have any legacy engine instances, link to the legacy engine page
+    if (engineInstances.data && engineInstances.data.length > 0) {
+      engineLinkType = "dedicated";
+    }
+  }
+
+  return engineLinkType;
+}

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

@@ -5,7 +5,7 @@ import { type Step, StepsCard } from "components/dashboard/StepsCard";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
-import { CreateVaultAccountButton } from "../../../vault/components/create-vault-account.client";
+import { CreateVaultAccountButton } from "../../vault/components/create-vault-account.client";
 import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import { SendTestTransaction } from "./send-test-tx.client";
@@ -107,7 +107,11 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     return null;
   }
   return (
-    <StepsCard title="Setup Your Engine" steps={finalSteps} delay={1000} />
+    <StepsCard
+      title="Get Started with Transactions"
+      steps={finalSteps}
+      delay={1000}
+    />
   );
 };
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/send-test-tx.client.tsx

@@ -263,7 +263,7 @@ export function SendTestTransaction(props: {
               onClick={() => {
                 if (props.walletId) {
                   router.replace(
-                    `/team/${props.teamSlug}/${props.project.slug}/engine/cloud`,
+                    `/team/${props.teamSlug}/${props.project.slug}/transactions`,
                   );
                 } else {
                   router.refresh();

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

@@ -138,7 +138,7 @@ export function TransactionsTableUI(props: {
                     className="cursor-pointer hover:bg-accent/50"
                     onClick={() => {
                       router.push(
-                        `/team/${props.teamSlug}/${props.project.slug}/engine/cloud/tx/${tx.id}`,
+                        `/team/${props.teamSlug}/${props.project.slug}/transactions/tx/${tx.id}`,
                       );
                     }}
                   >

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

@@ -6,6 +6,9 @@ export function storeUserAccessToken(projectId: string, accessToken: string) {
 }
 
 export function getUserAccessToken(projectId: string) {
+  if (typeof localStorage === "undefined") {
+    return null;
+  }
   return localStorage.getItem(
     `thirdweb:engine-cloud-user-access-token-${projectId}`,
   );

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

@@ -3,7 +3,6 @@ import { Button } from "@/components/ui/button";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { NEXT_PUBLIC_ENGINE_CLOUD_URL } from "@/constants/public-envs";
 import Link from "next/link";
-import { EngineIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -23,8 +22,8 @@ function TransactionsLayout(props: {
   teamSlug: string;
   children: React.ReactNode;
 }) {
-  const engineBaseSlug = `/team/${props.teamSlug}/${props.projectSlug}/engine`;
-  const engineLayoutSlug = `${engineBaseSlug}/cloud`;
+  const projectLayoutPath = `/team/${props.teamSlug}/${props.projectSlug}`;
+  const layoutPath = `${projectLayoutPath}/transactions`;
 
   return (
     <div className="flex grow flex-col">
@@ -36,12 +35,6 @@ function TransactionsLayout(props: {
             <div className="flex flex-col">
               <h1 className="mb-0.5 flex items-center gap-2 font-semibold text-3xl tracking-tight">
                 Transactions{" "}
-                <Badge
-                  variant="success"
-                  className="mt-0.5 flex items-center gap-2 text-sm"
-                >
-                  <EngineIcon className="size-4" /> Engine Cloud
-                </Badge>
                 <Badge
                   variant="outline"
                   className="mt-0.5 flex items-center gap-2 text-sm"
@@ -60,7 +53,7 @@ function TransactionsLayout(props: {
                 </Link>
               </div>
             </div>
-            <Link href={`${engineBaseSlug}/dedicated`}>
+            <Link href={`${projectLayoutPath}/engine/dedicated`}>
               <Button variant="outline">View Dedicated Engine</Button>
             </Link>
           </div>
@@ -74,16 +67,16 @@ function TransactionsLayout(props: {
           links={[
             {
               name: "Transactions",
-              path: `${engineLayoutSlug}`,
+              path: `${layoutPath}`,
               exactMatch: true,
             },
             {
               name: "API Explorer",
-              path: `${engineLayoutSlug}/explorer`,
+              path: `${layoutPath}/explorer`,
             },
             {
               name: "Server Wallets",
-              path: `${engineLayoutSlug}/server-wallets`,
+              path: `${layoutPath}/server-wallets`,
             },
           ]}
         />