[TOOL-2995]: Fix Engine Contract Subscription UI issue with checkboxes

Author: MananTank

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

@@ -324,21 +324,22 @@ 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
+                  {...form.register("processEventLogs")}
+                  checked={form.getValues("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">
@@ -394,7 +395,7 @@ const ModalBodyInputData = ({
                     }
                   }}
                 />
-                <Text>Transaction Receipts</Text>
+                <span>Transaction Receipts</span>
               </CheckboxWithLabel>
               {/* Shows all/specific functions if processing transaction receipts */}
               <Collapse in={processTransactionReceiptsDisclosure.isOpen}>
@@ -551,9 +552,10 @@ const FilterSelector = ({
             onChange={(selected: string[]) => setFilter(selected)}
           >
             {filterNames.map((name) => (
-              <Checkbox key={name} value={name}>
-                <Text>{name}</Text>
-              </Checkbox>
+              <CheckboxWithLabel key={name}>
+                <Checkbox value={name} />
+                <span>{name}</span>
+              </CheckboxWithLabel>
             ))}
           </CheckboxGroup>
         </div>

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
+                  {...form.register("shuffle")}
+                  className="mt-3"
+                  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>