fix tests

ui/searchResults/SearchResultListItem.tsx

@@ -212,12 +212,12 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
               <Text whiteSpace="nowrap" overflow="hidden">
                 <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
               </Text>
-              { data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/> }
+              { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
             </Skeleton>
-            <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }>
+            <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }>
               { data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
               { data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
-            </Text>
+            </Skeleton>
           </Grid>
         );
       }
@@ -243,7 +243,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
             <Box overflow="hidden">
               <HashStringShortenDynamic hash={ data.address }/>
             </Box>
-            { data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/> }
+            { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
           </Flex>
         );
       }

ui/searchResults/SearchResultTableItem.tsx

@@ -74,7 +74,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                 <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
                   <HashStringShortenDynamic hash={ data.address }/>
                 </Box>
-                { data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/> }
+                { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
               </Skeleton>
             </Td>
             <Td fontSize="sm" verticalAlign="middle" isNumeric>
@@ -180,7 +180,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                 <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
                   <HashStringShortenDynamic hash={ data.address }/>
                 </Box>
-                { data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/> }
+                { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
               </Flex>
             </Td>
             <Td></Td>

ui/shared/AppError/AppErrorIcon.tsx

@@ -15,7 +15,7 @@ interface Props {
 }
 
 const AppErrorIcon = ({ statusCode }: Props) => {
-  return <IconSvg name={ ICONS[String(statusCode)] || ICONS['500'] } width="200px" height="auto" color="text"/>;
+  return <IconSvg name={ ICONS[String(statusCode)] || ICONS['500'] } width="200px" height="100px" color="text"/>;
 };
 
 export default AppErrorIcon;

ui/shared/Hint.tsx

@@ -21,7 +21,7 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => {
   }, [ onToggle ]);
 
   if (isLoading) {
-    return <Skeleton boxSize={ 5 } borderRadius="sm"/>;
+    return <Skeleton className={ className } boxSize={ 5 } borderRadius="sm"/>;
   }
 
   return (
@@ -35,7 +35,7 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => {
       <IconButton
         colorScheme="none"
         aria-label="hint"
-        icon={ <IconSvg name="info" boxSize={ 5 }/> }
+        icon={ <IconSvg name="info" w="100%" h="100%"/> }
         boxSize={ 5 }
         variant="simple"
         display="inline-block"

ui/shared/LinkExternal.tsx

@@ -59,7 +59,7 @@ const LinkExternal = ({ href, children, className, isLoading, variant }: Props)
   return (
     <Link className={ className } { ...styleProps } target="_blank" href={ href }>
       { children }
-      <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="gray.400"/>
+      <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="gray.400" flexShrink={ 0 }/>
     </Link>
   );
 };

ui/shared/Page/specs/LongNameAndManyTags.tsx

@@ -27,7 +27,7 @@ const LongNameAndManyTags = () => {
 
   const contentAfter = (
     <>
-      <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer"/>
+      <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer" flexShrink={ 0 }/>
       <EntityTags
         data={{
           private_tags: [ privateTag ],

ui/shared/entities/base/components.tsx

-import { Box, chakra, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { chakra, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import type { As, IconProps } from '@chakra-ui/react';
 import React from 'react';
 
@@ -91,14 +91,17 @@ const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBa
 
   const styles = getIconProps(iconSize);
   return (
-    <Box mr={ 2 } color={ color ?? defaultColor }>
     <IconSvg
       name={ name }
       boxSize={ styles.boxSize }
       isLoading={ isLoading }
       borderRadius={ borderRadius ?? 'base' }
+      display="block"
+      mr={ 2 }
+      color={ color ?? defaultColor }
+      minW={ 0 }
+      flexShrink={ 0 }
     />
-    </Box>
   );
 };
 

ui/shared/entities/token/TokenEntity.tsx

@@ -42,10 +42,11 @@ const Icon = (props: IconProps) => {
     marginRight: props.marginRight ?? 2,
     boxSize: props.boxSize ?? getIconProps(props.iconSize).boxSize,
     borderRadius: 'base',
+    flexShrink: 0,
   };
 
   if (props.isLoading) {
-    return <Skeleton { ...styles } className={ props.className } flexShrink={ 0 }/>;
+    return <Skeleton { ...styles } className={ props.className }/>;
   }
 
   return (

ui/shared/filters/FilterInput.tsx

@@ -44,7 +44,7 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
         <InputLeftElement
           pointerEvents="none"
         >
-          <IconSvg name="search" color={ iconColor }/>
+          <IconSvg name="search" color={ iconColor } boxSize={ 4 }/>
         </InputLeftElement>
 
         <Input

ui/shared/statusTag/StatusTag.tsx

@@ -38,7 +38,7 @@ const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
   return (
     <Tooltip label={ errorText }>
       <Tag colorScheme={ colorScheme } display="inline-flex" isLoading={ isLoading }>
-        <IconSvg boxSize={ 2.5 } name={ icon }/>
+        <IconSvg boxSize={ 2.5 } name={ icon } mr={ 2 }/>
         <TagLabel>{ text }</TagLabel>
       </Tag>
     </Tooltip>

ui/snippets/header/Burger.pw.tsx

@@ -50,7 +50,7 @@ test('base view', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await component.locator('svg[aria-label="Menu button"]').click();
+  await component.locator('div[aria-label="Menu button"]').click();
   await expect(page.locator('.chakra-modal__content-container')).toHaveScreenshot();
 
   await page.locator('button[aria-label="Network menu"]').click();
@@ -80,7 +80,7 @@ test.describe('dark mode', () => {
       { hooksConfig },
     );
 
-    await component.locator('svg[aria-label="Menu button"]').click();
+    await component.locator('div[aria-label="Menu button"]').click();
     await expect(page).toHaveScreenshot();
 
     await page.locator('button[aria-label="Network menu"]').click();
@@ -96,7 +96,7 @@ test('submenu', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await component.locator('svg[aria-label="Menu button"]').click();
+  await component.locator('div[aria-label="Menu button"]').click();
   await page.locator('div[aria-label="Blockchain link group"]').click();
   await expect(page).toHaveScreenshot();
 });
@@ -122,7 +122,7 @@ test.describe('auth', () => {
       { hooksConfig },
     );
 
-    await component.locator('svg[aria-label="Menu button"]').click();
+    await component.locator('div[aria-label="Menu button"]').click();
     await expect(page).toHaveScreenshot();
   });
 });

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -111,7 +111,7 @@ test.describe('with tooltips', () => {
     );
 
     await component.locator('header').hover();
-    await page.locator('svg[aria-label="Expand/Collapse menu"]').click();
+    await page.locator('div[aria-label="Expand/Collapse menu"]').click();
     await page.locator('a[aria-label="Tokens link"]').hover();
 
     await expect(component).toHaveScreenshot();

ui/snippets/networkMenu/NetworkLogo.tsx

@@ -49,11 +49,10 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
   const iconStyle = useColorModeValue({}, !config.UI.sidebar.icon.dark ? darkModeFilter : {});
 
   return (
-    // TODO switch to <NextLink href={ href } passHref> when main page for network will be ready
     <Box
       as="a"
       href={ route({ pathname: '/' }) }
-      width={{ base: 'auto', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }}
+      width={{ base: '120px', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }}
       height={{ base: '24px', lg: isCollapsed === false ? '24px' : '30px', xl: isCollapsed ? '30px' : '24px' }}
       display="inline-flex"
       overflow="hidden"

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

@@ -42,7 +42,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             >
               <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
             </Text>
-            { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle"/> }
+            { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" flexShrink={ 0 }/> }
           </Flex>
           <Text
             variant="secondary"
@@ -81,7 +81,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
         >
           { data.description }
         </Text>
-        { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="text_secondary"/> }
+        { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="text_secondary" flexShrink={ 0 }/> }
       </Flex>
     );
   })();

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx

@@ -37,7 +37,7 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
     </Text>
   );
 
-  const isContractVerified = data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500"/>;
+  const isContractVerified = data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" flexShrink={ 0 }/>;
 
   if (isMobile) {
     return (

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx

@@ -34,7 +34,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
     </Text>
   );
 
-  const contractVerifiedIcon = data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/>;
+  const contractVerifiedIcon = data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/>;
   const additionalInfo = (
     <Text overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
       { data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -61,7 +61,7 @@ const TokenTransferListItem = ({
           width="50%"
           fontWeight="500"
         />
-        <IconSvg name="arrows/east-mini" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
+        <IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" flexShrink={ 0 } isLoading={ isLoading }/>
         <AddressEntityWithTokenFilter
           address={ to }
           isLoading={ isLoading }

ui/token/TokenTransfer/TokenTransferTableItem.tsx

@@ -69,9 +69,7 @@ const TokenTransferTableItem = ({
         />
       </Td>
       <Td px={ 0 }>
-        <Box my="3px">
-          <IconSvg name="arrows/east-mini" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
-        </Box>
+        <IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" mt="3px" isLoading={ isLoading }/>
       </Td>
       <Td>
         <AddressEntityWithTokenFilter

ui/tx/internals/TxInternalsTableItem.tsx

@@ -38,7 +38,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
         />
       </Td>
       <Td px={ 0 } verticalAlign="middle">
-        <IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
+        <IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading } display="block"/>
       </Td>
       <Td verticalAlign="middle">
         { toData && (

ui/txs/TxsListItem.tsx

 import {
   HStack,
-  Box,
   Flex,
   Skeleton,
 } from '@chakra-ui/react';
@@ -101,14 +100,14 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
         />
         { (isIn || isOut) ?
           <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mx={ 2 } isLoading={ isLoading }/> : (
-            <Box mx={ 2 }>
             <IconSvg
               name="arrows/east"
               boxSize={ 6 }
               color="gray.500"
               isLoading={ isLoading }
+              mx={ 2 }
+              flexShrink={ 0 }
             />
-            </Box>
           ) }
         { dataTo ? (
           <AddressEntity

ui/verifiedAddresses/VerifiedAddressesListItem.tsx

@@ -70,7 +70,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
             borderRadius="none"
             flexShrink={ 0 }
             onClick={ handleEditClick }
-            icon={ <IconSvg name="edit"/> }
+            icon={ <IconSvg name="edit" boxSize={ 4 } flexShrink={ 0 }/> }
           />
         </Tooltip>
       </>

ui/verifiedAddresses/VerifiedAddressesTableItem.tsx

@@ -86,7 +86,7 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
               borderRadius="none"
               flexShrink={ 0 }
               onClick={ handleEditClick }
-              icon={ <IconSvg name="edit"/> }
+              icon={ <IconSvg name="edit" boxSize={ 4 } flexShrink={ 0 }/> }
             />
           </Tooltip>
         ) : null }