image resizer added to generate the imageUrlThumnail, and requested r…

…eviews applied

components/CreateNftPage/CreateDropModal/index.tsx

@@ -8,16 +8,30 @@ import { useRecoilValue } from "recoil";
 import { currentAccountState } from "@lib/atoms";
 import { Web3Service } from "@lib/web3";
 import LocalStorage from "@lib/helper/LocalStorage";
-import { v4 as uuid } from "uuid";
 import { backendApiService } from "@lib/services/BackendApiService";
 import ShowWidget from "@components/modules/__modules__/ShowWidget";
 import CreateDropProcessingModal from "./CreateDropProcessingModal";
 import UploadFileProcessing from "@components/modules/__modules__/Card/UploadFileProcessing";
+import imageResizer from "@lib/helper/ImageResizer";
+import { generateTokenUri as generateDropId } from "@lib/Utils";
 
 interface IProps {
   setIsCreateDropModal: (value: boolean) => void;
 }
 
+const DEFAULT_DROP_DATA: ICreateDrop = {
+  creationFeeTransactionHash: "",
+  creatorId: 0,
+  creatorAddress: "",
+  creatorUsername: "",
+  description: "",
+  dropID: "",
+  imageUrl: "",
+  imageUrlThumbnail: "",
+  title: "",
+  collection: true,
+};
+
 const CreateDropModal = ({ setIsCreateDropModal }: IProps) => {
   const [previewUrl, setPreviewUrl] = useState("");
   const [newDropIsLoading, setNewDropImageIsLoading] = useState(false);
@@ -32,18 +46,7 @@ const CreateDropModal = ({ setIsCreateDropModal }: IProps) => {
   const [isCreateDropProcessingModal, setIsCreateDropProcessingModal] =
     useState(false);
 
-  const [dropData, setDropData] = useState<ICreateDrop>({
-    creationFeeTransactionHash: "",
-    creatorId: 0,
-    creatorAddress: "",
-    creatorUsername: "",
-    description: "",
-    dropID: "",
-    imageUrl: "",
-    imageUrlThumbnail: "",
-    title: "",
-    collection: true,
-  });
+  const [dropData, setDropData] = useState<ICreateDrop>(DEFAULT_DROP_DATA);
 
   const userAccount = useRecoilValue(currentAccountState);
 
@@ -63,19 +66,25 @@ const CreateDropModal = ({ setIsCreateDropModal }: IProps) => {
 
     setNewDropImageIsLoading(true);
     const imageUrl = await saveFileWithWeb3Storage(files);
-    setNewDropImageIsLoading(false);
 
     if (!imageUrl) {
       setFileSavingFailed(true);
       return;
     }
 
+    imageResizer(files[0], async (resizedFile) => {
+      const imageUrlThumbnail = await saveFileWithWeb3Storage([resizedFile]);
+      setNewDropImageIsLoading(false);
+
+      if (imageUrlThumbnail) {
+        setDropData({ ...dropData, imageUrl, imageUrlThumbnail });
+      }
+    });
+
     setFileSavingFailed(false);
 
     const previewUrl = URL.createObjectURL(files[0]);
     setPreviewUrl(previewUrl);
-
-    setDropData({ ...dropData, imageUrl, imageUrlThumbnail: imageUrl });
   };
 
   const onDropDetailsChange = (
@@ -87,11 +96,13 @@ const CreateDropModal = ({ setIsCreateDropModal }: IProps) => {
   };
 
   const onCreateDrop = async () => {
+    console.log(userAccount);
     if (
       !dropData.description ||
       !dropData.title ||
       !dropData.imageUrl ||
-      !dropData.imageUrlThumbnail
+      !dropData.imageUrlThumbnail ||
+      !userAccount
     )
       return;
 
@@ -118,7 +129,7 @@ const CreateDropModal = ({ setIsCreateDropModal }: IProps) => {
       }`,
       creatorId: Number(userAccount?.id),
       creatorUsername: `${userAccount?.username}`,
-      dropID: uuid(),
+      dropID: generateDropId(),
     };
 
     setCreateDropProcessing(true);
@@ -131,29 +142,17 @@ const CreateDropModal = ({ setIsCreateDropModal }: IProps) => {
     }
     setDropSavingOnDatabasefailed(false);
 
-    setDropData({
-      creationFeeTransactionHash: "",
-      creatorId: 0,
-      creatorAddress: "",
-      creatorUsername: "",
-      description: "",
-      dropID: "",
-      imageUrl: "",
-      imageUrlThumbnail: "",
-      title: "",
-      collection: true,
-    });
+    setDropData(DEFAULT_DROP_DATA);
   };
 
   return (
     <div className="fixed top-0 bottom-0 left-0 right-0 w-full h-screen bg-black/80 z-20 flex justify-center items-center mobile:flex-none backdrop-blur-sm">
-      <div
-        role="button"
+      <button
         onClick={onCloseCreateDropModal}
-        className="absolute top-0 right-0 m-10 border border-gray-400 hover:border-gray-200 transition-all cursor-pointer p-2 rounded-full"
+        className="absolute top-0 right-0 m-10 border border-gray-400 hover:border-gray-200 transition-all p-2 rounded-full"
       >
         <CrossVector className="h-6 w-6 cursor-pointer text-white rotate-45" />
-      </div>
+      </button>
       <div className="bg-white dark:bg-darkPrimary w-fit h-fit p-7 rounded-md mobile:absolute mobile:bottom-0 mobile:left-0 mobile:right-0 mobile:w-full mobile:rounded-b-none">
         <ShowWidget
           condition={!isCreateDropProcessingModal}

components/modules/__noAuth/Header/SearchInputBar/index.tsx

@@ -41,9 +41,9 @@ const SearchInputBar = () => {
         className="w-full py-3  bg-transparent placeholder:text-gray-500 outline-none px-2 font-ibmPlexSans "
       />
       {inputValue && (
-        <div role="button" onClick={cleanInputVlaue}>
+        <button onClick={cleanInputVlaue}>
           <CrossVector className="h-4 w-4 cursor-pointer text-gray-600 rotate-45" />
-        </div>
+        </button>
       )}
     </div>
   );

lib/helper/ImageResizer.ts

@@ -0,0 +1,50 @@
+const dataUrlToFileConverter = async (
+  dataUrl: string,
+  fileName: string
+): Promise<File> => {
+  const res: Response = await fetch(dataUrl);
+  const blob: Blob = await res.blob();
+  return new File([blob], fileName, { type: "image/png" });
+};
+
+const imageResizer = (file: File, callback: (resizedFile: File) => void) => {
+  if (!file) return;
+
+  const reader = new FileReader();
+
+  reader.readAsDataURL(file);
+
+  reader.onload = (event) => {
+    const imageElement: HTMLImageElement = document.createElement("img");
+    imageElement.src = `${event.target?.result}`;
+
+    imageElement.onload = async (e) => {
+      const imageTarget = e.target as HTMLImageElement;
+      const { width, height } = imageTarget;
+
+      const canvas = document.createElement("canvas");
+      const maxWidth = 400;
+
+      const scaleSize = maxWidth / width;
+
+      canvas.width = maxWidth;
+      canvas.height = height * scaleSize;
+
+      const canvasContext = canvas.getContext("2d");
+      canvasContext?.drawImage(imageTarget, 0, 0, canvas.width, canvas.height);
+
+      if (canvasContext) {
+        const srcEncoded = canvasContext.canvas.toDataURL(
+          imageTarget.src,
+          "image/jpeg"
+        );
+
+        const resizedFile = await dataUrlToFileConverter(srcEncoded, file.name);
+
+        callback(resizedFile);
+      }
+    };
+  };
+};
+
+export default imageResizer;

lib/web3StorageClient.ts

@@ -4,7 +4,7 @@ const storageClient = new Web3Storage({
   token: `${process.env.NEXT_PUBLIC_WEB3_STORAGE_TOKEN}`,
 });
 
-export const saveFileWithWeb3Storage = async (file: FileList) => {
+export const saveFileWithWeb3Storage = async (file: File[]) => {
   if (!file) return;
 
   const fileIdenfier = await storageClient.put(file);

package.json

@@ -27,7 +27,6 @@
     "react-icons": "^4.3.1",
     "react-identicons": "^1.2.5",
     "recoil": "^0.7.2",
-    "uuid": "^8.3.2",
     "web3": "^1.7.5",
     "web3.storage": "^4.3.0"
   },