Skip to content

Add webhook creation UI to dashboard #7174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 28, 2025
Merged

Add webhook creation UI to dashboard #7174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions apps/dashboard/src/@/api/insight/webhooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,7 @@ interface TestWebhookResponse {
error?: string;
}

// biome-ignore lint/correctness/noUnusedVariables: will be used in the next PR
async function createWebhook(
export async function createWebhook(
payload: CreateWebhookPayload,
clientId: string,
): Promise<WebhookSingleResponse> {
Expand Down
189 changes: 189 additions & 0 deletions ...app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/BasicInfoStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
"use client";

import { Button } from "@/components/ui/button";
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { cn } from "@/lib/utils";
import type { UseFormReturn } from "react-hook-form";
import type { WebhookFormValues } from "../utils/webhookTypes";

interface BasicInfoStepProps {
form: UseFormReturn<WebhookFormValues>;
goToNextStep: () => void;
isLoading: boolean;
}

export default function BasicInfoStep({
form,
goToNextStep,
isLoading,
}: BasicInfoStepProps) {
return (
<>
<div className="mb-4">
<h2 className="font-medium text-lg">Step 1: Basic Information</h2>
<p className="text-muted-foreground text-sm">
Provide webhook details and select filter type
</p>
</div>

<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>
Name <span className="text-red-500">*</span>
</FormLabel>
<FormControl>
<Input
placeholder="Webhook name"
value={field.value}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={form.control}
name="webhookUrl"
render={({ field }) => (
<FormItem className="mt-4 flex flex-col">
<FormLabel>
Webhook URL <span className="text-red-500">*</span>
</FormLabel>
<FormControl>
<Input
placeholder="https://your-server.com/webhook"
type="url"
value={field.value}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={form.control}
name="filterType"
render={({ field }) => (
<FormItem className="mt-6 flex flex-col">
<FormLabel>
Filter Type <span className="text-red-500">*</span>
</FormLabel>
<FormControl>
<RadioGroup
onValueChange={(value: string) => {
if (value !== "event" && value !== "transaction") {
return;
}
field.onChange(value);
// Ensure the form state is updated immediately
form.setValue("filterType", value, {
shouldValidate: true,
shouldDirty: true,
});
}}
value={field.value || undefined}
className="grid grid-cols-1 gap-4 md:grid-cols-2"
>
<div className="col-span-1">
<label
htmlFor="filter-event"
className={cn(
"flex cursor-pointer flex-col rounded-lg border-2 p-4 hover:border-primary/50",
field.value === "event"
? "border-primary bg-primary/5"
: "",
)}
>
<RadioGroupItem
value="event"
id="filter-event"
className="sr-only"
/>
<div className="mb-2 flex items-center justify-between">
<span className="font-medium text-base">Event</span>
<div
className={cn(
"flex h-5 w-5 items-center justify-center rounded-full border",
field.value === "event"
? "border-primary"
: "border-muted-foreground",
)}
>
{field.value === "event" && (
<div className="h-3 w-3 rounded-full bg-primary" />
)}
</div>
</div>
<span className="text-muted-foreground text-sm">
Listen for contract events like token transfers or state
changes
</span>
</label>
</div>

<div className="col-span-1">
<label
htmlFor="filter-transaction"
className={cn(
"flex cursor-pointer flex-col rounded-lg border-2 p-4 hover:border-primary/50",
field.value === "transaction"
? "border-primary bg-primary/5"
: "",
)}
>
<RadioGroupItem
value="transaction"
id="filter-transaction"
className="sr-only"
/>
<div className="mb-2 flex items-center justify-between">
<span className="font-medium text-base">Transaction</span>
<div
className={cn(
"flex h-5 w-5 items-center justify-center rounded-full border",
field.value === "transaction"
? "border-primary"
: "border-muted-foreground",
)}
>
{field.value === "transaction" && (
<div className="h-3 w-3 rounded-full bg-primary" />
)}
</div>
</div>
<span className="text-muted-foreground text-sm">
Listen for blockchain transactions with specific
parameters
</span>
</label>
</div>
</RadioGroup>
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<div className="mt-6 flex justify-end">
<Button type="button" onClick={goToNextStep} disabled={isLoading}>
Next
</Button>
</div>
</>
);
}
Loading
Loading