feat: webhooks list in dashboard

apps/dashboard/.env.example

@@ -37,7 +37,7 @@ NEXT_PUBLIC_TYPESENSE_CONTRACT_API_KEY=
 
 # posthog API key
 # - not required for prod/staging
-NEXT_PUBLIC_POSTHOG_API_KEY="ignored"
+NEXT_PUBLIC_POSTHOG_KEY=""
 
 # Stripe Customer portal
 NEXT_PUBLIC_STRIPE_KEY=

apps/dashboard/src/@/api/analytics.ts

@@ -13,6 +13,7 @@ import type {
   UserOpStats,
   WalletStats,
   WalletUserStats,
+  WebhookSummaryStats,
 } from "@/types/analytics";
 import { getAuthToken } from "./auth-token";
 import { getChains } from "./chain";
@@ -424,3 +425,45 @@ export async function getEngineCloudMethodUsage(
   const json = await res.json();
   return json.data as EngineCloudStats[];
 }
+
+export async function getWebhookMetrics(params: {
+  teamId: string;
+  projectId: string;
+  webhookId: string;
+  period?: "day" | "week" | "month" | "year" | "all";
+  from?: Date;
+  to?: Date;
+}): Promise<{ data: WebhookSummaryStats[] } | { error: string }> {
+  const searchParams = new URLSearchParams();
+
+  // Required params
+  searchParams.append("teamId", params.teamId);
+  searchParams.append("projectId", params.projectId);
+  searchParams.append("webhookId", params.webhookId);
+
+  // Optional params
+  if (params.period) {
+    searchParams.append("period", params.period);
+  }
+  if (params.from) {
+    searchParams.append("from", params.from.toISOString());
+  }
+  if (params.to) {
+    searchParams.append("to", params.to.toISOString());
+  }
+
+  const res = await fetchAnalytics(
+    `v2/webhook/summary?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (!res.ok) {
+    const reason = await res?.text();
+    return { error: reason };
+  }
+  return (await res.json()) as {
+    data: WebhookSummaryStats[];
+  };
+}

apps/dashboard/src/@/api/webhook-configs.ts

@@ -0,0 +1,271 @@
+"use server";
+
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+
+export interface WebhookConfig {
+  id: string;
+  teamId: string;
+  projectId: string;
+  destinationUrl: string;
+  description: string;
+  pausedAt: string | null;
+  webhookSecret: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  topics: {
+    id: string;
+    serviceName: string;
+    description: string;
+    createdAt: string;
+    updatedAt: string;
+    deletedAt: string | null;
+  }[];
+}
+
+interface WebhookConfigsResponse {
+  data: WebhookConfig[];
+  error?: string;
+}
+
+interface CreateWebhookConfigRequest {
+  topicIds: string[];
+  destinationUrl: string;
+  description: string;
+  isPaused?: boolean;
+}
+
+interface CreateWebhookConfigResponse {
+  data: WebhookConfig;
+  error?: string;
+}
+
+export interface Topic {
+  id: string;
+  serviceName: string;
+  description: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+}
+
+interface TopicsResponse {
+  data: Topic[];
+  error?: string;
+}
+
+interface UpdateWebhookConfigRequest {
+  destinationUrl?: string;
+  topicIds?: string[];
+  description?: string;
+  isPaused?: boolean;
+}
+
+interface UpdateWebhookConfigResponse {
+  data: WebhookConfig;
+  error?: string;
+}
+
+interface DeleteWebhookConfigResponse {
+  data: WebhookConfig;
+  error?: string;
+}
+
+export async function getWebhookConfigs(props: {
+  teamIdOrSlug: string;
+  projectIdOrSlug: string;
+}): Promise<WebhookConfigsResponse> {
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    return {
+      data: [],
+      error: "Authentication required",
+    };
+  }
+
+  const response = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${props.teamIdOrSlug}/projects/${props.projectIdOrSlug}/webhook-configs`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+      method: "GET",
+    },
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    return {
+      data: [],
+      error: `Failed to fetch webhook configs: ${errorText}`,
+    };
+  }
+
+  const result = await response.json();
+  return {
+    data: result.data,
+    error: undefined,
+  };
+}
+
+export async function createWebhookConfig(props: {
+  teamIdOrSlug: string;
+  projectIdOrSlug: string;
+  config: CreateWebhookConfigRequest;
+}): Promise<CreateWebhookConfigResponse> {
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    return {
+      data: {} as WebhookConfig,
+      error: "Authentication required",
+    };
+  }
+
+  const response = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${props.teamIdOrSlug}/projects/${props.projectIdOrSlug}/webhook-configs`,
+    {
+      body: JSON.stringify(props.config),
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    },
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    return {
+      data: {} as WebhookConfig,
+      error: `Failed to create webhook config: ${errorText}`,
+    };
+  }
+
+  const result = await response.json();
+  return {
+    data: result.data,
+    error: undefined,
+  };
+}
+
+export async function getAvailableTopics(): Promise<TopicsResponse> {
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    return {
+      data: [],
+      error: "Authentication required",
+    };
+  }
+
+  const response = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/webhook-topics`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+      method: "GET",
+    },
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    return {
+      data: [],
+      error: `Failed to fetch topics: ${errorText}`,
+    };
+  }
+
+  const result = await response.json();
+  return {
+    data: result.data,
+    error: undefined,
+  };
+}
+
+export async function updateWebhookConfig(props: {
+  teamIdOrSlug: string;
+  projectIdOrSlug: string;
+  webhookConfigId: string;
+  config: UpdateWebhookConfigRequest;
+}): Promise<UpdateWebhookConfigResponse> {
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    return {
+      data: {} as WebhookConfig,
+      error: "Authentication required",
+    };
+  }
+
+  const response = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${props.teamIdOrSlug}/projects/${props.projectIdOrSlug}/webhook-configs/${props.webhookConfigId}`,
+    {
+      body: JSON.stringify(props.config),
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+      method: "PATCH",
+    },
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    return {
+      data: {} as WebhookConfig,
+      error: `Failed to update webhook config: ${errorText}`,
+    };
+  }
+
+  const result = await response.json();
+  return {
+    data: result.data,
+    error: undefined,
+  };
+}
+
+export async function deleteWebhookConfig(props: {
+  teamIdOrSlug: string;
+  projectIdOrSlug: string;
+  webhookConfigId: string;
+}): Promise<DeleteWebhookConfigResponse> {
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    return {
+      data: {} as WebhookConfig,
+      error: "Authentication required",
+    };
+  }
+
+  const response = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${props.teamIdOrSlug}/projects/${props.projectIdOrSlug}/webhook-configs/${props.webhookConfigId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+      method: "DELETE",
+    },
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    return {
+      data: {} as WebhookConfig,
+      error: `Failed to delete webhook config: ${errorText}`,
+    };
+  }
+
+  const result = await response.json();
+  return {
+    data: result.data,
+    error: undefined,
+  };
+}

apps/dashboard/src/@/api/webhook-metrics.ts

@@ -0,0 +1,16 @@
+"use server";
+
+import { getWebhookMetrics } from "@/api/analytics";
+import type { WebhookSummaryStats } from "@/types/analytics";
+
+export async function getWebhookMetricsAction(params: {
+  teamId: string;
+  projectId: string;
+  webhookId: string;
+  period?: "day" | "week" | "month" | "year" | "all";
+  from?: Date;
+  to?: Date;
+}): Promise<WebhookSummaryStats | null> {
+  const metrics = await getWebhookMetrics(params);
+  return metrics[0] || null;
+}

apps/dashboard/src/@/types/analytics.ts

@@ -72,6 +72,16 @@ export interface UniversalBridgeWalletStats {
   developerFeeUsdCents: number;
 }
 
+export interface WebhookSummaryStats {
+  webhookId: string;
+  totalRequests: number;
+  successRequests: number;
+  errorRequests: number;
+  successRate: number;
+  avgLatencyMs: number;
+  errorBreakdown: Record<string, unknown>;
+}
+
 export interface AnalyticsQueryParams {
   teamId: string;
   projectId?: string;

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/create-webhook-config-modal.tsx

@@ -0,0 +1,23 @@
+import type { Topic } from "@/api/webhook-configs";
+import { WebhookConfigModal } from "./webhook-config-modal";
+
+interface CreateWebhookConfigModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  teamSlug: string;
+  projectSlug: string;
+  topics: Topic[];
+}
+
+export function CreateWebhookConfigModal(props: CreateWebhookConfigModalProps) {
+  return (
+    <WebhookConfigModal
+      mode="create"
+      onOpenChange={props.onOpenChange}
+      open={props.open}
+      projectSlug={props.projectSlug}
+      teamSlug={props.teamSlug}
+      topics={props.topics}
+    />
+  );
+}