feat: update flow to mint nft with multiple data fields

Author: akhlopiachyi

src/components/Button/index.tsx

@@ -30,6 +30,7 @@ export const Button: FC<ButtonProps> = ({
   const buttonCx = classNames('flex items-center justify-center gap-1 rounded-xl text-base py-3 px-12 w-full text-nowrap whitespace-nowrap font-noto-sans enabled:hover:opacity-50', {
     'bg-green-gradient text-[#21262E]': type === 'primary' && !disabled,
     'bg-green-opacity-10 text-[#25D695] backdrop-blur-sm': type === 'secondary' && !disabled,
+    'text-[#25D695]': type === 'default' && !disabled,
     'bg-[#17191E] text-[#2B3138] gap-2 cursor-not-allowed': disabled,
   }, className);
 

src/components/ConfirmNFTMintModal/index.tsx

@@ -10,20 +10,21 @@ import { NFT } from "coreum-js-nightly";
 import { ModalInfoRow } from "../ModalInfoRow";
 import { dispatchAlert } from "@/features/alerts/alertsSlice";
 import {
+  defaultNFTDataItem,
+  NFTDataItem,
   setDataEditable,
   setNFTData,
   setNFTID,
-  setNFTMultipleData,
-  setNFTMultipleDataFiles,
+  setNFTMultipleDataValues,
   setNFTRecipient,
   setNFTURI,
   setNFTURIHash,
-  setRolesEditable,
   setSelectedNFTClass,
   setShouldRefetchNFTItems,
 } from "@/features/nft/nftSlice";
 import { shortenAddress } from "@/helpers/shortenAddress";
 import { convertStringToAny, convertStringToDataDynamic } from "@/helpers/convertStringToAny";
+import { DataEditor } from "coreum-js-nightly/dist/main/coreum/asset/nft/v1/types";
 
 export const ConfirmNFTMintModal = () => {
   const isConfirmNFTMintModalOpen = useAppSelector(state => state.general.isConfirmNFTMintModalOpen);
@@ -36,9 +37,8 @@ export const ConfirmNFTMintModal = () => {
   const nftURIHash = useAppSelector(state => state.nfts.nftURIHash);
   const nftRecipient = useAppSelector(state => state.nfts.nftRecipient);
   const isDataEditable = useAppSelector(state => state.nfts.isDataEditable);
-  const roles = useAppSelector(state => state.nfts.roles);
-  const nftMultipleData = useAppSelector(state => state.nfts.nftMultipleData);
-  const nftMultipleDataFiles = useAppSelector(state => state.nfts.nftMultipleDataFiles);
+
+  const nftMultipleDataValues = useAppSelector(state => state.nfts.nftMultipleDataValues);
 
   const [isTxSuccessful, setIsTxSuccessful] = useState<boolean>(false);
 
@@ -52,33 +52,38 @@ export const ConfirmNFTMintModal = () => {
     dispatch(setNFTRecipient(''));
     dispatch(setNFTData(''));
     dispatch(setDataEditable(false));
-    dispatch(setRolesEditable({ admin: false, owner: false }));
+    dispatch(setNFTMultipleDataValues([defaultNFTDataItem]));
     dispatch(setIsConfirmNFTMintModalOpen(false));
     dispatch(setSelectedNFTClass(null));
-    dispatch(setNFTMultipleData(['']));
-    dispatch(setNFTMultipleDataFiles([]));
     setIsTxSuccessful(false);
   }, []);
 
   const dataList = useMemo(() => {
-    return nftMultipleDataFiles.length ? nftMultipleDataFiles : nftMultipleData;
-  }, [nftMultipleData, nftMultipleDataFiles]);
+    return nftMultipleDataValues.map((item: NFTDataItem) => {
+      return {
+        editors: item.roles,
+        data: item.contentValue.length
+          ? item.contentValue
+          : item.fileValue,
+      };
+    }).filter((item: { editors: DataEditor[]; data: string; }) => !!item.data.length);
+  }, [nftMultipleDataValues]);
 
   const handleConfirm = useCallback(async () => {
     dispatch(setIsTxExecuting(true));
     try {
       let nftDataPayload: any;
 
-      if (isDataEditable && roles.length) {
+      if (isDataEditable) {
         let payload = [];
 
-        for (const tempData of dataList) {
-          payload.push({ editors: roles, data: btoa(tempData) });
+        for (const dataItem of dataList) {
+          payload.push({ editors: dataItem.editors, data: btoa(dataItem.data) });
         }
 
         nftDataPayload = convertStringToDataDynamic(payload);
       } else {
-        nftDataPayload = convertStringToAny(dataList[0]);
+        nftDataPayload = convertStringToAny(dataList?.[0].data);
       }
 
       const nftMintObj = {
@@ -121,14 +126,12 @@ export const ConfirmNFTMintModal = () => {
     dispatch(setIsTxExecuting(false));
   }, [
     account,
-    dispatch,
     getTxFee,
     isDataEditable,
     nftId,
     nftRecipient,
     nftURI,
     nftURIHash,
-    roles,
     selectedCollection?.id,
     signingClient,
     dataList,
@@ -179,10 +182,10 @@ export const ConfirmNFTMintModal = () => {
                     className="flex-col !items-start !gap-1"
                     valueClassName="!text-left"
                   />
-                ) : formatData(dataList[0]).length ? (
+                ) : formatData(dataList?.[0].data).length ? (
                 <ModalInfoRow
                   label="Data"
-                  value={formatData(dataList[0])}
+                  value={formatData(dataList?.[0].data)}
                   className="flex-col !items-start !gap-1"
                   valueClassName="!text-left"
                 />
@@ -234,10 +237,10 @@ export const ConfirmNFTMintModal = () => {
                   className="flex-col !items-start !gap-1"
                   valueClassName="!text-left"
                 />
-              ) : formatData(dataList[0]).length ? (
+              ) : formatData(dataList?.[0]?.data).length ? (
               <ModalInfoRow
                 label="Data"
-                value={formatData(dataList[0])}
+                value={formatData(dataList?.[0]?.data)}
                 className="flex-col !items-start !gap-1"
                 valueClassName="!text-left"
               />

src/components/FileUpload/index.tsx

@@ -82,7 +82,7 @@ export const FileUploadSingle: FC<FileUploadSingleProps> = ({
             </div>
             <Button
               label="Choose another file"
-              type={ButtonType.Secondary}
+              type={ButtonType.Default}
               onClick={() => !disabled && inputFileRef?.current?.click()}
               className="text-sm !py-2 px-6 rounded-[10px] font-medium w-[160px] !bg-transparent group-hover:opacity-50"
             />
@@ -100,7 +100,7 @@ export const FileUploadSingle: FC<FileUploadSingleProps> = ({
           <GeneralIcon type={GeneralIconType.File} />
           <Button
             label="Upload file"
-            type={ButtonType.Secondary}
+            type={ButtonType.Default}
             onClick={() => !disabled && inputFileRef?.current?.click()}
             className={classNames('text-sm !py-2 px-6 rounded-[10px] font-semibold w-[160px] !bg-transparent', {
               'cursor-not-allowed !enabled:hover:opacity-100': disabled,