[TOOL-3453] Dashboard: Fix NFT Metadata issues when adding media URLs instead of uploading (#6288)

=

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the NFT metadata handling in the dashboard application, specifically renaming and refactoring properties related to custom images and animations, improving form handling, and enhancing user interface elements.

### Detailed summary
- Updated documentation link in `next-env.d.ts`.
- Changed `customImage` and `customAnimationUrl` to `image` and `animation_url` in multiple components.
- Updated titles and headers for improved clarity in forms.
- Enhanced form controls with better error handling and user feedback.
- Adjusted layout and spacing in several components for better usability.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx

@@ -41,8 +41,6 @@ const uploadMetadataFormSchema = z.object({
   image: fileBufferOrStringSchema.optional(),
   animationUri: fileBufferOrStringSchema.optional(),
   external_url: fileBufferOrStringSchema.optional(),
-  customImage: z.string().optional(),
-  customAnimationUrl: z.string().optional(),
   background_color: z
     .string()
     .refine(

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx

@@ -54,8 +54,6 @@ export type MintFormValues = NFTMetadataInputLimited & {
   useNextTokenId: boolean;
   recipient: string;
   amount: number;
-  customImage: string;
-  customAnimationUrl: string;
   attributes: { trait_type: string; value: string }[];
   tokenId?: string;
 };
@@ -65,8 +63,7 @@ const isValidNft = (values: MintFormValues) =>
   values.description ||
   values.image ||
   values.animation_url ||
-  values.external_url ||
-  values.customAnimationUrl;
+  values.external_url;
 
 const MINTER_ROLE = 1n;
 
@@ -334,8 +331,6 @@ function PrimarySalesSection(props: {
 
 const mintFormSchema = z.object({
   useNextTokenId: z.boolean(),
-  customImage: z.string().optional(),
-  customAnimationUrl: z.string().optional(),
   recipient: addressSchema,
   tokenId: z.coerce.number().min(0, { message: "Invalid tokenId" }).optional(),
 });
@@ -351,8 +346,6 @@ function MintNFTSection(props: {
     resolver: zodResolver(mintFormSchema),
     values: {
       useNextTokenId: false,
-      customImage: "",
-      customAnimationUrl: "",
       recipient: "",
       attributes: [{ trait_type: "", value: "" }],
       amount: 1,

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/AdvancedNFTMetadataFormGroup.tsx

@@ -14,8 +14,8 @@ import type { UseFormReturn } from "react-hook-form";
 import type { NFTInput } from "thirdweb/utils";
 
 type AdvancedNFTMetadataFormGroupValues = {
-  customImage?: string;
-  customAnimationUrl?: string;
+  image?: NFTInput["image"];
+  animation_url?: NFTInput["animation_url"];
   background_color?: NFTInput["background_color"];
   external_url?: NFTInput["external_url"];
 };
@@ -56,12 +56,15 @@ export function AdvancedNFTMetadataFormGroup<
 
       <FormField
         control={form.control}
-        name="customImage"
+        name="image"
         render={({ field }) => (
           <FormItem>
             <FormLabel>Image URI</FormLabel>
             <FormControl>
-              <Input {...field} />
+              <Input
+                {...field}
+                value={typeof field.value === "string" ? field.value : ""}
+              />
             </FormControl>
             <FormDescription>
               If you already have your NFT image pre-uploaded, you can set the
@@ -74,12 +77,15 @@ export function AdvancedNFTMetadataFormGroup<
 
       <FormField
         control={form.control}
-        name="customAnimationUrl"
+        name="animation_url"
         render={({ field }) => (
           <FormItem>
             <FormLabel>Animation URI</FormLabel>
             <FormControl>
-              <Input {...field} />
+              <Input
+                {...field}
+                value={typeof field.value === "string" ? field.value : ""}
+              />
             </FormControl>
             <FormDescription>
               If you already have your NFT Animation URL pre-uploaded, you can

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx

@@ -7,7 +7,6 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
-  Divider,
   FormControl,
   Input,
   Textarea,
@@ -32,6 +31,7 @@ import {
   updateTokenURI as updateTokenURI1155,
 } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import type { NFTMetadata } from "thirdweb/utils";
 import {
   Button,
   FormErrorMessage,
@@ -68,20 +68,20 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
   const address = useActiveAccount()?.address;
 
   const transformedQueryData = useMemo(() => {
-    return {
-      name: nft?.metadata.name || "",
-      description: nft?.metadata.description || "",
-      external_url: nft?.metadata.external_url || "",
-      background_color: nft?.metadata.background_color || "",
-      attributes: nft?.metadata.attributes || [],
-      // We override these in the submit if they haven't been changed
-      image: nft?.metadata.image || undefined,
-      animation_url: nft?.metadata.animation_url || undefined,
-      // No need for these, but we need to pass them to the form
-      supply: 0,
-      customImage: "",
-      customAnimationUrl: "",
+    const nftMetadata: Partial<NFTMetadata> = {
+      // basic
+      name: nft.metadata.name || "",
+      description: nft.metadata.description || "",
+      // media
+      image: nft.metadata.image,
+      animation_url: nft.metadata.animation_url,
+      // advanced
+      external_url: nft.metadata.external_url || "",
+      background_color: nft.metadata.background_color || "",
+      attributes: nft.metadata.attributes,
     };
+
+    return nftMetadata;
   }, [nft]);
 
   const {
@@ -91,13 +91,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
     watch,
     handleSubmit,
     formState: { errors, isDirty },
-  } = useForm<
-    NFTMetadataInputLimited & {
-      supply: number;
-      customImage: string;
-      customAnimationUrl: string;
-    }
-  >({
+  } = useForm<NFTMetadataInputLimited>({
     defaultValues: transformedQueryData,
     values: transformedQueryData,
   });
@@ -140,6 +134,9 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
   };
 
   const imageUrl = useImageFileOrUrl(watch("image") as File | string);
+  const animationUrlFormValue = watch("animation_url");
+  const imageUrlFormValue = watch("image");
+
   const mediaFileUrl =
     watch("animation_url") instanceof File
       ? watch("animation_url")
@@ -190,11 +187,8 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         try {
           const newMetadata = parseAttributes({
             ...data,
-            image: data.image || data.customImage || nft.metadata.image,
-            animation_url:
-              data.animation_url ||
-              data.customAnimationUrl ||
-              nft.metadata.animation_url,
+            image: data.image || nft.metadata.image,
+            animation_url: data.animation_url || nft.metadata.animation_url,
           });
 
           const transaction = useUpdateMetadata
@@ -249,10 +243,6 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         }
       })}
     >
-      <div className="flex flex-col gap-2">
-        <Heading size="subtitle.md">Metadata</Heading>
-        <Divider />
-      </div>
       <FormControl isRequired isInvalid={!!errors.name}>
         <FormLabel>Name</FormLabel>
         <Input autoFocus {...register("name")} />
@@ -263,22 +253,34 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         <div className="flex flex-row flex-wrap gap-3">
           {nft?.metadata && !mediaFileUrl && (
             <NFTMediaWithEmptyState
-              metadata={nft.metadata}
+              metadata={{
+                name: nft.metadata.name,
+                animation_url:
+                  typeof animationUrlFormValue === "string"
+                    ? animationUrlFormValue
+                    : nft.metadata.animation_url,
+                image:
+                  typeof imageUrlFormValue === "string"
+                    ? imageUrlFormValue
+                    : nft.metadata.image,
+              }}
               width="200px"
               height="200px"
             />
           )}
+
           <FileInput
             previewMaxWidth="200px"
             value={mediaFileUrl as File | string}
             showUploadButton
             showPreview={nft?.metadata ? !!mediaFileUrl : true}
             setValue={setFile}
-            className="rounded border border-border transition-all duration-200"
+            className="shrink-0 rounded border border-border transition-all duration-200"
             selectOrUpload="Upload"
             helperText={nft?.metadata ? "New Media" : "Media"}
           />
         </div>
+
         <FormHelperText>
           You can upload image, audio, video, html, text, pdf, and 3d model
           files here.
@@ -319,6 +321,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         register={register}
         setValue={setValue}
       />
+
       <Accordion
         allowToggle={!(errors.background_color || errors.external_url)}
         index={errors.background_color || errors.external_url ? [0] : undefined}
@@ -328,7 +331,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
             <Heading size="subtitle.md">Advanced Options</Heading>
             <AccordionIcon />
           </AccordionButton>
-          <AccordionPanel className="flex flex-col gap-6 px-0">
+          <AccordionPanel className="!px-0 flex flex-col gap-6">
             <FormControl isInvalid={!!errors.background_color}>
               <FormLabel>
                 Background Color <OpenSeaPropertyBadge />
@@ -357,26 +360,40 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
                 </FormErrorMessage>
               </FormControl>
             )}
-            <FormControl isInvalid={!!errors.customImage}>
+            <FormControl isInvalid={!!errors.image}>
               <FormLabel>Image URL</FormLabel>
-              <Input max="6" {...register("customImage")} />
+              <Input
+                value={
+                  typeof imageUrlFormValue === "string" ? imageUrlFormValue : ""
+                }
+                onChange={(e) => {
+                  setValue("image", e.target.value);
+                }}
+              />
               <FormHelperText>
-                If you already have your NFT image pre-uploaded, you can set the
-                URL or URI here.
+                If you already have your NFT image pre-uploaded to a URL, you
+                can specify it here instead of uploading the media file
               </FormHelperText>
-              <FormErrorMessage>
-                {errors?.customImage?.message}
-              </FormErrorMessage>
+              <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
             </FormControl>
-            <FormControl isInvalid={!!errors.customAnimationUrl}>
+            <FormControl isInvalid={!!errors.animation_url}>
               <FormLabel>Animation URL</FormLabel>
-              <Input max="6" {...register("customAnimationUrl")} />
+              <Input
+                value={
+                  typeof animationUrlFormValue === "string"
+                    ? animationUrlFormValue
+                    : ""
+                }
+                onChange={(e) => {
+                  setValue("animation_url", e.target.value);
+                }}
+              />
               <FormHelperText>
-                If you already have your NFT Animation URL pre-uploaded, you can
-                set the URL or URI here.
+                If you already have your NFT Animation URL pre-uploaded to a
+                URL, you can specify it here instead of uploading the media file
               </FormHelperText>
               <FormErrorMessage>
-                {errors?.customAnimationUrl?.message}
+                {errors?.animation_url?.message}
               </FormErrorMessage>
             </FormControl>
           </AccordionPanel>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-tab.tsx

@@ -36,8 +36,8 @@ const UpdateMetadataTab: React.FC<UpdateMetadataTabProps> = ({
         <Button variant="primary">Update Metadata</Button>
       </SheetTrigger>
       <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
-        <SheetHeader>
-          <SheetTitle className="text-left">Mint NFT</SheetTitle>
+        <SheetHeader className="mb-5">
+          <SheetTitle className="text-left">Update NFT Metadata</SheetTitle>
         </SheetHeader>
         <UpdateNftMetadata
           twAccount={twAccount}