[TOOL-3496] Dashboard: Ecosystem pages UI improvements (#6311)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/yNOf1svJ8o3zjO7zQouZ/f1d0c79f-f711-42e3-9c5e-2b57bfacc05b.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/yNOf1svJ8o3zjO7zQouZ/39702f47-477c-4177-bf3b-ac41c05b5093.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/yNOf1svJ8o3zjO7zQouZ/ce5cc358-a16a-4a06-90a1-a11ff47f67e4.png)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring and enhancing the loading components and ecosystem management pages in the `dashboard` application. It introduces improvements in code structure, UI components, and error handling.

### Detailed summary
- Removed unused files from `utils`, `data`, and `ecosystem` directories.
- Updated `GenericLoadingPage` to accept a `className` prop for styling.
- Refactored loading components to use the new `GenericLoadingPage` structure.
- Enhanced `EcosystemCreatePage` layout and styling.
- Improved `EcosystemAnalyticsPage` to fetch and display wallet usage statistics.
- Replaced direct API calls with token-based authentication in ecosystem pages.
- Updated `EcosystemHeader` to utilize new UI components and improve layout.
- Refactored ecosystem creation form for better user experience and error handling.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/skeletons/GenericLoadingPage.tsx

@@ -1,10 +1,20 @@
 "use client";
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { cn } from "../../../lib/utils";
 
-export function GenericLoadingPage() {
+export function GenericLoadingPage({
+  className,
+}: {
+  className?: string;
+}) {
   return (
-    <div className="flex min-h-[500px] grow items-center justify-center rounded-lg border border-border">
+    <div
+      className={cn(
+        "flex min-h-[500px] grow items-center justify-center rounded-lg border border-border",
+        className,
+      )}
+    >
       <Spinner className="size-10" />
     </div>
   );

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemAnalyticsPage.tsx

@@ -5,25 +5,57 @@ import {
 import { RangeSelector } from "components/analytics/range-selector";
 import { getEcosystemWalletUsage } from "data/analytics/wallets/ecosystem";
 import { EcosystemWalletUsersChartCard } from "./EcosystemWalletUsersChartCard";
+import { EcosystemWalletsSummary } from "./Summary";
 
 export async function EcosystemAnalyticsPage({
   ecosystemSlug,
   interval,
   range,
-}: { ecosystemSlug: string; interval: "day" | "week"; range?: Range }) {
+}: {
+  ecosystemSlug: string;
+  interval: "day" | "week";
+  range?: Range;
+}) {
   if (!range) {
     range = getLastNDaysRange("last-120");
   }
 
-  const stats = await getEcosystemWalletUsage({
+  const allTimeStatsPromise = getEcosystemWalletUsage({
+    ecosystemSlug,
+    from: new Date(2022, 0, 1),
+    to: new Date(),
+    period: "all",
+  });
+
+  const monthlyStatsPromise = getEcosystemWalletUsage({
+    ecosystemSlug,
+    from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+    to: new Date(),
+    period: "month",
+  });
+
+  const statsPromise = getEcosystemWalletUsage({
     ecosystemSlug,
     from: range.from,
     to: range.to,
     period: interval,
   }).catch(() => null);
 
+  const [allTimeStats, monthlyStats, stats] = await Promise.all([
+    allTimeStatsPromise,
+    monthlyStatsPromise,
+    statsPromise,
+  ]);
+
   return (
     <div>
+      <EcosystemWalletsSummary
+        allTimeStats={allTimeStats ?? []}
+        monthlyStats={monthlyStats ?? []}
+      />
+
+      <div className="h-6" />
+
       <RangeSelector range={range} interval={interval} />
 
       <div className="h-6" />

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/page.tsx

@@ -1,7 +1,7 @@
 import type { Range } from "components/analytics/date-range-selector";
-import { fetchApiServer } from "data/analytics/fetch-api-server";
-import { FetchError } from "utils/error";
-import type { Ecosystem } from "../../../types";
+import { redirect } from "next/navigation";
+import { getAuthToken } from "../../../../../../../../api/lib/getAuthToken";
+import { fetchEcosystem } from "../../../utils/fetchEcosystem";
 import { EcosystemAnalyticsPage } from "./components/EcosystemAnalyticsPage";
 
 export default async function Page(props: {
@@ -19,7 +19,19 @@ export default async function Page(props: {
     props.searchParams,
   ]);
 
-  const ecosystem = await getEcosystem(params.slug);
+  const ecosystemLayoutPath = `/team/${params.team_slug}/~/ecosystem`;
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    redirect(ecosystemLayoutPath);
+  }
+
+  const ecosystem = await fetchEcosystem(params.slug, authToken);
+
+  if (!ecosystem) {
+    redirect(ecosystemLayoutPath);
+  }
+
   return (
     <EcosystemAnalyticsPage
       ecosystemSlug={ecosystem.slug}
@@ -28,19 +40,3 @@ export default async function Page(props: {
     />
   );
 }
-
-async function getEcosystem(ecosystemSlug: string) {
-  const res = await fetchApiServer(`/v1/ecosystem-wallet/${ecosystemSlug}`);
-
-  if (!res.ok) {
-    const data = await res.json();
-    console.error(data);
-    throw new FetchError(
-      res,
-      data?.message ?? data?.error?.message ?? "Failed to fetch ecosystems",
-    );
-  }
-
-  const data = (await res.json()) as { result: Ecosystem };
-  return data.result;
-}

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx

@@ -1,8 +1,7 @@
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
-import { getEcosystemWalletUsage } from "data/analytics/wallets/ecosystem";
-import { cookies } from "next/headers";
+import { SidebarLayout } from "@/components/blocks/SidebarLayout";
+import {} from "@/constants/cookie";
 import { redirect } from "next/navigation";
-import { getAddress } from "thirdweb";
+import { getAuthToken } from "../../../../../../../../api/lib/getAuthToken";
 import { fetchEcosystem } from "../../../utils/fetchEcosystem";
 import { EcosystemHeader } from "./ecosystem-header.client";
 
@@ -15,12 +14,7 @@ export async function EcosystemLayoutSlug({
   params: { slug: string };
   ecosystemLayoutPath: string;
 }) {
-  const cookiesManager = await cookies();
-  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  const authToken = activeAccount
-    ? (await cookies()).get(COOKIE_PREFIX_TOKEN + getAddress(activeAccount))
-        ?.value
-    : null;
+  const authToken = await getAuthToken();
 
   if (!authToken) {
     redirect(ecosystemLayoutPath);
@@ -32,34 +26,32 @@ export async function EcosystemLayoutSlug({
     redirect(ecosystemLayoutPath);
   }
 
-  const allTimeStatsPromise = getEcosystemWalletUsage({
-    ecosystemSlug: ecosystem.slug,
-    from: new Date(2022, 0, 1),
-    to: new Date(),
-    period: "all",
-  });
-
-  const monthlyStatsPromise = getEcosystemWalletUsage({
-    ecosystemSlug: ecosystem.slug,
-    from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
-    to: new Date(),
-    period: "month",
-  });
-
-  const [allTimeStats, monthlyStats] = await Promise.all([
-    allTimeStatsPromise,
-    monthlyStatsPromise,
-  ]);
-
   return (
-    <div className="flex w-full flex-col gap-10">
+    <div className="flex grow flex-col">
       <EcosystemHeader
         ecosystem={ecosystem}
         ecosystemLayoutPath={ecosystemLayoutPath}
-        allTimeStats={allTimeStats || []}
-        monthlyStats={monthlyStats || []}
       />
-      {children}
+
+      <SidebarLayout
+        sidebarLinks={[
+          {
+            label: "Overview",
+            href: `${ecosystemLayoutPath}/${ecosystem.slug}`,
+            exactMatch: true,
+          },
+          {
+            label: "Analytics",
+            href: `${ecosystemLayoutPath}/${ecosystem.slug}/analytics`,
+          },
+          {
+            label: "Design (coming soon)",
+            href: `${ecosystemLayoutPath}/${ecosystem.slug}#`,
+          },
+        ]}
+      >
+        {children}
+      </SidebarLayout>
     </div>
   );
 }