Add initial insight UI

Author: Amine Afia

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

@@ -0,0 +1,70 @@
+"use client";
+
+import {} from "@/components/ui/dropdown-menu";
+import {} from "lucide-react";
+import Link from "next/link";
+
+import { ProjectAvatar } from "@/components/blocks/Avatars/ProjectAvatar";
+import {} from "@/components/ui/select";
+import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
+
+export type Blueprint = {
+  id: string;
+  name: string;
+  slug: string;
+  description: string;
+};
+
+export function BlueprintsExplorer(props: {
+  blueprints: Blueprint[];
+}) {
+  const { blueprints } = props;
+  return (
+    <div className="container ">
+      {/* <div className="h-10" /> */}
+      <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"
+    >
+      <ProjectAvatar className="size-10 rounded-full" src="" />
+
+      <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,62 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { ClientOnly } from "components/ClientOnly/ClientOnly";
+import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
+import { Suspense } from "react";
+import { type Blueprint, BlueprintsExplorer } from "./BlueprintsExplorer";
+import { BlueprintsPageHeader } from "./BlueprintsPageHeader";
+
+export function BlueprintsPage(props: {
+  className?: string;
+}) {
+  return (
+    <div className={props.className}>
+      <BillingAlerts className="mb-10" />
+      <BlueprintsPageHeader />
+      <div className="h-6" />
+      <Suspense fallback={<Loading />}>
+        <BlueprintsPageAsync />
+      </Suspense>
+    </div>
+  );
+}
+
+function getProjectBlueprints() {
+  return [
+    {
+      id: "2",
+      name: "Transactions",
+      slug: "transactions-blueprint",
+      description: "Query transaction data",
+    },
+    {
+      id: "1",
+      name: "Events",
+      slug: "events-blueprint",
+      description: "Query event data",
+    },
+    {
+      id: "2",
+      name: "Tokens",
+      slug: "tokens-blueprint",
+      description: "Query ERC-20, ERC-721, and ERC-1155 tokens",
+    },
+  ] as Blueprint[];
+}
+
+async function BlueprintsPageAsync() {
+  const blueprints = getProjectBlueprints();
+
+  return (
+    <ClientOnly ssr={<Loading />}>
+      <BlueprintsExplorer blueprints={blueprints} />
+    </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]/insight/components/BlueprintsPageHeader.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ImportModal } from "components/contract-components/import-contract/modal";
+import { PlusIcon } from "lucide-react";
+import { useState } from "react";
+
+export function BlueprintsPageHeader() {
+  const [importModalOpen, setImportModalOpen] = useState(false);
+
+  return (
+    <div className="border-b pb-4">
+      <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">
+            Blueprints
+          </h1>
+        </div>
+        <div className="flex gap-2 [&>*]:grow">
+          <Button className="cursor-not-allowed gap-2 opacity-50" disabled>
+            <div className="flex items-center">
+              <PlusIcon className="size-4" />
+              Create Blueprint (Coming Soon)
+            </div>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+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 (
+    <div className="container flex grow flex-col">
+      <BlueprintsPage className="flex grow flex-col pt-10 pb-10" />
+    </div>
+  );
+}

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",