Add SignatureSelector component for custom signature input in webhooks (#7370)

# [INFRA-1454][Dashboard] Feature: Add SignatureSelector component for improved signature selection

## Notes for the reviewer

This PR introduces a new `SignatureSelector` component that enhances the signature selection experience in the webhooks UI. The component allows users to either select from predefined signatures or enter custom ones, with appropriate UI feedback.

Key improvements:
- Users can now enter custom signatures directly in the input field
- Warning message appears when a custom signature is entered
- Automatic ABI detection for known signatures
- Better handling of signature formats (automatically converts text signatures to hash format)

## How to test

1. Navigate to the webhooks creation flow
2. Test selecting predefined event/function signatures
3. Test entering custom signatures and verify the warning appears
4. Verify that ABIs are properly loaded for known signatures
5. Test the reset functionality

The component is fully integrated with the existing form validation system.

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

- **New Features**
  - Introduced a new signature selector with search and custom input support for selecting or entering function signatures.
  - Enhanced dropdown components to allow custom search input elements.

- **Refactor**
  - Replaced the previous signature dropdown with the new selector for improved usability and consistency.
  - Improved ABI input handling, including automatic detection and reset options.

- **Bug Fixes**
  - Improved normalization of signature hash values and ABI fallback logic for webhook payloads.
  - Enhanced address parsing for ABI reset functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces enhancements to the `webhookPayloadUtils`, `MultiSelect`, and `SignatureSelector` components, improving signature handling and custom input functionality. It also updates the `FilterDetailsStep` to utilize the new `SignatureSelector` and remove the deprecated `SignatureDropdown`.

### Detailed summary
- Updated `buildEventWebhookPayload` and `buildTransactionWebhookPayload` functions to handle `sigHash` and `abi` more robustly.
- Added `customSearchInput` prop to `MultiSelect` for enhanced search functionality.
- Implemented `SignatureSelector` component for better signature selection with custom input support.
- Replaced `SignatureDropdown` with `SignatureSelector` in `FilterDetailsStep`.
- Improved handling of custom signatures and ABI management in `FilterDetailsStep`.

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

<!-- end pr-codex -->

Author: AmineAfia

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

@@ -0,0 +1,128 @@
+import { cn } from "@/lib/utils";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { MultiSelect } from "./multi-select";
+
+interface SignatureOption {
+  label: string;
+  value: string;
+  abi?: string;
+}
+
+interface SignatureSelectorProps {
+  options: SignatureOption[];
+  value: string;
+  onChange: (val: string) => void;
+  setAbi?: (abi: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  secondaryTextFormatter?: (sig: SignatureOption) => string;
+  className?: string;
+}
+
+export function SignatureSelector({
+  options,
+  value,
+  onChange,
+  setAbi,
+  placeholder = "Select or enter a signature",
+  disabled,
+  secondaryTextFormatter,
+  className,
+}: SignatureSelectorProps) {
+  const [searchValue, setSearchValue] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Memoize options with formatted secondary text if provided
+  const formattedOptions = useMemo(() => {
+    return options.map((opt) => ({
+      ...opt,
+      label: secondaryTextFormatter
+        ? `${opt.label}  •  ${secondaryTextFormatter(opt)}`
+        : opt.label,
+    }));
+  }, [options, secondaryTextFormatter]);
+
+  // Check if the current value is a custom value (not in options)
+  const isCustomValue = value && !options.some((opt) => opt.value === value);
+
+  // Add the custom value as an option if needed
+  const allOptions = useMemo(() => {
+    if (isCustomValue && value) {
+      return [...formattedOptions, { label: value, value }];
+    }
+    return formattedOptions;
+  }, [formattedOptions, isCustomValue, value]);
+
+  // Single-select MultiSelect wrapper
+  const handleSelectedValuesChange = useCallback(
+    (selected: string[]) => {
+      // Always use the last selected value for single-select behavior
+      const selectedValue =
+        selected.length > 0 ? (selected[selected.length - 1] ?? "") : "";
+      onChange(selectedValue);
+      const found = options.find((opt) => opt.value === selectedValue);
+      if (setAbi) {
+        setAbi(found?.abi || "");
+      }
+      setSearchValue("");
+    },
+    [onChange, setAbi, options],
+  );
+
+  // Handle custom value entry
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter" && searchValue.trim()) {
+      if (!options.some((opt) => opt.value === searchValue.trim())) {
+        onChange(searchValue.trim());
+        if (setAbi) setAbi("");
+        setSearchValue("");
+        // Optionally blur input
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  // Custom render for MultiSelect's search input
+  const customSearchInput = (
+    <input
+      ref={inputRef}
+      type="text"
+      className={cn(
+        "w-full border-0 border-border border-b bg-transparent py-4 pr-2 pl-10 text-sm focus-visible:ring-0 focus-visible:ring-offset-0",
+        disabled && "cursor-not-allowed opacity-50",
+      )}
+      placeholder={placeholder}
+      value={searchValue}
+      onChange={(e) => setSearchValue(e.target.value)}
+      onKeyDown={handleInputKeyDown}
+      disabled={disabled}
+      autoComplete="off"
+    />
+  );
+
+  return (
+    <div className={className}>
+      <MultiSelect
+        options={allOptions}
+        selectedValues={value ? [value] : []}
+        onSelectedValuesChange={handleSelectedValuesChange}
+        placeholder={placeholder}
+        maxCount={1}
+        disabled={disabled}
+        searchPlaceholder={placeholder}
+        customTrigger={null}
+        renderOption={(option) => <span>{option.label}</span>}
+        overrideSearchFn={(option, searchTerm) =>
+          option.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          option.value.toLowerCase().includes(searchTerm.toLowerCase())
+        }
+        customSearchInput={customSearchInput}
+      />
+      {isCustomValue && (
+        <div className="mt-2 rounded border border-warning-200 bg-warning-50 px-2 py-1 text-warning-700 text-xs">
+          You entered a custom signature. Please provide the ABI below.
+        </div>
+      )}
+    </div>
+  );
+}

apps/dashboard/src/@/components/blocks/multi-select.tsx

@@ -53,6 +53,7 @@ interface MultiSelectProps
   align?: "center" | "start" | "end";
   side?: "left" | "right" | "top" | "bottom";
   showSelectedValuesInModal?: boolean;
+  customSearchInput?: React.ReactNode;
 }
 
 export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
@@ -69,6 +70,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
       searchPlaceholder,
       popoverContentClassName,
       showSelectedValuesInModal = false,
+      customSearchInput,
       ...props
     },
     ref,
@@ -233,15 +235,19 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
         >
           {/* Search */}
           <div className="relative">
-            <Input
-              placeholder={searchPlaceholder || "Search"}
-              value={searchValue}
-              // do not focus on the input when the popover opens to avoid opening the keyboard
-              tabIndex={-1}
-              onChange={(e) => setSearchValue(e.target.value)}
-              className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
-              onKeyDown={handleInputKeyDown}
-            />
+            {customSearchInput ? (
+              customSearchInput
+            ) : (
+              <Input
+                placeholder={searchPlaceholder || "Search"}
+                value={searchValue}
+                // do not focus on the input when the popover opens to avoid opening the keyboard
+                tabIndex={-1}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
+                onKeyDown={handleInputKeyDown}
+              />
+            )}
             <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
           </div>