Move chains list to the top line (#2714)

Fixes #2704

ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx

@@ -158,16 +158,16 @@ noSideBarCookieTest.describe('cookie set to false', () => {
   });
 
   noSideBarCookieTest('', async() => {
-    const networkMenu = component.locator('button[aria-label="Network menu"]');
-    await expect(networkMenu).toBeVisible();
+    const chainIcon = component.getByLabel('Network icon placeholder');
+    await expect(chainIcon).toBeHidden();
   });
 
   noSideBarCookieTest.describe('xl screen', () => {
     noSideBarCookieTest.use({ viewport: pwConfig.viewport.xl });
 
     noSideBarCookieTest('', async() => {
-      const networkMenu = component.locator('button[aria-label="Network menu"]');
-      await expect(networkMenu).toBeVisible();
+      const chainIcon = component.getByLabel('Network icon placeholder');
+      await expect(chainIcon).toBeHidden();
     });
   });
 });
@@ -189,8 +189,8 @@ sideBarCookieTest.describe('cookie set to true', () => {
       { hooksConfig },
     );
 
-    const networkMenu = component.locator('button[aria-label="Network menu"]');
-    await expect(networkMenu).toBeHidden();
+    const chainIcon = component.getByLabel('Network icon placeholder');
+    await expect(chainIcon).toBeVisible();
   });
 });
 

ui/snippets/navigation/vertical/NavigationDesktop.tsx

 import { Flex, Box, VStack } from '@chakra-ui/react';
 import React from 'react';
 
-import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import IconSvg from 'ui/shared/IconSvg';
 import useIsAuth from 'ui/snippets/auth/useIsAuth';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
-import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
 
 import TestnetBadge from '../TestnetBadge';
 import NavLink from './NavLink';
@@ -80,7 +78,6 @@ const NavigationDesktop = () => {
         transitionTimingFunction="ease"
       >
         <NetworkLogo isCollapsed={ isCollapsed }/>
-        { Boolean(config.UI.navigation.featuredNetworks) && <NetworkMenu isCollapsed={ isCollapsed }/> }
       </Box>
       <Box as="nav" mt={ 6 } w="100%">
         <VStack as="ul" gap="1" alignItems="flex-start">

ui/snippets/networkMenu/NetworkLogo.tsx

@@ -32,6 +32,7 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall
       height="100%"
       color={{ base: 'blue.600', _dark: 'white' }}
       display={ display }
+      aria-label={ isSmall ? 'Network icon placeholder' : 'Network logo placeholder' }
     />
   );
 };
@@ -72,7 +73,7 @@ const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
         w="100%"
         h="100%"
         src={ iconSrc }
-        alt={ `${ config.chain.name } network logo` }
+        alt={ `${ config.chain.name } network icon` }
         fallback={ <LogoFallback isCollapsed={ isCollapsed } isSmall/> }
         display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
         filter={{ _dark: !config.UI.navigation.icon.dark ? INVERT_FILTER : undefined }}

ui/snippets/networkMenu/NetworkMenu.pw.tsx

-import React from 'react';
-
-import { FEATURED_NETWORKS } from 'mocks/config/network';
-import { test, expect } from 'playwright/lib';
-
-import NetworkMenu from './NetworkMenu';
-
-const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
-const LOGO_URL = 'https://localhost:3000/my-logo.png';
-
-test.use({ viewport: { width: 1600, height: 1000 } });
-
-test('base view +@dark-mode', async({ render, page, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
-  await mockEnvs([
-    [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
-  ]);
-  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS);
-  await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
-
-  const component = await render(<NetworkMenu/>);
-
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 36, height: 36 } });
-
-  await component.locator('button[aria-label="Network menu"]').hover();
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 36, height: 36 } });
-
-  await component.locator('button[aria-label="Network menu"]').click();
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 450, height: 550 } });
-
-  await page.getByRole('link', { name: 'POA' }).hover();
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 450, height: 550 } });
-});

ui/snippets/networkMenu/NetworkMenu.tsx

-import React from 'react';
-
-import { PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
-
-import NetworkMenuButton from './NetworkMenuButton';
-import NetworkMenuContentDesktop from './NetworkMenuContentDesktop';
-import useNetworkMenu from './useNetworkMenu';
-interface Props {
-  isCollapsed?: boolean;
-}
-
-const NetworkMenu = ({ isCollapsed }: Props) => {
-
-  const menu = useNetworkMenu();
-
-  return (
-    <PopoverRoot
-      positioning={{ placement: 'right-start', offset: { crossAxis: 0, mainAxis: 8 } }}
-      lazyMount
-      open={ menu.open }
-      onOpenChange={ menu.onOpenChange }
-    >
-      <PopoverTrigger>
-        <NetworkMenuButton
-          marginLeft="auto"
-          overflow="hidden"
-          width={{ base: 'auto', lg: isCollapsed === false ? '36px' : '0px', xl: isCollapsed ? '0px' : '36px' }}
-          visibility={{ base: 'visible', lg: isCollapsed === false ? 'visible' : 'hidden', xl: isCollapsed ? 'hidden' : 'visible' }}
-          isActive={ menu.open }
-          onClick={ menu.onToggle }
-        />
-      </PopoverTrigger>
-      <NetworkMenuContentDesktop items={ menu.data } tabs={ menu.availableTabs }/>
-    </PopoverRoot>
-  );
-};
-
-export default React.memo(NetworkMenu);

ui/snippets/topBar/TopBar.pw.tsx

@@ -32,12 +32,11 @@ test('with secondary coin price +@mobile', async({ render, mockApiResponse }) =>
   await expect(component).toHaveScreenshot();
 });
 
-test('with horizontal nav bar layout', async({ render, mockApiResponse, mockEnvs, mockConfigResponse, mockAssetResponse, page }) => {
+test('with network menu +@dark-mode', async({ render, mockApiResponse, mockEnvs, mockConfigResponse, mockAssetResponse, page }) => {
   const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
 
   await mockApiResponse('general:stats', statsMock.base);
   await mockEnvs([
-    [ 'NEXT_PUBLIC_NAVIGATION_LAYOUT', 'horizontal' ],
     [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
   ]);
   await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS);
@@ -46,6 +45,9 @@ test('with horizontal nav bar layout', async({ render, mockApiResponse, mockEnvs
   const component = await render(<TopBar/>);
   await component.getByLabel('Network menu').click();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 500 } });
+
+  await page.getByRole('link', { name: 'POA' }).hover();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 500 } });
 });
 
 test('with DeFi dropdown +@dark-mode +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {

ui/snippets/topBar/TopBar.tsx

@@ -32,7 +32,7 @@ const TopBar = () => {
             </>
           ) }
           <Settings/>
-          { config.UI.navigation.layout === 'horizontal' && Boolean(config.UI.navigation.featuredNetworks) && (
+          { Boolean(config.UI.navigation.featuredNetworks) && (
             <Box display={{ base: 'none', lg: 'flex' }} alignItems="center">
               <Separator mx={ 3 } height={ 4 } orientation="vertical"/>
               <NetworkMenu/>