refactor

ui/tokenInfo/TokenInfoForm.tsx

@@ -58,7 +58,7 @@ const TokenInfoForm = ({ id }: Props) => {
     return <ContentLoader/>;
   }
 
-  const fieldProps = { control, formState };
+  const fieldProps = { control };
 
   return (
     <form noValidate onSubmit={ onSubmit }>
@@ -104,7 +104,15 @@ const TokenInfoForm = ({ id }: Props) => {
           <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_defi_llama" label="DefiLlama URL "/>
         </GridItem>
       </Grid>
-      <Button type="submit" size="lg" mt={ 8 }>Send request</Button>
+      <Button
+        type="submit"
+        size="lg"
+        mt={ 8 }
+        isLoading={ formState.isSubmitting }
+        loadingText="Send request"
+      >
+        Send request
+      </Button>
     </form>
   );
 };

ui/tokenInfo/fields/TokenInfoFieldDocs.tsx

 import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
@@ -9,27 +9,24 @@ import { validator } from 'lib/validations/url';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
 }
 
-const TokenInfoFieldDocs = ({ formState, control, isReadOnly }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'docs'>}) => {
-    const error = 'docs' in formState.errors ? formState.errors.docs : undefined;
-
+const TokenInfoFieldDocs = ({ control, isReadOnly }: Props) => {
+  const renderControl: ControllerProps<Fields, 'docs'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
       <FormControl variant="floating" id={ field.name } size="lg">
         <Input
           { ...field }
-          isInvalid={ Boolean(error) }
+          isInvalid={ Boolean(fieldState.error) }
           isDisabled={ formState.isSubmitting || isReadOnly }
           autoComplete="off"
         />
-        <InputPlaceholder text="Docs" error={ error }/>
+        <InputPlaceholder text="Docs" error={ fieldState.error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+  }, [ isReadOnly ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldPriceTicker.tsx

 import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields, TickerUrlFields } from '../types';
@@ -9,29 +9,26 @@ import { validator } from 'lib/validations/url';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
   name: keyof TickerUrlFields;
   label: string;
 }
 
-const TokenInfoFieldPriceTicker = ({ formState, control, isReadOnly, name, label }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, typeof name>}) => {
-    const error = name in formState.errors ? formState.errors[name] : undefined;
-
+const TokenInfoFieldPriceTicker = ({ control, isReadOnly, name, label }: Props) => {
+  const renderControl: ControllerProps<Fields, typeof name>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
       <FormControl variant="floating" id={ field.name } size="lg">
         <Input
           { ...field }
-          isInvalid={ Boolean(error) }
+          isInvalid={ Boolean(fieldState.error) }
           isDisabled={ formState.isSubmitting || isReadOnly }
           autoComplete="off"
         />
-        <InputPlaceholder text={ label } error={ error }/>
+        <InputPlaceholder text={ label } error={ fieldState.error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly, name, label ]);
+  }, [ isReadOnly, label ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldProjectDescription.tsx

 import { FormControl, Text, Textarea } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
@@ -8,34 +8,31 @@ import type { Fields } from '../types';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
 }
 
