add error message for invalid input and change mode

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -34,7 +34,7 @@ const NAME_MAX_LENGTH = 255;
 
 const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   const { control, handleSubmit, formState: { errors, isValid, isDirty }, setError } = useForm<Inputs>({
-    mode: 'all',
+    mode: 'onTouched',
     defaultValues: {
       token: data?.api_key || '',
       name: data?.name || '',
@@ -113,7 +113,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           maxLength={ NAME_MAX_LENGTH }
         />
         <FormLabel>
-          <InputPlaceholder text="Application name for API key (e.g Web3 project)" error={ errors.name?.message }/>
+          <InputPlaceholder text="Application name for API key (e.g Web3 project)" error={ errors.name }/>
         </FormLabel>
       </FormControl>
     );

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -42,7 +42,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       name: data?.name || '',
       abi: JSON.stringify(data?.abi) || '',
     },
-    mode: 'all',
+    mode: 'onTouched',
   });
 
   const queryClient = useQueryClient();
@@ -118,7 +118,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           isInvalid={ Boolean(errors.name) }
           maxLength={ NAME_MAX_LENGTH }
         />
-        <InputPlaceholder text="Project name" error={ errors.name?.message }/>
+        <InputPlaceholder text="Project name" error={ errors.name }/>
       </FormControl>
     );
   }, [ errors, formBackgroundColor ]);
@@ -132,7 +132,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           minH="300px"
           isInvalid={ Boolean(errors.abi) }
         />
-        <InputPlaceholder text="Custom ABI [{...}] (JSON format)" error={ errors.abi?.message }/>
+        <InputPlaceholder text="Custom ABI [{...}] (JSON format)" error={ errors.abi }/>
       </FormControl>
     );
   }, [ errors, formBackgroundColor ]);

ui/privateTags/AddressModal/AddressForm.tsx

@@ -35,7 +35,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   const fetch = useFetch();
   const [ pending, setPending ] = useState(false);
   const { control, handleSubmit, formState: { errors, isValid, isDirty }, setError } = useForm<Inputs>({
-    mode: 'all',
+    mode: 'onTouched',
     defaultValues: {
       address: data?.address_hash || '',
       tag: data?.name || '',

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -36,7 +36,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
   const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   const { control, handleSubmit, formState: { errors, isValid, isDirty }, setError } = useForm<Inputs>({
-    mode: 'all',
+    mode: 'onTouched',
     defaultValues: {
       transaction: data?.transaction_hash || '',
       tag: data?.name || '',

ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx

@@ -25,7 +25,7 @@ export default function PublicTagFormComment({ control, error, size }: Props) {
           isInvalid={ Boolean(error) }
         />
         <FormLabel>
-          <InputPlaceholder text="Specify the reason for adding tags and color preference(s)" error={ error?.message }/>
+          <InputPlaceholder text="Specify the reason for adding tags and color preference(s)" error={ error }/>
         </FormLabel>
       </FormControl>
     );

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -73,7 +73,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
       comment: data?.additional_comment || '',
       action: data?.is_owner === undefined || data?.is_owner ? 'add' : 'report',
     },
-    mode: 'all',
+    mode: 'onTouched',
   });
 
   const { fields, append, remove } = useFieldArray({

ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx

@@ -36,7 +36,7 @@ export default function PublicTagsFormInput<Inputs extends FieldValues>({
           isInvalid={ Boolean(error) }
           maxLength={ TEXT_INPUT_MAX_LENGTH }
         />
-        <InputPlaceholder text={ label } error={ error?.message }/>
+        <InputPlaceholder text={ label } error={ error }/>
       </FormControl>
     );
   }, [ label, required, error, size ]);

ui/shared/AddressInput.tsx

@@ -32,7 +32,7 @@ export default function AddressInput<Inputs extends FieldValues, Name extends Pa
         isInvalid={ Boolean(error) }
         maxLength={ ADDRESS_LENGTH }
       />
-      <InputPlaceholder text={ placeholder } error={ error?.message }/>
+      <InputPlaceholder text={ placeholder } error={ error }/>
     </FormControl>
   );
 }

ui/shared/InputPlaceholder.tsx

 import { FormLabel, chakra } from '@chakra-ui/react';
 import React from 'react';
+import type { FieldError } from 'react-hook-form';
 
 interface Props {
   text: string;
-  error?: string;
+  error?: FieldError;
 }
 
 const InputPlaceholder = ({ text, error }: Props) => {
+  let errorMessage = error?.message;
+
+  if (!errorMessage && error?.type === 'pattern') {
+    errorMessage = 'Invalid format';
+  }
+
   return (
     <FormLabel>
       <chakra.span>{ text }</chakra.span>
-      { error && <chakra.span order={ 3 } whiteSpace="pre"> - { error }</chakra.span> }
+      { errorMessage && <chakra.span order={ 3 } whiteSpace="pre"> - { errorMessage }</chakra.span> }
     </FormLabel>
   );
 };

ui/shared/TagInput.tsx

@@ -23,7 +23,7 @@ function TagInput<Inputs extends FieldValues, Name extends Path<Inputs>>({ field
         isInvalid={ Boolean(error) }
         maxLength={ TAG_MAX_LENGTH }
       />
-      <InputPlaceholder text="Private tag (max 35 characters)" error={ error?.message }/>
+      <InputPlaceholder text="Private tag (max 35 characters)" error={ error }/>
     </FormControl>
   );
 }

ui/shared/TransactionInput.tsx

@@ -22,7 +22,7 @@ function TransactionInput<Field extends Partial<ControllerRenderProps<FieldValue
         isInvalid={ Boolean(error) }
         maxLength={ TRANSACTION_HASH_LENGTH }
       />
-      <InputPlaceholder text="Transaction hash (0x...)" error={ error?.message }/>
+      <InputPlaceholder text="Transaction hash (0x...)" error={ error }/>
     </FormControl>
   );
 }

ui/watchlist/AddressModal/AddressForm.tsx

@@ -80,7 +80,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       notification: data ? data.notification_methods.email : true,
       notification_settings: notificationsDefault,
     },
-    mode: 'all',
+    mode: 'onTouched',
   });
 
   const queryClient = useQueryClient();