Skip to content

Commit 834e69a

Browse files
AmineAfiaAmineAfia
committed
Fix webhook dropdown scrolling by wrapping content in scrollable div
1 parent f3aebed commit 834e69a

File tree

1 file changed

+96
-97
lines changed
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components

1 file changed

+96
-97
lines changed

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

Lines changed: 96 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ export function FilterDetailsStep({
280280

281281
{/* Advanced Options Section */}
282282
<div className="space-y-3">
283-
{/* Signature Hash Field - reused for both event and transaction types */}
283+
{/* Signature Hash Field - rebuilt for both event and transaction types */}
284284
<FormField
285285
control={form.control}
286286
name="sigHash"
@@ -299,40 +299,29 @@ export function FilterDetailsStep({
299299
</p>
300300
</div>
301301
<FormControl>
302-
{watchFilterType === "event" &&
303-
Object.keys(fetchedAbis).length > 0 &&
304-
eventSignatures.length > 0 ? (
305-
<Select
306-
value={field.value}
307-
onValueChange={(value) => {
308-
field.onChange(value);
309-
// Find the selected event
310-
const selectedEvent = eventSignatures.find(
311-
(sig) => sig.signature === value,
312-
);
313-
// Set the ABI for the event
314-
form.setValue("sigHashAbi", selectedEvent?.abi || "");
315-
}}
316-
>
317-
<SelectTrigger>
318-
<SelectValue placeholder="Select an event signature">
319-
{field.value
320-
? eventSignatures.find(
321-
(sig) => sig.signature === field.value,
322-
)?.name || ""
323-
: null}
324-
</SelectValue>
325-
</SelectTrigger>
326-
<SelectContent className="max-h-60 overflow-y-auto">
327-
{eventSignatures.map((event) => {
328-
// Truncate the hash for display purposes
329-
const truncatedHash = truncateMiddle(
330-
event.signature,
331-
6,
332-
4,
302+
{watchFilterType === "event" ? (
303+
eventSignatures && eventSignatures.length > 0 ? (
304+
<Select
305+
value={field.value}
306+
onValueChange={(value) => {
307+
field.onChange(value);
308+
const selectedEvent = eventSignatures.find(
309+
(sig) => sig.signature === value,
333310
);
334-
335-
return (
311+
form.setValue("sigHashAbi", selectedEvent?.abi || "");
312+
}}
313+
>
314+
<SelectTrigger>
315+
<SelectValue placeholder="Select an event signature">
316+
{field.value
317+
? eventSignatures.find(
318+
(sig) => sig.signature === field.value,
319+
)?.name || ""
320+
: null}
321+
</SelectValue>
322+
</SelectTrigger>
323+
<SelectContent className="max-h-60 overflow-y-auto">
324+
{eventSignatures.map((event) => (
336325
<SelectItem
337326
key={event.signature}
338327
value={event.signature}
@@ -341,73 +330,83 @@ export function FilterDetailsStep({
341330
<div className="flex flex-col">
342331
<span className="font-medium">{event.name}</span>
343332
<span className="text-muted-foreground text-xs">
344-
Signature: {truncatedHash}
333+
Signature:{" "}
334+
{truncateMiddle(event.signature, 6, 4)}
345335
</span>
346336
</div>
347337
</SelectItem>
338+
))}
339+
</SelectContent>
340+
</Select>
341+
) : (
342+
<Input
343+
placeholder={
344+
isFetchingEventAbi
345+
? "Fetching event signatures..."
346+
: "No event signatures available"
347+
}
348+
value={field.value}
349+
onChange={field.onChange}
350+
disabled
351+
/>
352+
)
353+
) : watchFilterType === "transaction" ? (
354+
functionSignatures && functionSignatures.length > 0 ? (
355+
<Select
356+
value={field.value}
357+
onValueChange={(value) => {
358+
field.onChange(value);
359+
const selectedFunction = functionSignatures.find(
360+
(sig) => sig.signature === value,
348361
);
349-
})}
350-
</SelectContent>
351-
</Select>
352-
) : watchFilterType === "transaction" &&
353-
Object.keys(fetchedTxAbis).length > 0 &&
354-
functionSignatures.length > 0 ? (
355-
<Select
356-
value={field.value}
357-
onValueChange={(value) => {
358-
field.onChange(value);
359-
// Find the selected function
360-
const selectedFunction = functionSignatures.find(
361-
(sig) => sig.signature === value,
362-
);
363-
// Set the ABI for the function
364-
form.setValue("sigHashAbi", selectedFunction?.abi || "");
365-
}}
366-
>
367-
<SelectTrigger className="max-w-full">
368-
<SelectValue placeholder="Select a function signature">
369-
{field.value
370-
? functionSignatures.find(
371-
(sig) => sig.signature === field.value,
372-
)?.name || ""
373-
: null}
374-
</SelectValue>
375-
</SelectTrigger>
376-
<SelectContent className="max-h-60 max-w-[600px] overflow-y-auto">
377-
{functionSignatures.map((func) => (
378-
<SelectItem
379-
key={func.signature}
380-
value={func.signature}
381-
title={func.signature}
382-
className="w-full overflow-x-auto"
383-
>
384-
<div className="flex w-full flex-col">
385-
<span className="overflow-x-auto whitespace-nowrap pb-1 font-medium">
386-
{func.name}
387-
</span>
388-
<span className="overflow-x-auto text-muted-foreground text-xs">
389-
Selector: {func.signature}
390-
</span>
391-
</div>
392-
</SelectItem>
393-
))}
394-
</SelectContent>
395-
</Select>
396-
) : (
397-
<Input
398-
placeholder={
399-
watchFilterType === "event"
400-
? "Fetching event signatures..."
401-
: "Fetching function signatures..."
402-
}
403-
value={field.value}
404-
onChange={field.onChange}
405-
disabled={
406-
(watchFilterType === "event" && isFetchingEventAbi) ||
407-
(watchFilterType === "transaction" && isFetchingTxAbi)
408-
}
409-
/>
410-
)}
362+
form.setValue(
363+
"sigHashAbi",
364+
selectedFunction?.abi || "",
365+
);
366+
}}
367+
>
368+
<SelectTrigger className="max-w-full">
369+
<SelectValue placeholder="Select a function signature">
370+
{field.value
371+
? functionSignatures.find(
372+
(sig) => sig.signature === field.value,
373+
)?.name || ""
374+
: null}
375+
</SelectValue>
376+
</SelectTrigger>
377+
<SelectContent className="max-h-60 max-w-[600px] overflow-y-auto">
378+
{functionSignatures.map((func) => (
379+
<SelectItem
380+
key={func.signature}
381+
value={func.signature}
382+
title={func.signature}
383+
className="w-full overflow-x-auto"
384+
>
385+
<div className="flex w-full flex-col">
386+
<span className="overflow-x-auto whitespace-nowrap pb-1 font-medium">
387+
{func.name}
388+
</span>
389+
<span className="overflow-x-auto text-muted-foreground text-xs">
390+
Selector: {truncateMiddle(func.signature, 6, 4)}
391+
</span>
392+
</div>
393+
</SelectItem>
394+
))}
395+
</SelectContent>
396+
</Select>
397+
) : (
398+
<Input
399+
placeholder={
400+
isFetchingTxAbi
401+
? "Fetching function signatures..."
402+
: "No function signatures available"
403+
}
404+
value={field.value}
405+
onChange={field.onChange}
406+
disabled
407+
/>
408+
)
409+
) : null}
411410
</FormControl>
412411
<FormMessage />
413412
</FormItem>

0 commit comments

Comments
 (0)