Merge pull request #721 from blockscout/gas-usage

block gas usage design fix

ui/block/BlockDetails.tsx

-import { Grid, GridItem, Text, Icon, Link, Box, Tooltip } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, useColorModeValue } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
@@ -40,6 +40,8 @@ const BlockDetails = ({ query }: Props) => {
   const router = useRouter();
   const heightOrHash = getQueryParamString(router.query.height);
 
+  const separatorColor = useColorModeValue('gray.200', 'gray.700');
+
   const { data, isLoading, isError, error } = query;
 
   const handleCutClick = React.useCallback(() => {
@@ -197,11 +199,15 @@ const BlockDetails = ({ query }: Props) => {
         <Text>{ BigNumber(data.gas_used || 0).toFormat() }</Text>
         <Utilization
           ml={ 4 }
-          mr={ 5 }
           colorScheme="gray"
           value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }
         />
-        <GasUsedToTargetRatio value={ data.gas_target_percentage || undefined }/>
+        { data.gas_target_percentage && (
+          <>
+            <TextSeparator color={ separatorColor } mx={ 1 }/>
+            <GasUsedToTargetRatio value={ data.gas_target_percentage }/>
+          </>
+        ) }
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas limit"

ui/blocks/BlocksListItem.tsx

-import { Flex, Spinner, Text, Box, Icon } from '@chakra-ui/react';
+import { Flex, Spinner, Text, Box, Icon, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import { route } from 'nextjs-routes';
@@ -16,6 +16,7 @@ import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
@@ -29,6 +30,8 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const burntFees = BigNumber(data.burnt_fees || 0);
   const txFees = BigNumber(data.tx_fees || 0);
 
+  const separatorColor = useColorModeValue('gray.200', 'gray.700');
+
   return (
     <ListItemMobile rowGap={ 3 } key={ String(data.height) } isAnimated>
       <Flex justifyContent="space-between" w="100%">
@@ -63,10 +66,15 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
       </Flex>
       <Box>
         <Text fontWeight={ 500 }>Gas used</Text>
-        <Flex columnGap={ 4 } mt={ 2 }>
-          <Text variant="secondary">{ BigNumber(data.gas_used || 0).toFormat() }</Text>
+        <Flex mt={ 2 }>
+          <Text variant="secondary" mr={ 4 }>{ BigNumber(data.gas_used || 0).toFormat() }</Text>
           <Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).div(BigNumber(data.gas_limit)).toNumber() }/>
-          <GasUsedToTargetRatio value={ data.gas_target_percentage || undefined }/>
+          { data.gas_target_percentage && (
+            <>
+              <TextSeparator color={ separatorColor } mx={ 1 }/>
+              <GasUsedToTargetRatio value={ data.gas_target_percentage }/>
+            </>
+          ) }
         </Flex>
       </Box>
       <Flex columnGap={ 2 }>

ui/blocks/BlocksTableItem.tsx

@@ -13,6 +13,7 @@ import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import LinkInternal from 'ui/shared/LinkInternal';
+import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
@@ -26,6 +27,8 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const burntFees = BigNumber(data.burnt_fees || 0);
   const txFees = BigNumber(data.tx_fees || 0);
 
+  const separatorColor = useColorModeValue('gray.200', 'gray.700');
+
   return (
     <Tr
       as={ motion.tr }
@@ -68,11 +71,12 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
               <Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }/>
             </Box>
           </Tooltip>
-          <Tooltip label="% of Gas Target">
-            <Box>
-              <GasUsedToTargetRatio ml={ 2 } value={ data.gas_target_percentage || undefined }/>
-            </Box>
-          </Tooltip>
+          { data.gas_target_percentage && (
+            <>
+              <TextSeparator color={ separatorColor } mx={ 1 }/>
+              <GasUsedToTargetRatio value={ data.gas_target_percentage }/>
+            </>
+          ) }
         </Flex>
       </Td>
       <Td fontSize="sm">{ totalReward.toFixed(8) }</Td>

ui/shared/GasUsedToTargetRatio.tsx

-import { Stat, StatArrow, Text, chakra } from '@chakra-ui/react';
+import { Text, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
-type Props = ({
+type Props = {
   value: number;
-} | {
-  used: number;
-  target: number;
-}) & {
-  className?: string;
 }
 
-const GasUsedToTargetRatio = (props: Props) => {
-  const percentage = (() => {
-    if ('value' in props) {
-      return props.value;
-    }
-
-    return (props.used / props.target - 1) * 100;
-  })();
-
+const GasUsedToTargetRatio = ({ value }: Props) => {
   return (
-    <Stat className={ props.className }>
-      <StatArrow type={ percentage >= 0 ? 'increase' : 'decrease' }/>
-      <Text as="span" color={ percentage >= 0 ? 'green.500' : 'red.500' } fontWeight={ 600 }>
-        { Math.abs(percentage).toLocaleString('en', { maximumFractionDigits: 2 }) } %
+    <Tooltip label="% of Gas Target">
+      <Text variant="secondary">
+        { (value > 0 ? '+' : '') + value.toLocaleString('en', { maximumFractionDigits: 2 }) }%
       </Text>
-    </Stat>
+    </Tooltip>
   );
 };
 
-export default React.memo(chakra(GasUsedToTargetRatio));
+export default React.memo(GasUsedToTargetRatio);

ui/shared/Utilization/Utilization.tsx

@@ -12,7 +12,7 @@ const WIDTH = 50;
 
 const Utilization = ({ className, value, colorScheme = 'green' }: Props) => {
   const valueString = (clamp(value * 100 || 0, 0, 100)).toLocaleString('en', { maximumFractionDigits: 2 }) + '%';
-  const colorGrayScheme = useColorModeValue('gray.500', 'gray.500');
+  const colorGrayScheme = useColorModeValue('gray.500', 'gray.400');
   const color = colorScheme === 'gray' ? colorGrayScheme : 'green.500';
 
   return (