test fixes

ui/pages/Accounts.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
+import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { AddressesResponse } from 'types/api/addresses';
@@ -31,7 +31,30 @@ const addresses: AddressesResponse = {
   next_page_params: null,
 };
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ mount, page }) => {
+    await page.route(ADDRESSES_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(addresses),
+    }));
+    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+      status: 200,
+      body: '',
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <Accounts/>
+      </TestApp>,
+    );
+
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+});
+
+test('base view +@dark-mode', async({ mount, page }) => {
   await page.route(ADDRESSES_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(addresses),

ui/pages/Address.tsx

@@ -135,7 +135,6 @@ const AddressPageContent = () => {
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ tabsScrollRef }></Box>
       { addressQuery.isPlaceholderData ? <SkeletonTabs tabs={ tabs }/> : content }
-      { !addressQuery.isPlaceholderData && !addressQuery.isError && <Box h={{ base: 0, lg: '40vh' }}/> }
     </>
   );
 };

ui/pages/SearchResults.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
+import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as searchMock from 'mocks/search/index';
@@ -7,7 +7,7 @@ import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import SearchResults from './SearchResults';
 
-test('search by name +@mobile +@dark-mode', async({ mount, page }) => {
+test('search by name +@dark-mode', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: 'o' },
@@ -34,7 +34,7 @@ test('search by name +@mobile +@dark-mode', async({ mount, page }) => {
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by address hash +@mobile', async({ mount, page }) => {
+test('search by address hash', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.address1.address },
@@ -59,7 +59,7 @@ test('search by address hash +@mobile', async({ mount, page }) => {
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by block number +@mobile', async({ mount, page }) => {
+test('search by block number', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: String(searchMock.block1.block_number) },
@@ -84,7 +84,7 @@ test('search by block number +@mobile', async({ mount, page }) => {
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by block hash +@mobile', async({ mount, page }) => {
+test('search by block hash', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.block1.block_hash },
@@ -109,7 +109,7 @@ test('search by block hash +@mobile', async({ mount, page }) => {
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by tx hash +@mobile', async({ mount, page }) => {
+test('search by tx hash', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.tx1.tx_hash },
@@ -133,3 +133,133 @@ test('search by tx hash +@mobile', async({ mount, page }) => {
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+  test('search by name', async({ mount, page }) => {
+    const hooksConfig = {
+      router: {
+        query: { q: 'o' },
+      },
+    };
+    await page.route(buildApiUrl('search') + '?q=o', (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        items: [
+          searchMock.token1,
+          searchMock.token2,
+          searchMock.contract1,
+        ],
+      }),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <SearchResults/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+
+  test('search by address hash', async({ mount, page }) => {
+    const hooksConfig = {
+      router: {
+        query: { q: searchMock.address1.address },
+      },
+    };
+    await page.route(buildApiUrl('search') + `?q=${ searchMock.address1.address }`, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        items: [
+          searchMock.address1,
+        ],
+      }),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <SearchResults/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+
+  test('search by block number', async({ mount, page }) => {
+    const hooksConfig = {
+      router: {
+        query: { q: String(searchMock.block1.block_number) },
+      },
+    };
+    await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_number }`, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        items: [
+          searchMock.block1,
+        ],
+      }),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <SearchResults/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+
+  test('search by block hash', async({ mount, page }) => {
+    const hooksConfig = {
+      router: {
+        query: { q: searchMock.block1.block_hash },
+      },
+    };
+    await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_hash }`, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        items: [
+          searchMock.block1,
+        ],
+      }),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <SearchResults/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+
+  test('search by tx hash', async({ mount, page }) => {
+    const hooksConfig = {
+      router: {
+        query: { q: searchMock.tx1.tx_hash },
+      },
+    };
+    await page.route(buildApiUrl('search') + `?q=${ searchMock.tx1.tx_hash }`, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        items: [
+          searchMock.tx1,
+        ],
+      }),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <SearchResults/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+});

ui/pages/Token.tsx

@@ -276,8 +276,6 @@ const TokenPageContent = () => {
             stickyEnabled={ !isMobile }
           />
         ) }
-
-      { !tokenQuery.isLoading && !tokenQuery.isError && <Box h={{ base: 0, lg: '40vh' }}/> }
     </>
   );
 };

ui/pages/TokenInstance.tsx

@@ -183,8 +183,6 @@ const TokenInstanceContent = () => {
           stickyEnabled={ !isMobile }
         />
       ) }
-
-      { !tokenInstanceQuery.isLoading && !tokenInstanceQuery.isError && <Box h={{ base: 0, lg: '40vh' }}/> }
     </>
   );
 };

ui/snippets/footer/Footer.pw.tsx

@@ -17,7 +17,7 @@ base.describe('with custom links, 4 cols', () => {
     ]) as any,
   });
 
-  test('base view +@dark-mode +@mobile', async({ mount, page }) => {
+  test('base view +@dark-mode +@mobile +@desktop-xl', async({ mount, page }) => {
     await page.route(FOOTER_LINKS_URL, (route) => {
       return route.fulfill({
         body: JSON.stringify(FOOTER_LINKS),
@@ -61,6 +61,11 @@ base.describe('with custom links, 2 cols', () => {
 
 base.describe('without custom links', () => {
   base('base view +@dark-mode +@mobile', async({ mount, page }) => {
+    await page.evaluate(() => {
+      window.ethereum = {
+        providers: [ { isMetaMask: true } ],
+      };
+    });
 
     await mount(
       <TestApp>

ui/snippets/footer/Footer.tsx

@@ -69,27 +69,31 @@ const Footer = () => {
 
   return (
     <Flex direction={{ base: 'column', lg: 'row' }} p={{ base: 4, lg: 9 }} borderTop="1px solid" borderColor="divider">
-      <Box flexGrow="1" mb={{ base: 6, lg: 12 }}>
+      <Box flexGrow="1" mb={{ base: 6, lg: 0 }}>
         <Flex>
           <ColorModeToggler/>
           <NetworkAddToWallet ml={ 8 }/>
         </Flex>
-        <Box mt={{ base: 6, lg: 10 }}>
+        <Box mt={{ base: 6, lg: '44px' }}>
           <Link fontSize="xs" href="https://www.blockscout.com">blockscout.com</Link>
         </Box>
         <Text mt={ 3 } mr={{ base: 0, lg: '114px' }} maxW={{ base: 'unset', lg: '470px' }} fontSize="xs">
             Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
         </Text>
-        { appConfig.blockScoutVersion && (
-          <Text fontSize="xs" mt={ 8 }>
-            Backend: <Link href={ API_VERSION_URL } target="_blank">{ appConfig.blockScoutVersion }</Link>
-          </Text>
-        ) }
-        { appConfig.frontendVersion && (
-          <Text fontSize="xs" mt={ 8 }>
-            { /* Frontend: <Link href={ FRONT_VERSION_URL } target="_blank">{ appConfig.frontendVersion }</Link> */ }
-            Frontend: { appConfig.frontendVersion }
-          </Text>
+        { (appConfig.blockScoutVersion || appConfig.frontendVersion) && (
+          <VStack spacing={ 1 } mt={ 6 } alignItems="start">
+            { appConfig.blockScoutVersion && (
+              <Text fontSize="xs">
+                Backend: <Link href={ API_VERSION_URL } target="_blank">{ appConfig.blockScoutVersion }</Link>
+              </Text>
+            ) }
+            { appConfig.frontendVersion && (
+              <Text fontSize="xs">
+                { /* Frontend: <Link href={ FRONT_VERSION_URL } target="_blank">{ appConfig.frontendVersion }</Link> */ }
+                Frontend: { appConfig.frontendVersion }
+              </Text>
+            ) }
+          </VStack>
         ) }
       </Box>
       <Grid
@@ -102,7 +106,7 @@ const Footer = () => {
         <Box minW="160px" w={ appConfig.footerLinks ? '160px' : '100%' }>
           { appConfig.footerLinks && <Text fontWeight={ 500 } mb={ 3 }>Blockscout</Text> }
           <Grid
-            gap={ 2 }
+            gap={ 1 }
             gridTemplateColumns={ appConfig.footerLinks ? '160px' : { base: 'repeat(auto-fill, 160px)', lg: 'repeat(3, 160px)' } }
             gridTemplateRows={{ base: 'auto', lg: appConfig.footerLinks ? 'auto' : 'repeat(2, auto)' }}
             gridAutoFlow={{ base: 'row', lg: appConfig.footerLinks ? 'row' : 'column' }}
@@ -115,7 +119,7 @@ const Footer = () => {
           Array.from(Array(3)).map((i, index) => (
             <Box minW="160px" key={ index }>
               <Skeleton w="120px" h="20px" mb={ 6 }/>
-              <VStack spacing={ 4 } alignItems="start" mb={ 2 }>
+              <VStack spacing={ 5 } alignItems="start" mb={ 2 }>
                 { Array.from(Array(5)).map((i, index) => <Skeleton w="160px" h="14px" key={ index }/>) }
               </VStack>
             </Box>
@@ -125,7 +129,7 @@ const Footer = () => {
           linksData.slice(0, MAX_LINKS_COLUMNS).map(linkGroup => (
             <Box minW="160px" key={ linkGroup.title }>
               <Text fontWeight={ 500 } mb={ 3 }>{ linkGroup.title }</Text>
-              <VStack spacing={ 2 } alignItems="start">
+              <VStack spacing={ 1 } alignItems="start">
                 { linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
               </VStack>
             </Box>

ui/snippets/footer/FooterLinkItem.tsx

@@ -12,7 +12,7 @@ const FooterLinkItem = ({ icon, iconSize, text, url }: Props) => {
   const textColor = useColorModeValue('gray.600', 'gray.500');
 
   return (
-    <Link href={ url } display="flex" alignItems="center" h={ 6 } color={ textColor } target="_blank">
+    <Link href={ url } display="flex" alignItems="center" h="30px" color={ textColor } target="_blank">
       { icon && (
         <Center minW={ 6 } mr="6px">
           <Icon boxSize={ iconSize || 5 } as={ icon }/>

ui/snippets/header/Burger.pw.tsx

@@ -110,7 +110,7 @@ test.describe('auth', () => {
     },
   });
 
-  extendedTest.use({ viewport: { width: devices['iPhone 13 Pro'].viewport.width, height: 1000 } });
+  extendedTest.use({ viewport: { width: devices['iPhone 13 Pro'].viewport.width, height: 800 } });
 
   extendedTest('base view', async({ mount, page }) => {
     const component = await mount(

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -26,13 +26,7 @@ const test = base.extend({
   ]) as any,
 });
 
-test('no auth +@desktop-xl +@dark-mode-xl', async({ page, mount }) => {
-  await page.evaluate(() => {
-    window.ethereum = {
-      providers: [ { isMetaMask: true } ],
-    };
-  });
-
+test('no auth +@desktop-xl +@dark-mode-xl', async({ mount }) => {
   const component = await mount(
     <TestApp>
       <Flex w="100%" minH="100vh" alignItems="stretch">

ui/snippets/profileMenu/ProfileMenuMobile.tsx

-import { Box, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, Button } from '@chakra-ui/react';
+import { Box, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, Button, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -26,9 +26,11 @@ const ProfileMenuMobile = () => {
         <DrawerOverlay/>
         <DrawerContent maxWidth="260px">
           <DrawerBody p={ 6 }>
-            <Box onClick={ onClose } mb={ 6 }>
-              <UserAvatar size={ 24 } data={ data } isFetched={ isFetched }/>
-            </Box>
+            <Flex justifyContent="end" mb={ 6 }>
+              <Box onClick={ onClose }>
+                <UserAvatar size={ 24 } data={ data } isFetched={ isFetched }/>
+              </Box>
+            </Flex>
             { data ? <ProfileMenuContent { ...data }/> : (
               <Button size="sm" width="full" variant="outline" as="a" href={ loginUrl }>Sign In</Button>
             ) }