refactor to separate component

ui/blocks/BlockTimestamp.tsx

@@ -0,0 +1,17 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+
+interface Props {
+  ts: string;
+  isEnabled?: boolean;
+}
+
+const BlockTimestamp = ({ ts, isEnabled }: Props) => {
+  const timeAgo = useTimeAgoIncrement(ts, isEnabled);
+
+  return <Text variant="secondary" fontWeight={ 400 }>{ timeAgo }</Text>;
+};
+
+export default React.memo(BlockTimestamp);

ui/blocks/BlocksListItem.tsx

@@ -8,8 +8,8 @@ import appConfig from 'configs/app/config';
 import flameIcon from 'icons/flame.svg';
 import getBlockReward from 'lib/block/getBlockReward';
 import { WEI } from 'lib/consts';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
+import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
@@ -24,7 +24,6 @@ interface Props {
 const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const { totalReward, burntFees, txFees } = getBlockReward(data);
-  const blockTimestampTimeAgo = useTimeAgoIncrement(data.timestamp, enableTimeIncrement);
 
   return (
     <AccountListItemMobile rowGap={ 3 }>
@@ -38,7 +37,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
             { data.height }
           </Link>
         </Flex>
-        <Text variant="secondary"fontWeight={ 400 }>{ blockTimestampTimeAgo }</Text>
+        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement }/>
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Size</Text>

ui/blocks/BlocksTableItem.tsx

@@ -1,4 +1,4 @@
-import { Tr, Td, Text, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
+import { Tr, Td, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -7,8 +7,8 @@ import type { Block } from 'types/api/block';
 import flameIcon from 'icons/flame.svg';
 import getBlockReward from 'lib/block/getBlockReward';
 import { WEI } from 'lib/consts';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
+import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import Utilization from 'ui/shared/Utilization';
@@ -21,12 +21,11 @@ interface Props {
 
 const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const { totalReward, burntFees, txFees } = getBlockReward(data);
-  const blockTimestampTimeAgo = useTimeAgoIncrement(data.timestamp, enableTimeIncrement);
 
   return (
     <Tr>
       <Td fontSize="sm">
-        <Flex columnGap={ 2 } alignItems="center">
+        <Flex columnGap={ 2 } alignItems="center" mb={ 2 }>
           { isPending && <Spinner size="sm" flexShrink={ 0 }/> }
           <Tooltip isDisabled={ data.type !== 'reorg' } label="Chain reorganizations">
             <Link
@@ -37,7 +36,7 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
             </Link>
           </Tooltip>
         </Flex>
-        <Text variant="secondary" mt={ 2 } fontWeight={ 400 }>{ blockTimestampTimeAgo }</Text>
+        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement }/>
       </Td>
       <Td fontSize="sm">{ data.size.toLocaleString('en') } bytes</Td>
       <Td fontSize="sm">

ui/shared/Utilization.tsx

@@ -25,4 +25,4 @@ const Utilization = ({ className, value, colorScheme = 'green' }: Props) => {
   );
 };
 
-export default chakra(Utilization);
+export default React.memo(chakra(Utilization));