Add SignatureSelector component for custom signature input in webhooks

Author: Amine Afia

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>