Add support for chain filtering in webhook creation (#7209)

## [Dashboard] Feature: Add Chain Filtering for Webhooks

## Notes for the reviewer
This PR adds support for filtering available chains in the webhook creation flow. It fetches supported chains from the Insight API and restricts the chain selection in the UI to only those chains that are supported for webhooks.

## How to test
1. Navigate to the webhooks page for a project
2. Verify that the chain selector in the webhook creation modal only shows supported chains
3. Confirm that the API call to fetch supported chains works correctly

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added support for dynamically fetching and displaying supported blockchain networks when creating or managing webhooks.
  - The network selector now only shows networks that are currently supported for webhooks.
  - Users are notified if no supported blockchain networks are available for webhooks.

- **Bug Fixes**
  - Improved error handling and messaging when no supported blockchain networks are available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on enhancing the `NetworkSelectors` and webhook components by introducing support for `chainIds`. It adds functionality to filter chains based on the provided IDs and ensures that the `CreateWebhookModal` and `WebhooksTable` components utilize these IDs.

### Detailed summary
- Added `chainIds` prop to `NetworkSelectors`.
- Modified `useAllChainsData` to filter `allChains` based on `chainIds`.
- Updated `CreateWebhookModal` to accept `supportedChainIds`.
- Updated `WebhooksTable` to accept `supportedChainIds`.
- Introduced `getSupportedWebhookChains` API function to fetch supported chains.
- Updated `FilterDetailsStep` to use `supportedChainIds`.
- Modified `WebhooksPage` to fetch and handle `supportedChainIds` from the API.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: AmineAfia

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

@@ -67,6 +67,10 @@ interface TestWebhookResponse {
   error?: string;
 }
 
+type SupportedWebhookChainsResponse =
+  | { chains: Array<number> }
+  | { error: string };
+
 export async function createWebhook(
   payload: CreateWebhookPayload,
   clientId: string,
@@ -205,3 +209,31 @@ export async function testWebhook(
     };
   }
 }
