webhook config backwards compatible

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;

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

@@ -27,6 +27,7 @@ import { beautifyString } from "./webhooks-table";
 interface AddWebhookButtonProps {
   instanceUrl: string;
   authToken: string;
+  supportesWebhookConfig: boolean;
 }
 
 const WEBHOOK_EVENT_TYPES = [
@@ -42,6 +43,7 @@ const WEBHOOK_EVENT_TYPES = [
 export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
   instanceUrl,
   authToken,
+  supportesWebhookConfig = false,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutate: createWebhook } = useEngineCreateWebhook({
@@ -75,14 +77,18 @@ export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
           className="!bg-background rounded-lg border border-border"
           as="form"
           onSubmit={form.handleSubmit((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;
+            let finalData: CreateWebhookInput = data;
+
+            if (supportesWebhookConfig) {
+              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;
+                }
               }
             }
 
@@ -140,14 +146,16 @@ 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>
+              {supportesWebhookConfig && (
+                <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 supportesWebhookConfig =
+    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}
+        supportesWebhookConfig={supportesWebhookConfig}
+      />
+      <AddWebhookButton
+        instanceUrl={instanceUrl}
+        authToken={authToken}
+        supportesWebhookConfig={supportesWebhookConfig}
       />
-      <AddWebhookButton instanceUrl={instanceUrl} authToken={authToken} />
     </div>
   );
 };