Refactor

src/components/NetworkSwitcher/hooks/useRefreshNativeAuthTokenForNetwork.ts

@@ -50,7 +50,7 @@ export const useRefreshNativeAuthTokenForNetwork = () => {
     if (!preventPageReload) {
       setTimeout(() => {
         window.location.reload();
-      }, 10);
+      });
     }
   };
 };

src/helpers/validation/getFormHasError.ts

@@ -1,7 +1,8 @@
-export const getFormHasError = ({
-  form,
-  fieldName
-}: {
-  form: { touched: Record<string, any>; errors: Record<string, any> };
-  fieldName: string;
-}) => form.touched[fieldName] && form.errors[fieldName];
+interface FormHasErrorType {
+  touched: Record<string, any>;
+  errors: Record<string, any>;
+}
+
+export const getFormHasError =
+  (form: FormHasErrorType) => (fieldName: string) =>
+    form.touched[fieldName] && form.errors[fieldName];

src/pages/CreateRecover/components/CreateRecoverPassword/components/CreateRecoverPasswodFormFields.tsx

@@ -38,59 +38,56 @@ export const CreateRecoverPasswordFormFields = ({
       {infoSection}
 
       <div className='flex flex-col items-center justify-center gap-4 w-full mb-10'>
-        {fields.map((field, index) => (
-          <div key={field.name} className='w-full flex flex-col relative'>
-            <label
-              htmlFor={field.name}
-              className='block text-sm font-bold mb-2'
-            >
-              {field.label}
-            </label>
-            <input
-              autoFocus={index === 0}
-              className={classNames(
-                'block w-full p-2 text-sm text-gray-700 placeholder-gray-400 border border-gray-300 rounded relative',
-                {
-                  'border-red-600': getFormHasError({
-                    form: formikProps,
-                    fieldName: field.name
-                  })
-                }
-              )}
-              data-testid={DataTestIdsEnum[field.name]}
-              id={field.name}
-              onBlur={formikProps.handleBlur}
-              onChange={formikProps.handleChange}
-              type={isSet ? 'text' : field.type}
-            />
-            {field.name.startsWith(CreateRecoverFieldNamesEnum.password) && (
-              <PasswordVisibilityToggle
-                isVisible={isSet}
-                onVisibilityChange={toggleState}
-              />
-            )}
-            {getFormHasError({
-              form: formikProps,
-              fieldName: field.name
-            }) && (
-              <div
-                data-testid={DataTestIdsEnum.passwordError}
-                className='text-red-600 text-sm mt-1'
+        {fields.map((field, index) => {
+          const checkFormHasError = getFormHasError(formikProps);
+          const hasError = checkFormHasError(field.name);
+
+          return (
+            <div key={field.name} className='w-full flex flex-col relative'>
+              <label
+                htmlFor={field.name}
+                className='block text-sm font-bold mb-2'
               >
-                {formikProps.errors[field.name]}
-              </div>
-            )}
+                {field.label}
+              </label>
+              <input
+                autoFocus={index === 0}
+                className={classNames(
+                  'block w-full p-2 text-sm text-gray-700 placeholder-gray-400 border border-gray-300 rounded relative',
+                  {
+                    'border-red-600': hasError
+                  }
+                )}
+                data-testid={DataTestIdsEnum[field.name]}
+                id={field.name}
+                onBlur={formikProps.handleBlur}
+                onChange={formikProps.handleChange}
+                type={isSet ? 'text' : field.type}
+              />
+              {field.name.startsWith(CreateRecoverFieldNamesEnum.password) && (
+                <PasswordVisibilityToggle
+                  isVisible={isSet}
+                  onVisibilityChange={toggleState}
+                />
+              )}
+              {hasError && (
+                <div
+                  data-testid={DataTestIdsEnum.passwordError}
+                  className='text-red-600 text-sm mt-1'
+                >
+                  {formikProps.errors[field.name]}
+                </div>
+              )}
 
-            {!getFormHasError({
-              form: formikProps,
-              fieldName: field.name
-            }) && (
-              <span className='text-sm text-gray-400 mt-1'>
-                At least 8 characters, an uppercase letter, a symbol & a number.
-              </span>
-            )}
-          </div>
-        ))}
+              {!hasError && (
+                <span className='text-sm text-gray-400 mt-1'>
+                  At least 8 characters, an uppercase letter, a symbol & a
+                  number.
+                </span>
+              )}
+            </div>
+          );
+        })}
       </div>
 
       <Button

src/pages/IssueCollection/components/IssueCollectionForm.tsx

@@ -15,6 +15,15 @@ export const IssueCollectionForm = () => {
   const sft =
     CollectionTypeByNftEnum[NftEnumType.SemiFungibleESDT].toUpperCase();
 
+  const checkFormHasError = getFormHasError(formik);
+  const tokenNameHasError = checkFormHasError(
+    IssueCollectionFieldsEnum.tokenName
+  );
+
+  const tokenTickerHasError = checkFormHasError(
+    IssueCollectionFieldsEnum.tokenTicker
+  );
+
   return (
     <form
       onSubmit={formik.handleSubmit}
@@ -78,10 +87,7 @@ export const IssueCollectionForm = () => {
             className={classNames(
               'block w-full p-2 text-sm text-gray-700 placeholder-gray-400 border border-gray-300 rounded',
               {
-                'border-red-600': getFormHasError({
-                  form: formik,
-                  fieldName: IssueCollectionFieldsEnum.tokenName
-                })
+                'border-red-600': tokenNameHasError
               }
             )}
             data-testid={DataTestIdsEnum.tokenNameInput}
@@ -92,10 +98,7 @@ export const IssueCollectionForm = () => {
             placeholder='Enter token name'
             value={formik.values[IssueCollectionFieldsEnum.tokenName]}
           />
-          {getFormHasError({
-            form: formik,
-            fieldName: IssueCollectionFieldsEnum.tokenName
-          }) && (
+          {tokenNameHasError && (
             <div
               className='text-red-600 text-sm mt-1'
               data-testid={DataTestIdsEnum.tokenNameError}
@@ -115,10 +118,7 @@ export const IssueCollectionForm = () => {
             className={classNames(
               'block w-full p-2 text-sm text-gray-700 placeholder-gray-400 border border-gray-300 rounded',
               {
-                'border-red-600': getFormHasError({
-                  form: formik,
-                  fieldName: IssueCollectionFieldsEnum.tokenTicker
-                })
+                'border-red-600': tokenTickerHasError
               }
             )}
             data-testid={DataTestIdsEnum.tokenTickerInput}
@@ -129,10 +129,7 @@ export const IssueCollectionForm = () => {
             placeholder='Enter token ticker'
             value={formik.values[IssueCollectionFieldsEnum.tokenTicker]}
           />
-          {getFormHasError({
-            form: formik,
-            fieldName: IssueCollectionFieldsEnum.tokenTicker
-          }) && (
+          {tokenTickerHasError && (
             <div
               className='text-red-600 text-sm mt-1'
               data-testid={DataTestIdsEnum.tokenTickerError}

src/pages/IssueNft/components/IssueNftForm.tsx

@@ -12,6 +12,13 @@ export const IssueNftForm = () => {
   const { formik, isLoading, collections, selectedCollection } =
     useIssueNftForm();
 
+  const checkFormHasError = getFormHasError(formik);
+  const nameHasError = checkFormHasError(IssueNftFieldsEnum.name);
+  const quantityHasError = checkFormHasError(IssueNftFieldsEnum.quantity);
+  const royaltiesHasError = checkFormHasError(IssueNftFieldsEnum.royalties);
+  const imageUrlHasError = checkFormHasError(IssueNftFieldsEnum.imageUrl);
+  const collectionHasError = checkFormHasError(IssueNftFieldsEnum.collection);
+
   return (
     <form
       onSubmit={formik.handleSubmit}
@@ -40,10 +47,7 @@ export const IssueNftForm = () => {
             }
             value={formik.values[IssueNftFieldsEnum.collection]}
           />
-          {getFormHasError({
-            form: formik,
-            fieldName: IssueNftFieldsEnum.collection
-          }) && (
+          {collectionHasError && (
             <div
               className='text-red-600 text-sm mt-1'
               data-testid={DataTestIdsEnum.collectionError}
@@ -63,10 +67,7 @@ export const IssueNftForm = () => {
             className={classNames(
               'block w-full p-2 text-sm text-gray-700 placeholder-gray-400 border border-gray-300 rounded',
               {
-                'border-red-600': getFormHasError({
-                  form: formik,
-                  fieldName: IssueNftFieldsEnum.name
-                })
+                'border-red-600': nameHasError
               }
             )}
             data-testid={DataTestIdsEnum.nameInput}
@@ -77,10 +78,7 @@ export const IssueNftForm = () => {
             placeholder='Enter name'
             value={formik.values[IssueNftFieldsEnum.name]}
           />
-          {getFormHasError({
-            form: formik,
-            fieldName: IssueNftFieldsEnum.name
-          }) && (
+          {nameHasError && (
             <div
               className='text-red-600 text-sm mt-1'
               data-testid={DataTestIdsEnum.nameError}
@@ -101,10 +99,7 @@ export const IssueNftForm = () => {
               className={classNames(
                 'block w-full p-2 text-sm text-gray-700 placeholder-gray-400 border border-gray-300 rounded',
                 {
-                  'border-red-600': getFormHasError({
-                    form: formik,
-                    fieldName: IssueNftFieldsEnum.quantity
-                  })
+                  'border-red-600': quantityHasError
                 }
               )}
               data-testid={DataTestIdsEnum.quantityInput}
@@ -116,10 +111,7 @@ export const IssueNftForm = () => {
               type='number'
               value={formik.values[IssueNftFieldsEnum.quantity]}
             />
-            {getFormHasError({
-              form: formik,
-              fieldName: IssueNftFieldsEnum.quantity
-            }) && (
+            {quantityHasError && (
               <div
                 className='text-red-600 text-sm mt-1'
                 data-testid={DataTestIdsEnum.quantityError}
@@ -140,10 +132,7 @@ export const IssueNftForm = () => {
             className={classNames(
               'block w-full p-2 text-sm text-gray-700 placeholder-gray-400 border border-gray-300 rounded',
               {
-                'border-red-600': getFormHasError({
-                  form: formik,
-                  fieldName: IssueNftFieldsEnum.royalties
-                })
+                'border-red-600': royaltiesHasError
               }
             )}
             data-testid={DataTestIdsEnum.royaltiesInput}
@@ -155,10 +144,7 @@ export const IssueNftForm = () => {
             type='number'
             value={formik.values[IssueNftFieldsEnum.royalties]}
           />
-          {getFormHasError({
-            form: formik,
-            fieldName: IssueNftFieldsEnum.royalties
-          }) && (
+          {royaltiesHasError && (
             <div
               className='text-red-600 text-sm mt-1'
               data-testid={DataTestIdsEnum.royaltiesError}
@@ -178,10 +164,7 @@ export const IssueNftForm = () => {
             className={classNames(
               'block w-full p-2 text-sm text-gray-700 placeholder-gray-400 border border-gray-300 rounded',
               {
-                'border-red-600': getFormHasError({
-                  form: formik,
-                  fieldName: IssueNftFieldsEnum.imageUrl
-                })
+                'border-red-600': imageUrlHasError
               }
             )}
             data-testid={DataTestIdsEnum.imageUrlInput}
@@ -192,10 +175,7 @@ export const IssueNftForm = () => {
             placeholder='Enter image URL'
             value={formik.values[IssueNftFieldsEnum.imageUrl]}
           />
-          {getFormHasError({
-            form: formik,
-            fieldName: IssueNftFieldsEnum.collection
-          }) && (
+          {collectionHasError && (
             <div
               className='text-red-600 text-sm mt-1'
               data-testid={DataTestIdsEnum.imageUrlError}