Lab 2776 check a way to limit a asset image size when show it on klever scan

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);
@@ -40,10 +39,14 @@ export const BasicInfoSection: React.FC<PropsWithChildren<ISectionProps>> = ({
       '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>
   );

src/components/TransactionForms/CustomForms/CreateAsset/index.tsx

@@ -83,6 +83,7 @@ export const CreateAsset: React.FC<PropsWithChildren<IContractProps>> = ({
           type="dropdown"
           options={assetTypes}
           defaultValue={0}
+          required={true}
         />
       </FormSection>
       <BasicInfoSection {...sectionProps} />

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?.();
             }

src/services/requests/home/index.ts

@@ -477,9 +477,13 @@ const homeKfiPriceCall = async (): Promise<
     });
 
     if (!res.error || res.error === '') {
-      const data = res?.data?.prices?.Exchanges.find(
-        (exchange: any) => exchange.ExchangeName === 'Klever',
-      );
+      const data =
+        res?.data?.prices?.Exchanges.find(
+          (exchange: any) => exchange.ExchangeName === 'Klever',
+        ) ||
+        res?.data?.prices?.Exchanges.find(
+          (exchange: any) => !!exchange.ExchangeName,
+        );
 
       if (!data) return;
 
@@ -644,13 +648,13 @@ export {
   homeKlvChartCall,
   homeKlvDataCall,
   homeLastApprovedProposalCall,
+  homeMostTransactedKDAFee,
+  homeMostTransactedNFTs,
+  homeMostTransactedTokens,
   homeNodes,
   homeProposalsCall,
   homeTotalActiveValidators,
   homeTotalValidators,
   homeTransactionsCall,
   homeYesterdayAccountsCall,
-  homeMostTransactedTokens,
-  homeMostTransactedNFTs,
-  homeMostTransactedKDAFee,
 };

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];
 };