improve roles management

Author: juliancwirko

CHANGELOG.md

@@ -1,3 +1,6 @@
+### [0.11.2](https://github.com/xdevguild/buildo.dev/releases/tag/v0.11.2) (2023-12-31)
+- improve roles and properties selectors to make them less confusing
+
 ### [0.11.1](https://github.com/xdevguild/buildo.dev/releases/tag/v0.11.1) (2023-12-29)
 - update dependencies (some improvements in useElven)
 

components/operations/common/toggle-special-roles.tsx

@@ -7,7 +7,7 @@ import {
   ContractCallPayloadBuilder,
   ContractFunction,
 } from '@multiversx/sdk-core';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Form } from '@/components/ui/form';
@@ -27,11 +27,15 @@ import {
 } from '@/components/operations/constants';
 import { OperationsInputField } from '@/components/operations/operations-input-field';
 import { OperationsCheckboxGroup } from '@/components/operations/operations-checkbox-group';
-import { OperationsSubmitButton } from '../operations-submit-button';
-import { useContext } from 'react';
+import { OperationsSubmitButton } from '@/components/operations/operations-submit-button';
+import { useContext, useEffect, useState } from 'react';
 import { OperationsStateDialogContext } from '@/components/operations/operations-status-dialog';
 import { CommonOpertationContentProps } from '@/components/operations/operations-common-types';
-import { OperationsRadioGroup } from '../operations-radio-group';
+import { OperationsRadioGroup } from '@/components/operations/operations-radio-group';
+import { useCreatorTokens } from '@/hooks/use-creator-tokens';
+import { OperationsSelectField } from '@/components/operations/operations-select-field';
+import { useAccount } from '@useelven/core';
+import { useTokenRolesByAccount } from '@/hooks/use-token-roles-by-account';
 
 const formSchema = z.object({
   tokenId: z.string().min(1, 'The field is required'),
@@ -57,20 +61,54 @@ export const ToggleSpecialRoles = ({
   close,
   tokenType,
 }: CommonOpertationContentProps) => {
+  const { address } = useAccount();
   const { setOpen: setTxStatusDialogOpen } = useContext(
     OperationsStateDialogContext
   );
 
+  const [disabledRoles, setDisabledRoles] = useState<string[]>();
+
+  const { tokens } = useCreatorTokens<{ ticker: string }>({ tokenType });
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       tokenId: '',
-      address: '',
+      address,
       type: 'set',
-      roles: ['ESDTRoleNFTCreate', 'ESDTRoleNFTBurn'],
+      roles: [],
     },
   });
 
