error fixes

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -102,7 +102,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     return (
       <AddressInput<Inputs, 'contract_address_hash'>
         field={ field }
-        error={ errors.contract_address_hash?.message }
+        error={ errors.contract_address_hash }
         backgroundColor={ formBackgroundColor }
         placeholder="Smart contract address (0x...)"
       />

ui/privateTags/AddressModal/AddressForm.tsx

@@ -83,11 +83,11 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   };
 
   const renderAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'address'>}) => {
-    return <AddressInput<Inputs, 'address'> field={ field } error={ errors.address?.message } backgroundColor={ formBackgroundColor }/>;
+    return <AddressInput<Inputs, 'address'> field={ field } error={ errors.address } backgroundColor={ formBackgroundColor }/>;
   }, [ errors, formBackgroundColor ]);
 
   const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag?.message } backgroundColor={ formBackgroundColor }/>;
+    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } backgroundColor={ formBackgroundColor }/>;
   }, [ errors, formBackgroundColor ]);
 
   return (

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -82,11 +82,11 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
   };
 
   const renderTransactionInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'transaction'>}) => {
-    return <TransactionInput field={ field } error={ errors.transaction?.message } backgroundColor={ formBackgroundColor }/>;
+    return <TransactionInput field={ field } error={ errors.transaction } backgroundColor={ formBackgroundColor }/>;
   }, [ errors, formBackgroundColor ]);
 
   const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag?.message } backgroundColor={ formBackgroundColor }/>;
