Add webhooks feature to Insight dashboard

apps/dashboard/src/@/api/insight/webhooks.ts

@@ -0,0 +1,157 @@
+"use server";
+
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+import { THIRDWEB_INSIGHT_API_DOMAIN } from "constants/urls";
+
+export interface WebhookResponse {
+  id: string;
+  name: string;
+  team_id: string;
+  project_id: string;
+  webhook_url: string;
+  webhook_secret: string;
+  filters: WebhookFilters;
+  suspended_at: string | null;
+  suspended_reason: string | null;
+  disabled: boolean;
+  created_at: string;
+  updated_at: string | null;
+}
+
+export interface WebhookFilters {
+  "v1.events"?: {
+    chain_ids?: string[];
+    addresses?: string[];
+    signatures?: Array<{
+      sig_hash: string;
+      abi?: string;
+      params?: Record<string, unknown>;
+    }>;
+  };
+  "v1.transactions"?: {
+    chain_ids?: string[];
+    from_addresses?: string[];
+    to_addresses?: string[];
+    signatures?: Array<{
+      sig_hash: string;
+      abi?: string;
+      params?: string[];
+    }>;
+  };
+}
+
+interface CreateWebhookPayload {
+  name: string;
+  webhook_url: string;
+  filters: WebhookFilters;
+}
+
+interface WebhooksListResponse {
+  data: WebhookResponse[];
+}
+
+interface WebhookSingleResponse {
+  data: WebhookResponse;
+}
+
+interface TestWebhookPayload {
+  webhook_url: string;
+  type?: "event" | "transaction";
+}
+
+interface TestWebhookResponse {
+  success: boolean;
+}
+
+export async function createWebhook(
+  payload: CreateWebhookPayload,
+  clientId: string,
+): Promise<WebhookSingleResponse> {
+  const authToken = await getAuthToken();
+  const response = await fetch(`${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Failed to create webhook: ${errorText}`);
+  }
+
+  return await response.json();
+}
+
+export async function getWebhooks(
+  clientId: string,
+): Promise<WebhooksListResponse> {
+  const authToken = await getAuthToken();
+  const response = await fetch(`${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks`, {
+    method: "GET",
+    headers: {
+      "x-client-id": clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Failed to get webhooks: ${errorText}`);
+  }
+
+  return await response.json();
+}
+
+export async function deleteWebhook(
+  webhookId: string,
+  clientId: string,
+): Promise<WebhookSingleResponse> {
+  const authToken = await getAuthToken();
+  const response = await fetch(
+    `${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks/${webhookId}`,
+    {
+      method: "DELETE",
+      headers: {
+        "x-client-id": clientId,
+        Authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Failed to delete webhook: ${errorText}`);
+  }
+
+  return await response.json();
+}
+
+export async function testWebhook(
+  payload: TestWebhookPayload,
+  clientId: string,
+): Promise<TestWebhookResponse> {
+  const authToken = await getAuthToken();
+  const response = await fetch(
+    `${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks/test`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-client-id": clientId,
+        Authorization: `Bearer ${authToken}`,
+      },
+      body: JSON.stringify(payload),
+    },
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Failed to test webhook: ${errorText}`);
+  }
+
+  return await response.json();
+}

apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

@@ -137,7 +137,7 @@ function RenderSidebarGroup(props: {
         }
 
         if ("separator" in link) {
-          return <SidebarSeparator className="my-1" />;
+          return <SidebarSeparator className="my-1" key="separator" />;
         }
 
         return (

apps/dashboard/src/@/components/blocks/multi-select.tsx

@@ -165,7 +165,9 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
           {props.customTrigger || (
             <Button
               ref={ref}
-              {...props}
+              {...(() => {
+                return { ...props };
+              })()}
               onClick={handleTogglePopover}
               className={cn(
                 "flex h-auto min-h-10 w-full items-center justify-between rounded-md border border-border bg-inherit p-3 hover:bg-inherit",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/InsightPageLayout.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { TabPathLinks } from "@/components/ui/tabs";
+import { FooterLinksSection } from "../components/footer/FooterLinksSection";
+
+export function InsightPageLayout(props: {
+  projectSlug: string;
+  projectId: string;
+  teamSlug: string;
+  children: React.ReactNode;
+}) {
+  const insightLayoutSlug = `/team/${props.teamSlug}/${props.projectSlug}/insight`;
+
+  return (
+    <div className="flex grow flex-col">
+      {/* header */}
+      <div className="pt-4 lg:pt-6">
+        <div className="container flex max-w-7xl flex-col gap-4">
+          <div>
+            <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
+              Insight
+            </h1>
+            <p className="text-muted-foreground text-sm">
+              APIs to retrieve blockchain data from any EVM chain, enrich it
+              with metadata, and transform it using custom logic
+            </p>
+          </div>
+        </div>
+
+        <div className="h-4" />
+
+        {/* Nav */}
+        <TabPathLinks
+          scrollableClassName="container max-w-7xl"
+          links={[
+            {
+              name: "Overview",
+              path: `${insightLayoutSlug}`,
+              exactMatch: true,
+            },
+            {
+              name: "Webhooks",
+              path: `${insightLayoutSlug}/webhooks`,
+            },
+          ]}
+        />
+      </div>
+
+      {/* content */}
+      <div className="h-6" />
+      <div className="container flex max-w-7xl grow flex-col gap-6">
+        <div>{props.children}</div>
+      </div>
+      <div className="h-20" />
+
+      {/* footer */}
+      <div className="border-border border-t">
+        <div className="container max-w-7xl">
+          <InsightFooter />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function InsightFooter() {
+  return (
+    <FooterLinksSection
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            label: "Overview",
+            href: "https://portal.thirdweb.com/insight",
+          },
+          {
+            label: "API Reference",
+            href: "https://insight-api.thirdweb.com/reference",
+          },
+        ],
+      }}
+      center={{
+        title: "Tutorials",
+        links: [
+          {
+            label:
+              "Blockchain Data on Any EVM - Quick and Easy REST APIs for Onchain Data",
+            href: "https://www.youtube.com/watch?v=U2aW7YIUJVw",
+          },
+          {
+            label: "Build a Whale Alerts Telegram Bot with Insight",
+            href: "https://www.youtube.com/watch?v=HvqewXLVRig",
+          },
+        ],
+      }}
+      right={{
+        title: "Demos",
+        links: [
+          {
+            label: "API Playground",
+            href: "https://playground.thirdweb.com/insight",
+          },
+        ],
+      }}
+      trackingCategory="insight"
+    />
+  );
+}

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

@@ -0,0 +1,34 @@
+import { getProject } from "@/api/projects";
+import { getTeamBySlug } from "@/api/team";
+import { redirect } from "next/navigation";
+import { InsightPageLayout } from "./InsightPageLayout";
+
+export default async function Layout(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+  children: React.ReactNode;
+}) {
+  const { team_slug, project_slug } = await props.params;
+
+  const [team, project] = await Promise.all([
+    getTeamBySlug(team_slug),
+    getProject(team_slug, project_slug),
+  ]);
+
+  if (!team) {
+    redirect("/team");
+  }
+
+  if (!project) {
+    redirect(`/team/${team_slug}`);
+  }
+
+  return (
+    <InsightPageLayout
+      projectSlug={project.slug}
+      teamSlug={team_slug}
+      projectId={project.id}
+    >
+      {props.children}
+    </InsightPageLayout>
+  );
+}