add insight filter selection to webhook creation and update (#7598)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the webhook configuration components by introducing optional support for `ThirdwebClient` and `supportedChainIds`. It improves error handling and validation, particularly in the context of filtering for event and transaction webhooks.

### Detailed summary
- Made `thirdwebClient` optional in `useAbiProcessing` hook.
- Updated `CreateWebhookConfigModal`, `EditWebhookConfigModal`, `WebhooksOverview` to accept `client` and `supportedChainIds`.
- Enhanced error handling in `useQuery` for missing `thirdwebClient`.
- Introduced separate forms for event and transaction filters in `TopicSelectorModal`.
- Improved validation and fetching of ABIs in the filter forms.
- Added support for displaying ABI fetch status and results.
- Enhanced UI elements to accommodate new filter configurations.

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

<!-- end pr-codex -->

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

* **New Features**
  * Enhanced webhook topic selection with advanced, form-driven filtering for contract webhook topics, including multi-network and ABI-based options.
  * Added support for passing client and supported chain information throughout the webhooks dashboard for improved filtering and configuration.

* **Improvements**
  * Increased dialog width for filter configuration to improve usability.
  * Streamlined handling of webhook topic filters for consistency and flexibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: iuwqyir

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

@@ -1,3 +1,4 @@
+import type { ThirdwebClient } from "thirdweb";
 import type { Topic } from "@/api/webhook-configs";
 import { WebhookConfigModal } from "./webhook-config-modal";
 
@@ -7,15 +8,19 @@ interface CreateWebhookConfigModalProps {
   teamSlug: string;
   projectSlug: string;
   topics: Topic[];
+  client?: ThirdwebClient;
+  supportedChainIds?: Array<number>;
 }
 
 export function CreateWebhookConfigModal(props: CreateWebhookConfigModalProps) {
   return (
     <WebhookConfigModal
+      client={props.client}
       mode="create"
       onOpenChange={props.onOpenChange}
       open={props.open}
       projectSlug={props.projectSlug}
+      supportedChainIds={props.supportedChainIds}
       teamSlug={props.teamSlug}
       topics={props.topics}
     />

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

@@ -1,3 +1,4 @@
+import type { ThirdwebClient } from "thirdweb";
 import type { Topic, WebhookConfig } from "@/api/webhook-configs";
 import { WebhookConfigModal } from "./webhook-config-modal";
 
@@ -8,15 +9,19 @@ interface EditWebhookConfigModalProps {
   projectSlug: string;
   topics: Topic[];
   webhookConfig: WebhookConfig;
+  client?: ThirdwebClient;
+  supportedChainIds?: Array<number>;
 }
 
 export function EditWebhookConfigModal(props: EditWebhookConfigModalProps) {
   return (
     <WebhookConfigModal
+      client={props.client}
       mode="edit"
       onOpenChange={props.onOpenChange}
       open={props.open}
       projectSlug={props.projectSlug}
+      supportedChainIds={props.supportedChainIds}
       teamSlug={props.teamSlug}
       topics={props.topics}
       webhookConfig={props.webhookConfig}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { redirect } from "next/navigation";
+import type { ThirdwebClient } from "thirdweb";
 import type { Topic, WebhookConfig } from "@/api/webhook-configs";
 import type { WebhookSummaryStats } from "@/types/analytics";
 import { WebhookConfigsTable } from "./webhook-configs-table";
@@ -13,6 +14,8 @@ interface WebhooksOverviewProps {
   webhookConfigs: WebhookConfig[];
   topics: Topic[];
   metricsMap: Map<string, WebhookSummaryStats | null>;
+  client?: ThirdwebClient;
+  supportedChainIds?: Array<number>;
 }
 
 export function WebhooksOverview({
@@ -23,6 +26,8 @@ export function WebhooksOverview({
   webhookConfigs,
   topics,
   metricsMap,
+  client,
+  supportedChainIds,
 }: WebhooksOverviewProps) {
   // Feature is enabled (matches server component behavior)
   const isFeatureEnabled = true;
@@ -35,9 +40,11 @@ export function WebhooksOverview({
   // Show full webhook functionality
   return (
     <WebhookConfigsTable
+      client={client}
       metricsMap={metricsMap}
       projectId={projectId}
       projectSlug={projectSlug}
+      supportedChainIds={supportedChainIds}
       teamId={teamId}
       teamSlug={teamSlug}
       topics={topics}