feat: ✨ Check a way to limit a asset image size when show it on Kleve…

…rScan
klever-io · Sep 10, 2024 · adf6e7f · adf6e7f
1 parent f886e19
commit adf6e7f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "explorer",
-  "version": "3.3.8",
+  "version": "3.3.7",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {

diff --git a/src/components/TransactionForms/CustomForms/CreateAsset/BasicInfoSection/index.tsx b/src/components/TransactionForms/CustomForms/CreateAsset/BasicInfoSection/index.tsx
@@ -18,8 +18,7 @@ export const BasicInfoSection: React.FC<PropsWithChildren<ISectionProps>> = ({
   isFungible,
 }) => {
   const [logoError, setLogoError] = useState<string | null>(null);
-  const { watch, trigger, setError, clearErrors } =
-    useFormContext<ICreateAsset>();
+  const { watch, trigger } = useFormContext<ICreateAsset>();
   const { walletAddress } = useExtension();
   const [isEqual, setIsEqual] = useState(false);
   const [iAgree, setIAgree] = useState(false);
@@ -32,18 +31,22 @@ export const BasicInfoSection: React.FC<PropsWithChildren<ISectionProps>> = ({
 
   useEffect(() => {
     trigger('initialSupply');
-    trigger('maxSupply');
+    trigger('logo');
   }, [precision, trigger]);
 
   const isValidLogo = async () => {
     const logoErrorMsg =
       'The logo link is invalid, which could lead to your logo not being displayed.';
     try {
       if (!!logo) {
-        const isValid = await validateImgUrl(logo, 2000);
+        const [isValid, erroMessage] = await validateImgUrl(logo, 2000);
         if (!isValid) {
-          setLogoError(logoErrorMsg);
-          return;
+          if (erroMessage) {
+            return erroMessage;
+          } else {
+            setLogoError(logoErrorMsg);
+            return false;
+          }
         }
       }
       setLogoError(null);
@@ -56,13 +59,10 @@ export const BasicInfoSection: React.FC<PropsWithChildren<ISectionProps>> = ({
     setIAgree(old => !old);
   }
 
-  useEffect(() => {
-    isValidLogo();
-  }, [logo]);
-
   useEffect(() => {
     trigger('initialSupply');
   }, [iAgree]);
+
   useEffect(() => {
     if (initialSupply === maxSupply) {
       setIsEqual(true);
@@ -140,6 +140,7 @@ export const BasicInfoSection: React.FC<PropsWithChildren<ISectionProps>> = ({
         span={2}
         tooltip={tooltip.logo}
         logoError={logoError}
+        propsValidate={isValidLogo}
       />
     </FormSection>
   );

diff --git a/src/components/TransactionForms/FormInput/index.tsx b/src/components/TransactionForms/FormInput/index.tsx
@@ -236,6 +236,12 @@ const FormInput: React.FC<
             type,
             customOnChange,
           ),
+          validate: (value: any) => {
+            if (propsValidate) {
+              return propsValidate?.();
+            }
+            return true;
+          },
         })
       : register(name, {
           valueAsNumber: true,
@@ -282,6 +288,7 @@ const FormInput: React.FC<
                   : 'Only integer numbers allowed';
               }
             }
+
             if (propsValidate) {
               return propsValidate?.();
             }
@@ -509,7 +516,7 @@ const FormInput: React.FC<
         type !== 'textarea' &&
         type !== 'object' &&
         type !== 'file' &&
-        type !== 'hidden' && <StyledInput {...inputProps} />}
+        type !== 'hidden' && <StyledInput {...inputProps} {...registerRest} />}
 
       {error && (
         <ErrorMessage

diff --git a/src/utils/imageValidate/index.ts b/src/utils/imageValidate/index.ts
@@ -19,6 +19,7 @@ export const isImage = async (
   const timeoutPromise = new Promise(resolve => {
     setTimeout(() => resolve(false), timeout);
   });
+
   return Promise.race([imgPromise, timeoutPromise]);
 };
 
@@ -59,17 +60,48 @@ export const validateImgRequestHeader = async (
 export const validateImgUrl = async (
   url: string,
   timeout: number,
-): Promise<boolean> => {
+): Promise<[boolean, string?]> => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const sizeInKB = blob.size / 1024;
+    let width = 0;
+    let height = 0;
+
+    if (sizeInKB > 1024 * 3) {
+      return [false, 'maximum image size should be 3mb'];
+    }
+
+    const img = new Image();
+    img.src = URL.createObjectURL(blob);
+
+    const imgLoaded = new Promise<[number, number]>(resolve => {
+      img.onload = () => {
+        width = img.width;
+        height = img.height;
+        resolve([width, height]);
+      };
+    });
+
+    [width, height] = await imgLoaded;
+
+    if (width > 1920 || height > 1080) {
+      return [false, 'maximum image size should be 1920x1080'];
+    }
+  } catch (error) {
+    return [false];
+  }
+
   if (regexImgUrl(url)) {
-    return true;
+    return [true];
   }
 
   if (await validateImgRequestHeader(url, timeout)) {
-    return true;
+    return [true];
   }
 
   if (await isImage(url, timeout)) {
-    return true;
+    return [true];
   }
-  return false;
+  return [false];
 };