From a9e1e00c55c45110e9ed4230c6e9832704841de8 Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Tue, 10 Sep 2024 02:59:32 +0530
Subject: [PATCH] Add Ecosystem wallet pages in teams

---
 .../ecosystem/EcosystemLandingPage.tsx        |  99 ++++++++++++++++
 .../[slug]/(active)/EcosystemSlugLayout.tsx   |  42 +++++++
 .../client/ecosystem-header.client.tsx        |  21 +++-
 .../ecosystem/[slug]/(active)/layout.tsx      |  50 +-------
 .../permissions/EcosystemPermissionsPage.tsx  |  19 +++
 .../[slug]/(active)/permissions/page.tsx      |  16 +--
 .../ecosystem/create/EcosystemCreatePage.tsx  |  29 +++++
 .../client/create-ecosystem-form.client.tsx   |   6 +-
 .../connect/ecosystem/create/page.tsx         |  22 +---
 .../dashboard/connect/ecosystem/page.tsx      | 112 +-----------------
 .../connect/ecosystem/utils/fetchEcosystem.ts |  20 ++++
 .../ecosystem/utils/fetchEcosystemList.ts     |  21 ++++
 .../analytics/_components/EmptyChartState.tsx |   2 +-
 .../ecosystem/[slug]/(active)/layout.tsx      |  19 +++
 .../[slug]/(active)/permissions/page.tsx      |   5 +
 .../connect/ecosystem/create/page.tsx         |  12 ++
 .../[project_slug]/connect/ecosystem/page.tsx |  18 ++-
 17 files changed, 311 insertions(+), 202 deletions(-)
 create mode 100644 apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/EcosystemLandingPage.tsx
 create mode 100644 apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/EcosystemSlugLayout.tsx
 create mode 100644 apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/permissions/EcosystemPermissionsPage.tsx
 create mode 100644 apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/EcosystemCreatePage.tsx
 create mode 100644 apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystem.ts
 create mode 100644 apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystemList.ts
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/layout.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/permissions/page.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/create/page.tsx

diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/EcosystemLandingPage.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/EcosystemLandingPage.tsx
new file mode 100644
index 00000000000..e7c223a4d2f
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/EcosystemLandingPage.tsx
@@ -0,0 +1,99 @@
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { BookMarkedIcon, ExternalLinkIcon, MoveRightIcon } from "lucide-react";
+import { cookies } from "next/headers";
+import Image from "next/image";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import headerImage from "./assets/header.png";
+import { fetchEcosystemList } from "./utils/fetchEcosystemList";
+
+export async function EcosystemLandingPage(props: {
+  ecosystemLayoutPath: string;
+}) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const authToken = activeAccount
+    ? cookiesManager.get(`${COOKIE_PREFIX_TOKEN}${activeAccount}`)?.value
+    : null;
+
+  // if user is logged in and has an ecosystem, redirect to the first ecosystem
+  if (authToken) {
+    const ecosystems = await fetchEcosystemList(authToken).catch((err) => {
+      console.error("failed to fetch ecosystems", err);
+      return [];
+    });
+    if (ecosystems.length > 0) {
+      redirect(`${props.ecosystemLayoutPath}/${ecosystems[0].slug}`);
+    }
+  }
+
+  // otherwise we fall through to the page
+
+  return (
+    <main className="container flex flex-col max-w-2xl gap-8 pb-6 mx-auto">
+      <Image
+        src={headerImage}
+        alt="Ecosystems"
+        sizes="100vw"
+        className="w-full"
+      />
+      <div className="flex flex-col gap-2 text-left">
+        <h2 className="text-2xl font-bold sm:text-3xl text-foreground text-balance">
+          One wallet, a whole ecosystem of apps and games
+        </h2>
+        <p className="text-muted-foreground">
+          With Ecosystem Wallets, your users can access their assets across
+          hundreds of apps and games within your ecosystem. You can control
+          which apps join your ecosystem and how their users interact with your
+          wallet.
+        </p>
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:gap-4">
+        {!authToken ? (
+          <ToolTipLabel label="Connect your wallet to create an ecosystem">
+            <Button variant="primary" className="opacity-50">
+              Create Ecosystem
+            </Button>
+          </ToolTipLabel>
+        ) : (
+          <Button variant="primary" asChild>
+            <Link href={`${props.ecosystemLayoutPath}/create`}>
+              Create Ecosystem
+            </Link>
+          </Button>
+        )}
+        <Button variant="outline" asChild>
+          <Link
+            href="https://portal.thirdweb.com/connect/ecosystems/overview"
+            target="_blank"
+            className="flex flex-row gap-2"
+          >
+            Read The Docs
+            <ExternalLinkIcon className="size-4" />
+          </Link>
+        </Button>
+      </div>
+      <div className="w-full h-0 my-2 border-t" />
+      <Link
+        href="https://portal.thirdweb.com/connect/ecosystems/overview"
+        className="mb-6 group"
+      >
+        <Card className="flex flex-col gap-3 p-6 md:p-8 md:px-10">
+          <div className="flex items-center gap-2">
+            <BookMarkedIcon className="size-5 text-muted-foreground" />
+            <h4 className="text-lg font-bold">Learn more</h4>
+          </div>
+          <p className="text-muted-foreground text-md">
+            Learn how to create and manage Ecosystem Wallets in our docs.
+          </p>
+          <div className="flex flex-row items-center gap-2 mt-4 transition-all group-hover:gap-3 group-hover:text-primary/80 text-primary text-md">
+            View Docs <MoveRightIcon className="size-4" />
+          </div>
+        </Card>
+      </Link>
+    </main>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/EcosystemSlugLayout.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/EcosystemSlugLayout.tsx
new file mode 100644
index 00000000000..65e7ab4bbe2
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/EcosystemSlugLayout.tsx
@@ -0,0 +1,42 @@
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { getAddress } from "thirdweb";
+import { fetchEcosystem } from "../../utils/fetchEcosystem";
+import { EcosystemHeader } from "./components/client/ecosystem-header.client";
+
+export async function EcosystemLayoutSlug({
+  children,
+  params,
+  ecosystemLayoutPath,
+}: {
+  children: React.ReactNode;
+  params: { slug: string };
+  ecosystemLayoutPath: string;
+}) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const authToken = activeAccount
+    ? cookies().get(COOKIE_PREFIX_TOKEN + getAddress(activeAccount))?.value
+    : null;
+
+  if (!authToken) {
+    redirect(ecosystemLayoutPath);
+  }
+
+  const ecosystem = await fetchEcosystem(params.slug, authToken);
+
+  if (!ecosystem) {
+    redirect(ecosystemLayoutPath);
+  }
+
+  return (
+    <div className="flex flex-col w-full gap-10 px-2 py-10 sm:px-4">
+      <EcosystemHeader
+        ecosystem={ecosystem}
+        ecosystemLayoutPath={ecosystemLayoutPath}
+      />
+      {children}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/ecosystem-header.client.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/ecosystem-header.client.tsx
index 8a675607a0e..9934045e075 100644
--- a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/ecosystem-header.client.tsx
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/ecosystem-header.client.tsx
@@ -60,7 +60,10 @@ function EcosystemAlertBanner({ ecosystem }: { ecosystem: Ecosystem }) {
   }
 }
 
-function EcosystemSelect(props: { ecosystem: Ecosystem }) {
+function EcosystemSelect(props: {
+  ecosystem: Ecosystem;
+  ecosystemLayoutPath: string;
+}) {
   const { data: ecosystems, isLoading } = useEcosystemList();
 
   return isLoading ? (
@@ -81,7 +84,7 @@ function EcosystemSelect(props: { ecosystem: Ecosystem }) {
           {ecosystems?.map((ecosystem) => (
             <DropdownMenuItem key={ecosystem.id} asChild>
               <Link
-                href={`/dashboard/connect/ecosystem/${ecosystem.slug}`}
+                href={`${props.ecosystemLayoutPath}/${ecosystem.slug}`}
                 className="relative flex items-center pl-8 pr-3 cursor-pointer"
               >
                 {ecosystem.slug === props.ecosystem.slug && (
@@ -93,7 +96,7 @@ function EcosystemSelect(props: { ecosystem: Ecosystem }) {
           ))}
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <Link href="/dashboard/connect/ecosystem/create" className="">
+        <Link href={`${props.ecosystemLayoutPath}/create`} className="">
           <DropdownMenuItem className="relative flex items-center pl-8 pr-3 cursor-pointer">
             <PlusCircleIcon className="absolute w-4 h-4 left-2" />
             <div className="truncate">New Ecosystem</div>
@@ -104,7 +107,10 @@ function EcosystemSelect(props: { ecosystem: Ecosystem }) {
   );
 }
 
-export function EcosystemHeader(props: { ecosystem: Ecosystem }) {
+export function EcosystemHeader(props: {
+  ecosystem: Ecosystem;
+  ecosystemLayoutPath: string;
+}) {
   const pathname = usePathname();
   const { data: fetchedEcosystem } = useEcosystem({
     slug: props.ecosystem.slug,
@@ -166,14 +172,17 @@ export function EcosystemHeader(props: { ecosystem: Ecosystem }) {
             </div>
           </div>
           <div className="flex flex-col justify-between gap-4 md:items-end">
-            <EcosystemSelect ecosystem={ecosystem} />
+            <EcosystemSelect
+              ecosystem={ecosystem}
+              ecosystemLayoutPath={props.ecosystemLayoutPath}
+            />
           </div>
         </div>
         <TabLinks
           links={[
             {
               name: "Permissions",
-              href: `/dashboard/connect/ecosystem/${ecosystem.slug}/permissions`,
+              href: `${props.ecosystemLayoutPath}/${ecosystem.slug}/permissions`,
               isActive: pathname?.endsWith("/permissions") || false, // pathname will almost never be null: https://nextjs.org/docs/app/api-reference/functions/use-pathname
             },
             {
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/layout.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/layout.tsx
index 0910f6781a1..193d6af21af 100644
--- a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/layout.tsx
@@ -1,54 +1,16 @@
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
-import { cookies } from "next/headers";
-import { redirect } from "next/navigation";
-import { getAddress } from "thirdweb";
-import type { Ecosystem } from "../../types";
-import { EcosystemHeader } from "./components/client/ecosystem-header.client";
-
-async function fetchEcosystem(slug: string, authToken: string) {
-  const res = await fetch(
-    `${process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com"}/v1/ecosystem-wallet/${slug}`,
-    {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-      },
-    },
-  );
-  if (!res.ok) {
-    const data = await res.json();
-    console.error(data);
-    return null;
-  }
-
-  const data = (await res.json()) as { result: Ecosystem };
-  return data.result;
-}
+import { EcosystemLayoutSlug } from "./EcosystemSlugLayout";
 
 export default async function Layout({
   children,
   params,
 }: { children: React.ReactNode; params: { slug: string } }) {
-  const cookiesManager = cookies();
-  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  const authToken = activeAccount
-    ? cookies().get(COOKIE_PREFIX_TOKEN + getAddress(activeAccount))?.value
-    : null;
-
-  if (!authToken) {
-    redirect("/dashboard/connect/ecosystem");
-  }
-
-  const ecosystem = await fetchEcosystem(params.slug, authToken);
-
-  if (!ecosystem) {
-    redirect("/dashboard/connect/ecosystem");
-  }
-
   return (
-    <div className="flex flex-col w-full gap-10 px-2 py-10 sm:px-4">
-      <EcosystemHeader ecosystem={ecosystem} />
+    <EcosystemLayoutSlug
+      params={params}
+      ecosystemLayoutPath="/dashboard/connect/ecosystem"
+    >
       {children}
-    </div>
+    </EcosystemLayoutSlug>
   );
 }
 
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/permissions/EcosystemPermissionsPage.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/permissions/EcosystemPermissionsPage.tsx
new file mode 100644
index 00000000000..97275c2e33f
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/permissions/EcosystemPermissionsPage.tsx
@@ -0,0 +1,19 @@
+"use client";
+import { EcosystemPartnersSection } from "../components/server/ecosystem-partners-section";
+import { IntegrationPermissionsSection } from "../components/server/integration-permissions-section";
+import { useEcosystem } from "../hooks/use-ecosystem";
+
+export function EcosystemPermissionsPage({
+  params,
+}: { params: { slug: string } }) {
+  const { ecosystem } = useEcosystem({ slug: params.slug });
+
+  return (
+    <div className="flex flex-col gap-12">
+      <IntegrationPermissionsSection ecosystem={ecosystem} />
+      {ecosystem?.permission === "PARTNER_WHITELIST" && (
+        <EcosystemPartnersSection ecosystem={ecosystem} />
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/permissions/page.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/permissions/page.tsx
index 02b129d6872..c49a8d4465c 100644
--- a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/permissions/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/permissions/page.tsx
@@ -1,17 +1,5 @@
-"use client";
-import { EcosystemPartnersSection } from "../components/server/ecosystem-partners-section";
-import { IntegrationPermissionsSection } from "../components/server/integration-permissions-section";
-import { useEcosystem } from "../hooks/use-ecosystem";
+import { EcosystemPermissionsPage } from "./EcosystemPermissionsPage";
 
 export default function Page({ params }: { params: { slug: string } }) {
-  const { ecosystem } = useEcosystem({ slug: params.slug });
-
-  return (
-    <main className="flex flex-col gap-12">
-      <IntegrationPermissionsSection ecosystem={ecosystem} />
-      {ecosystem?.permission === "PARTNER_WHITELIST" && (
-        <EcosystemPartnersSection ecosystem={ecosystem} />
-      )}
-    </main>
-  );
+  return <EcosystemPermissionsPage params={params} />;
 }
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/EcosystemCreatePage.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/EcosystemCreatePage.tsx
new file mode 100644
index 00000000000..e2a8fa22ea8
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/EcosystemCreatePage.tsx
@@ -0,0 +1,29 @@
+import { CreateEcosystemForm } from "./components/client/create-ecosystem-form.client";
+import { EcosystemWalletPricingCard } from "./components/pricing-card";
+
+export function EcosystemCreatePage(props: {
+  ecosystemLayoutPath: string;
+}) {
+  return (
+    <div className="flex flex-col w-full gap-10 px-2 py-10 sm:px-4">
+      <header className="flex flex-col gap-2">
+        <h2 className="text-4xl font-bold text-foreground">
+          Create an Ecosystem
+        </h2>
+        <p className="text-muted-foreground">
+          Create wallets that work across every chain and every app.
+        </p>
+      </header>
+      <main className="grid w-full max-w-sm gap-8 md:max-w-lg lg:max-w-4xl xl:gap-12 lg:grid-cols-2">
+        <section className="flex items-start">
+          <EcosystemWalletPricingCard />
+        </section>
+        <section className="mb-12 lg:px-4">
+          <CreateEcosystemForm
+            ecosystemLayoutPath={props.ecosystemLayoutPath}
+          />
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx
index ba0b50d3304..efdad3db4f2 100644
--- a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx
@@ -42,7 +42,9 @@ const formSchema = z.object({
   permission: z.union([z.literal("PARTNER_WHITELIST"), z.literal("ANYONE")]),
 });
 
-export function CreateEcosystemForm() {
+export function CreateEcosystemForm(props: {
+  ecosystemLayoutPath: string;
+}) {
   // When set, the confirmation modal is open the this contains the form data to be submitted
   const [formDataToBeConfirmed, setFormDataToBeConfirmed] = useState<
     z.infer<typeof formSchema> | undefined
@@ -65,7 +67,7 @@ export function CreateEcosystemForm() {
     },
     onSuccess: (slug: string) => {
       form.reset();
-      router.push(`/dashboard/connect/ecosystem/${slug}`);
+      router.push(`${props.ecosystemLayoutPath}/${slug}`);
     },
   });
 
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/page.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/page.tsx
index 017db068bd6..5005ebc851d 100644
--- a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/page.tsx
@@ -1,25 +1,7 @@
-import { CreateEcosystemForm } from "./components/client/create-ecosystem-form.client";
-import { EcosystemWalletPricingCard } from "./components/pricing-card";
+import { EcosystemCreatePage } from "./EcosystemCreatePage";
 
 export default function Page() {
   return (
-    <div className="flex flex-col w-full gap-10 px-2 py-10 sm:px-4">
-      <header className="flex flex-col gap-2">
-        <h2 className="text-4xl font-bold text-foreground">
-          Create an Ecosystem
-        </h2>
-        <p className="text-muted-foreground">
-          Create wallets that work across every chain and every app.
-        </p>
-      </header>
-      <main className="grid w-full max-w-sm gap-8 md:max-w-lg lg:max-w-4xl xl:gap-12 lg:grid-cols-2">
-        <section className="flex items-start">
-          <EcosystemWalletPricingCard />
-        </section>
-        <section className="mb-12 lg:px-4">
-          <CreateEcosystemForm />
-        </section>
-      </main>
-    </div>
+    <EcosystemCreatePage ecosystemLayoutPath="/dashboard/connect/ecosystem" />
   );
 }
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/page.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/page.tsx
index 18391a2d9ba..8dff0422804 100644
--- a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/page.tsx
@@ -1,116 +1,8 @@
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
-import { BookMarkedIcon, ExternalLinkIcon, MoveRightIcon } from "lucide-react";
-import { cookies } from "next/headers";
-import Image from "next/image";
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import headerImage from "./assets/header.png";
-import type { Ecosystem } from "./types";
-
-async function fetchEcosystemList(authToken: string) {
-  const res = await fetch(
-    `${process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com"}/v1/ecosystem-wallet/list`,
-    {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-      },
-    },
-  );
-
-  if (!res.ok) {
-    const data = await res.json();
-    console.error(data);
-    throw new Error(data?.error?.message ?? "Failed to fetch ecosystems");
-  }
-
-  const data = (await res.json()) as { result: Ecosystem[] };
-  return data.result;
-}
+import { EcosystemLandingPage } from "./EcosystemLandingPage";
 
 export default async function Page() {
-  const cookiesManager = cookies();
-  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  const authToken = activeAccount
-    ? cookiesManager.get(`${COOKIE_PREFIX_TOKEN}${activeAccount}`)?.value
-    : null;
-
-  // if user is logged in and has an ecosystem, redirect to the first ecosystem
-  if (authToken) {
-    const ecosystems = await fetchEcosystemList(authToken).catch((err) => {
-      console.error("failed to fetch ecosystems", err);
-      return [];
-    });
-    if (ecosystems.length > 0) {
-      redirect(`/dashboard/connect/ecosystem/${ecosystems[0].slug}`);
-    }
-  }
-
-  // otherwise we fall through to the page
-
   return (
-    <main className="container flex flex-col max-w-2xl gap-8 pb-6 mx-auto">
-      <Image
-        src={headerImage}
-        alt="Ecosystems"
-        sizes="100vw"
-        className="w-full"
-      />
-      <div className="flex flex-col gap-2 text-center sm:text-left">
-        <h2 className="text-2xl font-bold sm:text-3xl text-foreground text-balance">
-          One wallet, a whole ecosystem of apps and games
-        </h2>
-        <p className="text-muted-foreground">
-          With Ecosystem Wallets, your users can access their assets across
-          hundreds of apps and games within your ecosystem. You can control
-          which apps join your ecosystem and how their users interact with your
-          wallet.
-        </p>
-      </div>
-      <div className="flex flex-col gap-2 sm:flex-row sm:gap-4">
-        {!authToken ? (
-          <ToolTipLabel label="Connect your wallet to create an ecosystem">
-            <Button variant="primary" className="opacity-50">
-              Create Ecosystem
-            </Button>
-          </ToolTipLabel>
-        ) : (
-          <Link href="/dashboard/connect/ecosystem/create">
-            <Button variant="primary">Create Ecosystem</Button>
-          </Link>
-        )}
-        <Button variant="outline" asChild>
-          <Link
-            href="https://portal.thirdweb.com/connect/ecosystems/overview"
-            target="_blank"
-            className="flex flex-row gap-2"
-          >
-            Read The Docs
-            <ExternalLinkIcon className="size-4" />
-          </Link>
-        </Button>
-      </div>
-      <div className="w-full h-0 my-2 border-t" />
-      <Link
-        href="https://portal.thirdweb.com/connect/ecosystems/overview"
-        className="mb-6 group"
-      >
-        <Card className="flex flex-col gap-3 p-6 md:p-8 md:px-10">
-          <div className="flex items-center gap-2">
-            <BookMarkedIcon className="size-5 text-muted-foreground" />
-            <h4 className="text-lg font-bold">Learn more</h4>
-          </div>
-          <p className="text-muted-foreground text-md">
-            Learn how to create and manage Ecosystem Wallets in our docs.
-          </p>
-          <div className="flex flex-row items-center gap-2 mt-4 transition-all group-hover:gap-3 group-hover:text-primary/80 text-primary text-md">
-            View Docs <MoveRightIcon className="size-4" />
-          </div>
-        </Card>
-      </Link>
-    </main>
+    <EcosystemLandingPage ecosystemLayoutPath="/dashboard/connect/ecosystem" />
   );
 }
 
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystem.ts b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystem.ts
new file mode 100644
index 00000000000..3c163e4dbec
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystem.ts
@@ -0,0 +1,20 @@
+import type { Ecosystem } from "../types";
+
+export async function fetchEcosystem(slug: string, authToken: string) {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com"}/v1/ecosystem-wallet/${slug}`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+  if (!res.ok) {
+    const data = await res.json();
+    console.error(data);
+    return null;
+  }
+
+  const data = (await res.json()) as { result: Ecosystem };
+  return data.result;
+}
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystemList.ts b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystemList.ts
new file mode 100644
index 00000000000..d87600059ac
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystemList.ts
@@ -0,0 +1,21 @@
+import type { Ecosystem } from "../types";
+
+export async function fetchEcosystemList(authToken: string) {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com"}/v1/ecosystem-wallet/list`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const data = await res.json();
+    console.error(data);
+    throw new Error(data?.error?.message ?? "Failed to fetch ecosystems");
+  }
+
+  const data = (await res.json()) as { result: Ecosystem[] };
+  return data.result;
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/EmptyChartState.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/EmptyChartState.tsx
index 9ecd5f70498..e85707ceab9 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/EmptyChartState.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/EmptyChartState.tsx
@@ -26,7 +26,7 @@ export function EmptyChartState() {
   const barChartData = useMemo(() => generateRandomData(), []);
 
   return (
-    <div className="w-full h-full relative">
+    <div className="w-full h-full relative z-0">
       <span className="text-base text-muted-foreground font-semibold absolute inset-0 flex items-center justify-center z-[1]">
         No data available
       </span>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/layout.tsx
new file mode 100644
index 00000000000..4909a0581e4
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/layout.tsx
@@ -0,0 +1,19 @@
+import { EcosystemLayoutSlug } from "../../../../../../../(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/EcosystemSlugLayout";
+
+export default async function Layout(props: {
+  params: { team_slug: string; project_slug: string; slug: string };
+  children: React.ReactNode;
+}) {
+  const { team_slug, project_slug } = props.params;
+  return (
+    <EcosystemLayoutSlug
+      params={props.params}
+      ecosystemLayoutPath={`/team/${team_slug}/${project_slug}/connect/ecosystem`}
+    >
+      {props.children}
+    </EcosystemLayoutSlug>
+  );
+}
+
+// because cookies() is used
+export const dynamic = "force-dynamic";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/permissions/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/permissions/page.tsx
new file mode 100644
index 00000000000..5b069d720d7
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/permissions/page.tsx
@@ -0,0 +1,5 @@
+import { EcosystemPermissionsPage } from "../../../../../../../../(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/permissions/EcosystemPermissionsPage";
+
+export default function Page({ params }: { params: { slug: string } }) {
+  return <EcosystemPermissionsPage params={params} />;
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/create/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/create/page.tsx
new file mode 100644
index 00000000000..6fada436e52
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/create/page.tsx
@@ -0,0 +1,12 @@
+import { EcosystemCreatePage } from "../../../../../../(dashboard)/dashboard/connect/ecosystem/create/EcosystemCreatePage";
+
+export default function Page(props: {
+  params: { team_slug: string; project_slug: string };
+}) {
+  const { team_slug, project_slug } = props.params;
+  return (
+    <EcosystemCreatePage
+      ecosystemLayoutPath={`/team/${team_slug}/${project_slug}/connect/ecosystem`}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/page.tsx
index eefab8e9eac..2bad40cd354 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/page.tsx
@@ -1,9 +1,17 @@
-export default function Page() {
+import { EcosystemLandingPage } from "../../../../../(dashboard)/dashboard/connect/ecosystem/EcosystemLandingPage";
+
+export default async function Page(props: {
+  params: { team_slug: string; project_slug: string };
+}) {
+  const { team_slug, project_slug } = props.params;
   return (
-    <div className="h-full py-6 container flex items-center justify-center">
-      <h1 className="text-4xl tracking-tighter text-muted-foreground">
-        Ecosystem Wallets
-      </h1>
+    <div className="max-sm:pt-6">
+      <EcosystemLandingPage
+        ecosystemLayoutPath={`/team/${team_slug}/${project_slug}/connect/ecosystem`}
+      />
     </div>
   );
 }
+
+// because cookies() is used
+export const dynamic = "force-dynamic";