[TOOL-3110] Dashboard: Engine pages cleanup: Fetch engine info on server + Use layout (#5968)

Engine pages were in a weird "pages router" type of state - Its now properly migrated to app router

* Common skeleton is moved to layout
* engine instances are fetched on server

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring and enhancing the engine instance management in the application. It removes obsolete files, improves error handling, and introduces new utility functions for fetching engine instances and permissions.

### Detailed summary
- Deleted multiple obsolete `.tsx` files related to engine instance management.
- Improved error handling in engine import functionality.
- Added `getEngineAccessPermission` and `getEngineInstances` utility functions.
- Refactored components to utilize new utility functions for fetching engine data.
- Enhanced the layout and error handling in the engine instance pages.
- Updated components to use consistent instance data and permissions checks.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

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

@@ -47,45 +47,6 @@ const getEngineRequestHeaders = (token: string | null): HeadersInit => {
   };
 };
 
-// TODO - add authToken in queryKey instead
-export function useEngineInstances() {
-  const address = useActiveAccount()?.address;
-  return useQuery({
-    queryKey: engineKeys.instances(address || ""),
-    queryFn: async (): Promise<EngineInstance[]> => {
-      type Result = {
-        data?: {
-          instances: EngineInstance[];
-        };
-      };
-
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/engine",
-        method: "GET",
-      });
-
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
-
-      const json = res.data;
-      const instances = json.data?.instances || [];
-
-      return instances.map((instance) => {
-        // Sanitize: Add trailing slash if not present.
-        const url = instance.url.endsWith("/")
-          ? instance.url
-          : `${instance.url}/`;
-        return {
-          ...instance,
-          url,
-        };
-      });
-    },
-    enabled: !!address,
-  });
-}
-
 // GET Requests
 export type BackendWallet = {
   address: string;

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

@@ -64,9 +64,13 @@ export const EngineImportPage = (props: {
       await importMutation.mutateAsync(data);
       toast.success("Engine imported successfully");
       router.push(`/team/${props.teamSlug}/~/engine`);
-    } catch {
+    } catch (e) {
+      const message = e instanceof Error ? e.message : undefined;
       toast.error(
         "Error importing Engine. Please check if the details are correct.",
+        {
+          description: message,
+        },
       );
     }
   };

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

@@ -13,13 +13,13 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import {
   type DeleteCloudHostedInput,
   type EditEngineInstanceInput,
   type EngineInstance,
   useEngineDeleteCloudHosted,
   useEngineEditInstance,
-  type useEngineInstances,
   useEngineRemoveFromDashboard,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { FormControl, Radio, RadioGroup } from "@chakra-ui/react";
@@ -43,22 +43,17 @@ import { FormLabel } from "tw-components";
 
 interface EngineInstancesTableProps {
   instances: EngineInstance[];
-  isPending: boolean;
-  isFetched: boolean;
-  refetch: ReturnType<typeof useEngineInstances>["refetch"];
   engineLinkPrefix: string;
 }
 
 export const EngineInstancesTable: React.FC<EngineInstancesTableProps> = ({
   instances,
-  isPending,
-  isFetched,
-  refetch,
   engineLinkPrefix,
 }) => {
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
   const trackEvent = useTrack();
+  const router = useDashboardRouter();
 
   const [instanceToUpdate, setInstanceToUpdate] = useState<
     EngineInstance | undefined
@@ -137,8 +132,8 @@ export const EngineInstancesTable: React.FC<EngineInstancesTableProps> = ({
         title="Your Engines"
         data={instances}
         columns={columns}
-        isFetched={isFetched}
-        isPending={isPending}
+        isFetched={true}
+        isPending={false}
         onMenuClick={[
           {
             icon: <PencilIcon className="size-4" />,
@@ -177,7 +172,7 @@ export const EngineInstancesTable: React.FC<EngineInstancesTableProps> = ({
           instance={instanceToUpdate}
           open={isEditModalOpen}
           onOpenChange={setIsEditModalOpen}
-          refetch={refetch}
+          refetch={() => router.refresh()}
         />
       )}
 
@@ -186,7 +181,7 @@ export const EngineInstancesTable: React.FC<EngineInstancesTableProps> = ({
           instance={instanceToUpdate}
           onOpenChange={setIsRemoveModalOpen}
           open={isRemoveModalOpen}
-          refetch={refetch}
+          refetch={() => router.refresh()}
         />
       )}
     </>
@@ -203,7 +198,7 @@ const EditModal = (props: {
   const { onOpenChange, instance, open, refetch } = props;
 
   const form = useForm<EditEngineInstanceInput>({
-    defaultValues: {
+    values: {
       instanceId: instance.id,
       name: instance.name,
       url: instance.url,

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

@@ -1,9 +1,7 @@
 "use client";
-
-import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
 import { UnorderedList } from "@/components/ui/List/List";
 import { Button } from "@/components/ui/button";
-import { useEngineInstances } from "@3rdweb-sdk/react/hooks/useEngine";
+import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
 import { useTrack } from "hooks/analytics/useTrack";
 import {
   CloudDownloadIcon,
@@ -18,83 +16,9 @@ import { EngineInstancesTable } from "./engine-instances-table";
 
 export const EngineInstancesList = (props: {
   team_slug: string;
+  instances: EngineInstance[];
 }) => {
   const engineLinkPrefix = `/team/${props.team_slug}/~/engine`;
-  const instancesQuery = useEngineInstances();
-  const instances = instancesQuery.data ?? [];
-  const trackEvent = useTrack();
-
-  if (instancesQuery.isPending) {
-    return <GenericLoadingPage />;
-  }
-
-  if (instances.length === 0) {
-    return (
-      <div className="mx-auto max-w-[600px]">
-        <Image alt="Engine hero image" src={emptyStateHeaderImage} />
-
-        <div className="h-6" />
-
-        <h1 className="font-bold text-2xl tracking-tighter md:text-3xl">
-          Your scalable web3 backend server
-        </h1>
-
-        <div className="h-3" />
-
-        <UnorderedList>
-          <li>Read, write, and deploy contracts at production scale</li>
-          <li>
-            Reliably parallelize and retry transactions with gas & nonce
-            management
-          </li>
-          <li>Securely manage backend wallets</li>
-          <li>Built-in support for account abstraction, relayers, and more</li>
-        </UnorderedList>
-
-        <div className="h-6" />
-
-        <div className="flex gap-3">
-          <CreateEngineLink
-            label="Get Started"
-            engineLinkPrefix={engineLinkPrefix}
-          />
-
-          <Button
-            asChild
-            onClick={() => {
-              trackEvent({
-                category: "engine",
-                action: "try-demo",
-                label: "clicked-try-demo",
-              });
-            }}
-            variant="outline"
-          >
-            <Link href={`${engineLinkPrefix}/sandbox`} className="gap-2">
-              Try Demo
-              <RocketIcon className="size-4 text-muted-foreground" />
-            </Link>
-          </Button>
-        </div>
-
-        <div className="h-10" />
-
-        <div className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-6">
-          <p className="font-semibold text-lg tracking-tight">
-            Already have an Engine Instance?
-          </p>
-
-          <ImportEngineLink
-            label="Import"
-            engineLinkPrefix={engineLinkPrefix}
-          />
-        </div>
-
-        <div className="h-20" />
-        <LearnMoreCard />
-      </div>
-    );
-  }
 
   return (
     <div>
@@ -115,10 +39,7 @@ export const EngineInstancesList = (props: {
       <div className="h-6" />
 
       <EngineInstancesTable
-        instances={instances}
-        isFetched={instancesQuery.isFetched}
-        isPending={instancesQuery.isPending}
-        refetch={instancesQuery.refetch}
+        instances={props.instances}
         engineLinkPrefix={engineLinkPrefix}
       />
 
@@ -128,6 +49,74 @@ export const EngineInstancesList = (props: {
   );
 };
 
+export function NoEngineInstancesPage(props: { team_slug: string }) {
+  const engineLinkPrefix = `/team/${props.team_slug}/~/engine`;
+  const trackEvent = useTrack();
+
+  return (
+    <div className="mx-auto max-w-[600px]">
+      <Image alt="Engine hero image" src={emptyStateHeaderImage} />
+
+      <div className="h-6" />
+
+      <h1 className="font-bold text-2xl tracking-tighter md:text-3xl">
+        Your scalable web3 backend server
+      </h1>
+
+      <div className="h-3" />
+
+      <UnorderedList>
+        <li>Read, write, and deploy contracts at production scale</li>
+        <li>
+          Reliably parallelize and retry transactions with gas & nonce
+          management
+        </li>
+        <li>Securely manage backend wallets</li>
+        <li>Built-in support for account abstraction, relayers, and more</li>
+      </UnorderedList>
+
+      <div className="h-6" />
+
+      <div className="flex gap-3">
+        <CreateEngineLink
+          label="Get Started"
+          engineLinkPrefix={engineLinkPrefix}
+        />
+
+        <Button
+          asChild
+          onClick={() => {
+            trackEvent({
+              category: "engine",
+              action: "try-demo",
+              label: "clicked-try-demo",
+            });
+          }}
+          variant="outline"
+        >
+          <Link href={`${engineLinkPrefix}/sandbox`} className="gap-2">
+            Try Demo
+            <RocketIcon className="size-4 text-muted-foreground" />
+          </Link>
+        </Button>
+      </div>
+
+      <div className="h-10" />
+
+      <div className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-6">
+        <p className="font-semibold text-lg tracking-tight">
+          Already have an Engine Instance?
+        </p>
+
+        <ImportEngineLink label="Import" engineLinkPrefix={engineLinkPrefix} />
+      </div>
+
+      <div className="h-20" />
+      <LearnMoreCard />
+    </div>
+  );
+}
+
 function LearnMoreCard() {
   return (
     <div className="relative rounded-lg border border-border p-4 hover:border-active-border">

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

@@ -1,10 +1,30 @@
-import { EngineInstancesList } from "./overview/engine-list";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../../../login/loginRedirect";
+import { getEngineInstances } from "../_utils/getEngineInstances";
+import {
+  EngineInstancesList,
+  NoEngineInstancesPage,
+} from "./overview/engine-list";
 
 export default async function Page(props: {
   params: Promise<{
     team_slug: string;
   }>;
 }) {
   const params = await props.params;
-  return <EngineInstancesList team_slug={params.team_slug} />;
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    loginRedirect(`/team/${params.team_slug}/~/engine`);
+  }
+
+  const res = await getEngineInstances({ authToken });
+
+  if (!res.data || res.data.length === 0) {
+    return <NoEngineInstancesPage team_slug={params.team_slug} />;
+  }
+
+  return (
+    <EngineInstancesList team_slug={params.team_slug} instances={res.data} />
+  );
 }

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EngineErrorPage.tsx

@@ -0,0 +1,28 @@
+import { ArrowLeftIcon, CircleAlertIcon } from "lucide-react";
+import Link from "next/link";
+
+export function EngineErrorPage(props: {
+  children: React.ReactNode;
+  rootPath: string;
+}) {
+  return (
+    <div className="flex grow flex-col">
+      <Link
+        href={props.rootPath}
+        className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+      >
+        <ArrowLeftIcon className="size-5" />
+        Back
+      </Link>
+
+      <div className="mt-5 flex min-h-[300px] grow flex-col items-center justify-center rounded-lg border border-border px-4 lg:min-h-[400px]">
+        <div className="flex flex-col items-center gap-4">
+          <CircleAlertIcon className="size-16 text-destructive-text" />
+          <div className="text-center text-muted-foreground">
+            {props.children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}