From 67abd0db5b671431a34ec32d368bb3c1ab60cbf5 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Sat, 26 Jul 2025 19:15:41 +0000
Subject: [PATCH] Dashboard: Migrate engine/contract-submissions from chakra to
 tailwind (#7721)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `EngineContractSubscriptions` and `ContractSubscriptionTable` components to improve their structure, style, and functionality. It also enhances the user experience by updating UI elements and integrating new components.

### Detailed summary
- Updated `className` in the `input` component to use `selection:bg-inverted`.
- Refactored `EngineContractSubscriptions` to use `div` instead of `Flex` for layout.
- Integrated `UnderlineLink` for better link styling.
- Changed `Switch` component's props from `isChecked` to `checked` and `onChange` to `onCheckedChange`.
- Replaced `Flex` with `div` for various elements to improve layout consistency.
- Enhanced `ContractSubscriptionTable` with new styling and improved event handling.
- Updated modal components to use `Dialog` instead of `Modal`.
- Improved error handling and user notifications using `toast` for actions like adding and removing subscriptions.
- Refactored form handling with `react-hook-form` and `zod` for validation.
- Updated `FilterSelector` to use `MultiSelect` for better user interaction.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Improved contract subscription management with a redesigned multi-step form, enhanced validation, and more user-friendly filtering controls.
  * Updated contract subscriptions table with improved modals and tooltips for better usability.

* **Refactor**
  * Replaced Chakra UI components with a custom UI library for dialogs, forms, tables, tooltips, and switches.
  * Enhanced visual styling using Tailwind CSS classes.
  * Streamlined error notifications and form validation for a more consistent user experience.

* **Style**
  * Updated selection styling for input fields to improve appearance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/dashboard/src/@/components/ui/input.tsx  |   2 +-
 .../add-contract-subscription-button.tsx      | 703 +++++++++---------
 .../contract-subscriptions-table.tsx          | 435 ++++++-----
 .../engine-contract-subscription.tsx          |  73 +-
 4 files changed, 611 insertions(+), 602 deletions(-)

diff --git a/apps/dashboard/src/@/components/ui/input.tsx b/apps/dashboard/src/@/components/ui/input.tsx
index 12ff2495f7f..dd260dee640 100644
--- a/apps/dashboard/src/@/components/ui/input.tsx
+++ b/apps/dashboard/src/@/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-foreground/10 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:selection:bg-foreground/20",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-inverted selection:text-inverted-foreground file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
index 4802a20d763..77ab5af652e 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
@@ -1,112 +1,123 @@
 "use client";
 
-import {
-  Collapse,
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Radio,
-  RadioGroup,
-  Spinner,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { Card } from "chakra/card";
-import { FormErrorMessage, FormHelperText, FormLabel } from "chakra/form";
-import { Text } from "chakra/text";
-import { CirclePlusIcon } from "lucide-react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRightIcon, PlusIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { getContract, isAddress, type ThirdwebClient } from "thirdweb";
+import { z } from "zod";
+import { MultiSelect } from "@/components/blocks/multi-select";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Button } from "@/components/ui/button";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
 import {
   type AddContractSubscriptionInput,
   useEngineAddContractSubscription,
 } from "@/hooks/useEngine";
 import { useResolveContractAbi } from "@/hooks/useResolveContractAbi";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
-
-interface AddContractSubscriptionButtonProps {
+import { parseError } from "@/utils/errorParser";
+
+const addContractSubscriptionSchema = z.object({
+  chainId: z.number().min(1, "Chain is required"),
+  contractAddress: z
+    .string()
+    .min(1, "Contract address is required")
+    .refine((val) => isAddress(val), "Invalid contract address"),
+  webhookUrl: z
+    .string()
+    .min(1, "Webhook URL is required")
+    .url("Invalid URL format"),
+  processEventLogs: z.boolean(),
+  filterEvents: z.array(z.string()),
+  processTransactionReceipts: z.boolean(),
+  filterFunctions: z.array(z.string()),
+});
+
+type AddContractSubscriptionForm = z.infer<
+  typeof addContractSubscriptionSchema
+>;
+
+export function AddContractSubscriptionButton({
+  instanceUrl,
+  authToken,
+  client,
+}: {
   instanceUrl: string;
   authToken: string;
   client: ThirdwebClient;
-}
-
-export const AddContractSubscriptionButton: React.FC<
-  AddContractSubscriptionButtonProps
-> = ({ instanceUrl, authToken, client }) => {
-  const disclosure = useDisclosure();
+}) {
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <>
-      <Button
-        colorScheme="primary"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        onClick={disclosure.onOpen}
-        size="sm"
-        variant="ghost"
-        w="fit-content"
-      >
-        Add Contract Subscription
-      </Button>
-
-      {disclosure.isOpen && (
-        <AddModal
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          onClick={() => setIsOpen(true)}
+          className="w-fit gap-2"
+        >
+          <PlusIcon className="size-4" />
+          Add Contract Subscription
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="p-0 overflow-hidden gap-0">
+        <AddModalContent
           authToken={authToken}
           client={client}
-          disclosure={disclosure}
           instanceUrl={instanceUrl}
+          setIsOpen={setIsOpen}
         />
-      )}
-    </>
+      </DialogContent>
+    </Dialog>
   );
-};
-
-interface AddContractSubscriptionForm {
-  chainId: number;
-  contractAddress: string;
-  webhookUrl: string;
-  processEventLogs: boolean;
-  filterEvents: string[];
-  processTransactionReceipts: boolean;
-  filterFunctions: string[];
 }
 
-const AddModal = ({
+function AddModalContent({
   instanceUrl,
-  disclosure,
   authToken,
   client,
+  setIsOpen,
 }: {
   instanceUrl: string;
-  disclosure: UseDisclosureReturn;
   authToken: string;
   client: ThirdwebClient;
-}) => {
-  const { mutate: addContractSubscription } = useEngineAddContractSubscription({
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) {
+  const addContractSubscription = useEngineAddContractSubscription({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Created Contract Subscription.",
-    "Failed to create Contract Subscription.",
-  );
   const [modalState, setModalState] = useState<"inputContract" | "inputData">(
     "inputContract",
   );
 
   const form = useForm<AddContractSubscriptionForm>({
+    resolver: zodResolver(addContractSubscriptionSchema),
     defaultValues: {
       chainId: 84532,
       filterEvents: [],
@@ -128,51 +139,62 @@ const AddModal = ({
       webhookUrl: data.webhookUrl.trim(),
     };
 
-    addContractSubscription(input, {
+    addContractSubscription.mutate(input, {
       onError: (error) => {
-        onError(error);
+        toast.error("Failed to create Contract Subscription.", {
+          description: parseError(error),
+        });
         console.error(error);
       },
       onSuccess: () => {
-        onSuccess();
-        disclosure.onClose();
+        toast.success("Created Contract Subscription.");
+        setIsOpen(false);
       },
     });
   };
 
   return (
-    <Modal
-      isCentered
-      isOpen={disclosure.isOpen}
-      onClose={disclosure.onClose}
-      size="lg"
-    >
-      <ModalOverlay />
-      <ModalContent
-        as="form"
-        className="!bg-background rounded-lg border border-border"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <ModalHeader>Add Contract Subscription</ModalHeader>
-        <ModalCloseButton />
-
-        {modalState === "inputContract" ? (
-          <ModalBodyInputContract
-            client={client}
-            form={form}
-            setModalState={setModalState}
-          />
-        ) : modalState === "inputData" ? (
-          <ModalBodyInputData
-            client={client}
-            form={form}
-            setModalState={setModalState}
-          />
-        ) : null}
-      </ModalContent>
-    </Modal>
+    <div>
+      <DialogHeader className="p-4 lg:p-6">
+        <DialogTitle>Add Contract Subscription</DialogTitle>
+        {modalState === "inputContract" && (
+          <DialogDescription>
+            Add a contract subscription to process real-time onchain data.
+          </DialogDescription>
+        )}
+
+        {modalState === "inputData" && (
+          <DialogDescription>
+            Select the data type to process.
+            <br />
+            Events logs are arbitrary data triggered by a smart contract call.
+            <br />
+            Transaction receipts contain details about the blockchain execution.
+          </DialogDescription>
+        )}
+      </DialogHeader>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          {modalState === "inputContract" ? (
+            <ModalBodyInputContract
+              client={client}
+              form={form}
+              setModalState={setModalState}
+            />
+          ) : modalState === "inputData" ? (
+            <ModalBodyInputData
+              client={client}
+              form={form}
+              setModalState={setModalState}
+              isAdding={addContractSubscription.isPending}
+            />
+          ) : null}
+        </form>
+      </Form>
+    </div>
   );
-};
+}
 
 const ModalBodyInputContract = ({
   form,
@@ -184,89 +206,82 @@ const ModalBodyInputContract = ({
   client: ThirdwebClient;
 }) => {
   return (
-    <>
-      <ModalBody>
-        <div className="flex flex-col gap-4">
-          <Text>
-            Add a contract subscription to process real-time onchain data.
-          </Text>
+    <div>
+      <div className="space-y-4 px-4 lg:px-6 pb-8">
+        <FormField
+          control={form.control}
+          name="chainId"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Chain</FormLabel>
+              <FormControl>
+                <SingleNetworkSelector
+                  disableChainId
+                  chainId={field.value}
+                  client={client}
+                  onChange={(val) => field.onChange(val)}
+                  className="bg-card"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-          <FormControl isRequired>
-            <FormLabel>Chain</FormLabel>
-            <SingleNetworkSelector
-              chainId={form.watch("chainId")}
-              client={client}
-              onChange={(val) => form.setValue("chainId", val)}
-            />
-          </FormControl>
-
-          <FormControl
-            isInvalid={
-              !!form.getFieldState("contractAddress", form.formState).error
-            }
-            isRequired
-          >
-            <FormLabel>Contract Address</FormLabel>
-            <Input
-              placeholder="0x..."
-              type="text"
-              {...form.register("contractAddress", {
-                required: true,
-                validate: (v) => {
-                  const isValid = isAddress(v);
-                  return !isValid ? "Invalid address" : true;
-                },
-              })}
-            />
-            <FormErrorMessage>
-              {
-                form.getFieldState("contractAddress", form.formState).error
-                  ?.message
-              }
-            </FormErrorMessage>
-          </FormControl>
-
-          <FormControl
-            isInvalid={!!form.getFieldState("webhookUrl", form.formState).error}
-            isRequired
-          >
-            <FormLabel>Webhook URL</FormLabel>
-            <Input
-              placeholder="https://"
-              type="url"
-              {...form.register("webhookUrl", {
-                required: true,
-                validate: (v) => {
-                  try {
-                    new URL(v);
-                    return true;
-                  } catch {
-                    return "Invalid URL";
-                  }
-                },
-              })}
-            />
-            <FormHelperText>
-              Engine sends an HTTP request to your backend when new onchain data
-              for this contract is detected.
-            </FormHelperText>
-            <FormErrorMessage>
-              {form.getFieldState("webhookUrl", form.formState).error?.message}
-            </FormErrorMessage>
-          </FormControl>
-        </div>
-      </ModalBody>
+        <FormField
+          control={form.control}
+          name="contractAddress"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Contract Address</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="0x..."
+                  {...field}
+                  className="bg-card"
+                  spellCheck={false}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-      <ModalFooter>
+        <FormField
+          control={form.control}
+          name="webhookUrl"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Webhook URL</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="https://"
+                  type="url"
+                  {...field}
+                  className="bg-card"
+                />
+              </FormControl>
+              <FormDescription>
+                Engine sends an HTTP request to your backend when new onchain
+                data for this contract is detected.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+
+      <div className="flex justify-end border-t bg-card p-4 lg:p-6">
         <Button
-          colorScheme="primary"
-          isDisabled={!form.formState.isValid}
           onClick={() => setModalState("inputData")}
+          disabled={!form.formState.isValid}
+          className="gap-2"
         >
           Next
+          <ArrowRightIcon className="size-4" />
         </Button>
-      </ModalFooter>
-    </>
+      </div>
+    </div>
   );
 };
 
@@ -274,17 +289,18 @@ const ModalBodyInputData = ({
   form,
   setModalState,
   client,
+  isAdding,
 }: {
   form: UseFormReturn<AddContractSubscriptionForm>;
   setModalState: Dispatch<SetStateAction<"inputContract" | "inputData">>;
   client: ThirdwebClient;
+  isAdding: boolean;
 }) => {
-  const processEventLogsDisclosure = useDisclosure({
-    defaultIsOpen: form.getValues("processEventLogs"),
-  });
-  const processTransactionReceiptsDisclosure = useDisclosure({
-    defaultIsOpen: form.getValues("processTransactionReceipts"),
-  });
+  const [processEventLogsOpen, setProcessEventLogsOpen] = useState(
+    form.getValues("processEventLogs"),
+  );
+  const [processTransactionReceiptsOpen, setProcessTransactionReceiptsOpen] =
+    useState(form.getValues("processTransactionReceipts"));
   const [shouldFilterEvents, setShouldFilterEvents] = useState(false);
   const [shouldFilterFunctions, setShouldFilterFunctions] = useState(false);
 
@@ -305,156 +321,158 @@ const ModalBodyInputData = ({
       filterFunctions.length === 0);
 
   return (
-    <>
-      <ModalBody>
-        <div className="flex flex-col gap-4">
-          <Text>
-            Select the data type to process.
-            <br />
-            Events logs are arbitrary data triggered by a smart contract call.
-            <br />
-            Transaction receipts contain details about the blockchain execution.
-          </Text>
-
-          <FormControl>
-            <FormLabel>Processed Data</FormLabel>
-
-            <div className="flex flex-col gap-2">
-              <CheckboxWithLabel>
-                <Checkbox
-                  checked={form.watch("processEventLogs")}
-                  onCheckedChange={(val) => {
-                    const checked = !!val;
-                    form.setValue("processEventLogs", checked);
-                    if (checked) {
-                      processEventLogsDisclosure.onOpen();
-                    } else {
-                      processEventLogsDisclosure.onClose();
-                    }
-                  }}
-                />
-                <span>Event Logs</span>
-              </CheckboxWithLabel>
-              {/* Shows all/specific events if processing event logs */}
-              <Collapse in={processEventLogsDisclosure.isOpen}>
-                <div className="flex flex-col gap-2 px-4">
-                  <RadioGroup
-                    defaultValue="false"
-                    onChange={(val: "false" | "true") => {
-                      if (val === "true") {
-                        setShouldFilterEvents(true);
-                      } else {
-                        setShouldFilterEvents(false);
-                        form.setValue("filterEvents", []);
+    <div>
+      <div className="space-y-3 px-4 lg:px-6 pb-8">
+        <div className="space-y-2">
+          <CheckboxWithLabel>
+            <Checkbox
+              checked={form.watch("processEventLogs")}
+              onCheckedChange={(val) => {
+                const checked = !!val;
+                form.setValue("processEventLogs", checked);
+                setProcessEventLogsOpen(checked);
+              }}
+            />
+            <span className="text-sm text-foreground">Event Logs</span>
+          </CheckboxWithLabel>
+
+          {/* Shows all/specific events if processing event logs */}
+          {processEventLogsOpen && (
+            <div className="space-y-2 pl-6">
+              <RadioGroup
+                defaultValue="false"
+                onValueChange={(val: "false" | "true") => {
+                  if (val === "true") {
+                    setShouldFilterEvents(true);
+                  } else {
+                    setShouldFilterEvents(false);
+                    form.setValue("filterEvents", []);
+                  }
+                }}
+              >
+                <div className="space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="false" id="all-events" />
+                    <label
+                      className="text-sm text-foreground"
+                      htmlFor="all-events"
+                    >
+                      All events
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="true" id="specific-events" />
+                    <label
+                      className="text-sm text-foreground"
+                      htmlFor="specific-events"
+                    >
+                      Specific events
+                    </label>
+                  </div>
+
+                  {/* List event names to select */}
+                  {shouldFilterEvents && (
+                    <FilterSelector
+                      abiItemType="event"
+                      client={client}
+                      filter={filterEvents}
+                      form={form}
+                      setFilter={(value) =>
+                        form.setValue("filterEvents", value)
                       }
-                    }}
-                  >
-                    <div className="flex flex-col gap-2">
-                      <Radio value="false">
-                        <Text>All events</Text>
-                      </Radio>
-                      <Radio value="true">
-                        <Text>
-                          Specific events{" "}
-                          {!!filterEvents.length &&
-                            `(${filterEvents.length} selected)`}
-                        </Text>
-                      </Radio>
-                      {/* List event names to select */}
-                      <Collapse in={shouldFilterEvents}>
-                        <FilterSelector
-                          abiItemType="event"
-                          client={client}
-                          filter={filterEvents}
-                          form={form}
-                          setFilter={(value) =>
-                            form.setValue("filterEvents", value)
-                          }
-                        />
-                      </Collapse>
-                    </div>
-                  </RadioGroup>
+                    />
+                  )}
                 </div>
-              </Collapse>
-
-              <CheckboxWithLabel>
-                <Checkbox
-                  checked={form.watch("processTransactionReceipts")}
-                  onCheckedChange={(val) => {
-                    const checked = !!val;
-                    form.setValue("processTransactionReceipts", checked);
-                    if (checked) {
-                      processTransactionReceiptsDisclosure.onOpen();
-                    } else {
-                      processTransactionReceiptsDisclosure.onClose();
-                    }
-                  }}
-                />
-                <span>Transaction Receipts</span>
-              </CheckboxWithLabel>
-              {/* Shows all/specific functions if processing transaction receipts */}
-              <Collapse in={processTransactionReceiptsDisclosure.isOpen}>
-                <div className="flex flex-col gap-2 px-4">
-                  <RadioGroup
-                    defaultValue="false"
-                    onChange={(val: "false" | "true") => {
-                      if (val === "true") {
-                        setShouldFilterFunctions(true);
-                      } else {
-                        setShouldFilterFunctions(false);
-                        form.setValue("filterFunctions", []);
+              </RadioGroup>
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <CheckboxWithLabel>
+            <Checkbox
+              checked={form.watch("processTransactionReceipts")}
+              onCheckedChange={(val) => {
+                const checked = !!val;
+                form.setValue("processTransactionReceipts", checked);
+                setProcessTransactionReceiptsOpen(checked);
+              }}
+            />
+            <span className="text-sm text-foreground">
+              Transaction Receipts
+            </span>
+          </CheckboxWithLabel>
+
+          {/* Shows all/specific functions if processing transaction receipts */}
+          {processTransactionReceiptsOpen && (
+            <div className="space-y-2 pl-6">
+              <RadioGroup
+                defaultValue="false"
+                onValueChange={(val: "false" | "true") => {
+                  if (val === "true") {
+                    setShouldFilterFunctions(true);
+                  } else {
+                    setShouldFilterFunctions(false);
+                    form.setValue("filterFunctions", []);
+                  }
+                }}
+              >
+                <div className="space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="false" id="all-functions" />
+                    <label
+                      htmlFor="all-functions"
+                      className="text-sm text-foreground"
+                    >
+                      All functions
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="true" id="specific-functions" />
+                    <label
+                      htmlFor="specific-functions"
+                      className="text-sm text-foreground"
+                    >
+                      Specific functions
+                    </label>
+                  </div>
+
+                  {/* List function names to select */}
+                  {shouldFilterFunctions && (
+                    <FilterSelector
+                      abiItemType="function"
+                      client={client}
+                      filter={filterFunctions}
+                      form={form}
+                      setFilter={(value) =>
+                        form.setValue("filterFunctions", value)
                       }
-                    }}
-                  >
-                    <div className="flex flex-col gap-2">
-                      <Radio value="false">
-                        <Text>All functions</Text>
-                      </Radio>
-                      <Radio value="true">
-                        <Text>
-                          Specific functions{" "}
-                          {!!filterFunctions.length &&
-                            `(${filterFunctions.length} selected)`}
-                        </Text>
-                      </Radio>
-                      {/* List function names to select */}
-                      <Collapse in={shouldFilterFunctions}>
-                        <FilterSelector
-                          abiItemType="function"
-                          client={client}
-                          filter={filterFunctions}
-                          form={form}
-                          setFilter={(value) =>
-                            form.setValue("filterFunctions", value)
-                          }
-                        />
-                      </Collapse>
-                    </div>
-                  </RadioGroup>
+                    />
+                  )}
                 </div>
-              </Collapse>
+              </RadioGroup>
             </div>
-          </FormControl>
+          )}
         </div>
-      </ModalBody>
+      </div>
 
-      <ModalFooter as={Flex} gap={3}>
+      <div className="flex justify-end gap-3 border-t bg-card p-4 lg:p-6">
         <Button
+          variant="outline"
           onClick={() => setModalState("inputContract")}
-          type="button"
-          variant="ghost"
         >
           Back
         </Button>
         <Button
-          colorScheme="primary"
-          isDisabled={isInputDataFormInvalid}
           type="submit"
+          disabled={isInputDataFormInvalid}
+          className="gap-2"
         >
-          Add
+          {isAdding && <Spinner className="size-4" />}
+          Add Subscription
         </Button>
-      </ModalFooter>
-    </>
+      </div>
+    </div>
   );
 };
 
@@ -466,7 +484,6 @@ const FilterSelector = ({
   client,
 }: {
   abiItemType: "function" | "event";
-
   form: UseFormReturn<AddContractSubscriptionForm>;
   filter: string[];
   setFilter: (value: string[]) => void;
@@ -534,33 +551,25 @@ const FilterSelector = ({
     }
   }, [abiItemType, abiItems.events, abiItems.writeFunctions]);
 
+  if (abiQuery.isPending) {
+    return <Skeleton className="h-[52px] w-full" />;
+  }
+
+  if (filterNames.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground py-2">
+        Cannot resolve the contract definition. Can not select {abiItemType}s.
+      </p>
+    );
+  }
+
   return (
-    <Card>
-      {abiQuery.isPending ? (
-        <Spinner size="sm" />
-      ) : filterNames.length === 0 ? (
-        <Text>
-          Cannot resolve the contract definition. Filters are unavailable.
-        </Text>
-      ) : (
-        <div className="flex max-h-[300px] flex-col gap-2 overflow-y-auto">
-          {filterNames.map((name) => (
-            <CheckboxWithLabel key={name}>
-              <Checkbox
-                checked={filter.includes(name)}
-                onCheckedChange={(val) => {
-                  if (val) {
-                    setFilter([...filter, name]);
-                  } else {
-                    setFilter(filter.filter((item) => item !== name));
-                  }
-                }}
-              />
-              <span>{name}</span>
-            </CheckboxWithLabel>
-          ))}
-        </div>
-      )}
-    </Card>
+    <MultiSelect
+      options={filterNames.map((name) => ({ label: name, value: name }))}
+      selectedValues={filter}
+      onSelectedValuesChange={setFilter}
+      placeholder={`Select ${abiItemType}s`}
+      className="w-full bg-card"
+    />
   );
 };
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
index fc0a9c93332..c51ccc304b8 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
@@ -1,33 +1,32 @@
 "use client";
 
-import {
-  Flex,
-  FormControl,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Tooltip,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Button, LinkButton } from "chakra/button";
-import { Card } from "chakra/card";
-import { FormLabel } from "chakra/form";
-import { Text } from "chakra/text";
 import { format } from "date-fns";
 import { InfoIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
+import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { eth_getBlockByNumber, getRpcClient } from "thirdweb";
 import { shortenAddress as shortenAddressThrows } from "thirdweb/utils";
 import { TWTable } from "@/components/blocks/TWTable";
+import { Button } from "@/components/ui/button";
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
 import {
@@ -35,36 +34,12 @@ import {
   useEngineRemoveContractSubscription,
   useEngineSubscriptionsLastBlock,
 } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
 import { ChainIconClient } from "@/icons/ChainIcon";
-
-function shortenAddress(address: string) {
-  if (!address) {
-    return "";
-  }
-
-  try {
-    return shortenAddressThrows(address);
-  } catch {
-    return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
-  }
-}
-
-interface ContractSubscriptionTableProps {
-  instanceUrl: string;
-  contractSubscriptions: EngineContractSubscription[];
-  isPending: boolean;
-  isFetched: boolean;
-  autoUpdate: boolean;
-  authToken: string;
-  client: ThirdwebClient;
-}
+import { parseError } from "@/utils/errorParser";
 
 const columnHelper = createColumnHelper<EngineContractSubscription>();
 
-export const ContractSubscriptionTable: React.FC<
-  ContractSubscriptionTableProps
-> = ({
+export function ContractSubscriptionTable({
   instanceUrl,
   contractSubscriptions,
   isPending,
@@ -72,8 +47,16 @@ export const ContractSubscriptionTable: React.FC<
   autoUpdate,
   authToken,
   client,
-}) => {
-  const removeDisclosure = useDisclosure();
+}: {
+  instanceUrl: string;
+  contractSubscriptions: EngineContractSubscription[];
+  isPending: boolean;
+  isFetched: boolean;
+  autoUpdate: boolean;
+  authToken: string;
+  client: ThirdwebClient;
+}) {
+  const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
   const [selectedContractSub, setSelectedContractSub] =
     useState<EngineContractSubscription>();
   const { idToChain } = useAllChainsData();
@@ -83,14 +66,14 @@ export const ContractSubscriptionTable: React.FC<
       cell: (cell) => {
         const chain = idToChain.get(cell.getValue());
         return (
-          <Flex align="center" gap={2}>
+          <div className="flex items-center gap-2">
             <ChainIconClient
               className="size-3"
               client={client}
               src={chain?.icon?.url}
             />
-            <Text>{chain?.name ?? "N/A"}</Text>
-          </Flex>
+            <span>{chain?.name ?? "N/A"}</span>
+          </div>
         );
       },
       header: "Chain",
@@ -109,15 +92,17 @@ export const ContractSubscriptionTable: React.FC<
           );
         }
         return (
-          <LinkButton
-            fontFamily="mono"
-            href={explorer ? `${explorer.url}/address/${cell.getValue()}` : "#"}
-            isExternal
-            size="xs"
-            variant="ghost"
-          >
-            {shortenAddress(cell.getValue())}
-          </LinkButton>
+          <Button className="font-mono" variant="ghost" size="sm" asChild>
+            <a
+              href={
+                explorer ? `${explorer.url}/address/${cell.getValue()}` : "#"
+              }
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {shortenAddress(cell.getValue())}
+            </a>
+          </Button>
         );
       },
       header: "Contract Address",
@@ -127,11 +112,7 @@ export const ContractSubscriptionTable: React.FC<
         const webhook = cell.getValue();
         const url = webhook?.url ?? "";
 
-        return (
-          <Text maxW={200} noOfLines={3} whiteSpace="normal">
-            {url}
-          </Text>
-        );
+        return <span className="max-w-[200px] truncate block">{url}</span>;
       },
       header: "Webhook URL",
     }),
@@ -145,63 +126,61 @@ export const ContractSubscriptionTable: React.FC<
         } = cell.row.original;
 
         return (
-          <Flex flexDirection="column">
+          <div className="flex flex-col">
             {/* Show logs + events */}
             {processEventLogs && (
-              <Flex gap={1}>
-                <Text>Logs:</Text>
+              <div className="flex gap-1">
+                <span>Logs:</span>
                 {filterEvents.length === 0 ? (
-                  <Text>All</Text>
+                  <span>All</span>
                 ) : (
-                  <Tooltip
-                    bgColor="backgroundCardHighlight"
-                    borderRadius="lg"
-                    label={
-                      <div className="flex flex-col gap-2 p-2 text-sm">
-                        {filterEvents.map((name) => (
-                          <Text key={name}>{name}</Text>
-                        ))}
-                      </div>
-                    }
-                    p={0}
-                    shouldWrapChildren
-                  >
-                    <Text textDecoration="underline dotted">
-                      {filterEvents.length} events
-                    </Text>
-                  </Tooltip>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="underline decoration-dotted cursor-help">
+                          {filterEvents.length} events
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent className="p-2">
+                        <div className="flex flex-col gap-2 text-sm">
+                          {filterEvents.map((name) => (
+                            <span key={name}>{name}</span>
+                          ))}
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
-              </Flex>
+              </div>
             )}
 
             {/* Show receipts + functions */}
             {processTransactionReceipts && (
-              <Flex gap={1}>
-                <Text>Receipts:</Text>
+              <div className="flex gap-1">
+                <span>Receipts:</span>
                 {filterFunctions.length === 0 ? (
-                  <Text>All</Text>
+                  <span>All</span>
                 ) : (
-                  <Tooltip
-                    bgColor="backgroundCardHighlight"
-                    borderRadius="lg"
-                    label={
-                      <div className="flex flex-col gap-2 p-2 text-sm">
-                        {filterFunctions.map((name) => (
-                          <Text key={name}>{name}</Text>
-                        ))}
-                      </div>
-                    }
-                    p={0}
-                    shouldWrapChildren
-                  >
-                    <Text textDecoration="underline dotted">
-                      {filterFunctions.length} functions
-                    </Text>
-                  </Tooltip>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="underline decoration-dotted cursor-help">
+                          {filterFunctions.length} functions
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent className="p-2">
+                        <div className="flex flex-col gap-2 text-sm">
+                          {filterFunctions.map((name) => (
+                            <span key={name}>{name}</span>
+                          ))}
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
-              </Flex>
+              </div>
             )}
-          </Flex>
+          </div>
         );
       },
       header: "Filters",
@@ -236,7 +215,7 @@ export const ContractSubscriptionTable: React.FC<
             isDestructive: true,
             onClick: (contractSub) => {
               setSelectedContractSub(contractSub);
-              removeDisclosure.onOpen();
+              setIsRemoveModalOpen(true);
             },
             text: "Remove",
           },
@@ -244,20 +223,21 @@ export const ContractSubscriptionTable: React.FC<
         title="contract subscriptions"
       />
 
-      {selectedContractSub && removeDisclosure.isOpen && (
+      {selectedContractSub && (
         <RemoveModal
           authToken={authToken}
           client={client}
           contractSubscription={selectedContractSub}
-          disclosure={removeDisclosure}
+          isOpen={isRemoveModalOpen}
+          onClose={() => setIsRemoveModalOpen(false)}
           instanceUrl={instanceUrl}
         />
       )}
     </>
   );
-};
+}
 
-const ChainLastBlockTimestamp = ({
+function ChainLastBlockTimestamp({
   chainId,
   blockNumber,
   client,
@@ -265,7 +245,7 @@ const ChainLastBlockTimestamp = ({
   chainId: number;
   blockNumber: bigint;
   client: ThirdwebClient;
-}) => {
+}) {
   const chain = useV5DashboardChain(chainId);
   // Get the block timestamp to display how delayed the last processed block is.
   const ethBlockQuery = useQuery({
@@ -290,13 +270,15 @@ const ChainLastBlockTimestamp = ({
   }
 
   return (
-    <Card bgColor="backgroundHighlight">
-      <Text>{format(ethBlockQuery.data, "PP pp z")}</Text>
+    <Card className="bg-muted">
+      <CardContent className="p-2">
+        <span>{format(ethBlockQuery.data, "PP pp z")}</span>
+      </CardContent>
     </Card>
   );
-};
+}
 
-const ChainLastBlock = ({
+function ChainLastBlock({
   instanceUrl,
   chainId,
   autoUpdate,
@@ -308,7 +290,7 @@ const ChainLastBlock = ({
   autoUpdate: boolean;
   authToken: string;
   client: ThirdwebClient;
-}) => {
+}) {
   const lastBlockQuery = useEngineSubscriptionsLastBlock({
     authToken,
     autoUpdate,
@@ -320,145 +302,158 @@ const ChainLastBlock = ({
   }
 
   return (
-    <Flex align="center" gap={2}>
-      <Text>{lastBlockQuery.data}</Text>
-      <Tooltip
-        bg="transparent"
-        borderRadius="md"
-        boxShadow="none"
-        label={
-          <ChainLastBlockTimestamp
-            blockNumber={BigInt(lastBlockQuery.data)}
-            chainId={chainId}
-            client={client}
-          />
-        }
-        placement="auto"
-        shouldWrapChildren
-      >
-        <InfoIcon className="size-4" />
-      </Tooltip>
-    </Flex>
+    <div className="flex items-center gap-2">
+      <span>{lastBlockQuery.data}</span>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <InfoIcon className="size-4 cursor-help" />
+          </TooltipTrigger>
+          <TooltipContent>
+            <ChainLastBlockTimestamp
+              blockNumber={BigInt(lastBlockQuery.data)}
+              chainId={chainId}
+              client={client}
+            />
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
   );
-};
+}
 
-const RemoveModal = ({
+function RemoveModal({
   contractSubscription,
-  disclosure,
+  isOpen,
+  onClose,
   instanceUrl,
   authToken,
   client,
 }: {
   contractSubscription: EngineContractSubscription;
-  disclosure: UseDisclosureReturn;
+  isOpen: boolean;
+  onClose: () => void;
   instanceUrl: string;
   authToken: string;
   client: ThirdwebClient;
-}) => {
-  const { mutate: removeContractSubscription } =
-    useEngineRemoveContractSubscription({
-      authToken,
-      instanceUrl,
-    });
+}) {
+  const removeContractSubscription = useEngineRemoveContractSubscription({
+    authToken,
+    instanceUrl,
+  });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully removed contract subscription.",
-    "Failed to remove contract subscription.",
-  );
   const { idToChain } = useAllChainsData();
   const chain = idToChain.get(contractSubscription.chainId);
 
   const onClick = () => {
-    removeContractSubscription(
+    removeContractSubscription.mutate(
       {
         contractSubscriptionId: contractSubscription.id,
       },
       {
         onError: (error) => {
-          onError(error);
+          toast.error("Failed to remove contract subscription.", {
+            description: parseError(error),
+          });
           console.error(error);
         },
         onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
+          toast.success("Successfully removed contract subscription.");
+          onClose();
         },
       },
     );
   };
 
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Remove Contract Subscription</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>
-              This action will delete all stored data for this contract
-              subscription.
-            </Text>
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="p-0 overflow-hidden gap-0">
+        <DialogHeader className="p-4 lg:p-6">
+          <DialogTitle>Remove Contract Subscription</DialogTitle>
+          <DialogDescription>
+            This action will delete all stored data for this contract
+            subscription.
+          </DialogDescription>
+        </DialogHeader>
 
-            <Card as={Flex} flexDir="column" gap={4}>
-              <FormControl>
-                <FormLabel>Chain</FormLabel>
-                <Flex align="center" gap={2}>
-                  <ChainIconClient
-                    className="size-3"
-                    client={client}
-                    src={chain?.icon?.url}
-                  />
-                  <Text>{chain?.name ?? "N/A"}</Text>
-                </Flex>
-              </FormControl>
+        <div className="px-4 lg:px-6 pb-6 space-y-5">
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Chain</h3>
+            <div className="flex items-center gap-2">
+              <ChainIconClient
+                className="size-3"
+                client={client}
+                src={chain?.icon?.url}
+              />
+              <span className="text-sm text-foreground">
+                {chain?.name ?? "N/A"}
+              </span>
+            </div>
+          </div>
 
-              <FormControl>
-                <FormLabel>Contract Address</FormLabel>
-                <Text fontFamily="mono">
-                  {contractSubscription.contractAddress}
-                </Text>
-              </FormControl>
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Contract Address</h3>
+            <span className="font-mono text-sm">
+              {contractSubscription.contractAddress}
+            </span>
+          </div>
 
-              <FormControl>
-                <FormLabel>Webhook</FormLabel>
-                {contractSubscription.webhook ? (
-                  <Text>{contractSubscription.webhook.url}</Text>
-                ) : (
-                  <Text fontStyle="italic">N/A</Text>
-                )}
-              </FormControl>
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Webhook</h3>
+            {contractSubscription.webhook ? (
+              <span className="text-sm">
+                {contractSubscription.webhook.url}
+              </span>
+            ) : (
+              <span className="italic text-sm">N/A</span>
+            )}
+          </div>
 
-              <FormControl>
-                <FormLabel>Filters</FormLabel>
-                {contractSubscription.processEventLogs && (
-                  <Text>
-                    Logs:{" "}
-                    {contractSubscription.filterEvents.length === 0
-                      ? "All"
-                      : contractSubscription.filterEvents.join(", ")}
-                  </Text>
-                )}
-                {contractSubscription.processTransactionReceipts && (
-                  <Text>
-                    Receipts:{" "}
-                    {contractSubscription.filterFunctions.length === 0
-                      ? "All"
-                      : contractSubscription.filterFunctions.join(", ")}
-                  </Text>
-                )}
-              </FormControl>
-            </Card>
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Filters</h3>
+            {contractSubscription.processEventLogs && (
+              <span className="text-sm">
+                Logs:{" "}
+                {contractSubscription.filterEvents.length === 0
+                  ? "All"
+                  : contractSubscription.filterEvents.join(", ")}
+              </span>
+            )}
+            {contractSubscription.processTransactionReceipts && (
+              <span className="text-sm">
+                Receipts:{" "}
+                {contractSubscription.filterFunctions.length === 0
+                  ? "All"
+                  : contractSubscription.filterFunctions.join(", ")}
+              </span>
+            )}
           </div>
-        </ModalBody>
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} type="button" variant="ghost">
+        </div>
+
+        <div className="flex gap-3 justify-end border-t p-4 lg:p-6 bg-card">
+          <Button onClick={onClose} variant="outline">
             Cancel
           </Button>
-          <Button colorScheme="red" onClick={onClick} type="submit">
+          <Button onClick={onClick} variant="destructive" className="gap-2">
             Remove
+            {removeContractSubscription.isPending && (
+              <Spinner className="size-4" />
+            )}
           </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
-};
+}
+
+function shortenAddress(address: string) {
+  if (!address) {
+    return "";
+  }
+
+  try {
+    return shortenAddressThrows(address);
+  } catch {
+    return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+  }
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
index 3e80cb87799..7a9a820aaa5 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
@@ -1,39 +1,38 @@
 "use client";
 
-import { Flex, FormControl, Switch } from "@chakra-ui/react";
-import { FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { useId, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
+import { Switch } from "@/components/ui/switch";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { useEngineContractSubscription } from "@/hooks/useEngine";
 import { AddContractSubscriptionButton } from "./add-contract-subscription-button";
 import { ContractSubscriptionTable } from "./contract-subscriptions-table";
 
-interface EngineContractSubscriptionsProps {
+export function EngineContractSubscriptions({
+  instanceUrl,
+  authToken,
+  client,
+}: {
   instanceUrl: string;
   authToken: string;
   client: ThirdwebClient;
-}
-
-export const EngineContractSubscriptions: React.FC<
-  EngineContractSubscriptionsProps
-> = ({ instanceUrl, authToken, client }) => {
-  const [autoUpdate, setAutoUpdate] = useState<boolean>(true);
+}) {
+  const [autoUpdate, setAutoUpdate] = useState(true);
   const contractSubscriptionsQuery = useEngineContractSubscription({
     authToken,
     instanceUrl,
   });
-
   const autoUpdateId = useId();
 
   return (
-    <Flex flexDir="column" gap={4}>
-      <Flex flexDir="row" gap={2} justify="space-between">
-        <Flex flexDir="column" gap={2}>
-          <Heading size="title.md">Contract Subscriptions</Heading>
-          <Text>
+    <div>
+      {/* Header */}
+      <div className="flex flex-row gap-2 justify-between mb-4">
+        <div>
+          <h2 className="text-2xl font-semibold mb-1">
+            Contract Subscriptions
+          </h2>
+          <p className="text-muted-foreground text-sm">
             Subscribe to event logs and transaction receipts on any contract.{" "}
             <UnderlineLink
               color="primary.500"
@@ -44,21 +43,23 @@ export const EngineContractSubscriptions: React.FC<
               Learn more about contract subscriptions
             </UnderlineLink>
             .
-          </Text>
-        </Flex>
-        <div className="flex flex-row">
-          <FormControl alignItems="center" display="flex">
-            <FormLabel htmlFor={autoUpdateId} mb="0">
+          </p>
+        </div>
+
+        <div className="flex flex-row items-center">
+          <div className="flex flex-row items-center gap-3">
+            <label htmlFor={autoUpdateId} className="text-sm">
               Auto-Update
-            </FormLabel>
+            </label>
             <Switch
               id={autoUpdateId}
-              isChecked={autoUpdate}
-              onChange={() => setAutoUpdate((val) => !val)}
+              checked={autoUpdate}
+              onCheckedChange={() => setAutoUpdate((val) => !val)}
             />
-          </FormControl>
+          </div>
         </div>
-      </Flex>
+      </div>
+
       <ContractSubscriptionTable
         authToken={authToken}
         autoUpdate={autoUpdate}
@@ -68,11 +69,15 @@ export const EngineContractSubscriptions: React.FC<
         isFetched={contractSubscriptionsQuery.isFetched}
         isPending={contractSubscriptionsQuery.isPending}
       />
-      <AddContractSubscriptionButton
-        authToken={authToken}
-        client={client}
-        instanceUrl={instanceUrl}
-      />
-    </Flex>
+
+      {/* add */}
+      <div className="flex justify-end mt-4">
+        <AddContractSubscriptionButton
+          authToken={authToken}
+          client={client}
+          instanceUrl={instanceUrl}
+        />
+      </div>
+    </div>
   );
-};
+}