Insight Dashboard

Author: MananTank

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

@@ -0,0 +1,23 @@
+import { redirect } from "next/navigation";
+import { isValidBlueprintSlug } from "./validBlueprintSlugs";
+
+export default async function Page(props: {
+  params: Promise<{
+    team_slug: string;
+    project_slug: string;
+    blueprint_slug: string;
+  }>;
+}) {
+  // currently only supported blueprint_slug's are "transactions", "events", and "erc20-tokens"
+  const params = await props.params;
+
+  if (!isValidBlueprintSlug(params.blueprint_slug)) {
+    return redirect(`/team/${params.team_slug}/${params.project_slug}/insight`);
+  }
+
+  return (
+    <div className="container flex grow flex-col py-8">
+      page content for {params.blueprint_slug}
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/validBlueprintSlugs.ts

@@ -0,0 +1,11 @@
+export type OfficialBlueprintSlug = "transactions" | "events" | "erc20-tokens";
+
+export function isValidBlueprintSlug(
+  blueprint_slug: string,
+): blueprint_slug is OfficialBlueprintSlug {
+  return (
+    blueprint_slug === "transactions" ||
+    blueprint_slug === "events" ||
+    blueprint_slug === "erc20-tokens"
+  );
+}

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

@@ -1,10 +1,20 @@
+import { Button } from "@/components/ui/button";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import {
+  ArrowUpDownIcon,
+  CircleDotDashedIcon,
+  PlusIcon,
+  ZapIcon,
+} from "lucide-react";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
-import { BlueprintsPage } from "./components/BlueprintsPage";
+import type { OfficialBlueprintSlug } from "./[blueprint_slug]/validBlueprintSlugs";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
 }) {
+  const params = await props.params;
   const accountAddress = await getAuthTokenWalletAddress();
 
   if (!accountAddress) {
@@ -14,5 +24,104 @@ export default async function Page(props: {
     );
   }
 
-  return <BlueprintsPage />;
+  return (
+    <div className="flex grow flex-col">
+      <div className="border-border border-b py-10">
+        <div className="container flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <h1 className="font-semibold text-2xl tracking-tight sm:text-3xl">
+            Insight
+          </h1>
+          <ToolTipLabel label="Coming Soon">
+            <Button className="gap-2" disabled>
+              <PlusIcon className="size-4" />
+              Add Blueprint <span className="lg:hidden"> (Coming Soon) </span>
+            </Button>
+          </ToolTipLabel>
+        </div>
+      </div>
+      <div className="container py-8">
+        <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}
+                teamSlug={params.team_slug}
+                projectSlug={params.project_slug}
+                icon={blueprint.icon}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type Blueprint = {
+  id: string;
+  name: string;
+  slug: OfficialBlueprintSlug;
+  description: string;
+  icon: React.FC<{ className?: string }>;
+};
+
+const blueprints: Blueprint[] = [
+  {
+    id: "1",
+    name: "Transactions",
+    slug: "transactions",
+    description: "Query transaction data",
+    icon: ArrowUpDownIcon,
+  },
+  {
+    id: "2",
+    name: "Events",
+    slug: "events",
+    description: "Query event data",
+    icon: ZapIcon,
+  },
+  {
+    id: "3",
+    name: "Tokens",
+    slug: "erc20-tokens",
+    description: "Query ERC-20, ERC-721, and ERC-1155 tokens",
+    icon: CircleDotDashedIcon,
+  },
+];
+
+function BlueprintCard(props: {
+  blueprint: Blueprint;
+  teamSlug: string;
+  projectSlug: string;
+  icon: React.FC<{ className?: string }>;
+}) {
+  const { blueprint } = props;
+  return (
+    <div
+      key={blueprint.id}
+      className="relative rounded-lg border border-border bg-muted/50 p-4 hover:bg-muted/70"
+    >
+      <div className="flex items-center gap-4">
+        <div className="rounded-xl border p-1">
+          <div className="rounded-lg border bg-muted p-1.5">
+            <props.icon className="size-5 text-muted-foreground" />
+          </div>
+        </div>
+
+        <div>
+          <Link
+            className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0"
+            href={`/team/${props.teamSlug}/${props.projectSlug}/insight/${blueprint.slug}`}
+          >
+            <h2 className="font-semibold text-lg">{blueprint.name}</h2>
+          </Link>
+
+          <p className="text-muted-foreground text-sm">
+            {blueprint.description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
 }