GasUsedToTargetRatio component

ui/block/BlockDetails.tsx

-import { Grid, GridItem, Text, Icon, Link, Stat, StatArrow, Box, Tooltip } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Icon, Link, Box, Tooltip } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
@@ -12,6 +12,7 @@ import useLink from 'lib/link/useLink';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import PrevNext from 'ui/shared/PrevNext';
 import TextSeparator from 'ui/shared/TextSeparator';
@@ -30,8 +31,6 @@ const BlockDetails = () => {
     });
   }, []);
 
-  const gasUsedPercentage = Math.round((block.gas_used / block.gas_target - 1) * 100);
-
   const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
 
   return (
@@ -104,10 +103,7 @@ const BlockDetails = () => {
       >
         <Text>{ block.gas_used.toLocaleString('en') }</Text>
         <Utilization ml={ 4 } mr={ 5 } colorScheme="gray" value={ block.gas_used / block.gas_limit }/>
-        <Stat>
-          <StatArrow ml={ 1 } type={ gasUsedPercentage >= 0 ? 'increase' : 'decrease' }/>
-          <Text as="span" color={ gasUsedPercentage >= 0 ? 'green.500' : 'red.500' } fontWeight={ 600 }>{ Math.abs(gasUsedPercentage) } % Gas Target</Text>
-        </Stat>
+        <GasUsedToTargetRatio used={ block.gas_used } target={ block.gas_target }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas limit"

ui/blocks/BlocksTableItem.tsx

-import { Tr, Td, Text, Link, Flex, Box, Stat, StatArrow, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
+import { Tr, Td, Text, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type ArrayElement from 'types/utils/ArrayElement';
@@ -8,6 +8,7 @@ import flameIcon from 'icons/flame.svg';
 import dayjs from 'lib/date/dayjs';
 import useLink from 'lib/link/useLink';
 import AddressLink from 'ui/shared/address/AddressLink';
+import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import Utilization from 'ui/shared/Utilization';
 
 interface Props {
@@ -18,7 +19,6 @@ interface Props {
 const BlocksTableItem = ({ data, isPending }: Props) => {
   const link = useLink();
 
-  const gasUsedPercentage = (data.gas_used / data.gas_target - 1) * 100;
   const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
@@ -44,12 +44,7 @@ const BlocksTableItem = ({ data, isPending }: Props) => {
         <Box>{ data.gas_used.toLocaleString('en') }</Box>
         <Flex mt={ 2 }>
           <Utilization colorScheme="gray" value={ data.gas_used / data.gas_limit }/>
-          <Stat ml={ 2 }>
-            <StatArrow type={ gasUsedPercentage >= 0 ? 'increase' : 'decrease' }/>
-            <Text as="span" color={ gasUsedPercentage >= 0 ? 'green.500' : 'red.500' } fontWeight={ 600 }>
-              { Math.abs(gasUsedPercentage).toLocaleString('en', { maximumFractionDigits: 2 }) } %
-            </Text>
-          </Stat>
+          <GasUsedToTargetRatio ml={ 2 } used={ data.gas_used } target={ data.gas_target }/>
         </Flex>
       </Td>
       <Td fontSize="sm">{ (data.reward.static + data.reward.tx_fee - data.burnt_fees).toLocaleString('en', { maximumFractionDigits: 5 }) }</Td>

ui/shared/GasUsedToTargetRatio.tsx

+import { Stat, StatArrow, Text, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  used: number;
+  target: number;
+  className?: string;
+}
+
+const GasUsedToTargetRatio = ({ used, target, className }: Props) => {
+  const percentage = (used / target - 1) * 100;
+
+  return (
+    <Stat className={ 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 }) } %
+      </Text>
+    </Stat>
+  );
+};
+
+export default React.memo(chakra(GasUsedToTargetRatio));