From c077f78e3a4a051c6b0ff4b260c7486d16e6b862 Mon Sep 17 00:00:00 2001 From: MananTank Date: Fri, 25 Jul 2025 18:11:53 +0000 Subject: [PATCH] Dashboard: Migrate contract deployment UI from chakra to tailwind (#7712) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on refactoring the button components and form controls in the dashboard application, improving the UI consistency and structure by replacing `FormControl` with a custom `FormFieldSetup` component and adjusting button properties. ### Detailed summary - Changed the export of `ButtonProps` in `apps/dashboard/src/chakra/button.tsx` to remove the `export` keyword. - Updated button imports in `apps/dashboard/src/@/components/solidity-inputs/button.tsx` to use the new path. - Modified the `IpfsUploadButton` to use `variant="secondary"` and added a `disabled` state. - Replaced `FormControl` with `FormFieldSetup` in multiple components for better structure and error handling. - Adjusted the props passed to `FormFieldSetup` for improved clarity and functionality. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` ## Summary by CodeRabbit * **Refactor** * Unified form field presentation by replacing direct Chakra UI form controls with a custom, reusable form field component across contract deployment and module configuration forms. * Simplified error handling, labels, and helper text management for a more consistent user experience. * **Style** * Updated button styling and icon placement for IPFS upload actions, improving visual consistency and feedback during upload operations. --- .../contract-deploy-form/custom-contract.tsx | 54 ++++++++++--------- ...ular-contract-default-modules-fieldset.tsx | 24 ++++----- .../@/components/solidity-inputs/button.tsx | 9 ++-- apps/dashboard/src/chakra/button.tsx | 2 +- 4 files changed, 44 insertions(+), 45 deletions(-) diff --git a/apps/dashboard/src/@/components/contract-components/contract-deploy-form/custom-contract.tsx b/apps/dashboard/src/@/components/contract-components/contract-deploy-form/custom-contract.tsx index d2327140858..c2b8d7af0d6 100644 --- a/apps/dashboard/src/@/components/contract-components/contract-deploy-form/custom-contract.tsx +++ b/apps/dashboard/src/@/components/contract-components/contract-deploy-form/custom-contract.tsx @@ -1,9 +1,6 @@ "use client"; -import { Flex, FormControl } from "@chakra-ui/react"; import { useMutation, useQuery } from "@tanstack/react-query"; import { verifyContract } from "app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/ContractSourcesPage"; -import { FormHelperText, FormLabel } from "chakra/form"; -import { Text } from "chakra/text"; import { ArrowUpFromLineIcon, CircleAlertIcon, @@ -27,6 +24,7 @@ import { reportContractDeployed, reportContractDeployFailed, } from "@/analytics/report"; +import { FormFieldSetup } from "@/components/blocks/FormFieldSetup"; import { NetworkSelectorButton } from "@/components/misc/NetworkSelectorButton"; import { SolidityInput } from "@/components/solidity-inputs"; import { @@ -932,14 +930,17 @@ export const CustomContractForm: React.FC = ({
{/* Chain */} - - Chain - -

- Select a network to deploy this contract on. We recommend - starting with a testnet -

- + + Select a network to deploy this contract on. We recommend + starting with a testnet + + } + >
= ({ : metadata?.networksForDeployment?.networksEnabled } /> -
- + {metadata?.deployType === "standard" && ( <> {/* Deterministic deploy */} -
= ({ {/* Optional Salt Input */} {isCreate2Deployment && ( - - - - - Optional Salt Input - (saltForCreate2) - - - string - + + Optional Salt Input + + (saltForCreate2) + + + } + errorMessage={ + form.getFieldState("saltForCreate2", form.formState) + .error?.message + } + > = ({ Include deployer wallet address in salt (recommended) - + )} )} diff --git a/apps/dashboard/src/@/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx index 001190074a8..2ded81f78e2 100644 --- a/apps/dashboard/src/@/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx +++ b/apps/dashboard/src/@/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx @@ -1,8 +1,7 @@ -import { FormControl } from "@chakra-ui/react"; -import { FormErrorMessage, FormLabel } from "chakra/form"; import { useMemo } from "react"; import type { ThirdwebClient } from "thirdweb"; import type { FetchDeployMetadataResult } from "thirdweb/contract"; +import { FormFieldSetup } from "@/components/blocks/FormFieldSetup"; import { SolidityInput } from "@/components/solidity-inputs"; import type { CustomContractDeploymentForm } from "./custom-contract"; import { PrimarySaleFieldset } from "./primary-sale-fieldset"; @@ -104,14 +103,15 @@ function RenderModule(props: { `moduleData.${module.name}.${param.name}` as const; return ( - - {param.name} - - { - form.getFieldState(formFieldKey, form.formState).error - ?.message - } - - + ); })}
diff --git a/apps/dashboard/src/@/components/solidity-inputs/button.tsx b/apps/dashboard/src/@/components/solidity-inputs/button.tsx index 13d169d4bc7..890cdef900d 100644 --- a/apps/dashboard/src/@/components/solidity-inputs/button.tsx +++ b/apps/dashboard/src/@/components/solidity-inputs/button.tsx @@ -1,9 +1,9 @@ import type { UseMutationResult } from "@tanstack/react-query"; -import { Button, type ButtonProps } from "chakra/button"; import { UploadIcon } from "lucide-react"; import { toast } from "sonner"; import type { ThirdwebClient } from "thirdweb"; import { FileInput } from "@/components/blocks/FileInput"; +import { Button, type ButtonProps } from "@/components/ui/button"; import { useErrorHandler } from "@/contexts/error-handler"; import type { ComponentWithChildren } from "@/types/component-with-children"; @@ -39,12 +39,13 @@ export const IpfsUploadButton: ComponentWithChildren = ({ diff --git a/apps/dashboard/src/chakra/button.tsx b/apps/dashboard/src/chakra/button.tsx index 1ed8d9955ad..242ec153afb 100644 --- a/apps/dashboard/src/chakra/button.tsx +++ b/apps/dashboard/src/chakra/button.tsx @@ -30,7 +30,7 @@ const buttonSizesMap = { type PossibleButtonSize = keyof typeof buttonSizesMap; -export interface ButtonProps extends Omit { +interface ButtonProps extends Omit { size?: PossibleButtonSize; fromcolor?: string; tocolor?: string;