From 62a3cd8348ebf6a1f79dd22d402c7f9eab5e3c9b Mon Sep 17 00:00:00 2001
From: catalyst17 <poryadin99@gmail.com>
Date: Mon, 9 Jun 2025 12:00:22 +0000
Subject: [PATCH] fix: make contract and to addresses optional in webhook form
 (#7294)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the handling of contract addresses in the `CreateWebhookModal` and `FilterDetailsStep` components, as well as refining validation logic for addresses in `webhookTypes.ts`. It enhances user experience by clarifying requirements and allowing optional inputs.

### Detailed summary
- In `CreateWebhookModal.tsx`, the `addresses` property now defaults to an empty string if not provided.
- In `FilterDetailsStep.tsx`, the `FormLabel` for "Contract Addresses" and "To Address" no longer includes a required indicator.
- Validation in `webhookTypes.ts` for `addresses`, `fromAddresses`, and `toAddresses` is updated to allow empty inputs and provide clearer error messages.

> ✨ 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

- **Bug Fixes**
	- Removed the required field indicator from "Contract Addresses" and "To Address" labels in the form UI.

- **New Features**
	- Updated form validation to allow "Contract Addresses", "From Address", and "To Address" fields to be optional and accept empty values, with improved error messages for clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/CreateWebhookModal.tsx         |  2 +-
 .../webhooks/components/FilterDetailsStep.tsx |  8 +---
 .../(sidebar)/webhooks/utils/webhookTypes.ts  | 44 +++++++++++++++----
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
index acf5aedc479..e776ff1f282 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
@@ -86,7 +86,7 @@ export function CreateWebhookModal({
     isOpen,
     thirdwebClient: client,
     chainIds,
-    addresses,
+    addresses: addresses || "",
     extractSignatures: extractEventSignatures,
     type: "event",
   });
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
index 09a8f949d74..f82af592e6c 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
@@ -191,9 +191,7 @@ export function FilterDetailsStep({
             render={({ field }) => (
               <FormItem className="flex flex-col">
                 <div className="flex items-center justify-between text-xs">
-                  <FormLabel>
-                    Contract Addresses <span className="text-red-500">*</span>
-                  </FormLabel>
+                  <FormLabel>Contract Addresses</FormLabel>
                   <p className="text-muted-foreground">
                     Enter a contract address
                   </p>
@@ -281,9 +279,7 @@ export function FilterDetailsStep({
               render={({ field }) => (
                 <FormItem className="flex flex-col">
                   <div className="flex items-center justify-between text-xs">
-                    <FormLabel>
-                      To Address <span className="text-red-500">*</span>
-                    </FormLabel>
+                    <FormLabel>To Address</FormLabel>
                     <p className="text-muted-foreground">Enter a to address</p>
                   </div>
                   <FormControl>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookTypes.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookTypes.ts
index 1f73034ce5e..52c93042c3d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookTypes.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookTypes.ts
@@ -36,25 +36,53 @@ export const webhookFormSchema = z.object({
     .min(1, { message: "Select at least one chain" }),
   addresses: z
     .string()
-    .min(1, { message: "Addresses is required" })
-    .refine((val) => val.split(/[\,\s]+/).every((a) => isAddress(a.trim())), {
-      message: "Enter a valid address",
-    }),
+    .optional()
+    .refine(
+      (val) => {
+        if (val === undefined || val.trim() === "") {
+          return true;
+        }
+        return val
+          .split(/[\,\s]+/)
+          .filter(Boolean)
+          .every((a) => isAddress(a.trim()));
+      },
+      {
+        message: "Enter valid addresses (comma-separated) or leave empty",
+      },
+    ),
   fromAddresses: z
     .string()
     .optional()
     .refine(
-      (val) => !val || val.split(/[,\s]+/).every((a) => isAddress(a.trim())),
+      (val) => {
+        if (val === undefined || val.trim() === "") {
+          return true;
+        }
+        return val
+          .split(/[\,\s]+/)
+          .filter(Boolean)
+          .every((a) => isAddress(a.trim()));
+      },
       {
-        message: "Enter a valid address",
+        message: "Enter valid addresses (comma-separated) or leave empty",
       },
     ),
   toAddresses: z
     .string()
+    .optional()
     .refine(
-      (val) => !val || val.split(/[,\s]+/).every((a) => isAddress(a.trim())),
+      (val) => {
+        if (val === undefined || val.trim() === "") {
+          return true;
+        }
+        return val
+          .split(/[\,\s]+/)
+          .filter(Boolean)
+          .every((a) => isAddress(a.trim()));
+      },
       {
-        message: "Enter a valid address (comma-separated)",
+        message: "Enter valid addresses (comma-separated) or leave empty",
       },
     ),
   sigHash: z.string().optional(),