Dashboard: Migrate Claim condition components from chakra to tailwind

Author: MananTank

apps/dashboard/public/assets/examples/snapshot-with-maxclaimable.csv

@@ -1,5 +1,5 @@
 "use client";
-import { ArrowDownToLineIcon } from "lucide-react";
+import { ArrowDownToLineIcon, FileTextIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { handleDownload } from "../download-file-button";
@@ -10,27 +10,36 @@ export function DownloadableCode(props: {
   fileNameWithExtension: string;
 }) {
   return (
-    <div className="!my-3 relative">
-      <CodeClient
-        code={props.code}
-        lang={props.lang}
-        scrollableClassName="max-h-[300px] bg-background"
-      />
-
-      <Button
-        className="absolute top-3.5 right-14 mt-[1px] h-auto bg-background p-2"
-        onClick={() => {
-          handleDownload({
-            fileContent: props.code,
-            fileFormat: props.lang === "csv" ? "text/csv" : "application/json",
-            fileNameWithExtension: props.fileNameWithExtension,
-          });
-        }}
-        size="sm"
-        variant="outline"
-      >
-        <ArrowDownToLineIcon className="size-3" />
-      </Button>
+    <div className="!my-5 bg-card">
+      <p className="text-sm text-muted-foreground border border-b-0 px-4 py-3 pr-3.5 rounded-lg rounded-b-none flex items-center justify-between">
+        <span className="flex items-center gap-1.5">
+          <FileTextIcon className="size-3.5" />
+          {props.fileNameWithExtension}
+        </span>
+        <Button
+          className="h-auto bg-background p-2"
+          onClick={() => {
+            handleDownload({
+              fileContent: props.code,
+              fileFormat:
+                props.lang === "csv" ? "text/csv" : "application/json",
+              fileNameWithExtension: props.fileNameWithExtension,
+            });
+          }}
+          size="sm"
+          variant="outline"
+        >
+          <ArrowDownToLineIcon className="size-3" />
+        </Button>
+      </p>
+      <div className="relative">
+        <CodeClient
+          code={props.code}
+          lang={props.lang}
+          scrollableClassName="max-h-[300px] bg-background bg-card"
+          className="rounded-t-none"
+        />
+      </div>
     </div>
   );
 }

apps/dashboard/public/assets/examples/snapshot-with-overrides.csv

@@ -26,7 +26,7 @@ export function DropZone(props: {
   return (
     <div
       className={cn(
-        "flex cursor-pointer items-center justify-center rounded-md border border-dashed bg-card py-10 hover:border-active-border",
+        "flex cursor-pointer items-center justify-center rounded-md border border-dashed bg-card py-10 hover:border-active-border px-4",
         props.isError &&
           "border-red-500 bg-red-200/30 text-red-500 hover:border-red-600 dark:border-red-900 dark:bg-red-900/30 dark:hover:border-red-800",
         props.className,

apps/dashboard/public/assets/examples/snapshot.csv

@@ -28,7 +28,7 @@ type TransactionButtonProps = Omit<ButtonProps, "variant"> & {
   transactionCount: number | undefined; // support for unknown number of tx count
   isPending: boolean;
   txChainID: number;
-  variant?: "destructive" | "primary" | "default";
+  variant?: "destructive" | "primary" | "default" | "outline";
   isLoggedIn: boolean;
   checkBalance?: boolean;
   client: ThirdwebClient;

apps/dashboard/src/@/components/blocks/code/downloadable-code.tsx

@@ -1,47 +1,40 @@
-import { Box, Flex } from "@chakra-ui/react";
 import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { CurrencySelector } from "@/components/blocks/CurrencySelector";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { cn } from "@/lib/utils";
 import { PriceInput } from "../../price-input";
 import { useClaimConditionsFormContext } from "..";
-import { CustomFormControl } from "../common";
 
 /**
  * Allows the user to select how much they want to charge to claim each NFT
  */
 export const ClaimPriceInput = (props: { contractChainId: number }) => {
-  const {
-    formDisabled,
-    isErc20,
-    form,
-    phaseIndex,
-    field,
-    isColumn,
-    claimConditionType,
-  } = useClaimConditionsFormContext();
+  const { formDisabled, isErc20, form, phaseIndex, field, claimConditionType } =
+    useClaimConditionsFormContext();
 
   if (claimConditionType === "creator") {
     return null;
   }
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
-      error={
+    <FormFieldSetup
+      isRequired={false}
+      errorMessage={
         form.getFieldState(`phases.${phaseIndex}.price`, form.formState).error
+          ?.message
       }
       label={`How much do you want to charge to claim each ${
         isErc20 ? "token" : "NFT"
       }?`}
     >
-      <Flex flexDir={{ base: "column", md: "row" }} gap={2}>
-        <Box minW="70px" w={{ base: "100%", md: "50%" }}>
-          <PriceInput
-            onChange={(val) => form.setValue(`phases.${phaseIndex}.price`, val)}
-            value={field.price?.toString() || ""}
-            w="full"
-          />
-        </Box>
-        <Box w={{ base: "100%", md: isColumn ? "50%" : "100%" }}>
+      <div className={cn("flex flex-col md:flex-row gap-3")}>
+        <PriceInput
+          onChange={(val) => form.setValue(`phases.${phaseIndex}.price`, val)}
+          value={field.price?.toString() || ""}
+          disabled={formDisabled}
+          className="max-w-48"
+        />
+        <div className="grow max-w-md">
           <CurrencySelector
             contractChainId={props.contractChainId}
             isDisabled={formDisabled}
@@ -53,8 +46,8 @@ export const ClaimPriceInput = (props: { contractChainId: number }) => {
             }
             value={field?.currencyAddress || NATIVE_TOKEN_ADDRESS}
           />
-        </Box>
-      </Flex>
-    </CustomFormControl>
+        </div>
+      </div>
+    </FormFieldSetup>
   );
 };

apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx

@@ -1,8 +1,15 @@
-import { Box, Flex, Select } from "@chakra-ui/react";
 import { UploadIcon } from "lucide-react";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Button } from "@/components/ui/button";
-import { useClaimConditionsFormContext } from "..";
-import { CustomFormControl } from "../common";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { useClaimConditionsFormContext } from "../index";
 
 /**
  * Allows the user to
@@ -19,12 +26,11 @@ export const ClaimerSelection = () => {
     isErc20,
     setOpenSnapshotIndex: setOpenIndex,
     isAdmin,
-    isColumn,
     claimConditionType,
   } = useClaimConditionsFormContext();
 
-  const handleClaimerChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const val = e.currentTarget.value as "any" | "specific" | "overrides";
+  const handleClaimerChange = (value: string) => {
+    const val = value as "any" | "specific" | "overrides";
 
     if (val === "any") {
       form.setValue(`phases.${phaseIndex}.snapshot`, undefined);
@@ -80,79 +86,69 @@ export const ClaimerSelection = () => {
         : `Who can claim ${isErc20 ? "tokens" : "NFTs"} during this phase?`;
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
-      error={
+    <FormFieldSetup
+      errorMessage={
         form.getFieldState(`phases.${phaseIndex}.snapshot`, form.formState)
-          .error
+          ?.error?.message
       }
       helperText={helperText}
       label={label}
+      isRequired={false}
     >
-      <Flex direction={{ base: "column", md: "row" }} gap={4}>
+      <div className="flex flex-col md:flex-row gap-4">
         {claimConditionType === "overrides" ||
         claimConditionType === "specific" ? null : (
           <Select
-            isDisabled={formDisabled}
-            onChange={handleClaimerChange}
+            disabled={formDisabled}
+            onValueChange={handleClaimerChange}
             value={dropType}
-            w={{ base: "100%", md: "50%" }}
           >
-            <option value="any">Any wallet</option>
-            <option value="overrides">Any wallet (with overrides)</option>
-            <option value="specific">Only specific wallets</option>
+            <SelectTrigger className="w-full md:w-1/2">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="any">Any wallet</SelectItem>
+              <SelectItem value="overrides">
+                Any wallet (with overrides)
+              </SelectItem>
+              <SelectItem value="specific">Only specific wallets</SelectItem>
+            </SelectContent>
           </Select>
         )}
 
         {/* Edit or See Snapshot */}
         {field.snapshot ? (
-          <Flex
-            direction={{
-              base: "column",
-              md: isColumn ? "column" : "row",
-            }}
-            gap={1.5}
-          >
+          <div className="flex items-center gap-3">
             {/* disable the "Edit" button when form is disabled, but not when it's a "See" button */}
             <Button
               className="gap-2 rounded-md"
               disabled={disabledSnapshotButton}
               onClick={() => setOpenIndex(phaseIndex)}
-              variant="primary"
+              size="sm"
             >
               {isAdmin ? "Edit" : "See"} Claimer Snapshot
               <UploadIcon className="size-4" />
             </Button>
 
-            <Flex
-              _light={{
-                color: field.snapshot?.length === 0 ? "red.500" : "green.500",
-              }}
-              align="center"
-              color={field.snapshot?.length === 0 ? "red.400" : "green.400"}
-              direction="row"
-              gap={2}
-              justify="center"
-              ml={2}
-              opacity={disabledSnapshotButton ? 0.5 : 1}
+            <div
+              className={cn(
+                "flex gap-2 items-center",
+                field.snapshot?.length === 0
+                  ? "text-muted-foreground"
+                  : "text-green-600 dark:text-green-500",
+                disabledSnapshotButton ? "opacity-50" : "",
+              )}
             >
-              <p>
-                ●{" "}
-                <strong>
-                  {field.snapshot?.length} address
-                  {field.snapshot?.length === 1 ? "" : "es"}
-                </strong>{" "}
-                in snapshot
-              </p>
-            </Flex>
-          </Flex>
-        ) : (
-          <Box
-            display={{ base: "none", md: "block" }}
-            w={{ base: "100%", md: "50%" }}
-          />
-        )}
-      </Flex>
-    </CustomFormControl>
+              <div className="size-2 bg-current rounded-full" />
+              <span className="text-sm">
+                {field.snapshot?.length}{" "}
+                {field.snapshot?.length === 1 ? "address" : "addresses"} in
+                snapshot
+              </span>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </FormFieldSetup>
   );
 };

apps/dashboard/src/@/components/tx-button/index.tsx

@@ -1,6 +1,6 @@
 import { useActiveAccount } from "thirdweb/react";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Input } from "@/components/ui/input";
-import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";
 
 /**
@@ -14,17 +14,17 @@ interface CreatorInputProps {
 export const CreatorInput: React.FC<CreatorInputProps> = ({
   creatorAddress,
 }) => {
-  const { formDisabled, claimConditionType, isAdmin } =
-    useClaimConditionsFormContext();
+  const { claimConditionType, isAdmin } = useClaimConditionsFormContext();
   const walletAddress = useActiveAccount()?.address;
 
   if (claimConditionType !== "creator") {
     return null;
   }
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
+    <FormFieldSetup
+      isRequired={false}
+      errorMessage={undefined}
       helperText={
         <>
           This wallet address will be able to indefinitely claim.{" "}
@@ -34,7 +34,12 @@ export const CreatorInput: React.FC<CreatorInputProps> = ({
       }
       label="Creator address"
     >
-      <Input disabled readOnly value={creatorAddress || walletAddress} />
-    </CustomFormControl>
+      <Input
+        disabled
+        readOnly
+        value={creatorAddress || walletAddress}
+        className="disabled:opacity-100 max-w-sm"
+      />
+    </FormFieldSetup>
   );
 };