From 398e405305e4246c32ca7f31b626abecfb8404e1 Mon Sep 17 00:00:00 2001
From: Jonath-z <jonathanzihindula95@gmail.com>
Date: Sat, 2 Jul 2022 18:50:30 +0200
Subject: [PATCH] Mint nft activity added

---
 .../CreateNftProcessModal/index.tsx           |  57 +++--
 .../CreateNftPage/DetailsForm/index.tsx       |   2 +-
 components/CreateNftPage/index.tsx            | 203 ++++++++++--------
 components/EditProfilePage/index.tsx          |  41 ++--
 .../Card/UploadFileErrorCard/index.tsx        |  22 ++
 .../Card/UploadFileProcessing/index.tsx       |  21 ++
 flajl                                         |  17 ++
 lib/Utils.ts                                  |   2 +
 lib/services/BackendApiService.ts             |   1 -
 lib/web3/service.ts                           |  16 +-
 10 files changed, 247 insertions(+), 135 deletions(-)
 create mode 100644 components/modules/__modules__/Card/UploadFileErrorCard/index.tsx
 create mode 100644 components/modules/__modules__/Card/UploadFileProcessing/index.tsx
 create mode 100644 flajl

diff --git a/components/CreateNftPage/CreateNftProcessModal/index.tsx b/components/CreateNftPage/CreateNftProcessModal/index.tsx
index 2d29288..90626f2 100644
--- a/components/CreateNftPage/CreateNftProcessModal/index.tsx
+++ b/components/CreateNftPage/CreateNftProcessModal/index.tsx
@@ -10,37 +10,25 @@ export const SUCCED_STATUS = "succeed";
 export const ERROR_STATUS = "error";
 
 interface IProps {
-  uploadFileOnIpfsStatus: string;
   sendStorageFeeStatus: string;
   mintNftStatus: string;
+  mintError: boolean;
+  onPutOnMarket: () => Promise<void>;
+  onMintAgain: () => Promise<void>;
+  onCancel: () => void;
 }
 
 const CreateNftProcessModal = ({
-  uploadFileOnIpfsStatus,
   sendStorageFeeStatus,
   mintNftStatus,
+  onPutOnMarket,
+  mintError,
+  onMintAgain,
+  onCancel,
 }: IProps) => {
   return (
     <div className="fixed bg-black bg-opacity-40 top-0 lef-0 bottom-0 right-0 w-full h-full z-30 flex justify-center items-center">
       <div className="bg-white w-fit p-5 rounded-lg flex flex-col gap-5 mx-5">
-        <div className="flex gap-3 items-center">
-          {uploadFileOnIpfsStatus === PENDING_STATUS ? (
-            <VSpinner className="animate-spin text-blue-500 text-4xl" />
-          ) : uploadFileOnIpfsStatus === SUCCED_STATUS ? (
-            <VCheckFill className="text-green-600 text-4xl" />
-          ) : (
-            uploadFileOnIpfsStatus === ERROR_STATUS && (
-              <VPlusCircleFill className="text-red-600 text-4xl -rotate-45" />
-            )
-          )}
-
-          <div>
-            <p className="font-bold text-2xl">Upload</p>
-            <p className="text-gray-500 font-semibold py-1">
-              Uploading of all media assets and metadata to IPFS
-            </p>
-          </div>
-        </div>
         <div className="flex gap-3 items-center">
           {sendStorageFeeStatus === PENDING_STATUS ? (
             <VSpinner className="animate-spin text-blue-500 text-4xl" />
@@ -70,6 +58,35 @@ const CreateNftProcessModal = ({
             </p>
           </div>
         </div>
+        {!mintError ? (
+          <button
+            className="bg-blue-600 px-8 py-3 rounded-lg text-white font-bold hover:bg-blue-500 transition-all disabled:bg-opacity-50"
+            onClick={onPutOnMarket}
+            disabled={
+              sendStorageFeeStatus === ERROR_STATUS ||
+              mintNftStatus === ERROR_STATUS ||
+              sendStorageFeeStatus === PENDING_STATUS ||
+              mintNftStatus === PENDING_STATUS
+            }
+          >
+            Put on Market
+          </button>
+        ) : (
+          <div className="flex flex-col gap-3">
+            <button
+              className="bg-red-600 px-8 py-3 rounded-lg text-white font-bold hover:bg-red-700 transition-all"
+              onClick={onMintAgain}
+            >
+              Try again
+            </button>
+            <button
+              className="border border-red-600 px-8 py-3 rounded-lg text-white font-bold hover:border-red-700 transition-all"
+              onClick={onCancel}
+            >
+              Cancel
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/components/CreateNftPage/DetailsForm/index.tsx b/components/CreateNftPage/DetailsForm/index.tsx
index bafc881..9e37434 100644
--- a/components/CreateNftPage/DetailsForm/index.tsx
+++ b/components/CreateNftPage/DetailsForm/index.tsx
@@ -25,7 +25,7 @@ const DetailsForm = ({ onNftDetailsChange }: IProps) => {
       <div className="mt-5 flex flex-col">
         <label htmlFor="description" className="font-bold">
           Description
-          <span className="text-gray-400 font-thin"> (Optional)</span>
+          <span className="text-gray-400 font-thin px-2">(Optional)</span>
         </label>
         <textarea
           ref={textAreaRef}
diff --git a/components/CreateNftPage/index.tsx b/components/CreateNftPage/index.tsx
index 186411d..83234c8 100644
--- a/components/CreateNftPage/index.tsx
+++ b/components/CreateNftPage/index.tsx
@@ -2,9 +2,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import {
   CrossVector,
-  VPlusCircleFill,
   VQuestionMark,
-  VSpinner,
 } from "@components/modules/__modules__/_vectors";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { walletAddressAtom } from "@lib/atoms";
@@ -18,7 +16,6 @@ import ChooseCollection from "./ChooseCollection";
 import NftPreview from "./NftPreview";
 import WalletInfoCard from "@components/modules/__modules__/Card/WalletInfoCard";
 import ProfileMenu from "@components/modules/__secured/ProfileMenu";
-import { NFT } from "@lib/models/GeneralModel";
 import { saveFileWithIpfs } from "@lib/ipfsClient";
 import { generateTokenUri } from "@lib/Utils";
 import { web3Actions, Web3Service } from "@lib/web3";
@@ -29,6 +26,8 @@ import CreateNftProcessModal, {
 } from "./CreateNftProcessModal";
 import { backendApiService } from "@lib/services/BackendApiService";
 import LocalStorage from "@lib/helper/LocalStorage";
+import UploadFileProcessing from "@components/modules/__modules__/Card/UploadFileProcessing";
+import UploadFileErrorCard from "@components/modules/__modules__/Card/UploadFileErrorCard";
 
 const CreateNftPage = () => {
   const [nftData, setNftData] = useState({
@@ -54,15 +53,16 @@ const CreateNftPage = () => {
     sendStorageFeeStatus: "",
     mintNftStatus: "",
   });
-  const { uploadFileOnIpfsStatus, sendStorageFeeStatus, mintNftStatus } =
-    mintProcess;
+  const { sendStorageFeeStatus, mintNftStatus } = mintProcess;
 
   const [isFreeMinting, setIsFreeMinting] = useState(true);
   const [isAdvancedForm, setIsAdvancedForm] = useState(false);
   const [previewUrl, setPreviewUrl] = useState("");
   const [isImage, setIsImage] = useState(true);
   const [isCreateNftProcessModal, setIsCreateNftProcessModal] = useState(false);
-  const [inputFiles, setInputFiles] = useState<FileList>();
+  const [uploadFileProcessing, setUploadFileProcessing] = useState(false);
+  const [fileUploadingError, setFileUploadingError] = useState(false);
+  const [mintEroor, setMintError] = useState(false);
 
   const { address } = useRecoilValue(walletAddressAtom);
   const truncatedWalletAddress = truncateAddress(address, 10, 4);
@@ -74,6 +74,7 @@ const CreateNftPage = () => {
       ...nftData,
       ownerAddress: LocalStorage.getItem("ongama_signer_address")!,
       tokenUri,
+      storageFee: Number(`${process.env.NEXT_PUBLIC_STORAGE_FEE}`),
     });
   }, []);
 
@@ -81,58 +82,57 @@ const CreateNftPage = () => {
     inputFileRef.current?.click();
   };
 
+  const uploadFileOnIPFS = async (inputFiles) => {
+    if (inputFiles) {
+      setUploadFileProcessing(true);
+
+      const fileUrl = await saveFileWithIpfs(inputFiles);
+
+      setUploadFileProcessing(false);
+      if (fileUrl) {
+        setNftData({
+          ...nftData,
+          url: fileUrl,
+          urlCompressed: fileUrl,
+          urlMedium: fileUrl,
+          urlThumbnail: fileUrl,
+          fileSize: inputFiles[0].size,
+          fileType: inputFiles[0].type,
+        });
+        setFileUploadingError(false);
+        return fileUrl;
+      } else {
+        setFileUploadingError(true);
+        return null;
+      }
+    }
+  };
+
   const onFileChange = async (event: { target: any }) => {
     const { files } = event.target;
-    setInputFiles(files);
     setIsImage((files[0].type as string).includes("image"));
     const filePreviewUrl = URL.createObjectURL(files[0]);
-    setPreviewUrl(filePreviewUrl);
+    try {
+      const uploadResult = await uploadFileOnIPFS(files);
+
+      if (uploadResult) setPreviewUrl(filePreviewUrl);
+    } catch (err) {
+      setFileUploadingError(true);
+      throw err;
+    }
   };
 
   const onNftDetailsChange = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
     const { value, name } = event.target;
-    setNftData((prevState) => ({ ...prevState, [name]: value }));
+    setNftData((prevData) => ({ ...prevData, [name]: value }));
   };
 
   const onCancel = () => {
     setPreviewUrl("");
   };
 
-  const uploadFileOnIPFS = async () => {
-    if (inputFiles) {
-      setMintProcess({
-        ...mintProcess,
-        uploadFileOnIpfsStatus: PENDING_STATUS,
-      });
-      console.log("input file", inputFiles);
-      const fileUrl = await saveFileWithIpfs(inputFiles);
-      console.log("file url", fileUrl);
-      if (fileUrl) {
-        setNftData((prevState) => ({
-          ...prevState,
-          url: fileUrl,
-          fileSize: inputFiles[0].size,
-          urlCompressed: fileUrl,
-          urlMedium: fileUrl,
-          urlThumbnail: fileUrl,
-          fileType: inputFiles[0].type,
-        }));
-        setMintProcess({
-          ...mintProcess,
-          uploadFileOnIpfsStatus: SUCCED_STATUS,
-        });
-      } else {
-        setMintProcess({
-          ...mintProcess,
-          uploadFileOnIpfsStatus: ERROR_STATUS,
-        });
-        return;
-      }
-    }
-  };
-
   const sendStorageFee = async () => {
     try {
       setMintProcess({
@@ -141,68 +141,76 @@ const CreateNftPage = () => {
       });
       const web3Service = new Web3Service();
       const transaction = await web3Service.sendStorageFee();
-      setNftData((prevState) => ({
-        ...prevState,
-        storageFeeTransaction: transaction.transactionHash,
-        storageFee: Number(process.env.NEXT_PUBLIC_STORAGE_FEE),
-      }));
       setMintProcess({
         ...mintProcess,
         sendStorageFeeStatus: SUCCED_STATUS,
       });
+      return transaction;
     } catch (err) {
       setMintProcess({
         ...mintProcess,
         sendStorageFeeStatus: ERROR_STATUS,
       });
+      setIsCreateNftProcessModal(false);
+      throw err;
     }
   };
 
-  // useEffect(() => {
-  //   console.log("nft data", nftData);
-  // }, [nftData]);
-
   const mintNft = async () => {
     try {
       setMintProcess({
         ...mintProcess,
         mintNftStatus: PENDING_STATUS,
       });
-      await uploadFileOnIPFS();
-      console.log("nft data on minting event", nftData);
-      // const uploadedonBd = await backendApiService.mintNft(nftData);
-      // console.log("nft uploaded on Bd", uploadedonBd);
 
-      const mintedNft = await web3Actions.mintNft(
-        nftData.tokenUri,
-        nftData.ownerAddress,
-        nftData.price
-      );
-      console.log("minted nft", mintedNft);
-      setMintProcess({
-        ...mintProcess,
-        mintNftStatus: SUCCED_STATUS,
-      });
+      const uploadResponse = await backendApiService.mintNft(nftData);
+
+      if (uploadResponse) {
+        const mintedNft = await web3Actions.mintNft(
+          nftData.tokenUri,
+          nftData.ownerAddress,
+          nftData.price
+        );
+
+        setMintProcess({
+          ...mintProcess,
+          mintNftStatus: SUCCED_STATUS,
+        });
+      } else {
+        setMintProcess({
+          ...mintProcess,
+          mintNftStatus: ERROR_STATUS,
+        });
+      }
     } catch (err) {
       setMintProcess({
         ...mintProcess,
         mintNftStatus: ERROR_STATUS,
       });
+      setMintError(true);
       throw err;
     }
   };
 
-  const onCreateNft = async (e) => {
-    e.preventDefault();
+  const onPayStorageFee = async () => {
     setIsCreateNftProcessModal(!isCreateNftProcessModal);
+    const transaction = await sendStorageFee();
+    if (transaction) {
+      setNftData({
+        ...nftData,
+        storageFeeTransaction: transaction.transactionHash,
+      });
+    }
+  };
+
+  const onPutOnMarket = async () => {
     try {
-      // await uploadFileOnIPFS();
-      // await sendStorageFee();
       await mintNft();
+      setIsCreateNftProcessModal(!isCreateNftProcessModal);
+      setPreviewUrl("");
     } catch (err) {
       throw err;
     }
-    setIsCreateNftProcessModal(!isCreateNftProcessModal);
   };
 
   return (
@@ -247,24 +255,33 @@ const CreateNftPage = () => {
                     previewUrl ? "hidden" : ""
                   } flex flex-col items-center justify-center relative`}
                 >
-                  <div>
-                    <p className="text-gray-500 font-semibold">
-                      PNG, GIF, WEBP, MP4 or MP3. Max 100mb
-                    </p>
-                    <input
-                      ref={inputFileRef}
-                      type="file"
-                      className="hidden"
-                      id="input-file"
-                      onChange={onFileChange}
-                    />
-                    <button
-                      onClick={onChooseFile}
-                      className="font-bold bg-blue-100 text-blue-600 py-2 px-5 my-3 rounded-3xl hover:bg-blue-200 transition-all"
-                    >
-                      Choose file
-                    </button>
-                  </div>
+                  <UploadFileProcessing isProcessing={uploadFileProcessing}>
+                    {!fileUploadingError ? (
+                      <div>
+                        <p className="text-gray-500 font-semibold">
+                          PNG, GIF, WEBP, MP4 or MP3. Max 100mb
+                        </p>
+                        <input
+                          ref={inputFileRef}
+                          type="file"
+                          className="hidden"
+                          id="input-file"
+                          onChange={onFileChange}
+                        />
+                        <button
+                          onClick={onChooseFile}
+                          className="font-bold bg-blue-100 text-blue-600 py-2 px-5 my-3 rounded-3xl hover:bg-blue-200 transition-all"
+                        >
+                          Choose file
+                        </button>
+                      </div>
+                    ) : (
+                      <UploadFileErrorCard
+                        onTryToReuploadFile={() => setFileUploadingError(false)}
+                        className="w-full h-full flex flex-col gap-3 items-center px-5"
+                      />
+                    )}
+                  </UploadFileProcessing>
                 </div>
               </div>
             </div>
@@ -304,8 +321,9 @@ const CreateNftPage = () => {
             </div>
             <div className="flex justify-between items-center">
               <button
-                onClick={onCreateNft}
-                className="bg-blue-600 px-8 py-3 rounded-full text-white font-bold hover:bg-blue-500 transition-all"
+                onClick={onPayStorageFee}
+                className="bg-blue-600 px-8 py-3 rounded-full text-white font-bold hover:bg-blue-500 transition-all disabled:bg-opacity-50 disabled:cursor-not-allowed"
+                disabled={!nftData.name || !nftData.price}
               >
                 Create Item
               </button>
@@ -330,9 +348,12 @@ const CreateNftPage = () => {
       <ProfileMenu />
       {isCreateNftProcessModal && (
         <CreateNftProcessModal
-          uploadFileOnIpfsStatus={uploadFileOnIpfsStatus}
           sendStorageFeeStatus={sendStorageFeeStatus}
           mintNftStatus={mintNftStatus}
+          onPutOnMarket={onPutOnMarket}
+          onCancel={() => setIsCreateNftProcessModal(false)}
+          onMintAgain={onPutOnMarket}
+          mintError={mintEroor}
         />
       )}
     </>
diff --git a/components/EditProfilePage/index.tsx b/components/EditProfilePage/index.tsx
index 9c42a07..390546d 100644
--- a/components/EditProfilePage/index.tsx
+++ b/components/EditProfilePage/index.tsx
@@ -9,6 +9,8 @@ import ipfsClient, { saveFileWithIpfs } from "@lib/ipfsClient";
 import { VSpinner } from "@components/modules/__modules__/_vectors";
 import { Web3Service } from "@lib/web3";
 import { orderObject } from "@lib/Utils";
+import UploadFileProcessing from "@components/modules/__modules__/Card/UploadFileProcessing";
+import UploadFileErrorCard from "@components/modules/__modules__/Card/UploadFileErrorCard";
 
 const EditProfile = () => {
   const [img, setImg] = useState<File | null>(null);
@@ -29,6 +31,7 @@ const EditProfile = () => {
   const [isStatusModal, setIsStatusModal] = useState(false);
   const [isWrongFileSize, setIsWrongFileSize] = useState(false);
   const [isUserAvaterUploading, setIsUserAvatarUploading] = useState(false);
+  const [fileUploadingError, setFileUploadingError] = useState(false);
   const profilePlaceholder =
     "https://lh3.googleusercontent.com/9KIL56q19B9i8BasJfTcVZFn7QOcvdtBqww5dgK5Zk5Mi5w4Ljekw0ibITpf6TBtGnyqcLTDNEEG9OpUC98aLukfcM9yXhSltJoe=w600";
 
@@ -48,8 +51,17 @@ const EditProfile = () => {
     setIsUserAvatarUploading(true);
     const fileUrl = await saveFileWithIpfs(files);
     setIsUserAvatarUploading(false);
-    if (fileUrl) setProfile({ ...profile, avatarUrl: fileUrl });
-    setPreviewImgLink(previewUrl);
+    if (fileUrl) {
+      setProfile({ ...profile, avatarUrl: fileUrl });
+      setPreviewImgLink(previewUrl);
+      setFileUploadingError(false);
+    } else {
+      setFileUploadingError(true);
+    }
+  };
+
+  const onTryToReuploadFile = (e) => {
+    setFileUploadingError(false);
   };
 
   useEffect(() => {
@@ -172,18 +184,21 @@ const EditProfile = () => {
             />
           </div>
           <div className="sm:block sm:w-[30%]">
-            <div className="relative w-fit h-fit">
-              <img
-                src={previewImgLink ? previewImgLink : profilePlaceholder}
-                alt="profile"
-                className=" h-24 w-24 rounded-full object-cover"
+            {!fileUploadingError ? (
+              <div className="relative h-24 w-24">
+                <img
+                  src={previewImgLink ? previewImgLink : profilePlaceholder}
+                  alt="profile"
+                  className="rounded-full object-cover h-full w-full"
+                />
+                <UploadFileProcessing isProcessing={isUserAvaterUploading} />
+              </div>
+            ) : (
+              <UploadFileErrorCard
+                onTryToReuploadFile={onTryToReuploadFile}
+                className="w-full px-1 flex flex-col gap-5"
               />
-              {isUserAvaterUploading && (
-                <div className="absolute w-full h-full top-0 left-0 right-0 bottom-0 flex justify-center items-center bg-white bg-opacity-70 rounded-full">
-                  <VSpinner className="animate-spin text-blue-500 text-3xl" />
-                </div>
-              )}
-            </div>
+            )}
             <p className="my-3 text-xs text-slate-500">
               We recommend an image <br />
               of at least 300 x 300. Gifs work too.
diff --git a/components/modules/__modules__/Card/UploadFileErrorCard/index.tsx b/components/modules/__modules__/Card/UploadFileErrorCard/index.tsx
new file mode 100644
index 0000000..89947fb
--- /dev/null
+++ b/components/modules/__modules__/Card/UploadFileErrorCard/index.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+interface IProps {
+  onTryToReuploadFile: (e) => void;
+  className: string;
+}
+
+const UploadFileErrorCard = ({ onTryToReuploadFile, className }: IProps) => {
+  return (
+    <div className={className}>
+      <p className="text-red-600 text-sm text-center">Some Thing went wrong</p>
+      <button
+        className="bg-red-600 text-white w-full py-2 px-2 rounded-lg"
+        onClick={onTryToReuploadFile}
+      >
+        Try again
+      </button>
+    </div>
+  );
+};
+
+export default UploadFileErrorCard;
diff --git a/components/modules/__modules__/Card/UploadFileProcessing/index.tsx b/components/modules/__modules__/Card/UploadFileProcessing/index.tsx
new file mode 100644
index 0000000..d93eb73
--- /dev/null
+++ b/components/modules/__modules__/Card/UploadFileProcessing/index.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { VSpinner } from "../../_vectors";
+
+interface IProps {
+  isProcessing: boolean;
+  children?: any;
+}
+
+const UploadFileProcessing = ({ isProcessing, children }: IProps) => {
+  if (isProcessing) {
+    return (
+      <div className="absolute w-full h-full top-0 left-0 right-0 bottom-0 flex justify-center items-center bg-white bg-opacity-70 rounded-full">
+        <VSpinner className="animate-spin text-blue-500 text-3xl" />
+      </div>
+    );
+  } else {
+    return <>{children}</>;
+  }
+};
+
+export default UploadFileProcessing;
diff --git a/flajl b/flajl
new file mode 100644
index 0000000..fa79369
--- /dev/null
+++ b/flajl
@@ -0,0 +1,17 @@
+  develop
+  fix-get-wallet-balance
+  fix-remove-dummy-data
+* fix-users-connect-to-their-wallet
+  ft-create-Nft-page
+  ft-edit-profile-activity
+  ft-full-home-page
+  ft-improve-profile-activities-experience
+  ft-mint-NFT-activity
+  ft-place-a-bid-to-an-auction
+  ft-profile-menu
+  ft-user-avatar-component
+  fx-close-wallet-modal-on-successful-connection
+  fx-drop-page-ui
+  fx-home-page-fist-render
+  fx-landing-UI
+  trust-wallet-integration
diff --git a/lib/Utils.ts b/lib/Utils.ts
index 7a497ee..456ff8f 100644
--- a/lib/Utils.ts
+++ b/lib/Utils.ts
@@ -1,3 +1,5 @@
+import { NFT } from "./models/GeneralModel";
+
 export const removeEmpty = (obj: any) => {
   Object.keys(obj).forEach((k) => {
     if (obj[k] === undefined || obj[k] === "" || obj[k] === null) {
diff --git a/lib/services/BackendApiService.ts b/lib/services/BackendApiService.ts
index de0bd31..59e3bfd 100644
--- a/lib/services/BackendApiService.ts
+++ b/lib/services/BackendApiService.ts
@@ -59,7 +59,6 @@ class BackendApiService {
   }
 
   async mintNft(nftData: NFT) {
-    console.log("nft data on endpoin", nftData);
     try {
       const mintNFtEndpoint = "/nfts";
       const response = await http.post(
diff --git a/lib/web3/service.ts b/lib/web3/service.ts
index d5850df..91a1e59 100644
--- a/lib/web3/service.ts
+++ b/lib/web3/service.ts
@@ -18,16 +18,16 @@ class Web3Service {
       CHAINS_ENV.polygon.nodeRPC
     );
     this.web3Instance = new Web3(Web3.givenProvider || "http://localhost:8545");
-    // web3Instance: Web3
   }
 
   public contract(chain: TChain = "polygon") {
     const network = this.getChainByName(chain);
-    return new ethers.Contract(
-      network.mintContractAddress,
-      NFTABI.abi,
-      this.provider.getSigner(LocalStorage.getItem("ongama_signer_address"))
-    );
+
+    const signer = new ethers.providers.Web3Provider(
+      this.web3Instance.givenProvider
+    ).getSigner(LocalStorage.getItem("ongama_signer_address")!);
+
+    return new ethers.Contract(network.mintContractAddress, NFTABI.abi, signer);
   }
 
   public getChainByName(chain: TChain = "polygon") {
@@ -101,12 +101,10 @@ class Web3Service {
           `${process.env.NEXT_PUBLIC_STORAGE_FEE}`,
           "ether"
         ),
-        data: this.web3Instance.utils.toHex(""),
-        gas: 210000,
       },
       (err) => {
         if (err) {
-          console.log(err);
+          console.log("send storage fee error", err);
           return null;
         }
       }