add optional config to webhooks in engine

Author: nischitpra

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -835,6 +835,7 @@ export interface EngineWebhook {
   active: boolean;
   createdAt: string;
   id: number;
+  config?: string;
 }
 
 export function useEngineWebhooks(params: {
@@ -1246,6 +1247,7 @@ export type CreateWebhookInput = {
   url: string;
   name: string;
   eventType: string;
+  config?: string;
 };
 
 export function useEngineCreateWebhook(params: {

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx

@@ -20,6 +20,7 @@ import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { CirclePlusIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { Button, FormLabel } from "tw-components";
 import { beautifyString } from "./webhooks-table";
 
@@ -74,7 +75,18 @@ export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
           className="!bg-background rounded-lg border border-border"
           as="form"
           onSubmit={form.handleSubmit((data) => {
-            createWebhook(data, {
+            const { config, ..._data } = data;
+            const finalData: CreateWebhookInput = _data;
+            if (config) {
+              try {
+                finalData.config = JSON.parse(config);
+              } catch (_) {
+                toast.error("Config must be a valid json string");
+                return;
+              }
+            }
+
+            createWebhook(finalData, {
               onSuccess: () => {
                 onSuccess();
                 onClose();
@@ -128,6 +140,14 @@ export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
                   {...form.register("url", { required: true })}
                 />
               </FormControl>
+              <FormControl>
+                <FormLabel>Config</FormLabel>
+                <Input
+                  type="json"
+                  placeholder={`{"address": "0x1234...5678", "chainId": 1, "threshold": 200.5}`}
+                  {...form.register("config")}
+                />
+              </FormControl>
             </Flex>
           </ModalBody>
 

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx

@@ -39,6 +39,11 @@ export function beautifyString(str: string): string {
     .join(" ");
 }
 
+function jsonStringify(data: unknown | undefined): string {
+  if (!data) return "";
+  return JSON.stringify(data, null, 2);
+}
+
 interface WebhooksTableProps {
   instanceUrl: string;
   webhooks: EngineWebhook[];
@@ -86,6 +91,13 @@ const columns = [
       );
     },
   }),
+  columnHelper.accessor("config", {
+    header: "Config",
+    cell: (cell) => {
+      const config = cell.getValue();
+      return <Text>{jsonStringify(config)}</Text>;
+    },
+  }),
   columnHelper.accessor("createdAt", {
     header: "Created At",
     cell: (cell) => {
@@ -242,6 +254,10 @@ function DeleteWebhookModal({
               <FormLabel>URL</FormLabel>
               <Text>{webhook.url}</Text>
             </FormControl>
+            <FormControl>
+              <FormLabel>Config</FormLabel>
+              <Text className="font-mono">{jsonStringify(webhook.config)}</Text>
+            </FormControl>
             <FormControl>
               <FormLabel>Created at</FormLabel>
               <Text>
@@ -308,6 +324,10 @@ function TestWebhookModal({
               <FormLabel>URL</FormLabel>
               <span className="font-mono">{webhook.url}</span>
             </FormItem>
+            <FormItem>
+              <FormLabel>Config</FormLabel>
+              <span className="font-mono">{webhook.config}</span>
+            </FormItem>
 
             <Button type="submit" onClick={onTest} disabled={isPending}>
               {isPending && <Spinner className="mr-2 size-4" />}