Fixes after migration to Chakra v3 (#2663)

* fixes of mobile layout, popovers and contract verification form

* fix top bar network menu and icon size on profile button

* extend timeout for NameDomains test

* fix token test

configs/envs/.env.eth

@@ -9,8 +9,6 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-NEXT_PUBLIC_COLOR_THEME_DEFAULT=dim
-
 # Instance ENVs
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/

toolkit/chakra/popover.tsx

@@ -73,6 +73,7 @@ export const PopoverCloseTriggerWrapper = React.forwardRef<
 export const PopoverRoot = (props: ChakraPopover.RootProps) => {
   const positioning = {
     placement: 'bottom-start' as const,
+    overflowPadding: 4,
     ...props.positioning,
     offset: {
       mainAxis: 4,

toolkit/theme/recipes/button.recipe.ts

@@ -257,10 +257,43 @@ export const recipe = defineRecipe({
       },
     },
     size: {
-      '2xs': { px: 2, h: 5, minW: 5, textStyle: 'xs', borderRadius: 'sm', gap: 1 },
-      xs: { px: 2, h: 6, minW: 6, textStyle: 'sm', borderRadius: 'sm', gap: 1 },
-      sm: { px: 3, h: 8, minW: 8, textStyle: 'sm', borderRadius: 'base', gap: 1 },
-      md: { px: 3, h: 10, minW: 10, textStyle: 'md', borderRadius: 'base', gap: 2, '& .chakra-spinner': { '--spinner-size': '20px' } },
+      '2xs': {
+        px: 2,
+        h: 5,
+        minW: 5,
+        textStyle: 'xs',
+        borderRadius: 'sm',
+        gap: 1,
+        _icon: { boxSize: 'auto' },
+      },
+      xs: {
+        px: 2,
+        h: 6,
+        minW: 6,
+        textStyle: 'sm',
+        borderRadius: 'sm',
+        gap: 1,
+        _icon: { boxSize: 'auto' },
+      },
+      sm: {
+        px: 3,
+        h: 8,
+        minW: 8,
+        textStyle: 'sm',
+        borderRadius: 'base',
+        gap: 1,
+        _icon: { boxSize: 'auto' },
+      },
+      md: {
+        px: 3,
+        h: 10,
+        minW: 10,
+        textStyle: 'md',
+        borderRadius: 'base',
+        gap: 2,
+        _icon: { boxSize: 'auto' },
+        '& .chakra-spinner': { '--spinner-size': '20px' },
+      },
     },
   },
   defaultVariants: {

toolkit/theme/recipes/popover.recipe.ts

@@ -13,9 +13,10 @@ export const recipe = defineSlotRecipe({
       boxShadow: 'popover',
       boxShadowColor: 'colors.popover.shadow',
       '--popover-mobile-size': 'calc(100dvw - 1rem)',
-      width: {
-        base: 'min(var(--popover-mobile-size), var(--popover-size))',
-        lg: 'fit-content',
+      width: 'fit-content',
+      maxW: {
+        base: 'calc(100vw - 8px)',
+        lg: '800px',
       },
       borderWidth: '0',
       borderRadius: 'md',

ui/advancedFilter/ColumnsButton.tsx

+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import { Button } from 'toolkit/chakra/button';
@@ -27,9 +28,10 @@ const ColumnsButton = ({ columns, onChange }: Props) => {
         <Button
           variant="dropdown"
           size="sm"
+          px={{ base: 1, lg: 3 }}
         >
           <IconSvg name="columns" boxSize={ 5 } color="inherit"/>
-          Columns
+          <chakra.span hideBelow="lg">Columns</chakra.span>
         </Button>
       </PopoverTrigger>
       <PopoverContent>

ui/contractVerification/ContractVerificationMethod.tsx

-import { Grid, Text } from '@chakra-ui/react';
+import { Grid } from '@chakra-ui/react';
 import React from 'react';
 
+import { Heading } from 'toolkit/chakra/heading';
+
 interface Props {
   title: string;
   children: React.ReactNode;
@@ -16,7 +18,7 @@ const ContractVerificationMethod = ({ title, children, disableScroll }: Props) =
 
   return (
     <section ref={ ref }>
-      <Text fontWeight={ 500 } fontSize="lg" fontFamily="heading" mt={ 12 } mb={ 5 }>{ title }</Text>
+      <Heading level="2" mt={ 12 } mb={ 5 }>{ title }</Heading>
       <Grid columnGap="30px" rowGap={{ base: 2, lg: 5 }} templateColumns={{ base: '1fr', lg: 'minmax(0, 680px) minmax(0, 340px)' }}>
         { children }
       </Grid>

ui/contractVerification/fields/ContractVerificationFieldAddress.tsx

-import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormFields } from '../types';
 
+import { Heading } from 'toolkit/chakra/heading';
 import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
@@ -15,9 +15,9 @@ const ContractVerificationFieldAddress = ({ readOnly }: Props) => {
   return (
     <>
       <ContractVerificationFormRow>
-        <chakra.span fontWeight={ 500 } fontSize="lg" fontFamily="heading">
+        <Heading level="2">
           Contract address to verify
-        </chakra.span>
+        </Heading>
       </ContractVerificationFormRow>
       <ContractVerificationFormRow>
         <FormFieldAddress<FormFields>

ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx

@@ -78,7 +78,7 @@ const ContractVerificationFieldCompiler = ({ isVyper, isStylus, config }: Props)
     <ContractVerificationFormRow>
       <FormFieldSelectAsync<FormFields, 'compiler'>
         name="compiler"
-        placeholder="Compiler (enter version or use the dropdown)"
+        placeholder="Compiler"
         loadOptions={ loadOptions }
         extraControls={ extraControls }
         required

ui/contractVerification/fields/ContractVerificationFieldMethod.tsx

 import {
-  chakra,
   List,
   Box,
   createListCollection,
@@ -10,6 +9,7 @@ import type { FormFields } from '../types';
 import type { SmartContractVerificationMethod, SmartContractVerificationConfig } from 'types/client/contract';
 
 import { nbsp } from 'lib/html-entities';
+import { Heading } from 'toolkit/chakra/heading';
 import { Link } from 'toolkit/chakra/link';
 import type { SelectOption } from 'toolkit/chakra/select';
 import FormFieldSelect from 'ui/shared/forms/fields/FormFieldSelect';
@@ -89,16 +89,14 @@ const ContractVerificationFieldMethod = ({ methods }: Props) => {
 
   return (
     <>
-      <Box mt={{ base: 10, lg: 6 }} gridColumn={{ lg: '1 / 3' }}>
-        <chakra.span fontWeight={ 500 } fontSize="lg" fontFamily="heading" mr={ 1 }>
+      <Heading level="2" mt={{ base: 10, lg: 6 }} gridColumn={{ lg: '1 / 3' }}>
         Currently, Blockscout supports { methods.length }{ nbsp }contract verification methods
-        </chakra.span>
         <Hint
           label={ tooltipContent }
-          verticalAlign="text-bottom"
           tooltipProps={{ interactive: true, contentProps: { textAlign: 'left' } }}
+          ml={ 1 }
         />
-      </Box>
+      </Heading>
       <FormFieldSelect<FormFields, 'method'>
         name="method"
         placeholder="Verification method (compiler type)"

ui/contractVerification/fields/ContractVerificationFieldZkCompiler.tsx

@@ -38,7 +38,7 @@ const ContractVerificationFieldZkCompiler = ({ config }: { config: SmartContract
     <ContractVerificationFormRow>
       <FormFieldSelectAsync<FormFields, 'zk_compiler'>
         name="zk_compiler"
-        placeholder="ZK compiler (enter version or use the dropdown)"
+        placeholder="ZK compiler"
         loadOptions={ loadOptions }
         required
       />

ui/pages/NameDomains.pw.tsx

@@ -33,8 +33,9 @@ test.beforeEach(async({ mockApiResponse, mockAssetResponse, mockTextAd }) => {
 });
 
 test('default view +@mobile', async({ render }) => {
+  test.slow();
   const component = await render(<NameDomains/>);
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });
 
 test('filters', async({ render, page }) => {

ui/pages/Token.pw.tsx

@@ -39,6 +39,7 @@ test('base view', async({ render, page, createSocket }) => {
   const socket = await createSocket();
   const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
+  await component.getByText('100 ARIA').waitFor({ state: 'visible' });
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(pwConfig.adsBannerSelector) ],
@@ -55,6 +56,7 @@ test('with verified info', async({ render, page, createSocket, mockApiResponse,
   const socket = await createSocket();
   const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
+  await component.getByText('100 ARIA').waitFor({ state: 'visible' });
 
   await page.getByLabel('Show info').click();
 
@@ -83,6 +85,7 @@ test('bridged token', async({ render, page, createSocket, mockApiResponse, mockA
   const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
   const socket = await createSocket();
   await socketServer.joinChannel(socket, `tokens:${ hash.toLowerCase() }`);
+  await component.getByText('369,000,000 HyFi').waitFor({ state: 'visible' });
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(pwConfig.adsBannerSelector) ],
@@ -98,6 +101,7 @@ test.describe('mobile', () => {
     const socket = await createSocket();
     const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
+    await component.getByText('100 ARIA').waitFor({ state: 'visible' });
 
     await expect(component).toHaveScreenshot({
       mask: [ page.locator(pwConfig.adsBannerSelector) ],
@@ -113,6 +117,7 @@ test.describe('mobile', () => {
     const socket = await createSocket();
     const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
+    await component.getByText('100 ARIA').waitFor({ state: 'visible' });
 
     await expect(component).toHaveScreenshot({
       mask: [ page.locator(pwConfig.adsBannerSelector) ],

ui/shared/EntityTags/EntityTags.tsx

@@ -28,12 +28,18 @@ const EntityTags = ({ tags, className, isLoading }: Props) => {
     return metaSuitesPlaceholder;
   }
 
-  const content = (() => {
-    const tagMaxW = {
-      base: tags.length === 1 ? '100%' : '60%',
-      lg: '300px',
-    };
+  const tagMaxW = (() => {
+    if (tags.length === 1) {
+      return { base: '100%', lg: '300px' };
+    }
+
+    if (tags.length === 2) {
+      return { base: 'calc((100% - 8px) / 2)', lg: '300px' };
+    }
+    return { base: 'calc((100% - 40px) / 2)', lg: '300px' };
+  })();
 
+  const content = (() => {
     if (tags.length > visibleNum) {
       return (
         <>
@@ -66,7 +72,7 @@ const EntityTags = ({ tags, className, isLoading }: Props) => {
   })();
 
   return (
-    <Flex className={ className } columnGap={ 2 } rowGap={ 2 } flexWrap="nowrap" alignItems="center" flexGrow={ 1 } maxW="100%">
+    <Flex className={ className } columnGap={ 2 } rowGap={ 2 } flexWrap="nowrap" alignItems="center" flexGrow={ 1 } maxW="100%" overflow="hidden">
       { content }
     </Flex>
   );

ui/shared/entities/address/AddressIdenticon.tsx

-import { Box, Flex } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
@@ -53,7 +53,7 @@ const Icon = dynamic(
 
         return (props: IconProps) => {
           const svg = GradientAvatar(props.hash, props.size, 'circle');
-          return <Flex dangerouslySetInnerHTML={{ __html: svg }}/>;
+          return <Box dangerouslySetInnerHTML={{ __html: svg }}/>;
         };
       }
 

ui/shared/filters/TableColumnFilter.tsx

@@ -31,6 +31,7 @@ const TableColumnFilter = ({ title, isFilled, isTouched, hasReset, onFilter, onR
             variant="link"
             onClick={ onReset }
             disabled={ !isFilled }
+            textStyle="sm"
           >
             Reset
           </Button>

ui/snippets/searchBar/SearchBar.tsx

@@ -155,6 +155,7 @@ const SearchBar = ({ isHomepage }: Props) => {
           />
         </PopoverTrigger>
         <PopoverContent
+          maxW={{ base: 'calc(100vw - 8px)', lg: 'unset' }}
           w={ `${ menuWidth.current }px` }
           ref={ menuRef }
           overflow="hidden"

ui/snippets/topBar/NetworkMenu.tsx

@@ -19,7 +19,7 @@ const NetworkMenu = () => {
       <PopoverTrigger>
         <IconButton
           variant="link"
-          size="2xs"
+          boxSize={ 5 }
           aria-label="Network menu"
           borderRadius="sm"
           onClick={ menu.onToggle }