+  const watchTokenId = useWatch({ name: 'tokenId', control: form.control });
+  const watchAddress = useWatch({ name: 'address', control: form.control });
+  const watchType = useWatch({ name: 'type', control: form.control });
+
+  const { roles } = useTokenRolesByAccount({
+    tokenId: watchTokenId,
+    tokenType,
+    address: watchAddress,
+  });
+
+  // Handle selected roles in form
+  useEffect(() => {
+    const roleNames = rolesMap[tokenType].map((role) => role.name);
+
+    if (!watchTokenId || !watchAddress) {
+      setDisabledRoles(roleNames);
+      return;
+    }
+
+    let disabledRoles: string[] = [];
+    if (watchType === 'set') {
+      disabledRoles = roles;
+    } else {
+      disabledRoles = roleNames.filter((role) => !roles?.includes(role));
+    }
+    setDisabledRoles(disabledRoles);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [roles, watchType, watchTokenId, watchAddress]);
+
   const onSubmit = ({
     tokenId,
     address,
@@ -109,6 +147,17 @@ export const ToggleSpecialRoles = ({
     close();
   };
 
+  const rolesDescription = () => {
+    if (!watchAddress || !watchTokenId) {
+      return 'Please set tokenId and address, then you can choose roles!';
+    }
+    return `Disabled ones are ${
+      form.getValues('type') === 'set'
+        ? "set, so you can't set them"
+        : "not set, so you can't unset them"
+    }.`;
+  };
+
   return (
     <>
       <DialogHeader className="p-8 pb-0">
@@ -137,23 +186,31 @@ export const ToggleSpecialRoles = ({
                 label="Operation type"
                 description="Please choose the type of the operation. Set or Unset."
               />
-              <OperationsInputField
+              <OperationsSelectField
                 name="tokenId"
                 label="Token id"
-                placeholder="Example: MyToken-23432"
-                description="Please provide your token id"
+                description="Example: MyToken-23432"
+                options={
+                  tokens
+                    ? tokens?.map((token) => ({
+                        value: token.ticker,
+                        label: token.ticker,
+                      }))
+                    : []
+                }
               />
               <OperationsInputField
                 name="address"
                 label="Address"
                 placeholder="Example: erd1..."
-                description="Please provide the address for which the roles will be assigned"
+                description="Please provide the address for which the roles will be assigned. By default your own."
               />
               <OperationsCheckboxGroup
                 items={rolesMap[tokenType]}
+                disabledItems={disabledRoles}
                 name="roles"
                 label="Roles"
-                description="Special roles available for basic ESDT tokens."
+                description={`Special roles available for basic ESDT tokens. ${rolesDescription()}`}
               />
             </div>
           </form>

components/operations/constants.ts

@@ -18,6 +18,16 @@ export interface TokenPropertyOrRole {
 }
 
 export const esdtTokenProperties: TokenPropertyOrRole[] = [
+  {
+    name: 'canAddSpecialRoles',
+    description:
+      'The token manager can assign a specific role(s). Important for token management.',
+  },
+  {
+    name: 'canUpgrade',
+    description:
+      "The token manager may change these properties. Without it you won't be able to change these properties in the future",
+  },
   {
     name: 'canFreeze',
     description:
@@ -37,14 +47,6 @@ export const esdtTokenProperties: TokenPropertyOrRole[] = [
     name: 'canChangeOwner',
     description: 'Token management can be transferred to a different account',
   },
-  {
-    name: 'canUpgrade',
-    description: 'The token manager may change these properties',
-  },
-  {
-    name: 'canAddSpecialRoles',
-    description: 'The token manager can assign a specific role(s)',
-  },
   // TODO: not available yet
   // {
   //   name: 'canCreateMultiShard',
@@ -57,46 +59,47 @@ export const sftNftTokenProperties: TokenPropertyOrRole[] = [
   ...esdtTokenProperties,
   {
     name: 'canTransferNFTCreateRole',
-    description: 'the token manager can transfer NFT/SFT/Meta creation role',
+    description: 'The token manager can transfer NFT/SFT/Meta creation role',
   },
 ];
 
 const ESDTTransferRole = {
   name: 'ESDTTransferRole',
   description:
-    'this role restricts transferability of the token only to the addresses that have the role set, while these addresses can send to any address',
+    'The role restricts transferability of the token only to the addresses that have the role set, while these addresses can send to any address.',
 };
 
 const ESDTRoleNFTCreate = {
   name: 'ESDTRoleNFTCreate',
-  description: 'this role allows one to create a new NFT/SFT/Meta',
+  description: 'The role allows one to create a new NFT/SFT/Meta',
 };
 
 const ESDTRoleNFTBurn = {
   name: 'ESDTRoleNFTBurn',
   description:
-    'this role allows one to burn quantity of a specific NFT/SFT/Meta',
+    'The role allows one to burn quantity of a specific NFT/SFT/Meta',
 };
 
 export const esdtTokenSpecialRoles: TokenPropertyOrRole[] = [
   {
     name: 'ESDTRoleLocalBurn',
-    description: 'an address with this role can burn tokens',
+    description: 'An address with this role can burn tokens',
   },
   {
     name: 'ESDTRoleLocalMint',
-    description: 'an address with this role can mint new tokens',
+    description: 'An address with this role can mint new tokens',
   },
   ESDTTransferRole,
 ];
 
 export const sftTokenSpecialRoles = [
   ESDTRoleNFTCreate,
-  ESDTRoleNFTBurn,
   {
     name: 'ESDTRoleNFTAddQuantity',
-    description: 'this role allows one to add quantity of a specific SFT',
+    description:
+      'The role allows one to add quantity of a specific SFT/Meta. Also required when creating.',
   },
+  ESDTRoleNFTBurn,
   ESDTTransferRole,
 ];
 
@@ -106,11 +109,11 @@ export const nftTokenSpecialRoles = [
   {
     name: 'ESDTRoleNFTUpdateAttributes',
     description:
-      'this role allows one to change the attributes of a specific NFT',
+      'The role allows one to change the attributes of a specific NFT',
   },
   {
     name: 'ESDTRoleNFTAddURI',
-    description: 'this role allows one add URIs for a specific NFT',
+    description: 'The role allows one add URIs for a specific NFT',
   },
   ESDTTransferRole,
 ];

components/operations/operations-checkbox-group.tsx

@@ -14,10 +14,12 @@ type OperationsCheckboxGroupProps = {
   name: string;
   description: string;
   label: string;
+  disabledItems?: string[];
 };
 
 export const OperationsCheckboxGroup = ({
   items,
+  disabledItems,
   name,
   description,
   label,
@@ -39,13 +41,17 @@ export const OperationsCheckboxGroup = ({
               key={property.name}
               control={control}
               name={name}
+              disabled={
+                disabledItems ? disabledItems.includes(property.name) : false
+              }
               render={({ field }) => {
                 return (
                   <FormItem key={property.name}>
                     <div className="flex flex-row items-start space-x-3 space-y-0">
                       <FormControl>
                         <Checkbox
                           checked={field.value?.includes(property.name)}
+                          disabled={field.disabled}
                           onCheckedChange={(checked) => {
                             return checked
                               ? field.onChange([...field.value, property.name])

components/operations/operations-select-field.tsx

@@ -10,11 +10,11 @@ import { useFormContext } from 'react-hook-form';
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { ScrollArea } from '@/components/ui/scroll-area';
 
 type OperationsSelectFieldProps = {
   name: string;
@@ -47,13 +47,13 @@ export const OperationsSelectField = ({
               </SelectTrigger>
             </FormControl>
             <SelectContent>
-              <ScrollArea className="h-[230px]" type="auto">
+              <SelectGroup className="overflow-y-auto max-h-[15rem]">
                 {options.map(({ value, label }) => (
                   <SelectItem key={value} value={value}>
                     {label}
                   </SelectItem>
                 ))}
-              </ScrollArea>
+              </SelectGroup>
             </SelectContent>
           </Select>
           <FormDescription className="text-xs">{description}</FormDescription>