UI adjustments and cleanup

Author: MananTank

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

@@ -1,74 +1,87 @@
+"use client";
+
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
+import { useCallback } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { type ContractOptions, waitForReceipt } from "thirdweb";
+import { isAddress, sendAndConfirmTransaction } from "thirdweb";
 import { MintableERC721 } from "thirdweb/modules";
-import { useReadContract, useSendTransaction } from "thirdweb/react";
+import { useReadContract } from "thirdweb/react";
 import { z } from "zod";
 import { ModuleCardUI, type ModuleCardUIProps } from "./module-card";
+import type { ModuleInstanceProps } from "./module-instance";
 
 const formSchema = z.object({
-  primarySaleRecipient: z.string(),
+  primarySaleRecipient: z.string().refine(
+    (v) => {
+      // don't return isAddress(v) directly to avoid typecasting to `0x${string}`
+      if (isAddress(v)) {
+        return true;
+      }
+      return false;
+    },
+    {
+      message: "Invalid Address",
+    },
+  ),
 });
 
 export type MintableModuleFormValues = z.infer<typeof formSchema>;
 
-export function MintableModule(
-  props: Omit<ModuleCardUIProps, "children"> & {
-    contract: ContractOptions;
-    isOwnerAccount: boolean;
-  },
-) {
-  const { contract } = props;
-  const { mutateAsync: sendTransaction } = useSendTransaction();
-  const { data: primarySaleRecipient, isLoading } = useReadContract(
+function MintableModule(props: ModuleInstanceProps) {
+  const { contract, ownerAccount } = props;
+
+  const primarySaleRecipientQuery = useReadContract(
     MintableERC721.getSaleConfig,
     {
-      contract,
+      contract: contract,
     },
   );
 
-  async function update(values: MintableModuleFormValues) {
-    const setSaleConfigTransaction = MintableERC721.setSaleConfig({
-      contract,
-      primarySaleRecipient: values.primarySaleRecipient,
-    });
+  const update = useCallback(
+    async (values: MintableModuleFormValues) => {
+      if (!ownerAccount) {
+        throw new Error("Not an owner account");
+      }
 
-    const setSaleConfigTxResult = await sendTransaction(
-      setSaleConfigTransaction,
-    );
+      const setSaleConfigTx = MintableERC721.setSaleConfig({
+        contract: contract,
+        primarySaleRecipient: values.primarySaleRecipient,
+      });
 
-    try {
-      await waitForReceipt(setSaleConfigTxResult);
-      toast.success("Successfully updated primary sale recipient");
-    } catch (_) {
-      toast.error("Failed to update the primary sale recipient");
-    }
-  }
+      await sendAndConfirmTransaction({
+        account: ownerAccount,
+        transaction: setSaleConfigTx,
+      });
+    },
+    [contract, ownerAccount],
+  );
 
   return (
     <MintableModuleUI
-      isPending={isLoading}
-      primarySaleRecipient={primarySaleRecipient || ""}
-      update={update}
       {...props}
+      isPending={primarySaleRecipientQuery.isPending}
+      primarySaleRecipient={primarySaleRecipientQuery.data}
+      update={update}
+      isOwnerAccount={!!ownerAccount}
     />
   );
 }
 
 export function MintableModuleUI(
   props: Omit<ModuleCardUIProps, "children" | "updateButton"> & {
-    primarySaleRecipient: string;
+    primarySaleRecipient: string | undefined;
     isPending: boolean;
     isOwnerAccount: boolean;
     update: (values: MintableModuleFormValues) => Promise<void>;
@@ -77,7 +90,7 @@ export function MintableModuleUI(
   const form = useForm<MintableModuleFormValues>({
     resolver: zodResolver(formSchema),
     values: {
-      primarySaleRecipient: props.primarySaleRecipient,
+      primarySaleRecipient: props.primarySaleRecipient || "",
     },
     reValidateMode: "onChange",
   });
@@ -87,47 +100,50 @@ export function MintableModuleUI(
   });
 
   const onSubmit = async () => {
-    const _values = form.getValues();
-    const values = { ..._values };
-
-    updateMutation.mutate(values);
+    const promise = updateMutation.mutateAsync(form.getValues());
+    toast.promise(promise, {
+      success: "Successfully updated primary sale recipient",
+      error: "Failed to update primary sale recipient",
+    });
   };
 
-  if (props.isPending) {
-    return <Skeleton className="h-36" />;
-  }
-
   return (
-    <ModuleCardUI
-      {...props}
-      updateButton={{
-        onClick: onSubmit,
-        isPending: updateMutation.isPending,
-        isDisabled: !form.formState.isDirty,
-      }}
-    >
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="flex flex-col gap-4">
-            <FormField
-              control={form.control}
-              name="primarySaleRecipient"
-              render={({ field }) => (
-                <FormItem className="flex flex-1 flex-col gap-3">
-                  <FormLabel>Primary Sale Recipient</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="0x..."
-                      {...field}
-                      disabled={!props.isOwnerAccount}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-          </div>
-        </form>
-      </Form>
-    </ModuleCardUI>
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <ModuleCardUI
+          {...props}
+          updateButton={{
+            isPending: updateMutation.isPending,
+            isDisabled: !form.formState.isDirty,
+          }}
+        >
+          {props.isPending && <Skeleton className="h-[74px]" />}
+
+          {!props.isPending && (
+            <div className="flex flex-col gap-4">
+              <FormField
+                control={form.control}
+                name="primarySaleRecipient"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Primary Sale Recipient</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="0x..."
+                        {...field}
+                        disabled={!props.isOwnerAccount}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          )}
+        </ModuleCardUI>
+      </form>
+    </Form>
   );
 }
+
+export default MintableModule;