tests for auth modal and user profile

ui/snippets/auth/AuthModal.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, expect } from 'playwright/lib';
+
+import AuthModalStory from './AuthModal.pwstory';
+
+test('email login', async({ render, page, mockApiResponse }) => {
+
+  await render(<AuthModalStory flow="email_login"/>);
+
+  await expect(page.getByText('Status: Not authenticated')).toBeVisible();
+
+  await page.getByText('Log in').click();
+  await expect(page).toHaveScreenshot();
+
+  // fill email
+  await page.getByText('Continue with email').click();
+  await page.getByLabel(/email/i).getByPlaceholder(' ').fill('john.doe@example.com');
+  await expect(page).toHaveScreenshot();
+
+  // send otp code
+  await mockApiResponse('auth_send_otp', {} as never);
+  await page.getByText('Send a code').click();
+
+  // fill otp code
+  await page.getByLabel(/enter your pin code/i).nth(0).fill('123456');
+  await expect(page).toHaveScreenshot();
+
+  // submit otp code
+  await mockApiResponse('auth_confirm_otp', profileMock.base as never);
+  await page.getByText('Submit').click();
+  await expect(page).toHaveScreenshot();
+
+  await page.getByLabel('Close').click();
+  await expect(page.getByText('Status: Authenticated')).toBeVisible();
+});
+
+const linkEmailTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+linkEmailTest('link email to account', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.base);
+  await render(<AuthModalStory flow="email_link"/>);
+
+  await expect(page.getByText('Status: Authenticated')).toBeVisible();
+
+  // fill email
+  await page.getByText('Link email').click();
+  await page.getByLabel(/email/i).getByPlaceholder(' ').fill('john.doe@example.com');
+  await expect(page).toHaveScreenshot();
+
+  // send and fill otp code
+  await mockApiResponse('auth_send_otp', {} as never);
+  await page.getByText('Send a code').click();
+  await page.getByLabel(/enter your pin code/i).nth(0).fill('123456');
+  await mockApiResponse('auth_link_email', profileMock.base as never);
+  await page.getByText('Submit').click();
+
+  await expect(page).toHaveScreenshot();
+});

ui/snippets/auth/AuthModal.pwstory.tsx

+import { Box, Button, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import AuthModal from './AuthModal';
+import useIsAuth from './useIsAuth';
+
+interface Props {
+  flow: 'email_login' | 'email_link';
+}
+
+const AuthModalStory = ({ flow }: Props) => {
+  const authModal = useDisclosure();
+  const isAuth = useIsAuth();
+
+  const initialScreen = flow === 'email_login' ? { type: 'select_method' as const } : { type: 'email' as const, isAuth: true };
+
+  const handleClose = React.useCallback(() => {
+    authModal.onClose();
+  }, [ authModal ]);
+
+  return (
+    <>
+      <Button onClick={ authModal.onOpen }>{ flow === 'email_login' ? 'Log in' : 'Link email' }</Button>
+      { authModal.isOpen && <AuthModal initialScreen={ initialScreen } onClose={ handleClose }/> }
+      <Box>Status: { isAuth ? 'Authenticated' : 'Not authenticated' }</Box>
+    </>
+  );
+};
+
+export default AuthModalStory;

ui/snippets/user/profile/UserProfileButton.tsx

@@ -68,7 +68,7 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
       isDisabled={ isMobile || isFetched || Boolean(data) }
       openDelay={ 500 }
     >
-      <Skeleton isLoaded={ isFetched } borderRadius="base" ref={ ref }>
+      <Skeleton isLoaded={ isFetched } borderRadius="base" ref={ ref } w="fit-content">
         <Button
           size={ size }
           variant={ variant }

ui/snippets/user/profile/UserProfileContent.tsx

@@ -86,14 +86,14 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
             <Hint label="Address" boxSize={ 4 } ml={ 1 } mr="auto"/>
             { data?.address_hash ?
               <Box>{ shortenString(data?.address_hash) }</Box> :
-              <Link onClick={ onAddAddress } color="text_secondary" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add wallet</Link>
+              <Link onClick={ onAddAddress } color="text_secondary" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add address</Link>
             }
           </Flex>
         ) }
         <Flex p={ 2 } columnGap={ 4 }>
           <Box mr="auto">Email</Box>
           { data?.email ?
-            <TruncatedValue value={ data.email + data.email }/> :
+            <TruncatedValue value={ data.email }/> :
             <Link onClick={ onAddEmail } color="text_secondary" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add email</Link>
           }
         </Flex>

ui/snippets/user/profile/UserProfileDesktop.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 UserProfileDesktop from './UserProfileDesktop';
+
+const test = base.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+test('without address', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.base);
+  await render(<UserProfileDesktop/>);
+  await page.getByText(/tom/i).click();
+
+  await expect(page).toHaveScreenshot({
+    clip: { x: 0, y: 0, width: 300, height: 600 },
+  });
+});
+
+test('without email', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.withoutEmail);
+  await render(<UserProfileDesktop/>);
+  await page.getByText(/my profile/i).click();
+
+  await expect(page).toHaveScreenshot({
+    clip: { x: 0, y: 0, width: 300, height: 600 },
+  });
+});