BatchMetadataModule fixes and UI adjustments

Author: MananTank

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

@@ -17,23 +17,25 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { useMutation } from "@tanstack/react-query";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
-import { toast } from "sonner";
 import { sendAndConfirmTransaction } from "thirdweb";
 import { BatchMetadataERC721 } from "thirdweb/modules";
 import type { NFTMetadataInputLimited } from "types/modified-types";
 import { parseAttributes } from "utils/parseAttributes";
+import { useTxNotifications } from "../../../../../../../hooks/useTxNotifications";
 import { ModuleCardUI, type ModuleCardUIProps } from "./module-card";
 import type { ModuleInstanceProps } from "./module-instance";
 import { AdvancedNFTMetadataFormGroup } from "./nft/AdvancedNFTMetadataFormGroup";
 import { NFTMediaFormGroup } from "./nft/NFTMediaFormGroup";
 import { PropertiesFormControl } from "./nft/PropertiesFormControl";
 
+// TODO: add form validation on the upload form
+// TODO: this module currently shows the UI for doing a single upload, but it should be batch upload UI
+
 export type UploadMetadataFormValues = NFTMetadataInputLimited & {
   supply: number;
   customImage: string;
@@ -82,14 +84,12 @@ export function BatchMetadataModuleUI(
 ) {
   return (
     <ModuleCardUI {...props}>
-      <div className="h-1" />
-
       <div className="flex flex-col gap-4">
-        {/* uploadMetadata NFT */}
         <Accordion type="single" collapsible className="-mx-1">
+          {/* uploadMetadata  */}
           <AccordionItem value="metadata" className="border-none">
             <AccordionTrigger className="border-border border-t px-1">
-              uploadMetadata NFT
+              Upload NFT Metadata
             </AccordionTrigger>
             <AccordionContent className="px-1">
               {props.isOwnerAccount && (
@@ -117,6 +117,7 @@ export function BatchMetadataModuleUI(
 function UploadMetadataNFTSection(props: {
   uploadMetadata: (values: UploadMetadataFormValues) => Promise<void>;
 }) {
+  // TODO: add form validation here
   const form = useForm<UploadMetadataFormValues>({
     values: {
       supply: 1,
@@ -127,16 +128,19 @@ function UploadMetadataNFTSection(props: {
     reValidateMode: "onChange",
   });
 
+  const uploadNotifications = useTxNotifications(
+    "NFT metadata uploaded successfully",
+    "Failed to uploadMetadata NFT metadata",
+  );
+
   const uploadMetadataMutation = useMutation({
     mutationFn: props.uploadMetadata,
+    onSuccess: uploadNotifications.onSuccess,
+    onError: uploadNotifications.onError,
   });
 
   const onSubmit = async () => {
-    const promise = uploadMetadataMutation.mutateAsync(form.getValues());
-    toast.promise(promise, {
-      success: "Successfully uploadMetadataed NFT",
-      error: (error) => `Failed to uploadMetadata NFT: ${error}`,
-    });
+    uploadMetadataMutation.mutateAsync(form.getValues());
   };
 
   return (
@@ -197,7 +201,7 @@ function UploadMetadataNFTSection(props: {
               >
                 <AccordionItem
                   value="advanced-options"
-                  className="-mx-1 border-t border-b-0"
+                  className="-mx-1 border-y"
                 >
                   <AccordionTrigger className="px-1">
                     Advanced Options
@@ -210,8 +214,6 @@ function UploadMetadataNFTSection(props: {
             </div>
           </div>
 
-          <Separator />
-
           <div className="flex justify-end">
             <Button
               size="sm"
@@ -222,7 +224,7 @@ function UploadMetadataNFTSection(props: {
               {uploadMetadataMutation.isPending && (
                 <Spinner className="size-4" />
               )}
-              uploadMetadata
+              Upload
             </Button>
           </div>
         </div>

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

@@ -4,6 +4,12 @@ import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { Toaster, toast } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
+import { ZERO_ADDRESS } from "thirdweb";
+import { ThirdwebProvider } from "thirdweb/react";
+import {
+  ErrorProvider,
+  type TransactionError,
+} from "../../../../../../../contexts/error-handler";
 import {
   BatchMetadataModuleUI,
   type UploadMetadataFormValues,
@@ -37,6 +43,17 @@ function Component() {
   async function uploadMetadataStub(values: UploadMetadataFormValues) {
     console.log("submitting", values);
     await new Promise((resolve) => setTimeout(resolve, 1000));
+    const error = new Error("Upload failed");
+    (error as TransactionError).reason = "This is a test reason error";
+    (error as TransactionError).info = {
+      from: ZERO_ADDRESS,
+      to: ZERO_ADDRESS,
+      network: {
+        name: "test",
+        chainId: 1,
+      },
+    };
+    throw error;
   }
 
   const removeMutation = useMutation({
@@ -58,30 +75,34 @@ function Component() {
 
   // TODO - remove ChakraProviderSetup after converting the chakra components used in BatchMetadataModuleUI
   return (
-    <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
-      <div className="flex items-center gap-5">
-        <CheckboxWithLabel
-          value={isOwner}
-          onChange={setIsOwner}
-          id="isOwner"
-          label="Is Owner"
-        />
-      </div>
+    <ThirdwebProvider>
+      <ErrorProvider>
+        <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+          <div className="flex items-center gap-5">
+            <CheckboxWithLabel
+              value={isOwner}
+              onChange={setIsOwner}
+              id="isOwner"
+              label="Is Owner"
+            />
+          </div>
 
-      <BadgeContainer label="Default">
-        <BatchMetadataModuleUI
-          contractInfo={contractInfo}
-          moduleAddress="0x0000000000000000000000000000000000000000"
-          uploadMetadata={uploadMetadataStub}
-          uninstallButton={{
-            onClick: async () => removeMutation.mutateAsync(),
-            isPending: removeMutation.isPending,
-          }}
-          isOwnerAccount={isOwner}
-        />
-      </BadgeContainer>
-      <Toaster richColors />
-    </div>
+          <BadgeContainer label="Default">
+            <BatchMetadataModuleUI
+              contractInfo={contractInfo}
+              moduleAddress="0x0000000000000000000000000000000000000000"
+              uploadMetadata={uploadMetadataStub}
+              uninstallButton={{
+                onClick: async () => removeMutation.mutateAsync(),
+                isPending: removeMutation.isPending,
+              }}
+              isOwnerAccount={isOwner}
+            />
+          </BadgeContainer>
+          <Toaster richColors />
+        </div>
+      </ErrorProvider>
+    </ThirdwebProvider>
   );
 }
 

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

@@ -100,7 +100,7 @@ export function NFTMediaFormGroup<T extends NFTMediaFormGroupValues>(props: {
           value={mediaFileUrl as File | string}
           showPreview={true}
           setValue={setFile}
-          className="rounded border border-border transition-all duration-200"
+          className="max-sm:!max-w-full rounded border border-border transition-all duration-200"
           selectOrUpload="Upload"
           helperText="Media"
         />

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

@@ -6,70 +6,42 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { BanIcon, PlusIcon, Trash2Icon } from "lucide-react";
-import {
-  type ArrayPath,
-  type FieldValues,
-  type Path,
-  type PathValue,
-  type UseFormReturn,
-  useFieldArray,
-} from "react-hook-form";
+import { PlusIcon, RotateCcwIcon, Trash2Icon } from "lucide-react";
+import { type UseFormReturn, useFieldArray } from "react-hook-form";
 
-interface IPropertyFieldValues extends FieldValues {
+type PropertiesFormValues = {
   attributes?: {
     trait_type: string;
     value: string;
   }[];
-}
+};
 
-export function PropertiesFormControl<
-  TFieldValues extends IPropertyFieldValues,
->({
-  form,
-}: {
-  form: UseFormReturn<TFieldValues>;
+export function PropertiesFormControl<T extends PropertiesFormValues>(props: {
+  form: UseFormReturn<T>;
 }) {
+  // T contains all properties of PropertiesFormValues, so this correct
+  const form = props.form as unknown as UseFormReturn<PropertiesFormValues>;
+
   const { fields, append, remove } = useFieldArray({
     control: form.control,
-    name: "attributes" as ArrayPath<TFieldValues>,
+    name: "attributes",
   });
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex items-center justify-between gap-2">
-        <p>Attributes</p>
-        <Button
-          className="flex items-center gap-2"
-          variant="destructive"
-          size="sm"
-          onClick={() =>
-            form.setValue(
-              "attributes" as Path<TFieldValues>,
-              // biome-ignore lint/suspicious/noExplicitAny: FIXME
-              [{ trait_type: "", value: "" } as any] as PathValue<
-                TFieldValues,
-                Path<TFieldValues>
-              >,
-            )
-          }
-        >
-          Reset
-          <BanIcon className="size-4" />
-        </Button>
-      </div>
+      <h4>Attributes</h4>
 
       <div className="flex flex-col gap-3">
         {/* Addresses */}
         {fields.map((fieldItem, index) => (
           <div className="flex items-start gap-3" key={fieldItem.id}>
             <FormField
               control={form.control}
-              name={`attributes.${index}.trait_type` as Path<TFieldValues>}
+              name={`attributes.${index}.trait_type`}
               render={({ field }) => (
                 <FormItem className="grow">
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} placeholder="Trait Type" />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -78,11 +50,11 @@ export function PropertiesFormControl<
 
             <FormField
               control={form.control}
-              name={`attributes.${index}.value` as Path<TFieldValues>}
+              name={`attributes.${index}.value`}
               render={({ field }) => (
                 <FormItem className="grow">
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} placeholder="Value" />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -100,18 +72,27 @@ export function PropertiesFormControl<
         ))}
       </div>
 
-      <div className="flex flex-row gap-2">
+      <div className="flex flex-row gap-3">
         <Button
           size="sm"
           className="flex items-center gap-2"
-          onClick={() =>
-            // biome-ignore lint/suspicious/noExplicitAny: FIXME
-            append({ trait_type: undefined, value: undefined } as any)
-          }
+          onClick={() => append({ trait_type: "", value: "" })}
         >
           <PlusIcon className="size-5" />
           Add Row
         </Button>
+
+        <Button
+          className="flex items-center gap-2"
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            form.setValue("attributes", [{ trait_type: "", value: "" }])
+          }
+        >
+          Reset
+          <RotateCcwIcon className="size-4" />
+        </Button>
       </div>
     </div>
   );

apps/dashboard/src/contexts/error-handler.tsx

@@ -31,7 +31,7 @@ const ErrorContext = createContext<ErrorContext>({
 // We have decided to not export this class from v5 because that area need to be reworked
 // so this type is created as a workaround
 // @internal
-type TransactionError = {
+export type TransactionError = {
   message: string;
   info?: {
     from: string;
@@ -86,7 +86,7 @@ export const ErrorProvider: ComponentWithChildren = ({ children }) => {
             {/* Header */}
             <DialogHeader>
               <div className="mb-1 flex justify-start">
-                <div className="rounded-xl bg-destructive p-2 text-destructive-text">
+                <div className="rounded-xl border border-border p-2 text-destructive-text">
                   <CircleAlertIcon className="size-6" />
                 </div>
               </div>