fixes

ui/home/LatestBlocksItem.tsx

@@ -34,12 +34,12 @@ const LatestBlocksItem = ({ block, h }: Props) => {
       animate={{ opacity: 1 }}
       transitionDuration="normal"
       transitionTimingFunction="linear"
-      width="100%"
       borderRadius="12px"
       border="1px solid"
       borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
       p={ 6 }
       h={ `${ h }px` }
+      minWidth={{ base: '100%', lg: '280px' }}
     >
       <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
         <HStack spacing={ 2 }>

ui/home/LatestBlocksItemSkeleton.tsx

@@ -12,7 +12,7 @@ import React from 'react';
 const LatestBlocksItemSkeleton = () => {
   return (
     <Box
-      width="100%"
+      minWidth={{ base: '100%', lg: '280px' }}
       borderRadius="12px"
       border="1px solid"
       borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }

ui/home/LatestTxsItem.tsx

@@ -13,8 +13,8 @@ import type { Transaction } from 'types/api/transaction';
 import appConfig from 'configs/app/config';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import transactionIcon from 'icons/transactions.svg';
-import dayjs from 'lib/date/dayjs';
 import getValueWithUnit from 'lib/getValueWithUnit';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -30,6 +30,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
   const iconColor = useColorModeValue('blue.600', 'blue.300');
 
   const dataTo = tx.to && tx.to.hash ? tx.to : tx.created_contract;
+  const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
 
   return (
     <Box
@@ -43,7 +44,9 @@ const LatestBlocksItem = ({ tx }: Props) => {
       <Flex justifyContent="space-between" width="100%" alignItems="start" flexDirection={{ base: 'column', lg: 'row' }}>
         <Box width="100%">
           <HStack>
-            { tx.tx_types.map(item => <TxType key={ item } type={ item }/>) }
+            { /* FIXME: mb only one type must be here */ }
+            <TxType type={ tx.tx_types[0] }/>
+            { /* { tx.tx_types.map(item => <TxType key={ item } type={ item }/>) } */ }
             <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
           </HStack>
           <Flex
@@ -70,7 +73,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
                 />
               </Address>
             </Flex>
-            <Text variant="secondary" fontWeight="400" fontSize="sm">{ dayjs(tx.timestamp).fromNow() }</Text>
+            { tx.timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
           </Flex>
         </Box>
         <Box>

ui/home/StatsItem.tsx

-import { Box, Flex, Icon, Center, Text, LightMode } from '@chakra-ui/react';
+import { Flex, Icon, Center, Text, LightMode } from '@chakra-ui/react';
 import React from 'react';
 
 type Props = {
@@ -10,14 +10,27 @@ type Props = {
 const StatsItem = ({ icon, title, value }: Props) => {
   return (
     <LightMode>
-      <Flex background="blue.50" padding={ 5 } borderRadius="16px">
-        <Center backgroundColor="green.100" borderRadius="12px" w={ 10 } h={ 10 } marginRight={ 4 }>
+      <Flex
+        backgroundColor="blue.50"
+        padding={ 5 }
+        borderRadius="16px"
+        flexDirection={{ base: 'row', lg: 'column', xl: 'row' }}
+        alignItems="center"
+      >
+        <Center
+          backgroundColor="green.100"
+          borderRadius="12px"
+          w={ 10 }
+          h={ 10 }
+          mr={{ base: 4, lg: 0, xl: 4 }}
+          mb={{ base: 0, lg: 2, xl: 0 }}
+        >
           <Icon as={ icon } boxSize={ 7 } color="black"/>
         </Center>
-        <Box>
+        <Flex flexDirection="column" alignItems={{ base: 'start', lg: 'center', xl: 'start' }}>
           <Text variant="secondary" fontSize="xs" lineHeight="16px">{ title }</Text>
           <Text fontWeight={ 500 } fontSize="md">{ value }</Text>
-        </Box>
+        </Flex>
       </Flex>
     </LightMode>
   );

ui/snippets/header/Header.tsx

@@ -55,7 +55,7 @@ const Header = ({ hideOnScrollDown, hasSearch }: Props) => {
             paddingTop={ 9 }
             paddingBottom="52px"
           >
-            <Box width="100%" opacity={ hasSearch ? 1 : 0 }><SearchBar/></Box>
+            <Box width="100%">{ hasSearch && <SearchBar/> }</Box>
             <ColorModeToggler/>
             <ProfileMenuDesktop/>
           </HStack>