reCaptcha and disabled state bg color fix

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -6,12 +6,15 @@ import { useForm, FormProvider } from 'react-hook-form';
 import type { FormFields } from './types';
 import type { PublicTagTypesResponse } from 'types/api/addressMetadata';
 
+import delay from 'lib/delay';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import Hint from 'ui/shared/Hint';
 
 import PublicTagsSubmitFieldAddresses from './fields/PublicTagsSubmitFieldAddresses';
 import PublicTagsSubmitFieldCompanyName from './fields/PublicTagsSubmitFieldCompanyName';
 import PublicTagsSubmitFieldCompanyWebsite from './fields/PublicTagsSubmitFieldCompanyWebsite';
 import PublicTagsSubmitFieldDescription from './fields/PublicTagsSubmitFieldDescription';
+import PublicTagsSubmitFieldReCaptcha from './fields/PublicTagsSubmitFieldReCaptcha';
 import PublicTagsSubmitFieldRequesterEmail from './fields/PublicTagsSubmitFieldRequesterEmail';
 import PublicTagsSubmitFieldRequesterName from './fields/PublicTagsSubmitFieldRequesterName';
 import PublicTagsSubmitFieldTags from './fields/PublicTagsSubmitFieldTags';
@@ -21,6 +24,8 @@ interface Props {
 }
 
 const PublicTagsSubmitForm = ({ config }: Props) => {
+  const isMobile = useIsMobile();
+
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
     defaultValues: {
@@ -29,9 +34,11 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
     },
   });
 
