feat: webhook analytics tab

Author: arcoraven

apps/dashboard/.storybook/main.ts

@@ -9,13 +9,15 @@ function getAbsolutePath(value: string): string {
   return dirname(require.resolve(join(value, "package.json")));
 }
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.tsx"],
   addons: [
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@chromatic-com/storybook"),
     getAbsolutePath("@storybook/addon-docs"),
   ],
+  features: {
+    experimentalRSC: true,
+  },
   framework: {
     name: getAbsolutePath("@storybook/nextjs"),
     options: {},
@@ -26,8 +28,6 @@ const config: StorybookConfig = {
     },
   },
   staticDirs: ["../public"],
-  features: {
-    experimentalRSC: true,
-  },
+  stories: ["../src/**/*.stories.tsx"],
 };
 export default config;

apps/dashboard/.storybook/preview.tsx

@@ -2,11 +2,10 @@ import type { Preview } from "@storybook/nextjs";
 import "../src/global.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MoonIcon, SunIcon } from "lucide-react";
-import { ThemeProvider, useTheme } from "next-themes";
 import { Inter as interFont } from "next/font/google";
+import { ThemeProvider, useTheme } from "next-themes";
 // biome-ignore lint/style/useImportType: <explanation>
-import React from "react";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { Toaster } from "sonner";
 import { Button } from "../src/@/components/ui/button";
 
@@ -18,45 +17,33 @@ const fontSans = interFont({
 });
 
 const customViewports = {
-  xs: {
-    // Regular sized phones (iphone 15 / 15 pro)
-    name: "iPhone",
-    styles: {
-      width: "390px",
-      height: "844px",
-    },
-  },
   sm: {
     // Larger phones (iphone 15 plus / 15 pro max)
     name: "iPhone Plus",
     styles: {
-      width: "430px",
       height: "932px",
+      width: "430px",
     },
   },
-};
-
-const preview: Preview = {
-  parameters: {
-    viewport: {
-      viewports: customViewports,
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
+  xs: {
+    // Regular sized phones (iphone 15 / 15 pro)
+    name: "iPhone",
+    styles: {
+      height: "844px",
+      width: "390px",
     },
   },
+};
 
+const preview: Preview = {
   decorators: [
     (Story) => {
       return (
         <ThemeProvider
           attribute="class"
+          defaultTheme="dark"
           disableTransitionOnChange
           enableSystem={false}
-          defaultTheme="dark"
         >
           <StoryLayout>
             <Story />
@@ -65,13 +52,22 @@ const preview: Preview = {
       );
     },
   ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    viewport: {
+      viewports: customViewports,
+    },
+  },
 };
 
 export default preview;
 
-function StoryLayout(props: {
-  children: React.ReactNode;
-}) {
+function StoryLayout(props: { children: React.ReactNode }) {
   const { setTheme, theme } = useTheme();
 
   useEffect(() => {
@@ -83,10 +79,10 @@ function StoryLayout(props: {
       <div className="flex min-h-dvh min-w-0 flex-col bg-background text-foreground">
         <div className="fixed right-0 bottom-0 z-50 flex justify-end gap-2 p-4">
           <Button
+            className="h-auto w-auto shrink-0 rounded-full p-2"
             onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
             size="sm"
             variant="outline"
-            className="h-auto w-auto shrink-0 rounded-full p-2"
           >
             {theme === "dark" ? (
               <MoonIcon className="size-4" />

apps/dashboard/public/assets/examples/example.json

@@ -1,8 +1,5 @@
 [
   {
-    "name": "Your Collection #1",
-    "description": "Remember to replace this description",
-    "image": "ipfs://NewUriToReplace/1.png",
     "attributes": [
       {
         "trait_type": "Background",
@@ -32,12 +29,12 @@
         "trait_type": "Top lid",
         "value": "High"
       }
-    ]
+    ],
+    "description": "Remember to replace this description",
+    "image": "ipfs://NewUriToReplace/1.png",
+    "name": "Your Collection #1"
   },
   {
-    "name": "Your Collection #2",
-    "description": "Remember to replace this description",
-    "image": "ipfs://NewUriToReplace/2.png",
     "attributes": [
       {
         "trait_type": "Background",
@@ -67,6 +64,9 @@
         "trait_type": "Top lid",
         "value": "Middle"
       }
-    ]
+    ],
+    "description": "Remember to replace this description",
+    "image": "ipfs://NewUriToReplace/2.png",
+    "name": "Your Collection #2"
   }
 ]

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

@@ -13,6 +13,8 @@ import type {
   UserOpStats,
   WalletStats,
   WalletUserStats,
+  WebhookLatencyStats,
+  WebhookRequestStats,
   WebhookSummaryStats,
 } from "@/types/analytics";
 import { getAuthToken } from "./auth-token";
@@ -426,44 +428,56 @@ export async function getEngineCloudMethodUsage(
   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);
+export async function getWebhookSummary(
+  params: AnalyticsQueryParams & { webhookId: string },
+): Promise<{ data: WebhookSummaryStats[] } | { error: string }> {
+  const searchParams = buildSearchParams(params);
   searchParams.append("webhookId", params.webhookId);
 
-  // Optional params
-  if (params.period) {
-    searchParams.append("period", params.period);
-  }
-  if (params.from) {
-    searchParams.append("from", params.from.toISOString());
+  const res = await fetchAnalytics(
+    `v2/webhook/summary?${searchParams.toString()}`,
+  );
+  if (!res.ok) {
+    const reason = await res.text();
+    return { error: reason };
   }
-  if (params.to) {
-    searchParams.append("to", params.to.toISOString());
+
+  return (await res.json()) as { data: WebhookSummaryStats[] };
+}
+
+export async function getWebhookRequests(
+  params: AnalyticsQueryParams & { webhookId?: string },
+): Promise<{ data: WebhookRequestStats[] } | { error: string }> {
+  const searchParams = buildSearchParams(params);
+  if (params.webhookId) {
+    searchParams.append("webhookId", params.webhookId);
   }
 
   const res = await fetchAnalytics(
-    `v2/webhook/summary?${searchParams.toString()}`,
-    {
-      method: "GET",
-    },
+    `v2/webhook/requests?${searchParams.toString()}`,
   );
+  if (!res.ok) {
+    const reason = await res.text();
+    return { error: reason };
+  }
 
+  return (await res.json()) as { data: WebhookRequestStats[] };
+}
+
+export async function getWebhookLatency(
+  params: AnalyticsQueryParams & { webhookId?: string },
+): Promise<{ data: WebhookLatencyStats[] } | { error: string }> {
+  const searchParams = buildSearchParams(params);
+  if (params.webhookId) {
+    searchParams.append("webhookId", params.webhookId);
+  }
+  const res = await fetchAnalytics(
+    `v2/webhook/latency?${searchParams.toString()}`,
+  );
   if (!res.ok) {
-    const reason = await res?.text();
+    const reason = await res.text();
     return { error: reason };
   }
-  return (await res.json()) as {
-    data: WebhookSummaryStats[];
-  };
+
+  return (await res.json()) as { data: WebhookLatencyStats[] };
 }