[Dashboard] Add published contracts page in teams, account and project layouts

apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx

@@ -17,14 +17,14 @@ export function DeployedContractsPageHeader() {
           setImportModalOpen(false);
         }}
       />
-      <div className="flex flex-col gap-4 md:pb-4 lg:flex-row lg:justify-between">
+      <div className="flex flex-col gap-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 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
+            Deployed 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
+            The list of contracts that you have deployed or imported with
+            thirdweb across all networks
           </p>
         </div>
         <div className="flex gap-2 [&>*]:grow">

apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx

@@ -8,12 +8,11 @@ import { getSortedDeployedContracts } from "./getSortedDeployedContracts";
 
 export function DeployedContractsPage(props: {
   address: string;
-  className?: string;
 }) {
   return (
-    <div className={props.className}>
+    <div className="flex grow flex-col">
       <DeployedContractsPageHeader />
-      <div className="h-6" />
+      <div className="h-8" />
       <Suspense fallback={<Loading />}>
         <DeployedContractsPageAsync {...props} />
       </Suspense>

apps/dashboard/src/app/account/contracts/layout.tsx

@@ -1,5 +1,26 @@
+import { SidebarLayout } from "@/components/blocks/SidebarLayout";
+
 export default function Layout(props: {
   children: React.ReactNode;
 }) {
-  return <div className="container flex grow flex-col">{props.children}</div>;
+  const layoutPath = "/account/contracts";
+
+  return (
+    <SidebarLayout
+      sidebarLinks={[
+        {
+          href: layoutPath,
+          label: "Deployed contracts",
+          exactMatch: true,
+        },
+        {
+          href: `${layoutPath}/published`,
+          label: "Published contracts",
+          exactMatch: true,
+        },
+      ]}
+    >
+      {props.children}
+    </SidebarLayout>
+  );
 }

apps/dashboard/src/app/account/contracts/page.tsx

@@ -9,10 +9,5 @@ export default async function Page() {
     return redirect(`/login?next=${encodeURIComponent("/account/contracts")}`);
   }
 
-  return (
-    <DeployedContractsPage
-      address={accountAddress}
-      className="flex grow flex-col pt-10 pb-10"
-    />
-  );
+  return <DeployedContractsPage address={accountAddress} />;
 }

apps/dashboard/src/app/account/contracts/published/PublishedContractsPage.tsx

@@ -0,0 +1,81 @@
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
+import { Button } from "@/components/ui/button";
+import { PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { Suspense } from "react";
+import { PublishedContracts } from "../../../(dashboard)/profile/[addressOrEns]/components/published-contracts";
+import { resolveAddressAndEns } from "../../../(dashboard)/profile/[addressOrEns]/resolveAddressAndEns";
+import { fetchPublishedContracts } from "../../../../components/contract-components/fetchPublishedContracts";
+
+export async function PublishedContractsPage(props: {
+  publisherAddress: string;
+}) {
+  const resolvedInfo = await resolveAddressAndEns(props.publisherAddress);
+
+  return (
+    <div className="flex grow flex-col">
+      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-start">
+        <div>
+          <h2 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
+            Published contracts
+          </h2>
+
+          <p className="text-muted-foreground text-sm">
+            The list of contracts published to thirdweb across all networks.{" "}
+            <Link
+              href="https://portal.thirdweb.com/contracts/publish/overview"
+              className="text-link-foreground hover:text-foreground"
+              target="_blank"
+            >
+              Learn more about publishing contracts
+            </Link>
+          </p>
+        </div>
+
+        <Button asChild>
+          <Link
+            href="https://portal.thirdweb.com/contracts/publish/publish-contract"
+            target="_blank"
+            className="gap-2"
+          >
+            <PlusIcon className="size-4" />
+            Publish Contract
+          </Link>
+        </Button>
+      </div>
+
+      <div className="h-8" />
+
+      <Suspense fallback={<GenericLoadingPage />}>
+        <AsyncPublishedContractsTable
+          publisherAddress={props.publisherAddress}
+          publisherEnsName={resolvedInfo?.ensName}
+        />
+      </Suspense>
+    </div>
+  );
+}
+
+async function AsyncPublishedContractsTable(props: {
+  publisherAddress: string;
+  publisherEnsName: string | undefined;
+}) {
+  const publishedContracts = await fetchPublishedContracts(
+    props.publisherAddress,
+  );
+
+  if (publishedContracts.length === 0) {
+    return (
+      <div className="flex min-h-[300px] grow items-center justify-center rounded-lg border border-border">
+        No published contracts found
+      </div>
+    );
+  }
+
+  return (
+    <PublishedContracts
+      publishedContracts={publishedContracts}
+      publisherEnsName={props.publisherEnsName}
+    />
+  );
+}

apps/dashboard/src/app/account/contracts/published/page.tsx

@@ -0,0 +1,13 @@
+import { getAuthTokenWalletAddress } from "../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../login/loginRedirect";
+import { PublishedContractsPage } from "./PublishedContractsPage";
+
+export default async function Page() {
+  const accountAddress = await getAuthTokenWalletAddress();
+
+  if (!accountAddress) {
+    loginRedirect("/account/contracts");
+  }
+
+  return <PublishedContractsPage publisherAddress={accountAddress} />;
+}

apps/dashboard/src/app/account/layout.tsx

@@ -51,7 +51,6 @@ async function HeaderAndNav(props: {
           {
             path: "/account/contracts",
             name: "Contracts",
-            exactMatch: true,
           },
           {
             path: "/account/settings",

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

@@ -0,0 +1,28 @@
+import { SidebarLayout } from "@/components/blocks/SidebarLayout";
+
+export default async function Layout(props: {
+  children: React.ReactNode;
+  params: Promise<{ team_slug: string }>;
+}) {
+  const params = await props.params;
+  const layoutPath = `/team/${params.team_slug}/~/contracts`;
+
+  return (
+    <SidebarLayout
+      sidebarLinks={[
+        {
+          href: layoutPath,
+          label: "Deployed contracts",
+          exactMatch: true,
+        },
+        {
+          href: `${layoutPath}/published`,
+          label: "Published contracts",
+          exactMatch: true,
+        },
+      ]}
+    >
+      {props.children}
+    </SidebarLayout>
+  );
+}

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

@@ -14,12 +14,5 @@ export default async function Page(props: {
     );
   }
 
-  return (
-    <div className="container flex grow flex-col">
-      <DeployedContractsPage
-        address={accountAddress}
-        className="flex grow flex-col pt-10 pb-10"
-      />
-    </div>
-  );
+  return <DeployedContractsPage address={accountAddress} />;
 }

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

@@ -0,0 +1,16 @@
+import { PublishedContractsPage } from "../../../../../../account/contracts/published/PublishedContractsPage";
+import { getAuthTokenWalletAddress } from "../../../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../../../login/loginRedirect";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string }>;
+}) {
+  const accountAddress = await getAuthTokenWalletAddress();
+  const params = await props.params;
+
+  if (!accountAddress) {
+    loginRedirect(`/team/${params.team_slug}/~/contracts`);
+  }
+
+  return <PublishedContractsPage publisherAddress={accountAddress} />;
+}

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

@@ -0,0 +1,28 @@
+import { SidebarLayout } from "@/components/blocks/SidebarLayout";
+
+export default async function Layout(props: {
+  children?: React.ReactNode;
+  params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+  const params = await props.params;
+  const layoutPath = `/team/${params.team_slug}/${params.project_slug}/contracts`;
+
+  return (
+    <SidebarLayout
+      sidebarLinks={[
+        {
+          href: layoutPath,
+          label: "Deployed contracts",
+          exactMatch: true,
+        },
+        {
+          href: `${layoutPath}/published`,
+          label: "Published contracts",
+          exactMatch: true,
+        },
+      ]}
+    >
+      {props.children}
+    </SidebarLayout>
+  );
+}

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

@@ -1,6 +1,6 @@
-import { redirect } from "next/navigation";
 import { DeployedContractsPage } from "../../../../account/contracts/_components/DeployedContractsPage";
 import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../login/loginRedirect";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -9,17 +9,8 @@ export default async function Page(props: {
 
   if (!accountAddress) {
     const { team_slug, project_slug } = await props.params;
-    return redirect(
-      `/login?next=${encodeURIComponent(`/team/${team_slug}/${project_slug}/contracts`)}`,
-    );
+    loginRedirect(`/team/${team_slug}/${project_slug}/contracts`);
   }
 
-  return (
-    <div className="container flex grow flex-col">
-      <DeployedContractsPage
-        address={accountAddress}
-        className="flex grow flex-col pt-10 pb-10"
-      />
-    </div>
-  );
+  return <DeployedContractsPage address={accountAddress} />;
 }

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

@@ -0,0 +1,16 @@
+import { PublishedContractsPage } from "../../../../../account/contracts/published/PublishedContractsPage";
+import { getAuthTokenWalletAddress } from "../../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../../login/loginRedirect";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+  const accountAddress = await getAuthTokenWalletAddress();
+  const params = await props.params;
+
+  if (!accountAddress) {
+    loginRedirect(`/team/${params.team_slug}/${params.project_slug}/contracts`);
+  }
+
+  return <PublishedContractsPage publisherAddress={accountAddress} />;
+}