-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add change nft attributes functionality
- Loading branch information
1 parent
8139fc1
commit bb1b904
Showing
8 changed files
with
185 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
157 changes: 157 additions & 0 deletions
157
components/operations/non-fungible-tokens/change-attributes.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import * as z from 'zod'; | ||
| import { | ||
| BigUIntValue, | ||
| BytesValue, | ||
| TypedValue, | ||
| ContractCallPayloadBuilder, | ||
| ContractFunction, | ||
| } from '@multiversx/sdk-core'; | ||
| import Bignumber from 'bignumber.js'; | ||
| import { useForm } from 'react-hook-form'; | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import { Form } from '@/components/ui/form'; | ||
| import { | ||
| DialogDescription, | ||
| DialogFooter, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| } from '@/components/ui/dialog'; | ||
| import { OperationsInputField } from '@/components/operations/operations-input-field'; | ||
| import { OperationsSubmitButton } from '../operations-submit-button'; | ||
| import { useContext } from 'react'; | ||
| import { OperationsStateDialogContext } from '@/components/operations/operations-status-dialog'; | ||
| import { OperationContentProps } from '@/components/operations/operations-common-types'; | ||
| import { useAccount, useConfig } from '@useelven/core'; | ||
| import axios from 'axios'; | ||
| import { specialOpertationsGasLimit } from '../constants'; | ||
|
|
||
| const formSchema = z.object({ | ||
| tokenId: z.string().min(1, 'The field is required'), | ||
| attributes: z | ||
| .string() | ||
| .min( | ||
| 1, | ||
| 'The field is required. You will need at least metadata.json attribute.' | ||
| ), | ||
| }); | ||
|
|
||
| export const ChangeAttributes = ({ | ||
| triggerTx, | ||
| close, | ||
| }: OperationContentProps) => { | ||
| const { address } = useAccount(); | ||
| const { apiAddress } = useConfig(); | ||
|
|
||
| const { setOpen: setTxStatusDialogOpen } = useContext( | ||
| OperationsStateDialogContext | ||
| ); | ||
|
|
||
| const form = useForm<z.infer<typeof formSchema>>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { | ||
| tokenId: '', | ||
| attributes: '', | ||
| }, | ||
| }); | ||
|
|
||
| const onSubmit = async ({ | ||
| tokenId, | ||
| attributes, | ||
| }: z.infer<typeof formSchema>) => { | ||
| try { | ||
| // TODO: replace with useElven useApiCall when ready to handle such cases | ||
| const tokenOnNetwork = await axios.get<{ nonce: number; ticker: string }>( | ||
| `${apiAddress}/nfts/${tokenId.trim()}`, | ||
| { | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| Accept: 'application/json', | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| const nonce = tokenOnNetwork?.data?.nonce; | ||
| const collectionTicker = tokenOnNetwork?.data?.ticker; | ||
|
|
||
| // TODO: show the error in the transaction status modal | ||
| if (!nonce || !collectionTicker) { | ||
| console.error( | ||
| "Can't read the nonce or/and collection ticker of the token, using MultiversX API!" | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| const args: TypedValue[] = [ | ||
| BytesValue.fromUTF8(collectionTicker.trim()), | ||
| new BigUIntValue(new Bignumber(nonce)), | ||
| BytesValue.fromUTF8(attributes.trim()), | ||
| ]; | ||
|
|
||
| const data = new ContractCallPayloadBuilder() | ||
| .setFunction(new ContractFunction('ESDTNFTUpdateAttributes')) | ||
| .setArgs(args) | ||
| .build(); | ||
|
|
||
| triggerTx?.({ | ||
| address, | ||
| gasLimit: | ||
| specialOpertationsGasLimit + | ||
| data.length() * 1500 + | ||
| attributes?.length * 50000, | ||
| data, | ||
| value: 0, | ||
| }); | ||
|
|
||
| setTxStatusDialogOpen(true); | ||
| form.reset(); | ||
| close(); | ||
| } catch (e) { | ||
| console.error( | ||
| "Can't read the nonce or/and collection ticker of the token, using MultiversX API!", | ||
| e | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <DialogHeader className="p-8 pb-0"> | ||
| <DialogTitle>Change attributes</DialogTitle> | ||
| <DialogDescription> | ||
| An user that has the ESDTRoleNFTUpdateAttributes role set for a given | ||
| ESDT, can change the attributes of a given NFT. | ||
| ESDTNFTUpdateAttributes will remove the old attributes and add the new | ||
| ones. Therefore, if you want to keep the old attributes you will have | ||
| to pass them along with the new ones. | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
| <div className="overflow-y-auto py-0 px-8"> | ||
| <Form {...form}> | ||
| <form | ||
| id="nft-change-attributes-form" | ||
| onSubmit={form.handleSubmit(onSubmit)} | ||
| className="space-y-8" | ||
| > | ||
| <div className="flex-1 overflow-auto p-1"> | ||
| <OperationsInputField | ||
| name="tokenId" | ||
| label="Token id" | ||
| placeholder="Example: MyToken-23432-01" | ||
| description="Please provide your token id" | ||
| /> | ||
| <OperationsInputField | ||
| name="attributes" | ||
| label="Attributes" | ||
| placeholder="Example: metadata:{ipfsCID_here}/metadata.json;tags:tag1,tag2,tag3" | ||
| description="Provide attributes. In most cases you'll need the metadata attribute which points to JSON file on IPFS. Separate with ';'" | ||
| /> | ||
| </div> | ||
| </form> | ||
| </Form> | ||
| </div> | ||
| <DialogFooter className="py-4 px-8"> | ||
| <OperationsSubmitButton formId="nft-change-attributes-form" /> | ||
| </DialogFooter> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
bb1b904There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
buildo-dev – ./
www.buildo.dev
buildo.dev
buildo-dev-elven-family-6f0851cc.vercel.app
buildo-dev-git-main-elven-family-6f0851cc.vercel.app
buildo-dev.vercel.app