Merge branch 'main' of github.com:blockscout/frontend into pw-tests

deploy/values/main/values.yaml

@@ -153,7 +153,7 @@ postgres:
   command: '["docker-entrypoint.sh", "-c"]'
   args: '["max_connections=300"]'
 
-  strategy: Recreate
+  # strategy: Recreate
 
   persistence: true
 

deploy/values/review/values.yaml

@@ -124,7 +124,7 @@ postgres:
   command: '["docker-entrypoint.sh", "-c"]'
   args: '["max_connections=300"]'
 
-  persistence: true
+  # persistence: true
 
   resources:
     limits:

ui/apps/AppModal.tsx

@@ -13,6 +13,7 @@ import tgIcon from 'icons/social/telega.svg';
 import twIcon from 'icons/social/tweet.svg';
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
 import notEmpty from 'lib/notEmpty';
 
@@ -65,11 +66,13 @@ const AppModal = ({
     onFavoriteClick(id, isFavorite);
   }, [ onFavoriteClick, id, isFavorite ]);
 
+  const isMobile = useIsMobile();
+
   return (
     <Modal
       isOpen={ Boolean(id) }
       onClose={ onClose }
-      size={{ base: 'full', lg: 'md' }}
+      size={ isMobile ? 'full' : 'md' }
       isCentered
     >
       <ModalOverlay/>

ui/home/LatestBlocks.tsx

@@ -86,14 +86,13 @@ const LatestBlocks = () => {
         { statsQueryResult.isLoading && (
           <Skeleton h="24px" w="170px" mb={{ base: 6, lg: 9 }}/>
         ) }
-        { statsQueryResult.data?.network_utilization_percentage && (
+        { statsQueryResult.data?.network_utilization_percentage !== undefined && (
           <Box mb={{ base: 6, lg: 9 }}>
             <Text as="span" fontSize="sm">
-            Network utilization:{ nbsp }
+              Network utilization:{ nbsp }
             </Text>
-            { /* Not implemented in API yet */ }
             <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
-              { statsQueryResult.data.network_utilization_percentage.toFixed(2) }%
+              { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
             </Text>
           </Box>
         ) }
@@ -111,7 +110,7 @@ const LatestBlocks = () => {
 
   return (
     <>
-      <Heading as="h4" fontSize="18px" mb={{ base: 3, lg: 8 }}>Latest Blocks</Heading>
+      <Heading as="h4" size="sm" mb={{ base: 4, lg: 7 }}>Latest Blocks</Heading>
       { content }
     </>
   );

ui/home/LatestTxs.tsx

@@ -54,7 +54,7 @@ const LatestTransactions = () => {
 
   return (
     <>
-      <Heading as="h4" fontSize="18px" mb={{ base: 3, lg: 8 }}>Latest transactions</Heading>
+      <Heading as="h4" size="sm" mb={ 4 }>Latest transactions</Heading>
       { content }
     </>
   );

ui/shared/AccountPageDescription.tsx

@@ -26,7 +26,8 @@ const AccountPageDescription = ({ children }: {children: React.ReactNode}) => {
     return function cleanup() {
       window.removeEventListener('resize', resizeHandler);
     };
-  }, [ calculateCut ]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ ]);
 
   const expand = useCallback(() => {
     setExpanded(true);

ui/shared/DeleteModal.tsx

@@ -12,6 +12,7 @@ import {
 import { useMutation } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import FormSubmitAlert from 'ui/shared/FormSubmitAlert';
 
 type Props = {
@@ -53,8 +54,10 @@ const DeleteModal: React.FC<Props> = ({
     mutation.mutate();
   }, [ setAlertVisible, mutation ]);
 
+  const isMobile = useIsMobile();
+
   return (
-    <Modal isOpen={ isOpen } onClose={ onModalClose } size={{ base: 'full', lg: 'md' }}>
+    <Modal isOpen={ isOpen } onClose={ onModalClose } size={ isMobile ? 'full' : 'md' }>
       <ModalOverlay/>
       <ModalContent>
         <ModalHeader fontWeight="500" textStyle="h3">{ title }</ModalHeader>

ui/txs/TxAdditionalInfo.tsx

@@ -28,7 +28,7 @@ const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
 
   return (
     <>
-      <Heading as="h4" fontSize="18px" mb={ 6 }>Additional info </Heading>
+      <Heading as="h4" size="sm" mb={ 6 }>Additional info </Heading>
       <Box { ...sectionProps } mb={ 4 }>
         <Text { ...sectionTitleProps }>Transaction fee</Text>
         <Flex>