-  const onFormSubmit: SubmitHandler<FormFields> = React.useCallback((data) => {
+  const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
     // eslint-disable-next-line no-console
     console.log('__>__', data, config);
+
+    await delay(5000);
   }, [ config ]);
 
   return (
@@ -50,10 +57,10 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
           </GridItem>
           <PublicTagsSubmitFieldRequesterName/>
           <PublicTagsSubmitFieldCompanyName/>
-          <div/>
+          { !isMobile && <div/> }
           <PublicTagsSubmitFieldRequesterEmail/>
           <PublicTagsSubmitFieldCompanyWebsite/>
-          <div/>
+          { !isMobile && <div/> }
 
           <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4" mt={ 3 }>
             Public tags/labels
@@ -64,13 +71,17 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
           <GridItem colSpan={{ base: 1, lg: 2 }}>
             <PublicTagsSubmitFieldDescription/>
           </GridItem>
-          <GridItem/>
+
+          <GridItem colSpan={{ base: 1, lg: 3 }}>
+            <PublicTagsSubmitFieldReCaptcha formApi={ formApi }/>
+          </GridItem>
 
           <Button
             variant="solid"
             size="lg"
             type="submit"
             mt={ 3 }
+            isDisabled={ !formApi.formState.isValid }
             isLoading={ formApi.formState.isSubmitting }
             loadingText="Send request"
             w="min-content"

ui/publicTags/submit/fields/PublicTagsSubmitFieldReCaptcha.tsx

+import React from 'react';
+import ReCaptcha from 'react-google-recaptcha';
+import type { UseFormReturn } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import config from 'configs/app';
+
+interface Props {
+  formApi: UseFormReturn<FormFields>;
+}
+
+const PublicTagsSubmitFieldReCaptcha = ({ formApi }: Props) => {
+
+  const ref = React.useRef<ReCaptcha>(null);
+
+  React.useEffect(() => {
+    formApi.register('reCaptcha', { required: true, shouldUnregister: true });
+
+    return () => {
+      formApi.unregister('reCaptcha');
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    ref.current?.reset();
+    formApi.trigger('reCaptcha');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ formApi.formState.submitCount ]);
+
+  const handleReCaptchaChange = React.useCallback((token: string | null) => {
+    if (token) {
+      formApi.clearErrors('reCaptcha');
+      formApi.setValue('reCaptcha', token, { shouldValidate: true });
+    }
+  }, [ formApi ]);
+
+  const handleReCaptchaExpire = React.useCallback(() => {
+    formApi.resetField('reCaptcha');
+    formApi.setError('reCaptcha', { type: 'required' });
+  }, [ formApi ]);
+
+  const feature = config.features.csvExport;
+
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  return (
+    <ReCaptcha
+      className="recaptcha"
+      ref={ ref }
+      sitekey={ feature.reCaptcha.siteKey }
+      onChange={ handleReCaptchaChange }
+      onExpired={ handleReCaptchaExpire }
+    />
+  );
+};
+
+export default PublicTagsSubmitFieldReCaptcha;

ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx

@@ -29,7 +29,11 @@ interface Props {
 const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddClick, onRemoveClick, tagTypes, field }: Props) => {
   const isMobile = useIsMobile();
   const bgColorDefault = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
+  const bgColorError = useColorModeValue('red.50', 'red.900');
+
+  // TODO @tom2drum remove these custom colors after #1903 is done
   const inputBgColor = useColorModeValue('white', 'black');
+  const inputBgColorDisabled = useColorModeValue('#ececec', '#232425');
 
   const handleAddClick = React.useCallback(() => {
     onAddClick?.(index);
@@ -41,7 +45,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
 
   return (
     <>
-      <GridItem colSpan={{ base: 1, lg: 2 }} p="10px" borderRadius="base" bgColor={ bgColorDefault }>
+      <GridItem colSpan={{ base: 1, lg: 2 }} p="10px" borderRadius="base" bgColor={ errors ? bgColorError : bgColorDefault }>
         <Grid
           rowGap={ 2 }
           columnGap={ 2 }
@@ -55,6 +59,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
                 isDisabled={ isDisabled }
                 autoComplete="off"
                 bgColor={ inputBgColor }
+                _disabled={{ bgColor: inputBgColorDisabled }}
               />
               <InputPlaceholder text="Tag (max 35 characters)" error={ errors?.name }/>
             </FormControl>
@@ -70,6 +75,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
                 isDisabled={ isDisabled }
                 autoComplete="off"
                 bgColor={ inputBgColor }
+                _disabled={{ bgColor: inputBgColorDisabled }}
               />
               <InputPlaceholder text="Label URL" error={ errors?.url }/>
             </FormControl>
@@ -101,8 +107,12 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
                 autoComplete="off"
                 bgColor={ inputBgColor }
                 maxH="160px"
+                _disabled={{ bgColor: inputBgColorDisabled }}
+              />
+              <InputPlaceholder
+                text="Label description - any text to be shown on label hover (max 80 characters)"
+                error={ errors?.tooltipDescription }
               />
-              <InputPlaceholder text="Label description - any text to be shown on label hover (max 80 characters)" error={ errors?.tooltipDescription }/>
             </FormControl>
           </GridItem>
         </Grid>

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx

@@ -22,7 +22,11 @@ interface Props<Type extends ColorFieldTypes> {
 
 const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisabled, error, fieldName, placeholder, fieldType }: Props<Type>) => {
   const { getValues, register } = useFormContext<FormFields>();
+
+  // TODO @tom2drum remove these custom colors after #1903 is done
   const inputBgColor = useColorModeValue('white', 'black');
+  const inputBgColorDisabled = useColorModeValue('#ececec', '#232425');
+
   const circleBgColorDefault = {
     bgColor: useColorModeValue('gray.100', 'gray.700'),
     textColor: useColorModeValue('blackAlpha.800', 'whiteAlpha.800'),
@@ -41,6 +45,7 @@ const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisable
           autoComplete="off"
           bgColor={ inputBgColor }
           maxLength={ 6 }
+          _disabled={{ bgColor: inputBgColorDisabled }}
         />
         <InputPlaceholder text={ placeholder } error={ error }/>
         <InputRightElement w="30px" right={ 4 } zIndex={ 10 }>

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx

@@ -22,6 +22,8 @@ interface Props {
 const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) => {
   const isMobile = useIsMobile();
   const { control, watch } = useFormContext<FormFields>();
+
+  // TODO @tom2drum remove these custom colors after #1903 is done
   const inputBgColor = useColorModeValue('white', 'black');
 
   const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({

ui/publicTags/submit/types.ts

@@ -8,6 +8,7 @@ export interface FormFields {
   addresses: Array<{ hash: string }>;
   tags: Array<FormFieldTag>;
   description: string | undefined;
+  reCaptcha: string;
 }
 
 export interface FormFieldTag {