feat: dashboard analytics for webhooks

Author: arcoraven

apps/dashboard/.storybook/main.ts

@@ -9,15 +9,13 @@ 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: {},
@@ -28,6 +26,8 @@ const config: StorybookConfig = {
     },
   },
   staticDirs: ["../public"],
-  stories: ["../src/**/*.stories.tsx"],
+  features: {
+    experimentalRSC: true,
+  },
 };
 export default config;

apps/dashboard/.storybook/preview.tsx

@@ -2,10 +2,11 @@ import type { Preview } from "@storybook/nextjs";
 import "../src/global.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MoonIcon, SunIcon } from "lucide-react";
-import { Inter as interFont } from "next/font/google";
 import { ThemeProvider, useTheme } from "next-themes";
+import { Inter as interFont } from "next/font/google";
 // biome-ignore lint/style/useImportType: <explanation>
-import React, { useEffect } from "react";
+import React from "react";
+import { useEffect } from "react";
 import { Toaster } from "sonner";
 import { Button } from "../src/@/components/ui/button";
 
@@ -17,33 +18,45 @@ const fontSans = interFont({
 });
 
 const customViewports = {
-  sm: {
-    // Larger phones (iphone 15 plus / 15 pro max)
-    name: "iPhone Plus",
-    styles: {
-      height: "932px",
-      width: "430px",
-    },
-  },
   xs: {
     // Regular sized phones (iphone 15 / 15 pro)
     name: "iPhone",
     styles: {
-      height: "844px",
       width: "390px",
+      height: "844px",
+    },
+  },
+  sm: {
+    // Larger phones (iphone 15 plus / 15 pro max)
+    name: "iPhone Plus",
+    styles: {
+      width: "430px",
+      height: "932px",
     },
   },
 };
 
 const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: customViewports,
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
   decorators: [
     (Story) => {
       return (
         <ThemeProvider
           attribute="class"
-          defaultTheme="dark"
           disableTransitionOnChange
           enableSystem={false}
+          defaultTheme="dark"
         >
           <StoryLayout>
             <Story />
@@ -52,22 +65,13 @@ 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(() => {
@@ -79,10 +83,10 @@ function StoryLayout(props: { children: React.ReactNode }) {
       <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,5 +1,8 @@
 [
   {
+    "name": "Your Collection #1",
+    "description": "Remember to replace this description",
+    "image": "ipfs://NewUriToReplace/1.png",
     "attributes": [
       {
         "trait_type": "Background",
@@ -29,12 +32,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",
@@ -64,9 +67,6 @@
         "trait_type": "Top lid",
         "value": "Middle"
       }
-    ],
-    "description": "Remember to replace this description",
-    "image": "ipfs://NewUriToReplace/2.png",
-    "name": "Your Collection #2"
+    ]
   }
 ]

apps/dashboard/redirects.js

@@ -106,9 +106,9 @@ const projectPageRedirects = [
     source: `${projectRoute}/nebula/:path*`,
   },
   {
+    source: `${projectRoute}/connect/analytics`,
     destination: `${projectRoute}`,
     permanent: false,
-    source: `${projectRoute}/connect/analytics`,
   },
 ];
 

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

@@ -24,9 +24,7 @@ async function fetchAnalytics(
   input: string | URL,
   init?: RequestInit,
 ): Promise<Response> {
-  // const token = await getAuthToken();
-  // DEBUG
-  const token = 'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIweDAxNjc1N2REZjJBYjZhOTk4YTQ3MjlBODBhMDkxMzA4ZDkwNTlFMTciLCJzdWIiOiIweGE1Qjg0OTJEODIyM0QyNTVkQjI3OUM3YzNlYmRBMzRCZTVlQzlEODUiLCJhdWQiOiJ0aGlyZHdlYi5jb20iLCJleHAiOjE3NTA4NjU2NzQsIm5iZiI6MTc1MDYwNTg3MiwiaWF0IjoxNzUwNjA2NDc0LCJqdGkiOiIzNmNjOGExYjBhYWY5ODA4ZWEyMjIyOTc4MzI5NDEwMzlkNDA2OTE0ZTJhN2U3YTQxYmM4ZDc1MWJiOTAzODk4IiwiY3R4Ijp7fX0.MHgzZGE4ZGUyM2M1Y2U2ZGExNWY0MTM4OGM3YjFjM2ZhNWNjODlkMDM3M2Q0ZjJkZDg0NGNmZWM1OTJlNTY4MDY3NGY2MmJkNWY1ZWIxMWIyYWRkNmRkN2Q3NmFlNWJjNTgxNWYzNTYwNDk3NzVkYjNiZGJlNTVjNDQyNDFjMTYzZTFi';
+  const token = await getAuthToken();
   if (!token) {
     throw new Error("You are not authorized to perform this action");
   }

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

@@ -4,26 +4,26 @@ import "server-only";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import { getAuthToken } from "./auth-token";
 
-    export type WebhookConfig = {
-        id: string;
-        description: string | null;
-        createdAt: Date;
-        updatedAt: Date;
-        deletedAt: Date | null;
-        teamId: string;
-        projectId: string;
-        destinationUrl: string;
-        pausedAt: Date | null;
-        webhookSecret: string;
-    }
+export type WebhookConfig = {
+  id: string;
+  description: string | null;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date | null;
+  teamId: string;
+  projectId: string;
+  destinationUrl: string;
+  pausedAt: Date | null;
+  webhookSecret: string;
+};
 
 export async function getWebhookConfigs(
   teamIdOrSlug: string,
   projectIdOrSlug: string,
-): Promise< {data: WebhookConfig[] } |  {error: string}> {
+): Promise<{ data: WebhookConfig[] } | { error: string }> {
   const token = await getAuthToken();
   if (!token) {
-    return { error: "Unauthorized." }
+    return { error: "Unauthorized." };
   }
 
   const res = await fetch(
@@ -35,14 +35,15 @@ export async function getWebhookConfigs(
     },
   );
   try {
-    const json = (await res.json()) as { data: WebhookConfig[],
-        error: { message: string};
-     };
-     if (json.error) {
-        return { error: json.error.message }
-     }
-     return { data: json.data }
-  } catch (e) {
-    return { error: "Failed to fetch webhooks." }
+    const json = (await res.json()) as {
+      data: WebhookConfig[];
+      error: { message: string };
+    };
+    if (json.error) {
+      return { error: json.error.message };
+    }
+    return { data: json.data };
+  } catch {
+    return { error: "Failed to fetch webhooks." };
   }
 }