[TOOL-3366] Dashboard: Contract Deployment UI improvements, Reduce Chakra Usage

Author: MananTank

apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx

@@ -1,10 +1,11 @@
 import { Label } from "@/components/ui/label";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { AsteriskIcon, InfoIcon } from "lucide-react";
+import type React from "react";
 
 export function FormFieldSetup(props: {
   htmlFor?: string;
-  label: string;
+  label: React.ReactNode;
   errorMessage: React.ReactNode | undefined;
   children: React.ReactNode;
   tooltip?: React.ReactNode;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx

@@ -132,9 +132,8 @@ export const SettingsPlatformFees = ({
               <SolidityInput
                 solidityType="address"
                 formContext={form}
-                variant="filled"
                 {...form.register("platform_fee_recipient")}
-                isDisabled={!address || sendAndConfirmTx.isPending}
+                disabled={!address || sendAndConfirmTx.isPending}
               />
               <FormErrorMessage>
                 {
@@ -155,15 +154,14 @@ export const SettingsPlatformFees = ({
             >
               <FormLabel>Percentage</FormLabel>
               <BasisPointsInput
-                variant="filled"
                 value={form.watch("platform_fee_basis_points")}
                 onChange={(value) =>
                   form.setValue("platform_fee_basis_points", value, {
                     shouldDirty: true,
                     shouldTouch: true,
                   })
                 }
-                isDisabled={sendAndConfirmTx.isPending}
+                disabled={sendAndConfirmTx.isPending}
               />
               <FormErrorMessage>
                 {

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx

@@ -128,10 +128,9 @@ export const SettingsPrimarySale = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
-                isDisabled={mutation.isPending || !address}
+                disabled={mutation.isPending || !address}
                 solidityType="address"
                 formContext={form}
-                variant="filled"
                 {...form.register("primary_sale_recipient")}
               />
               <FormErrorMessage>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx

@@ -144,9 +144,8 @@ export const SettingsRoyalties = ({
               <SolidityInput
                 solidityType="address"
                 formContext={form}
-                variant="filled"
                 {...form.register("fee_recipient")}
-                isDisabled={!address}
+                disabled={!address}
               />
               <FormErrorMessage>
                 {
@@ -165,7 +164,6 @@ export const SettingsRoyalties = ({
             >
               <FormLabel>Percentage</FormLabel>
               <BasisPointsInput
-                variant="filled"
                 value={form.watch("seller_fee_basis_points")}
                 onChange={(value) =>
                   form.setValue("seller_fee_basis_points", value, {

apps/dashboard/src/app/(dashboard)/published-contract/components/contract-actions-deploy.client.tsx

@@ -27,7 +27,7 @@ export function PublishedActions(props: {
       >
         Share
       </Button>
-      <Button asChild variant="primary" className="gap-2">
+      <Button asChild className="gap-2">
         <Link
           href={`/${props.publisher}/${props.contract_id}${props.version ? `/${props.version}` : ""}/deploy${stringifiedSearchParams ? `?${stringifiedSearchParams}` : ""}`}
         >

apps/dashboard/src/app/(dashboard)/published-contract/components/contract-actions-published.client.tsx

@@ -18,7 +18,7 @@ export function DeployContractInfo(props: {
     <div className="flex flex-col gap-2">
       <div className="flex flex-1 items-center gap-4">
         {contractImageLink && (
-          <div className="hidden shrink-0 items-center justify-center rounded-xl border border-border p-2 md:flex">
+          <div className="hidden shrink-0 items-center justify-center rounded-xl border border-border bg-card p-2 md:flex">
             {/*eslint-disable-next-line @next/next/no-img-element*/}
             <img className="size-12" alt={props.name} src={contractImageLink} />
           </div>

apps/dashboard/src/app/(dashboard)/published-contract/components/contract-info.tsx

@@ -1,4 +1,3 @@
-import { Separator } from "@/components/ui/separator";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import {
   fetchPublishedContractVersion,
@@ -7,7 +6,6 @@ import {
 import { isAddress } from "thirdweb";
 import { fetchDeployMetadata } from "thirdweb/contract";
 import { resolveAddress } from "thirdweb/extensions/ens";
-import { DeployActions } from "./contract-actions-deploy.client";
 import { DeployContractHeader } from "./contract-header";
 import { DeployFormForUri } from "./uri-based-deploy";
 
@@ -73,23 +71,17 @@ export async function DeployFormForPublishInfo(props: PublishBasedDeployProps) {
   ]);
 
   return (
-    <>
+    <div className="mx-auto flex w-full max-w-[1000px] flex-col gap-8 pb-20">
       <DeployContractHeader
         {...props}
         allVersions={publishedContractVersions}
         activeVersion={publishedContract}
-      >
-        <DeployActions
-          {...props}
-          displayName={publishedContract.displayName || publishedContract.name}
-        />
-      </DeployContractHeader>
-      <Separator />
+      />
       <DeployFormForUri
         contractMetadata={contractMetadata}
         modules={fetchedModules.filter((m) => m !== null)}
         pathname={`/${props.publisher}/${props.contract_id}${props.version ? `/${props.version}` : ""}/deploy`}
       />
-    </>
+    </div>
   );
 }

apps/dashboard/src/app/(dashboard)/published-contract/components/publish-based-deploy.tsx

@@ -56,7 +56,7 @@ export function DeployContractVersionSelector({
         }
       }}
     >
-      <SelectTrigger className="min-w-[180px] bg-transparent hover:bg-accent">
+      <SelectTrigger className="min-w-[180px] bg-card hover:bg-accent">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>

apps/dashboard/src/app/(dashboard)/published-contract/components/version-selector.tsx

@@ -86,6 +86,7 @@ function TailwindTheme(props: { children: React.ReactNode }) {
       disableTransitionOnChange
       enableSystem={false}
       defaultTheme="dark"
+      enableColorScheme={true}
     >
       {props.children}
     </ThemeProvider>