updated royalty to show percentages instead of bps

Author: GWSzeto

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

@@ -73,6 +73,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
   const [tokenId, setTokenId] = useState<string>("");
 
   const isErc721 = props.contractInfo.name === "ClaimableERC721";
+  const isErc20 = props.contractInfo.name === "ClaimableERC20";
   const isValidTokenId = positiveIntegerRegex.test(tokenId);
 
   const primarySaleRecipientQuery = useReadContract(
@@ -241,6 +242,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
       }}
       isOwnerAccount={!!ownerAccount}
       isErc721={isErc721}
+      isErc20={isErc20}
       contractChainId={props.contract.chain.id}
       setTokenId={setTokenId}
       isValidTokenId={isValidTokenId}
@@ -256,6 +258,7 @@ export function ClaimableModuleUI(
   props: Omit<ModuleCardUIProps, "children" | "updateButton"> & {
     isOwnerAccount: boolean;
     isErc721: boolean;
+    isErc20: boolean;
     contractChainId: number;
     setTokenId: Dispatch<SetStateAction<string>>;
     isValidTokenId: boolean;
@@ -295,7 +298,7 @@ export function ClaimableModuleUI(
         <Accordion type="single" collapsible className="-mx-1">
           <AccordionItem value="metadata" className="border-none">
             <AccordionTrigger className="border-border border-t px-1">
-              Mint NFT
+              Mint {props.isErc20 ? "Token" : "NFT"}
             </AccordionTrigger>
             <AccordionContent className="px-1">
               <MintNFTSection
@@ -835,7 +838,7 @@ function MintNFTSection(props: {
             name="quantity"
             render={({ field }) => (
               <FormItem className="flex-1">
-                <FormLabel>quantity</FormLabel>
+                <FormLabel>Quantity</FormLabel>
                 <FormControl>
                   <Input {...field} />
                 </FormControl>

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

@@ -65,7 +65,8 @@ function RoyaltyModule(props: ModuleInstanceProps) {
       const setRoyaltyForTokenTx = setRoyaltyInfoForToken({
         contract: contract,
         recipient: values.recipient,
-        bps: Number(values.bps),
+        // BPS is 10_000 so we need to multiply by 100
+        bps: Number(values.percentage) * 100,
         tokenId: BigInt(values.tokenId),
       });
 
@@ -108,14 +109,14 @@ function RoyaltyModule(props: ModuleInstanceProps) {
       if (!ownerAccount) {
         throw new Error("Not an owner account");
       }
-      const [defaultRoyaltyRecipient, defaultRoyaltyBps] =
+      const [defaultRoyaltyRecipient, defaultRoyaltyPercentage] =
         defaultRoyaltyInfoQuery.data || [];
 
       if (
         values.recipient &&
-        values.bps &&
+        values.percentage &&
         (values.recipient !== defaultRoyaltyRecipient ||
-          Number(values.bps) !== defaultRoyaltyBps)
+          Number(values.percentage) * 100 !== defaultRoyaltyPercentage)
       ) {
         const setDefaultRoyaltyInfo = isErc721
           ? RoyaltyERC721.setDefaultRoyaltyInfo
@@ -124,7 +125,7 @@ function RoyaltyModule(props: ModuleInstanceProps) {
         const setSaleConfigTx = setDefaultRoyaltyInfo({
           contract: contract,
           royaltyRecipient: values.recipient,
-          royaltyBps: Number(values.bps),
+          royaltyBps: Number(values.percentage) * 100,
         });
 
         await sendAndConfirmTransaction({
@@ -250,10 +251,17 @@ const royaltyInfoFormSchema = z.object({
   }),
 
   recipient: addressSchema,
-  bps: z
+  percentage: z
     .string()
-    .min(1, { message: "Invalid BPS" })
-    .refine((v) => Number(v) >= 0, { message: "Invalid BPS" }),
+    .min(1, { message: "Invalid percentage" })
+    .refine(
+      (v) => {
+        console.log("Number(v): ", Number(v));
+        if (Number(v) === 0) return true;
+        if (Number(v) >= 0.01 && Number(v) <= 100) return true;
+      },
+      { message: "Invalid percentage" },
+    ),
 });
 
 export type RoyaltyInfoFormValues = z.infer<typeof royaltyInfoFormSchema>;
@@ -267,7 +275,7 @@ function RoyaltyInfoPerTokenSection(props: {
     values: {
       tokenId: "",
       recipient: "",
-      bps: "",
+      percentage: "",
     },
     reValidateMode: "onChange",
   });
@@ -321,12 +329,17 @@ function RoyaltyInfoPerTokenSection(props: {
 
           <FormField
             control={form.control}
-            name="bps"
+            name="percentage"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>BPS</FormLabel>
+                <FormLabel>Percentage</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <div className="flex items-center">
+                    <Input {...field} className="rounded-r-none border-r-0" />
+                    <div className="h-10 rounded-lg rounded-l-none border border-input px-3 py-2">
+                      %
+                    </div>
+                  </div>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -355,9 +368,19 @@ function RoyaltyInfoPerTokenSection(props: {
 
 const defaultRoyaltyFormSchema = z.object({
   recipient: addressSchema,
-  bps: z.string().refine((v) => v.length === 0 || Number(v) >= 0, {
-    message: "Invalid BPS",
-  }),
+  percentage: z
+    .string()
+    .min(1, { message: "Invalid percentage" })
+    .refine(
+      (v) => {
+        console.log("Number(v): ", Number(v));
+        if (Number(v) === 0) return true;
+        if (Number(v) >= 0.01 && Number(v) <= 100) return true;
+      },
+      {
+        message: "Invalid percentage",
+      },
+    ),
 });
 
 export type DefaultRoyaltyFormValues = z.infer<typeof defaultRoyaltyFormSchema>;
@@ -367,14 +390,16 @@ function DefaultRoyaltyInfoSection(props: {
   update: (values: DefaultRoyaltyFormValues) => Promise<void>;
   contractChainId: number;
 }) {
-  const [defaultRoyaltyRecipient, defaultRoyaltyBps] =
+  const [defaultRoyaltyRecipient, defaultRoyaltyPercentage] =
     props.defaultRoyaltyInfo || [];
 
   const form = useForm<DefaultRoyaltyFormValues>({
     resolver: zodResolver(defaultRoyaltyFormSchema),
     values: {
       recipient: defaultRoyaltyRecipient || "",
-      bps: defaultRoyaltyBps ? String(defaultRoyaltyBps) : "",
+      percentage: defaultRoyaltyPercentage
+        ? String(defaultRoyaltyPercentage / 100)
+        : "",
     },
     reValidateMode: "onChange",
   });
@@ -414,12 +439,17 @@ function DefaultRoyaltyInfoSection(props: {
 
           <FormField
             control={form.control}
-            name="bps"
+            name="percentage"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Default Royalty BPS</FormLabel>
+                <FormLabel>Default Royalty Percentage</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <div className="flex items-center">
+                    <Input {...field} className="rounded-r-none border-r-0" />
+                    <div className="h-10 rounded-lg rounded-l-none border border-input px-3 py-2">
+                      %
+                    </div>
+                  </div>
                 </FormControl>
                 <FormMessage />
               </FormItem>

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

@@ -237,18 +237,21 @@ export function TransferableModuleUI(
 
               {isRestricted && (
                 <div className="w-full">
-                  {/* Warning - TODO add later  */}
-                  {/* {formFields.fields.length === 0 && (
+                  {formFields.fields.length === 0 && (
                     <Alert variant="warning">
                       <CircleAlertIcon className="size-5 max-sm:hidden" />
                       <AlertTitle className="max-sm:!pl-0">
                         Nobody has permission to transfer tokens on this
                         contract
                       </AlertTitle>
                     </Alert>
-                  )} */}
+                  )}
 
                   <div className="flex flex-col gap-3">
+                    <p className="text-muted-foreground text-sm">
+                      Accounts that may override the transfer restrictions
+                    </p>
+
                     {/* Addresses */}
                     {formFields.fields.map((fieldItem, index) => (
                       <div