fix verified email checkmark behaviour

blockscout · Oct 18, 2024 · d268288 · d268288
1 parent 3eefec5
commit d268288
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/ui/myProfile/MyProfileEmail.tsx b/ui/myProfile/MyProfileEmail.tsx
@@ -81,7 +81,7 @@ const MyProfileEmail = ({ profileQuery }: Props) => {
           onSubmit={ formApi.handleSubmit(onFormSubmit) }
         >
           <MyProfileFieldsName/>
-          <MyProfileFieldsEmail isReadOnly={ !config.services.reCaptchaV3.siteKey }/>
+          <MyProfileFieldsEmail isReadOnly={ !config.services.reCaptchaV3.siteKey } defaultValue={ profileQuery.data?.email || undefined }/>
           { config.services.reCaptchaV3.siteKey && (
             <GoogleReCaptchaProvider reCaptchaKey={ config.services.reCaptchaV3.siteKey }>
               <FormFieldReCaptcha/>

diff --git a/ui/myProfile/fields/MyProfileFieldsEmail.tsx b/ui/myProfile/fields/MyProfileFieldsEmail.tsx
@@ -10,9 +10,10 @@ import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
   isReadOnly?: boolean;
+  defaultValue: string | undefined;
 }
 
-const MyProfileFieldsEmail = ({ isReadOnly }: Props) => {
+const MyProfileFieldsEmail = ({ isReadOnly, defaultValue }: Props) => {
   const { control } = useFormContext<FormFields>();
   const { field, fieldState, formState } = useController<FormFields, 'email'>({
     control,
@@ -21,6 +22,7 @@ const MyProfileFieldsEmail = ({ isReadOnly }: Props) => {
   });
 
   const isDisabled = formState.isSubmitting;
+  const isVerified = defaultValue && field.value === defaultValue;
 
   return (
     <FormControl variant="floating" isDisabled={ isDisabled } isRequired size="md">
@@ -34,7 +36,7 @@ const MyProfileFieldsEmail = ({ isReadOnly }: Props) => {
           autoComplete="off"
         />
         <InputPlaceholder text="Email" error={ fieldState.error }/>
-        { !formState.dirtyFields.email && (
+        { isVerified && (
           <InputRightElement h="100%">
             <IconSvg name="certified" boxSize={ 5 } color="green.500"/>
           </InputRightElement>

diff --git a/ui/pages/__screenshots__/MyProfile.pw.tsx_default_without-email-1.png b/ui/pages/__screenshots__/MyProfile.pw.tsx_default_without-email-1.png