thirdweb-dev · graphite-app · Feb 9, 2025 · Feb 9, 2025
@@ -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;

@@ -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>
                 {

@@ -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>

@@ -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, {

@@ -19,6 +19,7 @@ export function PublishedActions(props: {
     <div className="flex gap-3">
       <Button
         variant="outline"
+        className="bg-card"
         onClick={() => {
           shareLink({
             title: `Deploy ${props.displayName}`,
@@ -27,7 +28,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}` : ""}`}
         >

@@ -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>

@@ -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>
   );
 }
@@ -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>

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

@@ -3,14 +3,14 @@ export function Fieldset(props: {
   children: React.ReactNode;
 }) {
   return (
-    <fieldset>
-      <legend className="mb-3 font-semibold text-2xl tracking-tight">
-        {props.legend}
-      </legend>
-
-      <div className="rounded-lg border border-border p-4 md:p-6">
-        {props.children}
+    <fieldset className="rounded-lg border border-border bg-card">
+      <div className="border-border border-b p-4 md:px-6 md:py-5">
+        <legend className="font-semibold text-xl tracking-tight">
+          {props.legend}
+        </legend>
       </div>
+
+      <div className="p-4 md:px-6 md:py-6">{props.children}</div>
     </fieldset>
   );
 }
@@ -1,8 +1,8 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { FormControl, Input } from "@chakra-ui/react";
 import { FileInput } from "components/shared/FileInput";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
-import { FormErrorMessage, FormLabel } from "tw-components";
 import { Fieldset } from "./common";
 import type { CustomContractDeploymentForm } from "./custom-contract";
 
@@ -15,100 +15,81 @@ export const ContractMetadataFieldset: React.FC<
 > = ({ form }) => {
   return (
     <Fieldset legend="Contract Metadata">
-      <div className="flex flex-col gap-6 md:grid md:grid-cols-[270px_1fr]">
-        <div>
-          <FormControl
-            display="flex"
-            flexDirection="column"
-            isInvalid={
-              !!form.getFieldState("contractMetadata.image", form.formState)
-                .error
+      <div className="flex flex-col gap-6 md:grid md:grid-cols-[200px_1fr]">
+        <FormFieldSetup
+          errorMessage={
+            form.getFieldState("contractMetadata.image", form.formState).error
+              ?.message
+          }
+          label="Image"
+          isRequired={false}
+        >
+          <FileInput
+            accept={{ "image/*": [] }}
+            value={useImageFileOrUrl(form.watch("contractMetadata.image"))}
+            setValue={(file) =>
+              form.setValue("contractMetadata.image", file, {
+                shouldTouch: true,
+              })
             }
-          >
-            <FormLabel>Image</FormLabel>
-            <FileInput
-              accept={{ "image/*": [] }}
-              value={useImageFileOrUrl(form.watch("contractMetadata.image"))}
-              setValue={(file) =>
-                form.setValue("contractMetadata.image", file, {
-                  shouldTouch: true,
-                })
-              }
-              className="rounded border-2 border-border border-dotted transition-all duration-200"
-            />
-            <FormErrorMessage>
-              {
-                form.getFieldState("contractMetadata.image", form.formState)
-                  .error?.message
-              }
-            </FormErrorMessage>
-          </FormControl>
-        </div>
+            className="rounded border-border bg-background transition-all duration-200 hover:border-active-border hover:bg-background"
+          />
+        </FormFieldSetup>
 
         <div className="flex flex-col gap-6">
-          <FormControl
-            isRequired
-            isInvalid={
-              !!form.getFieldState("contractMetadata.name", form.formState)
-                .error
-            }
-          >
-            <FormLabel>Name</FormLabel>
-            <Input
-              autoFocus
-              variant="filled"
-              {...form.register("contractMetadata.name")}
-            />
-            <FormErrorMessage>
-              {
+          {/* name + symbol */}
+          <div className="flex flex-col gap-6 lg:flex-row lg:gap-4">
+            <FormFieldSetup
+              className="grow"
+              label="Name"
+              isRequired
+              htmlFor="contractMetadata-name"
+              errorMessage={
                 form.getFieldState("contractMetadata.name", form.formState)
                   .error?.message
               }
-            </FormErrorMessage>
-          </FormControl>
+            >
+              <Input
+                id="contractMetadata-name"
+                {...form.register("contractMetadata.name", {
+                  required: "Name is Required",
+                })}
+              />
+            </FormFieldSetup>
 
-          <FormControl
-            isInvalid={
-              !!form.getFieldState("contractMetadata.symbol", form.formState)
-                .error
-            }
-          >
-            <FormLabel>Symbol</FormLabel>
-            <Input
-              variant="filled"
-              {...form.register("contractMetadata.symbol")}
-            />
-            <FormErrorMessage>
-              {
+            <FormFieldSetup
+              className="lg:max-w-[300px]"
+              isRequired={false}
+              label="Symbol"
+              htmlFor="contractMetadata-symbol"
+              errorMessage={
                 form.getFieldState("contractMetadata.symbol", form.formState)
                   .error?.message
               }
-            </FormErrorMessage>
-          </FormControl>
+            >
+              <Input
+                {...form.register("contractMetadata.symbol")}
+                id="contractMetadata-symbol"
+              />
+            </FormFieldSetup>
+          </div>
 
-          <FormControl
+          <FormFieldSetup
             className="flex grow flex-col"
-            isInvalid={
-              !!form.getFieldState(
-                "contractMetadata.description",
-                form.formState,
-              ).error
+            label="Description"
+            isRequired={false}
+            htmlFor="contractMetadata-description"
+            errorMessage={
+              form.getFieldState("contractMetadata.description", form.formState)
+                .error?.message
             }
           >
-            <FormLabel>Description</FormLabel>
             <Textarea
               {...form.register("contractMetadata.description")}
-              className="grow bg-transparent"
+              className="grow"
+              id="contractMetadata-description"
             />
-            <FormErrorMessage>
-              {
-                form.getFieldState(
-                  "contractMetadata.description",
-                  form.formState,
-                ).error?.message
-              }
-            </FormErrorMessage>
-          </FormControl>
+          </FormFieldSetup>
         </div>
       </div>
     </Fieldset>