Skip to content

add optional config to webhooks in engine #5817

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

Closed
wants to merge 1 commit into from
Closed

add optional config to webhooks in engine #5817

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
5 changes: 4 additions & 1 deletion apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,8 @@ type EngineFeature =
| "CONTRACT_SUBSCRIPTIONS"
| "IP_ALLOWLIST"
| "HETEROGENEOUS_WALLET_TYPES"
| "SMART_BACKEND_WALLETS";
| "SMART_BACKEND_WALLETS"
| "WEBHOOK_CONFIG";
Copy link
Contributor

@arcoraven arcoraven Dec 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are the webhook CRUD APIs backward compatible, as in if config is provided, an older Engine will just silently ignore it?

If so I'm debating if it's simpler to just show the config field for all Engines (and if anything make a small footnote that config is only used for low wallet balance alerts after Engine version v2.x.x).

Copy link
Contributor Author

@nischitpra nischitpra Dec 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah old engine will not process the config as its not processed at all.

If we show it all engine, it could act as a nudge to upgrade the engine which is good I guess.


interface EngineSystemHealth {
status: string;
Expand Down Expand Up @@ -835,6 +836,7 @@ export interface EngineWebhook {
active: boolean;
createdAt: string;
id: number;
config?: string;
}

export function useEngineWebhooks(params: {
Expand Down Expand Up @@ -1246,6 +1248,7 @@ export type CreateWebhookInput = {
url: string;
name: string;
eventType: string;
config?: string;
};

export function useEngineCreateWebhook(params: {
Expand Down
30 changes: 29 additions & 1 deletion ...am_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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({
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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>

Expand Down
16 changes: 14 additions & 2 deletions ...[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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">
Expand All @@ -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>
);
};
Loading
Loading