-const TokenInfoFieldProjectDescription = ({ formState, control, isReadOnly }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'project_description'>}) => {
-    const error = 'project_description' in formState.errors ? formState.errors.project_description : undefined;
-
+const TokenInfoFieldProjectDescription = ({ control, isReadOnly }: Props) => {
+  const renderControl: ControllerProps<Fields, 'project_description'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
       <FormControl variant="floating" id={ field.name } size="lg" isRequired>
         <Textarea
           { ...field }
           required
-          isInvalid={ Boolean(error) }
+          isInvalid={ Boolean(fieldState.error) }
           isDisabled={ formState.isSubmitting || isReadOnly }
           autoComplete="off"
           maxH="160px"
           maxLength={ 300 }
         />
-        <InputPlaceholder text="Project description" error={ error }/>
+        <InputPlaceholder text="Project description" error={ fieldState.error }/>
         <Text variant="secondary" fontSize="sm" mt={ 1 }>
-          Introduce or summarise the project’s operation/goals in a maximum of 300 characters.
+          Introduce or summarize the project’s operation/goals in a maximum of 300 characters.
           The description should be written in a neutral point of view and must exclude unsubstantiated claims unless proven otherwise.
         </Text>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+  }, [ isReadOnly ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldProjectEmail.tsx

 import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
@@ -9,28 +9,25 @@ import { EMAIL_REGEXP } from 'lib/validations/email';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
 }
 
-const TokenInfoFieldProjectEmail = ({ formState, control, isReadOnly }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'project_email'>}) => {
-    const error = 'project_email' in formState.errors ? formState.errors.project_email : undefined;
-
+const TokenInfoFieldProjectEmail = ({ control, isReadOnly }: Props) => {
+  const renderControl: ControllerProps<Fields, 'project_email'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
       <FormControl variant="floating" id={ field.name } isRequired size="lg">
         <Input
           { ...field }
           required
-          isInvalid={ Boolean(error) }
+          isInvalid={ Boolean(fieldState.error) }
           isDisabled={ formState.isSubmitting || isReadOnly }
           autoComplete="off"
         />
-        <InputPlaceholder text="Official project email address" error={ error }/>
+        <InputPlaceholder text="Official project email address" error={ fieldState.error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+  }, [ isReadOnly ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldProjectName.tsx

 import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
@@ -8,27 +8,25 @@ import type { Fields } from '../types';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
 }
 
-const TokenInfoFieldProjectName = ({ formState, control, isReadOnly }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'project_name'>}) => {
-    const error = 'project_name' in formState.errors ? formState.errors.project_name : undefined;
+const TokenInfoFieldProjectName = ({ control, isReadOnly }: Props) => {
+  const renderControl: ControllerProps<Fields, 'project_name'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
 
     return (
       <FormControl variant="floating" id={ field.name } size="lg">
         <Input
           { ...field }
-          isInvalid={ Boolean(error) }
+          isInvalid={ Boolean(fieldState.error) }
           isDisabled={ formState.isSubmitting || isReadOnly }
           autoComplete="off"
         />
-        <InputPlaceholder text="Project name" error={ error }/>
+        <InputPlaceholder text="Project name" error={ fieldState.error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+  }, [ isReadOnly ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx

 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
@@ -8,19 +8,17 @@ import type { TokenInfoApplicationConfig } from 'types/api/account';
 import FancySelect from 'ui/shared/FancySelect/FancySelect';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
   config: TokenInfoApplicationConfig['projectSectors'];
 }
 
-const TokenInfoFieldProjectSector = ({ formState, control, isReadOnly, config }: Props) => {
+const TokenInfoFieldProjectSector = ({ control, isReadOnly, config }: Props) => {
   const options = React.useMemo(() => {
     return config.map((option) => ({ label: option, value: option }));
   }, [ config ]);
 
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'project_sector'>}) => {
-    const error = 'project_sector' in formState.errors ? formState.errors.project_sector : undefined;
+  const renderControl: ControllerProps<Fields, 'project_sector'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
 
     return (
       <FancySelect
@@ -29,10 +27,10 @@ const TokenInfoFieldProjectSector = ({ formState, control, isReadOnly, config }:
         size="lg"
         placeholder="Project industry"
         isDisabled={ formState.isSubmitting || isReadOnly }
-        error={ error }
+        error={ fieldState.error }
       />
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly, options ]);
+  }, [ isReadOnly, options ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldProjectWebsite.tsx

 import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
@@ -9,28 +9,25 @@ import { validator } from 'lib/validations/url';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
 }
 
-const TokenInfoFieldProjectWebsite = ({ formState, control, isReadOnly }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'project_website'>}) => {
-    const error = 'project_website' in formState.errors ? formState.errors.project_website : undefined;
-
+const TokenInfoFieldProjectWebsite = ({ control, isReadOnly }: Props) => {
+  const renderControl: ControllerProps<Fields, 'project_website'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
       <FormControl variant="floating" id={ field.name } size="lg" isRequired>
         <Input
           { ...field }
-          isInvalid={ Boolean(error) }
+          isInvalid={ Boolean(fieldState.error) }
           isDisabled={ formState.isSubmitting || isReadOnly }
           autoComplete="off"
           required
         />
-        <InputPlaceholder text="Official project website" error={ error }/>
+        <InputPlaceholder text="Official project website" error={ fieldState.error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+  }, [ isReadOnly ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx

 import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
@@ -9,28 +9,25 @@ import { EMAIL_REGEXP } from 'lib/validations/email';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
 }
 
-const TokenInfoFieldRequesterEmail = ({ formState, control, isReadOnly }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'requester_email'>}) => {
-    const error = 'requester_email' in formState.errors ? formState.errors.requester_email : undefined;
-
+const TokenInfoFieldRequesterEmail = ({ control, isReadOnly }: Props) => {
+  const renderControl: ControllerProps<Fields, 'requester_email'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
       <FormControl variant="floating" id={ field.name } isRequired size="lg">
         <Input
           { ...field }
           required
-          isInvalid={ Boolean(error) }
+          isInvalid={ Boolean(fieldState.error) }
           isDisabled={ formState.isSubmitting || isReadOnly }
           autoComplete="off"
         />
-        <InputPlaceholder text="Requester email" error={ error }/>
+        <InputPlaceholder text="Requester email" error={ fieldState.error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+  }, [ isReadOnly ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx

 import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
@@ -8,28 +8,25 @@ import type { Fields } from '../types';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
 }
 
-const TokenInfoFieldRequesterName = ({ formState, control, isReadOnly }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'requester_name'>}) => {
-    const error = 'requester_name' in formState.errors ? formState.errors.requester_name : undefined;
-
+const TokenInfoFieldRequesterName = ({ control, isReadOnly }: Props) => {
+  const renderControl: ControllerProps<Fields, 'requester_name'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
       <FormControl variant="floating" id={ field.name } isRequired size="lg">
         <Input
           { ...field }
           required
-          isInvalid={ Boolean(error) }
+          isInvalid={ Boolean(fieldState.error) }
           isDisabled={ formState.isSubmitting || isReadOnly }
           autoComplete="off"
         />
-        <InputPlaceholder text="Requester name" error={ error }/>
+        <InputPlaceholder text="Requester name" error={ fieldState.error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+  }, [ isReadOnly ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx

 import { FormControl, Icon, Input, InputRightElement, InputGroup } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields, SocialLinkFields } from '../types';
@@ -37,33 +37,30 @@ const SETTINGS: Record<keyof SocialLinkFields, Item> = {
 };
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
   name: keyof SocialLinkFields;
 }
 
-const TokenInfoFieldSocialLink = ({ formState, control, isReadOnly, name }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, typeof name>}) => {
-    const error = name in formState.errors ? formState.errors[name] : undefined;
-
+const TokenInfoFieldSocialLink = ({ control, isReadOnly, name }: Props) => {
+  const renderControl: ControllerProps<Fields, typeof name>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
       <FormControl variant="floating" id={ field.name } size="lg" sx={{ '.chakra-input__group input': { pr: '60px' } }}>
         <InputGroup>
           <Input
             { ...field }
-            isInvalid={ Boolean(error) }
+            isInvalid={ Boolean(fieldState.error) }
             isDisabled={ formState.isSubmitting || isReadOnly }
             autoComplete="off"
           />
-          <InputPlaceholder text={ SETTINGS[name].label } error={ error }/>
+          <InputPlaceholder text={ SETTINGS[name].label } error={ fieldState.error }/>
           <InputRightElement h="100%">
             <Icon as={ SETTINGS[name].icon } boxSize={ 6 } color={ field.value ? SETTINGS[name].color : '#718096' }/>
           </InputRightElement>
         </InputGroup>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly, name ]);
+  }, [ isReadOnly, name ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldSupport.tsx

 import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import type { Control, ControllerProps } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
@@ -9,27 +9,25 @@ import { validator } from 'lib/validations/url';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
-  formState: FormState<Fields>;
   control: Control<Fields>;
   isReadOnly?: boolean;
 }
 
-const TokenInfoFieldSupport = ({ formState, control, isReadOnly }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'support'>}) => {
-    const error = 'support' in formState.errors ? formState.errors.support : undefined;
+const TokenInfoFieldSupport = ({ control, isReadOnly }: Props) => {
+  const renderControl: ControllerProps<Fields, 'support'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
 
     return (
       <FormControl variant="floating" id={ field.name } size="lg">
         <Input
           { ...field }
-          isInvalid={ Boolean(error) }
+          isInvalid={ Boolean(fieldState.error) }
           isDisabled={ formState.isSubmitting || isReadOnly }
           autoComplete="off"
         />
-        <InputPlaceholder text="Support" error={ error }/>
+        <InputPlaceholder text="Support" error={ fieldState.error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+  }, [ isReadOnly ]);
 
   return (
     <Controller