Move Deployed Contracts Page to App Router (#4995)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the contract deployment and management features in the dashboard application. It introduces new components, improves layouts, and refines data handling for better user experience.

### Detailed summary
- Updated layout in `deploy.tsx` and `layout.tsx` to use flexbox for better responsiveness.
- Added `getAuthTokenWalletAddress` function in `getAuthToken.ts` for wallet address retrieval.
- Introduced `DeployedContractsPage` and `DeployedContractsTable` components for contract management.
- Refactored `DeployedContracts` component to accept contract list directly and handle loading state.
- Added `GetStartedWithContractsDeploy` component for user onboarding.
- Enhanced `DeployedContractsPageHeader` with import and deploy contract buttons.
- Improved sorting logic in `getSortedDeployedContracts.tsx`.
- Removed unused imports and cleaned up code for better readability.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/(dashboard)/dashboard/contracts/deploy/page.tsx

@@ -0,0 +1,19 @@
+import { redirect } from "next/navigation";
+import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
+import { DeployedContractsPage } from "../../../../team/[team_slug]/[project_slug]/contracts/_components/DeployedContractsPage";
+
+export default function Page() {
+  const accountAddress = getAuthTokenWalletAddress();
+  if (!accountAddress) {
+    return redirect(
+      `/login?next=${encodeURIComponent("/dashboard/contracts/deploy")}`,
+    );
+  }
+
+  return (
+    <DeployedContractsPage
+      address={accountAddress}
+      className="flex grow flex-col"
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/contracts/layout.tsx

@@ -0,0 +1,13 @@
+import { BillingAlerts } from "../../../../components/settings/Account/Billing/alerts/Alert";
+import { ContractsSidebarLayout } from "../../../../core-ui/sidebar/contracts";
+
+export default function Layout(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ContractsSidebarLayout>
+      <BillingAlerts className="pb-6" />
+      {props.children}
+    </ContractsSidebarLayout>
+  );
+}

apps/dashboard/src/app/(dashboard)/layout.tsx

@@ -7,7 +7,7 @@ export default function DashboardLayout(props: { children: React.ReactNode }) {
     <ErrorProvider>
       <div className="flex min-h-screen flex-col bg-background">
         <DashboardHeader />
-        <main className="grow">{props.children}</main>
+        <div className="flex grow flex-col">{props.children}</div>
         <AppFooter />
       </div>
     </ErrorProvider>

apps/dashboard/src/app/api/lib/getAuthToken.ts

@@ -10,3 +10,19 @@ export function getAuthToken() {
 
   return token;
 }
+
+export function getAuthTokenWalletAddress() {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  if (!activeAccount) {
+    return null;
+  }
+
+  const token = cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value;
+
+  if (token) {
+    return activeAccount;
+  }
+
+  return null;
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/DeployedContractsPageHeader.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { DownloadIcon, PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { Button } from "../../../../../@/components/ui/button";
+import { ImportModal } from "../../../../../components/contract-components/import-contract/modal";
+
+export function DeployedContractsPageHeader() {
+  const [importModalOpen, setImportModalOpen] = useState(false);
+
+  return (
+    <div>
+      <ImportModal
+        isOpen={importModalOpen}
+        onClose={() => {
+          setImportModalOpen(false);
+        }}
+      />
+      <div className="flex flex-col gap-4 md:pb-4 lg:flex-row lg:justify-between">
+        <div>
+          <h1 className="mb-1.5 font-semibold text-3xl tracking-tight lg:text-4xl">
+            Your contracts
+          </h1>
+          <p className="text-muted-foreground text-sm">
+            The list of contract instances that you have deployed or imported
+            with thirdweb across all networks
+          </p>
+        </div>
+        <div className="flex gap-2 [&>*]:grow">
+          <Button
+            className="gap-2"
+            variant="outline"
+            onClick={() => setImportModalOpen(true)}
+          >
+            <DownloadIcon className="size-4" />
+            Import contract
+          </Button>
+          <Button asChild className="gap-2">
+            <Link href="/explore">
+              <PlusIcon className="size-4" />
+              Deploy contract
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/_components/DeployedContractsPage.tsx

@@ -0,0 +1,48 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Suspense } from "react";
+import { ClientOnly } from "../../../../../../components/ClientOnly/ClientOnly";
+import { DeployedContractsPageHeader } from "../DeployedContractsPageHeader";
+import { DeployedContractsTable } from "./DeployedContractsTable";
+import { GetStartedWithContractsDeploy } from "./GetStartedWithContractsDeploy";
+import { getSortedDeployedContracts } from "./getSortedDeployedContracts";
+
+export function DeployedContractsPage(props: {
+  address: string;
+  className?: string;
+}) {
+  return (
+    <div className={props.className}>
+      <DeployedContractsPageHeader />
+      <div className="h-6" />
+      <Suspense fallback={<Loading />}>
+        <DeployedContractsPageAsync {...props} />
+      </Suspense>
+    </div>
+  );
+}
+
+async function DeployedContractsPageAsync(props: {
+  address: string;
+}) {
+  const deployedContracts = await getSortedDeployedContracts({
+    address: props.address,
+  });
+
+  if (deployedContracts.length === 0) {
+    return <GetStartedWithContractsDeploy />;
+  }
+
+  return (
+    <ClientOnly ssr={<Loading />}>
+      <DeployedContractsTable contracts={deployedContracts} />
+    </ClientOnly>
+  );
+}
+
+function Loading() {
+  return (
+    <div className="flex min-h-[300px] grow items-center justify-center rounded-lg border border-border">
+      <Spinner className="size-10" />
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/_components/DeployedContractsTable.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import type { BasicContract } from "contract-ui/types/types";
+import { DeployedContracts } from "../../../../../../components/contract-components/tables/deployed-contracts";
+
+export function DeployedContractsTable(props: {
+  contracts: BasicContract[];
+}) {
+  const router = useDashboardRouter();
+  return (
+    <DeployedContracts
+      contractList={props.contracts}
+      limit={50}
+      isPending={false}
+      onContractRemoved={router.refresh}
+    />
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/_components/GetStartedWithContractsDeploy.tsx

@@ -1,26 +1,15 @@
 "use client";
 import { TabButtons } from "@/components/ui/tabs";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import Image from "next/image";
 import { useMemo, useState } from "react";
-import { useActiveAccount } from "thirdweb/react";
 import { ImportModal } from "../../../../../../components/contract-components/import-contract/modal";
 import { StepsCard } from "../../../../../../components/dashboard/StepsCard";
 import { useTrack } from "../../../../../../hooks/analytics/useTrack";
 
 export function GetStartedWithContractsDeploy() {
-  const address = useActiveAccount()?.address;
   const steps = useMemo(
     () => [
-      {
-        title: "Connect your wallet to get started",
-        description:
-          "In order to interact with your contracts you need to connect an EVM compatible wallet.",
-        children: <CustomConnectWallet />,
-        completed: !!address,
-      },
-
       {
         title: "Build, deploy or import a contract",
         description:
@@ -29,7 +18,7 @@ export function GetStartedWithContractsDeploy() {
         completed: false, // because we only show this component if the user does not have any contracts
       },
     ],
-    [address],
+    [],
   );
 
   return (
@@ -139,7 +128,7 @@ const DeployOptions = () => {
           <h4 className="text-start font-semibold text-lg">
             {activeTabContent.title}
           </h4>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-start text-muted-foreground text-sm">
             {activeTabContent.description}
           </p>
         </div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/_components/getSortedDeployedContracts.tsx

@@ -0,0 +1,42 @@
+import type { BasicContract } from "contract-ui/types/types";
+import { MULTICHAIN_REGISTRY_CONTRACT } from "../../../../../../constants/contracts";
+import { getAllMultichainRegistry } from "../../../../../../dashboard-extensions/common/read/getAllMultichainRegistry";
+import { fetchChain } from "../../../../../../utils/fetchChain";
+
+export async function getSortedDeployedContracts(params: {
+  address: string;
+}) {
+  const contracts = await getAllMultichainRegistry({
+    contract: MULTICHAIN_REGISTRY_CONTRACT,
+    address: params.address,
+  });
+
+  const chainIds = Array.from(new Set(contracts.map((c) => c.chainId)));
+  const chains = (
+    await Promise.allSettled(
+      chainIds.map((chainId) => fetchChain(chainId.toString())),
+    )
+  )
+    .filter((c) => c.status === "fulfilled")
+    .map((c) => c.value)
+    .filter((c) => c !== null);
+
+  const mainnetContracts: BasicContract[] = [];
+  const testnetContracts: BasicContract[] = [];
+
+  for (const contract of contracts) {
+    const chain = chains.find((chain) => contract.chainId === chain.chainId);
+    if (chain && chain.status !== "deprecated") {
+      if (chain.testnet) {
+        testnetContracts.push(contract);
+      } else {
+        mainnetContracts.push(contract);
+      }
+    }
+  }
+
+  mainnetContracts.sort((a, b) => a.chainId - b.chainId);
+  testnetContracts.sort((a, b) => a.chainId - b.chainId);
+
+  return [...mainnetContracts, ...testnetContracts];
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/layout.tsx

@@ -1,5 +1,5 @@
 export default function Layout(props: {
   children: React.ReactNode;
 }) {
-  return <div className="container">{props.children}</div>;
+  return <div className="container flex grow flex-col">{props.children}</div>;
 }