add optional config to webhooks in engine + backwards compatibility

Author: nischitpra

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

@@ -118,7 +118,8 @@ type EngineFeature =
   | "CONTRACT_SUBSCRIPTIONS"
   | "IP_ALLOWLIST"
   | "HETEROGENEOUS_WALLET_TYPES"
-  | "SMART_BACKEND_WALLETS";
+  | "SMART_BACKEND_WALLETS"
+  | "WEBHOOK_CONFIG";
 
 interface EngineSystemHealth {
   status: string;
@@ -835,6 +836,7 @@ export interface EngineWebhook {
   active: boolean;
   createdAt: string;
   id: number;
+  config?: string;
 }
 
 export function useEngineWebhooks(params: {
@@ -1246,6 +1248,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,12 +20,14 @@ 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";
 
 interface AddWebhookButtonProps {
   instanceUrl: string;
   authToken: string;
+  supportedWebhookConfig: boolean;
 }
 
 const WEBHOOK_EVENT_TYPES = [
@@ -41,6 +43,7 @@ const WEBHOOK_EVENT_TYPES = [
 export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
   instanceUrl,
   authToken,
+  supportedWebhookConfig = false,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutate: createWebhook } = useEngineCreateWebhook({
@@ -74,7 +77,22 @@ export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
           className="!bg-background rounded-lg border border-border"
           as="form"
           onSubmit={form.handleSubmit((data) => {
-            createWebhook(data, {
+            let finalData: CreateWebhookInput = data;
+
+            if (supportedWebhookConfig) {
+              const { config, ..._data } = data;
+              finalData = _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 +146,16 @@ export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
                   {...form.register("url", { required: true })}
                 />
               </FormControl>
+              {supportedWebhookConfig && (
+                <FormControl>
+                  <FormLabel>Config</FormLabel>
+                  <Input
+                    type="text"
+                    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/engine-webhooks.tsx

@@ -1,6 +1,9 @@
 "use client";
 
-import { useEngineWebhooks } from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  useEngineSystemHealth,
+  useEngineWebhooks,
+} from "@3rdweb-sdk/react/hooks/useEngine";
 import { Heading, Link, Text } from "tw-components";
 import { AddWebhookButton } from "./add-webhook-button";
 import { WebhooksTable } from "./webhooks-table";
@@ -18,6 +21,10 @@ export const EngineWebhooks: React.FC<EngineWebhooksProps> = ({
     authToken,
     instanceUrl,
   });
+  const healthQuery = useEngineSystemHealth(instanceUrl);
+
+  const supportedWebhookConfig =
+    healthQuery.data?.features?.includes("WEBHOOK_CONFIG") || false;
 
   return (
     <div className="flex flex-col gap-4">
@@ -42,8 +49,13 @@ export const EngineWebhooks: React.FC<EngineWebhooksProps> = ({
         isPending={webhooks.isPending}
         isFetched={webhooks.isFetched}
         authToken={authToken}
+        supportedWebhookConfig={supportedWebhookConfig}
+      />
+      <AddWebhookButton
+        instanceUrl={instanceUrl}
+        authToken={authToken}
+        supportedWebhookConfig={supportedWebhookConfig}
       />
-      <AddWebhookButton instanceUrl={instanceUrl} authToken={authToken} />
     </div>
   );
 };