77 ContractCallPayloadBuilder ,
88 ContractFunction ,
99} from '@multiversx/sdk-core' ;
10- import { useForm } from 'react-hook-form' ;
10+ import { useForm , useWatch } from 'react-hook-form' ;
1111
1212import { zodResolver } from '@hookform/resolvers/zod' ;
1313import { Form } from '@/components/ui/form' ;
@@ -27,11 +27,14 @@ import {
2727} from '@/components/operations/constants' ;
2828import { OperationsInputField } from '@/components/operations/operations-input-field' ;
2929import { OperationsCheckboxGroup } from '@/components/operations/operations-checkbox-group' ;
30- import { OperationsSubmitButton } from '.. /operations-submit-button' ;
31- import { useContext } from 'react' ;
30+ import { OperationsSubmitButton } from '@/components/operations /operations-submit-button' ;
31+ import { useContext , useEffect , useState } from 'react' ;
3232import { OperationsStateDialogContext } from '@/components/operations/operations-status-dialog' ;
3333import { CommonOpertationContentProps } from '@/components/operations/operations-common-types' ;
34- import { OperationsRadioGroup } from '../operations-radio-group' ;
34+ import { OperationsRadioGroup } from '@/components/operations/operations-radio-group' ;
35+ import { useAccount } from '@useelven/core' ;
36+ import { useTokenRolesByAccount } from '@/hooks/use-token-roles-by-account' ;
37+ import { OperationsTokenIdInput } from '@/components/operations/operations-tokenid-input' ;
3538
3639const formSchema = z . object ( {
3740 tokenId : z . string ( ) . min ( 1 , 'The field is required' ) ,
@@ -57,20 +60,52 @@ export const ToggleSpecialRoles = ({
5760 close,
5861 tokenType,
5962} : CommonOpertationContentProps ) => {
63+ const { address } = useAccount ( ) ;
6064 const { setOpen : setTxStatusDialogOpen } = useContext (
6165 OperationsStateDialogContext
6266 ) ;
6367
68+ const [ disabledRoles , setDisabledRoles ] = useState < string [ ] > ( ) ;
69+
6470 const form = useForm < z . infer < typeof formSchema > > ( {
6571 resolver : zodResolver ( formSchema ) ,
6672 defaultValues : {
6773 tokenId : '' ,
68- address : '' ,
74+ address,
6975 type : 'set' ,
70- roles : [ 'ESDTRoleNFTCreate' , 'ESDTRoleNFTBurn' ] ,
76+ roles : [ ] ,
7177 } ,
7278 } ) ;
7379
80+ const watchTokenId = useWatch ( { name : 'tokenId' , control : form . control } ) ;
81+ const watchAddress = useWatch ( { name : 'address' , control : form . control } ) ;
82+ const watchType = useWatch ( { name : 'type' , control : form . control } ) ;
83+
84+ const { roles } = useTokenRolesByAccount ( {
85+ tokenId : watchTokenId ,
86+ tokenType,
87+ address : watchAddress ,
88+ } ) ;
89+
90+ // Handle selected roles in form
91+ useEffect ( ( ) => {
92+ const roleNames = rolesMap [ tokenType ] . map ( ( role ) => role . name ) ;
93+
94+ if ( ! watchTokenId || ! watchAddress ) {
95+ setDisabledRoles ( roleNames ) ;
96+ return ;
97+ }
98+
99+ let disabledRoles : string [ ] = [ ] ;
100+ if ( watchType === 'set' ) {
101+ disabledRoles = roles ;
102+ } else {
103+ disabledRoles = roleNames . filter ( ( role ) => ! roles ?. includes ( role ) ) ;
104+ }
105+ setDisabledRoles ( disabledRoles ) ;
106+ // eslint-disable-next-line react-hooks/exhaustive-deps
107+ } , [ roles , watchType , watchTokenId , watchAddress ] ) ;
108+
74109 const onSubmit = ( {
75110 tokenId,
76111 address,
@@ -109,6 +144,17 @@ export const ToggleSpecialRoles = ({
109144 close ( ) ;
110145 } ;
111146
147+ const rolesDescription = ( ) => {
148+ if ( ! watchAddress || ! watchTokenId ) {
149+ return 'Please set tokenId and address, then you can choose roles!' ;
150+ }
151+ return `Disabled ones are ${
152+ form . getValues ( 'type' ) === 'set'
153+ ? "set, so you can't set them"
154+ : "not set, so you can't unset them"
155+ } .`;
156+ } ;
157+
112158 return (
113159 < >
114160 < DialogHeader className = "p-8 pb-0" >
@@ -137,23 +183,19 @@ export const ToggleSpecialRoles = ({
137183 label = "Operation type"
138184 description = "Please choose the type of the operation. Set or Unset."
139185 />
140- < OperationsInputField
141- name = "tokenId"
142- label = "Token id"
143- placeholder = "Example: MyToken-23432"
144- description = "Please provide your token id"
145- />
186+ < OperationsTokenIdInput tokenType = { tokenType } />
146187 < OperationsInputField
147188 name = "address"
148189 label = "Address"
149190 placeholder = "Example: erd1..."
150- description = "Please provide the address for which the roles will be assigned"
191+ description = "Please provide the address for which the roles will be assigned. By default your own. "
151192 />
152193 < OperationsCheckboxGroup
153194 items = { rolesMap [ tokenType ] }
195+ disabledItems = { disabledRoles }
154196 name = "roles"
155197 label = "Roles"
156- description = " Special roles available for basic ESDT tokens."
198+ description = { ` Special roles available for basic ESDT tokens. ${ rolesDescription ( ) } ` }
157199 />
158200 </ div >
159201 </ form >
0 commit comments