+
+export async function getSupportedWebhookChains(): Promise<SupportedWebhookChainsResponse> {
+  try {
+    const response = await fetch(
+      `https://${THIRDWEB_INSIGHT_API_DOMAIN}/service/chains`,
+      {
+        method: "GET",
+        headers: {
+          "x-service-api-key": process.env.INSIGHT_SERVICE_API_KEY || "",
+        },
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.json();
+      return { error: `Failed to fetch supported chains: ${errorText.error}` };
+    }
+
+    const data = await response.json();
+    if (Array.isArray(data.data)) {
+      return { chains: data.data };
+    }
+    return { error: "Unexpected response format" };
+  } catch (error) {
+    console.error("Error fetching supported chains:", error);
+    return { error: `Failed to fetch supported chains: ${error}` };
+  }
+}

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

@@ -27,8 +27,15 @@ export function MultiNetworkSelector(props: {
   side?: "left" | "right" | "top" | "bottom";
   showSelectedValuesInModal?: boolean;
   client: ThirdwebClient;
+  chainIds?: number[];
 }) {
-  const { allChains, idToChain } = useAllChainsData();
+  let { allChains, idToChain } = useAllChainsData();
+
+  if (props.chainIds && props.chainIds.length > 0) {
+    allChains = allChains.filter((chain) =>
+      props.chainIds?.includes(chain.chainId),
+    );
+  }
 
   const options = useMemo(() => {
     let sortedChains = allChains;

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx

@@ -41,9 +41,13 @@ import {
 
 interface CreateWebhookModalProps {
   clientId: string;
+  supportedChainIds: Array<number>;
 }
 
-export function CreateWebhookModal({ clientId }: CreateWebhookModalProps) {
+export function CreateWebhookModal({
+  clientId,
+  supportedChainIds,
+}: CreateWebhookModalProps) {
   const router = useDashboardRouter();
   const thirdwebClient = useThirdwebClient();
   const [isOpen, setIsOpen] = useState(false);
@@ -270,6 +274,7 @@ export function CreateWebhookModal({ clientId }: CreateWebhookModalProps) {
                   goToNextStep={goToNextStep}
                   goToPreviousStep={goToPreviousStep}
                   isLoading={isLoading}
+                  supportedChainIds={supportedChainIds}
                 />
               )}
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -24,6 +23,7 @@ import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useQueryClient } from "@tanstack/react-query";
 import type { UseFormReturn } from "react-hook-form";
 
+import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { truncateMiddle } from "../utils/abiUtils";
 import type {
   AbiData,
@@ -45,6 +45,7 @@ interface FilterDetailsStepProps {
   goToNextStep: () => void;
   goToPreviousStep: () => void;
   isLoading: boolean;
+  supportedChainIds: Array<number>;
 }
 
 export function FilterDetailsStep({
@@ -60,6 +61,7 @@ export function FilterDetailsStep({
   goToNextStep,
   goToPreviousStep,
   isLoading,
+  supportedChainIds,
 }: FilterDetailsStepProps) {
   const thirdwebClient = useThirdwebClient();
   const queryClient = useQueryClient();
@@ -106,6 +108,7 @@ export function FilterDetailsStep({
                   }
                   onChange={(chainIds) => field.onChange(chainIds.map(String))}
                   client={thirdwebClient}
+                  chainIds={supportedChainIds}
                 />
               </FormControl>
               <FormMessage />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx

@@ -32,9 +32,14 @@ function getEventType(filters: WebhookFilters): string {
 interface WebhooksTableProps {
   webhooks: WebhookResponse[];
   clientId: string;
+  supportedChainIds: number[];
 }
 
-export function WebhooksTable({ webhooks, clientId }: WebhooksTableProps) {
+export function WebhooksTable({
+  webhooks,
+  clientId,
+  supportedChainIds,
+}: WebhooksTableProps) {
   const [isDeleting, setIsDeleting] = useState<Record<string, boolean>>({});
   const { testWebhookEndpoint, isTestingMap } = useTestWebhook(clientId);
   const router = useDashboardRouter();
@@ -210,7 +215,10 @@ export function WebhooksTable({ webhooks, clientId }: WebhooksTableProps) {
   return (
     <div className="w-full">
       <div className="mb-4 flex items-center justify-end">
-        <CreateWebhookModal clientId={clientId} />
+        <CreateWebhookModal
+          clientId={clientId}
+          supportedChainIds={supportedChainIds}
+        />
       </div>
       <TWTable
         data={sortedWebhooks}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx

@@ -1,4 +1,8 @@
-import { type WebhookResponse, getWebhooks } from "@/api/insight/webhooks";
+import {
+  type WebhookResponse,
+  getSupportedWebhookChains,
+  getWebhooks,
+} from "@/api/insight/webhooks";
 import { getProject } from "@/api/projects";
 import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
 import { notFound } from "next/navigation";
@@ -11,6 +15,7 @@ export default async function WebhooksPage({
   let webhooks: WebhookResponse[] = [];
   let clientId = "";
   let errorMessage = "";
+  let supportedChainIds: number[] = [];
 
   try {
     // Await params before accessing properties
@@ -32,6 +37,13 @@ export default async function WebhooksPage({
     } else if (webhooksRes.data) {
       webhooks = webhooksRes.data;
     }
+
+    const supportedChainsRes = await getSupportedWebhookChains();
+    if ("chains" in supportedChainsRes) {
+      supportedChainIds = supportedChainsRes.chains;
+    } else {
+      errorMessage = supportedChainsRes.error;
+    }
   } catch (error) {
     errorMessage = "Failed to load webhooks. Please try again later.";
     console.error("Error loading project or webhooks", error);
@@ -71,7 +83,11 @@ export default async function WebhooksPage({
             </div>
           </div>
         ) : webhooks.length > 0 ? (
-          <WebhooksTable webhooks={webhooks} clientId={clientId} />
+          <WebhooksTable
+            webhooks={webhooks}
+            clientId={clientId}
+            supportedChainIds={supportedChainIds}
+          />
         ) : (
           <div className="flex flex-col items-center justify-center gap-4 rounded-lg border border-border p-12 text-center">
             <div>
@@ -80,7 +96,10 @@ export default async function WebhooksPage({
                 Create a webhook to get started.
               </p>
             </div>
-            <CreateWebhookModal clientId={clientId} />
+            <CreateWebhookModal
+              clientId={clientId}
+              supportedChainIds={supportedChainIds}
+            />
           </div>
         )}
       </div>