Add initial insight UI

Author: Amine Afia

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsExplorer.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import {} from "@/components/ui/dropdown-menu";
+import {} from "@/components/ui/select";
+import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
+import { Layers3 } from "lucide-react";
+import Link from "next/link";
+
+export type Blueprint = {
+  id: string;
+  name: string;
+  slug: string;
+  description: string;
+};
+
+export function BlueprintsExplorer(props: {
+  blueprints: Blueprint[];
+}) {
+  const { blueprints } = props;
+  return (
+    <div className="container">
+      <BillingAlerts className="mb-10" />
+
+      {/* Blueprints */}
+      {blueprints.length === 0 ? (
+        <div className="flex h-[450px] items-center justify-center rounded-lg border border-border ">
+          No blueprints found
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+          {blueprints.map((blueprint) => {
+            return <BlueprintCard key={blueprint.id} blueprint={blueprint} />;
+          })}
+        </div>
+      )}
+
+      <div className="h-10" />
+    </div>
+  );
+}
+
+function BlueprintCard(props: {
+  blueprint: Blueprint;
+}) {
+  const { blueprint } = props;
+  return (
+    <div
+      key={blueprint.id}
+      className="relative flex items-center gap-4 rounded-lg border border-border bg-muted/50 p-4 transition-colors hover:bg-muted/70"
+    >
+      <Layers3 className="size-10" />
+
+      <div>
+        <Link
+          className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0"
+          href={`https://portal.thirdweb.com/insight/blueprints#${blueprint.slug}`}
+        >
+          <h2 className="font-medium text-base">{blueprint.name}</h2>
+        </Link>
+
+        <p className="my-1 text-muted-foreground/70 text-xs">
+          {blueprint.description}
+        </p>
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsPage.tsx

@@ -0,0 +1,43 @@
+import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
+import { type Blueprint, BlueprintsExplorer } from "./BlueprintsExplorer";
+import { BlueprintsPageHeader } from "./BlueprintsPageHeader";
+
+export function BlueprintsPage() {
+  return (
+    <div>
+      <BillingAlerts />
+      <BlueprintsPageHeader />
+      <div className="h-6" />
+      <BlueprintsPageContent />
+    </div>
+  );
+}
+
+function getProjectBlueprints() {
+  return [
+    {
+      id: "1",
+      name: "Transactions",
+      slug: "transactions-blueprint",
+      description: "Query transaction data",
+    },
+    {
+      id: "2",
+      name: "Events",
+      slug: "events-blueprint",
+      description: "Query event data",
+    },
+    {
+      id: "3",
+      name: "Tokens",
+      slug: "tokens-blueprint",
+      description: "Query ERC-20, ERC-721, and ERC-1155 tokens",
+    },
+  ] as Blueprint[];
+}
+
+function BlueprintsPageContent() {
+  const blueprints = getProjectBlueprints();
+
+  return <BlueprintsExplorer blueprints={blueprints} />;
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsPageHeader.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { PlusIcon } from "lucide-react";
+
+export function BlueprintsPageHeader() {
+  return (
+    <div className="flex grow flex-col">
+      <div className="border-border border-b py-10">
+        <div className="container flex items-center justify-between">
+          <h1 className="font-semibold text-3xl tracking-tight">
+            Project Settings
+          </h1>
+          <Button className="cursor-not-allowed gap-2 opacity-50" disabled>
+            <PlusIcon className="size-4" />
+            Create Blueprint (Coming Soon)
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { redirect } from "next/navigation";
+import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
+import { BlueprintsPage } from "./components/BlueprintsPage";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+  const accountAddress = await getAuthTokenWalletAddress();
+
+  if (!accountAddress) {
+    const { team_slug, project_slug } = await props.params;
+    return redirect(
+      `/login?next=${encodeURIComponent(`/team/${team_slug}/${project_slug}/insight`)}`,
+    );
+  }
+
+  return <BlueprintsPage />;
+}

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

@@ -62,6 +62,10 @@ export default async function TeamLayout(props: {
               path: `/team/${params.team_slug}/${params.project_slug}/nebula`,
               name: "Nebula",
             },
+            {
+              path: `/team/${params.team_slug}/${params.project_slug}/insight`,
+              name: "Insight",
+            },
             {
               path: `/team/${params.team_slug}/${params.project_slug}/settings`,
               name: "Settings",