Remove tw-components Checkbox CORE-419 (#5890)

CORE-419

Author: kien-ngo

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { Tooltip } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC4337Ext from "thirdweb/extensions/erc4337";
@@ -53,23 +52,11 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
 
   if (isAccountDeployedQuery.data && accountsForAddressQuery.data?.length) {
     return (
-      <Tooltip
-        label={
-          <Card className="bg-card px-4 py-2">
-            <p>You can only initialize one account per EOA.</p>
-          </Card>
-        }
-        bg="transparent"
-        boxShadow="none"
-        bgColor="backgroundHighlight"
-        borderRadius="lg"
-        placement="right"
-        shouldWrapChildren
-      >
+      <ToolTipLabel label="You can only initialize one account per EOA.">
         <Button variant="primary" disabled>
           Account Created
         </Button>
-      </Tooltip>
+      </ToolTipLabel>
     );
   }
 

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

@@ -1,3 +1,4 @@
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
 import { useEngineCreateAccessToken } from "@3rdweb-sdk/react/hooks/useEngine";
 import {
@@ -14,7 +15,7 @@ import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { CirclePlusIcon } from "lucide-react";
 import { useState } from "react";
-import { Button, Checkbox, Text } from "tw-components";
+import { Button, Text } from "tw-components";
 
 interface AddAccessTokenButtonProps {
   instanceUrl: string;
@@ -92,12 +93,13 @@ export const AddAccessTokenButton: React.FC<AddAccessTokenButtonProps> = ({
               <Text color="red.500">
                 This access token will not be shown again.
               </Text>
-              <Checkbox
-                checked={hasStoredToken}
-                onChange={(e) => setHasStoredToken(e.target.checked)}
-              >
-                I have securely stored this access token.
-              </Checkbox>
+              <CheckboxWithLabel>
+                <Checkbox
+                  checked={hasStoredToken}
+                  onCheckedChange={(val) => setHasStoredToken(!!val)}
+                />
+                <span>I have securely stored this access token.</span>
+              </CheckboxWithLabel>
             </div>
           </ModalBody>
 

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import {
   type AddContractSubscriptionInput,
@@ -36,7 +37,6 @@ import { getContract, isAddress } from "thirdweb";
 import {
   Button,
   Card,
-  Checkbox,
   FormErrorMessage,
   FormHelperText,
   FormLabel,
@@ -327,8 +327,8 @@ const ModalBodyInputData = ({
               <Checkbox
                 {...form.register("processEventLogs")}
                 checked={form.getValues("processEventLogs")}
-                onChange={(e) => {
-                  const { checked } = e.target;
+                onCheckedChange={(val) => {
+                  const checked = !!val;
                   form.setValue("processEventLogs", checked);
                   if (checked) {
                     processEventLogsDisclosure.onOpen();
@@ -380,21 +380,22 @@ const ModalBodyInputData = ({
                 </div>
               </Collapse>
 
-              <Checkbox
-                {...form.register("processTransactionReceipts")}
-                checked={form.getValues("processTransactionReceipts")}
-                onChange={(e) => {
-                  const { checked } = e.target;
-                  form.setValue("processTransactionReceipts", checked);
-                  if (checked) {
-                    processTransactionReceiptsDisclosure.onOpen();
-                  } else {
-                    processTransactionReceiptsDisclosure.onClose();
-                  }
-                }}
-              >
+              <CheckboxWithLabel>
+                <Checkbox
+                  {...form.register("processTransactionReceipts")}
+                  checked={form.getValues("processTransactionReceipts")}
+                  onCheckedChange={(val) => {
+                    const checked = !!val;
+                    form.setValue("processTransactionReceipts", checked);
+                    if (checked) {
+                      processTransactionReceiptsDisclosure.onOpen();
+                    } else {
+                      processTransactionReceiptsDisclosure.onClose();
+                    }
+                  }}
+                />
                 <Text>Transaction Receipts</Text>
-              </Checkbox>
+              </CheckboxWithLabel>
               {/* Shows all/specific functions if processing transaction receipts */}
               <Collapse in={processTransactionReceiptsDisclosure.isOpen}>
                 <div className="flex flex-col gap-2 px-4">

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

@@ -1,10 +1,10 @@
 "use client";
 
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import {
   Alert,
   AlertIcon,
-  Box,
   Flex,
   FormControl,
   Input,
@@ -24,7 +24,6 @@ import type { CreateDelayedRevealBatchParams } from "thirdweb/extensions/erc721"
 import type { NFTInput } from "thirdweb/utils";
 import {
   Button,
-  Checkbox,
   FormErrorMessage,
   FormHelperText,
   FormLabel,
@@ -196,7 +195,7 @@ export const BatchLazyMint: ComponentWithChildren<
               />
               <div className="border-border border-t">
                 <div className="flex flex-col items-center justify-between p-0 md:flex-row md:p-4">
-                  <Box ref={paginationPortalRef} />
+                  <div ref={paginationPortalRef} />
                   <div className="mt-4 flex w-full flex-row items-center gap-2 md:mt-0 md:w-auto">
                     <Button
                       borderRadius="md"
@@ -251,15 +250,14 @@ export const BatchLazyMint: ComponentWithChildren<
           />
           {form.watch("revealType") && (
             <>
-              <Checkbox {...form.register("shuffle")} mt={3}>
-                <Flex gap={1} flexDir={{ base: "column", md: "row" }}>
-                  <Text>Shuffle the order of the NFTs before uploading.</Text>
-                  <Text fontStyle="italic">
-                    This is an off-chain operation and is not provable.
-                  </Text>
-                </Flex>
-              </Checkbox>
-              <Box maxW={{ base: "100%", md: "61%" }}>
+              <CheckboxWithLabel>
+                <Checkbox {...form.register("shuffle")} className="mt-3" />
+                <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>
+                </div>
+              </CheckboxWithLabel>
+              <div className="w-full md:w-[61%]">
                 <TransactionButton
                   txChainID={props.chainId}
                   className="mt-4 w-full"
@@ -274,7 +272,7 @@ export const BatchLazyMint: ComponentWithChildren<
                     : `Upload ${nftMetadatas.length} NFTs`}
                 </TransactionButton>
                 {props.children}
-              </Box>
+              </div>
               <Text size="body.sm" mt={2}>
                 <TrackedLink
                   href="https://support.thirdweb.com/dashboard/n5evQ4EfEjEifczEQaZ1hL/batch-upload-troubleshooting/5WMQFqfaUTU1C8NM8FtJ2X"
@@ -406,7 +404,7 @@ const SelectReveal: React.FC<SelectRevealProps> = ({
                 }
               >
                 <FormLabel>Image</FormLabel>
-                <Box width={{ base: "auto", md: "350px" }}>
+                <div className="w-auto md:w-[350px]">
                   <FileInput
                     accept={{ "image/*": [] }}
                     value={imageUrl}
@@ -416,7 +414,7 @@ const SelectReveal: React.FC<SelectRevealProps> = ({
                     }
                     className="rounded border border-border transition-all duration-200"
                   />
-                </Box>
+                </div>
                 <FormHelperText>
                   You can optionally upload an image as the placeholder.
                 </FormHelperText>

apps/dashboard/src/tw-components/checkbox.tsx

@@ -1,6 +1,5 @@
 export * from "./button";
 export * from "./card";
-export * from "./checkbox";
 export * from "./form";
 export * from "./heading";
 export * from "./link";