+    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } backgroundColor={ formBackgroundColor }/>;
   }, [ errors, formBackgroundColor ]);
 
   return (

ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx

 import { IconButton, Icon } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
-import type { ControllerRenderProps, Control } from 'react-hook-form';
+import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import MinusIcon from 'icons/minus.svg';
@@ -14,7 +14,7 @@ interface Props {
   control: Control<Inputs>;
   index: number;
   fieldsLength: number;
-  error?: string;
+  error?: FieldError;
   onAddFieldClick: (e: React.SyntheticEvent) => void;
   onRemoveFieldClick: (index: number) => (e: React.SyntheticEvent) => void;
 }

ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx

 import { FormControl, FormLabel, Textarea } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
-import type { ControllerRenderProps, Control } from 'react-hook-form';
+import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import getPlaceholderWithError from 'lib/getPlaceholderWithError';
@@ -11,7 +11,7 @@ const TEXT_INPUT_MAX_LENGTH = 255;
 
 interface Props {
   control: Control<Inputs>;
-  error?: string;
+  error?: FieldError;
 }
 
 export default function PublicTagFormComment({ control, error }: Props) {
@@ -24,7 +24,7 @@ export default function PublicTagFormComment({ control, error }: Props) {
           size="lg"
         />
         <FormLabel>
-          { getPlaceholderWithError('Specify the reason for adding tags and color preference(s)', error) }
+          { getPlaceholderWithError('Specify the reason for adding tags and color preference(s)', error?.message) }
         </FormLabel>
       </FormControl>
     );

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -158,7 +158,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
             fieldName="fullName"
             control={ control }
             label={ placeholders.fullName }
-            error={ errors.fullName?.message }
+            error={ errors.fullName }
             required
           />
         </GridItem>
@@ -167,7 +167,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
             fieldName="companyName"
             control={ control }
             label={ placeholders.companyName }
-            error={ errors.companyName?.message }
+            error={ errors.companyName }
           />
         </GridItem>
         <GridItem>
@@ -176,7 +176,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
             control={ control }
             label={ placeholders.email }
             pattern={ EMAIL_REGEXP }
-            error={ errors.email?.message }
+            error={ errors.email }
             required
           />
         </GridItem>
@@ -185,7 +185,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
             fieldName="companyUrl"
             control={ control }
             label={ placeholders.companyUrl }
-            error={ errors?.companyUrl?.message }
+            error={ errors?.companyUrl }
           />
         </GridItem>
       </Grid>
@@ -198,7 +198,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
           fieldName="tags"
           control={ control }
           label={ placeholders.tags }
-          error={ errors.tags?.message }
+          error={ errors.tags }
           required/>
       </Box>
       { fields.map((field, index) => {
@@ -206,7 +206,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
           <Box position="relative" key={ field.id } marginBottom={ 4 }>
             <PublicTagFormAddressInput
               control={ control }
-              error={ errors?.addresses?.[index]?.message }
+              error={ errors?.addresses?.[index] }
               index={ index }
               fieldsLength={ fields.length }
               onAddFieldClick={ onAddFieldClick }
@@ -216,7 +216,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
         );
       }) }
       <Box marginBottom={ 8 }>
-        <PublicTagFormComment control={ control } error={ errors.comment?.message }/>
+        <PublicTagFormComment control={ control } error={ errors.comment }/>
       </Box>
       <HStack spacing={ 6 }>
         <Button

ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx

 import { FormControl, FormLabel, Input } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
-import type { ControllerRenderProps, FieldValues, Path, Control } from 'react-hook-form';
+import type { ControllerRenderProps, FieldError, FieldValues, Path, Control } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import getPlaceholderWithError from 'lib/getPlaceholderWithError';
@@ -13,7 +13,7 @@ interface Props<TInputs extends FieldValues> {
   required?: boolean;
   control: Control<TInputs, object>;
   pattern?: RegExp;
-  error?: string;
+  error?: FieldError;
 }
 
 export default function PublicTagsFormInput<Inputs extends FieldValues>({
@@ -34,7 +34,7 @@ export default function PublicTagsFormInput<Inputs extends FieldValues>({
           isInvalid={ Boolean(error) }
           maxLength={ TEXT_INPUT_MAX_LENGTH }
         />
-        <FormLabel>{ getPlaceholderWithError(label, error) }</FormLabel>
+        <FormLabel>{ getPlaceholderWithError(label, error?.message) }</FormLabel>
       </FormControl>
     );
   }, [ label, required, error ]);

ui/shared/AddressInput.tsx

@@ -4,7 +4,7 @@ import {
   FormLabel,
 } from '@chakra-ui/react';
 import React from 'react';
-import type { ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
+import type { ControllerRenderProps, FieldError, FieldValues, Path } from 'react-hook-form';
 
 import getPlaceholderWithError from 'lib/getPlaceholderWithError';
 import { ADDRESS_LENGTH } from 'lib/validations/address';
@@ -14,7 +14,7 @@ type Props<TInputs extends FieldValues, TInputName extends Path<TInputs>> = {
   size?: string;
   placeholder?: string;
   backgroundColor?: string;
-  error?: string;
+  error?: FieldError;
 }
 
 export default function AddressInput<Inputs extends FieldValues, Name extends Path<Inputs>>(
@@ -33,7 +33,7 @@ export default function AddressInput<Inputs extends FieldValues, Name extends Pa
         maxLength={ ADDRESS_LENGTH }
         size={ size }
       />
-      <FormLabel>{ getPlaceholderWithError(placeholder, error) }</FormLabel>
+      <FormLabel>{ getPlaceholderWithError(placeholder, error?.message) }</FormLabel>
     </FormControl>
   );
 }

ui/shared/TagInput.tsx

@@ -4,7 +4,7 @@ import {
   FormLabel,
 } from '@chakra-ui/react';
 import React from 'react';
-import type { ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
+import type { ControllerRenderProps, FieldError, FieldValues, Path } from 'react-hook-form';
 
 import getPlaceholderWithError from 'lib/getPlaceholderWithError';
 
@@ -12,7 +12,7 @@ const TAG_MAX_LENGTH = 35;
 
 type Props<TInputs extends FieldValues, TInputName extends Path<TInputs>> = {
   field: ControllerRenderProps<TInputs, TInputName>;
-  error?: string;
+  error?: FieldError;
   backgroundColor?: string;
 }
 
@@ -24,7 +24,7 @@ function TagInput<Inputs extends FieldValues, Name extends Path<Inputs>>({ field
         isInvalid={ Boolean(error) }
         maxLength={ TAG_MAX_LENGTH }
       />
-      <FormLabel>{ getPlaceholderWithError(`Private tag (max 35 characters)`, error) }</FormLabel>
+      <FormLabel>{ getPlaceholderWithError(`Private tag (max 35 characters)`, error?.message) }</FormLabel>
     </FormControl>
   );
 }

ui/watchlist/AddressModal/AddressForm.tsx

@@ -134,13 +134,13 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <AddressInput<Inputs, 'address'>
         field={ field }
         backgroundColor={ formBackgroundColor }
-        error={ errors.address?.message }
+        error={ errors.address }
       />
     );
   }, [ errors, formBackgroundColor ]);
 
   const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag?.message } backgroundColor={ formBackgroundColor }/>;
+    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } backgroundColor={ formBackgroundColor }/>;
   }, [ errors, formBackgroundColor ]);
 
   // eslint-disable-next-line react/display-name