[TOOL-2995]: Fix Engine Contract Subscription UI issue with checkboxes (#5920)

---
title: "[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 updating the checkbox components in the application to improve their functionality and layout by integrating `CheckboxWithLabel` for better labeling and interaction management.

### Detailed summary
- Replaced direct usage of `Checkbox` with `CheckboxWithLabel` in `batch-lazy-mint.tsx` for the `shuffle` option.
- Updated event handling for `processEventLogs` checkbox in `add-contract-subscription-button.tsx` to use `CheckboxWithLabel`.
- Changed `processTransactionReceipts` checkbox to use `CheckboxWithLabel`.
- Refactored filter selection to use `CheckboxWithLabel` for better UI consistency.

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

<!-- end pr-codex -->

Author: MananTank

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

@@ -9,7 +9,6 @@ import {
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContractAbi";
 import {
-  CheckboxGroup,
   Collapse,
   Flex,
   FormControl,
@@ -324,21 +323,21 @@ const ModalBodyInputData = ({
             <FormLabel>Processed Data</FormLabel>
 
             <div className="flex flex-col gap-2">
-              <Checkbox
-                {...form.register("processEventLogs")}
-                checked={form.getValues("processEventLogs")}
-                onCheckedChange={(val) => {
-                  const checked = !!val;
-                  form.setValue("processEventLogs", checked);
-                  if (checked) {
-                    processEventLogsDisclosure.onOpen();
-                  } else {
-                    processEventLogsDisclosure.onClose();
-                  }
-                }}
-              >
-                <Text>Event Logs</Text>
-              </Checkbox>
+              <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">
@@ -382,8 +381,7 @@ const ModalBodyInputData = ({
 
               <CheckboxWithLabel>
                 <Checkbox
-                  {...form.register("processTransactionReceipts")}
-                  checked={form.getValues("processTransactionReceipts")}
+                  checked={form.watch("processTransactionReceipts")}
                   onCheckedChange={(val) => {
                     const checked = !!val;
                     form.setValue("processTransactionReceipts", checked);
@@ -394,7 +392,7 @@ const ModalBodyInputData = ({
                     }
                   }}
                 />
-                <Text>Transaction Receipts</Text>
+                <span>Transaction Receipts</span>
               </CheckboxWithLabel>
               {/* Shows all/specific functions if processing transaction receipts */}
               <Collapse in={processTransactionReceiptsDisclosure.isOpen}>
@@ -546,16 +544,21 @@ const FilterSelector = ({
         </Text>
       ) : (
         <div className="flex max-h-[300px] flex-col gap-2 overflow-y-auto">
-          <CheckboxGroup
-            value={filter}
-            onChange={(selected: string[]) => setFilter(selected)}
-          >
-            {filterNames.map((name) => (
-              <Checkbox key={name} value={name}>
-                <Text>{name}</Text>
-              </Checkbox>
-            ))}
-          </CheckboxGroup>
+          {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>

apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx

@@ -251,7 +251,11 @@ export const BatchLazyMint: ComponentWithChildren<
           {form.watch("revealType") && (
             <>
               <CheckboxWithLabel>
-                <Checkbox {...form.register("shuffle")} className="mt-3" />
+                <Checkbox
+                  className="mt-3"
+                  checked={form.watch("shuffle")}
+                  onCheckedChange={(val) => form.setValue("shuffle", !!val)}
+                />
                 <div className="flex flex-col items-center gap-1 md:flex-row">
                   <p>Shuffle the order of the NFTs before uploading.</p>
                   <em>This is an off-chain operation and is not provable.</em>