add name field to profile page and write some tests

ui/myProfile/MyProfileEmail.tsx

@@ -18,6 +18,7 @@ import FormFieldReCaptcha from 'ui/shared/forms/fields/FormFieldReCaptcha';
 import AuthModal from 'ui/snippets/auth/AuthModal';
 
 import MyProfileFieldsEmail from './fields/MyProfileFieldsEmail';
+import MyProfileFieldsName from './fields/MyProfileFieldsName';
 
 const MIXPANEL_CONFIG = {
   account_link_info: {
@@ -38,6 +39,7 @@ const MyProfileEmail = ({ profileQuery }: Props) => {
     mode: 'onBlur',
     defaultValues: {
       email: profileQuery.data?.email || '',
+      name: profileQuery.data?.name || profileQuery.data?.nickname || '',
     },
   });
 
@@ -78,6 +80,7 @@ const MyProfileEmail = ({ profileQuery }: Props) => {
           noValidate
           onSubmit={ formApi.handleSubmit(onFormSubmit) }
         >
+          <MyProfileFieldsName/>
           <MyProfileFieldsEmail isReadOnly={ !config.services.reCaptchaV3.siteKey }/>
           { config.services.reCaptchaV3.siteKey && (
             <GoogleReCaptchaProvider reCaptchaKey={ config.services.reCaptchaV3.siteKey }>

ui/myProfile/fields/MyProfileFieldsEmail.tsx

@@ -32,7 +32,6 @@ const MyProfileFieldsEmail = ({ isReadOnly }: Props) => {
           isDisabled={ isDisabled }
           isReadOnly={ isReadOnly }
           autoComplete="off"
-          bgColor="dialog_bg"
         />
         <InputPlaceholder text="Email" error={ fieldState.error }/>
         { !formState.dirtyFields.email && (

ui/myProfile/fields/MyProfileFieldsName.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const MyProfileFieldsName = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'name'>({
+    control,
+    name: 'name',
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } size="md" cursor="not-allowed" mb={ 3 }>
+      <Input
+        { ...field }
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        isReadOnly={ true }
+        autoComplete="off"
+      />
+      <InputPlaceholder text="Name" error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(MyProfileFieldsName);

ui/myProfile/types.tsx

 export interface FormFields {
   email: string;
+  name: string;
   reCaptcha: string;
 }

ui/pages/MyProfile.pw.tsx

+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test as base, expect } from 'playwright/lib';
+
+import MyProfile from './MyProfile';
+
+const test = base.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+test('without address', async({ render, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.base);
+  const component = await render(<MyProfile/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('without email', async({ render, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.withoutEmail);
+  const component = await render(<MyProfile/>);
+
+  await expect(component).toHaveScreenshot();
+});