Unify network utilization color (#3000)

UX: Network utilization color

Resolves #2926

lib/networks/getNetworkUtilizationParams.ts

@@ -0,0 +1,25 @@
+export default function getNetworkUtilizationParams(value: number) {
+  const load = (() => {
+    if (value > 80) {
+      return 'high';
+    }
+
+    if (value > 50) {
+      return 'medium';
+    }
+
+    return 'low';
+  })();
+
+  const colors = {
+    high: 'red.600',
+    medium: 'orange.600',
+    low: 'green.600',
+  };
+  const color = colors[load];
+
+  return {
+    load,
+    color,
+  };
+}

ui/blocks/BlocksTabSlot.tsx

@@ -1,4 +1,5 @@
 import { Flex, Box, Text } from '@chakra-ui/react';
+import { upperFirst } from 'es-toolkit';
 import React from 'react';
 
 import type { PaginationParams } from 'ui/shared/pagination/types';
@@ -6,9 +7,11 @@ import type { PaginationParams } from 'ui/shared/pagination/types';
 import { route } from 'nextjs-routes';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import getNetworkUtilizationParams from 'lib/networks/getNetworkUtilizationParams';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import { nbsp } from 'toolkit/utils/htmlEntities';
 import IconSvg from 'ui/shared/IconSvg';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -24,6 +27,8 @@ const BlocksTabSlot = ({ pagination }: Props) => {
     },
   });
 
+  const networkUtilization = getNetworkUtilizationParams(statsQuery.data?.network_utilization_percentage ?? 0);
+
   return (
     <Flex alignItems="center" columnGap={ 8 } display={{ base: 'none', lg: 'flex' }}>
       { statsQuery.data?.network_utilization_percentage !== undefined && (
@@ -31,9 +36,11 @@ const BlocksTabSlot = ({ pagination }: Props) => {
           <Text as="span" fontSize="sm">
             Network utilization (last 50 blocks):{ nbsp }
           </Text>
-          <Skeleton display="inline-block" fontSize="sm" color="blue.500" fontWeight={ 600 } loading={ statsQuery.isPlaceholderData }>
-            <span>{ statsQuery.data.network_utilization_percentage.toFixed(2) }%</span>
-          </Skeleton>
+          <Tooltip content={ `${ upperFirst(networkUtilization.load) } load` }>
+            <Skeleton display="inline-block" fontSize="sm" color={ networkUtilization.color } fontWeight={ 600 } loading={ statsQuery.isPlaceholderData }>
+              <span>{ statsQuery.data.network_utilization_percentage.toFixed(2) }%</span>
+            </Skeleton>
+          </Tooltip>
         </Box>
       ) }
       <Link href={ route({ pathname: '/block/countdown' }) }>

ui/gasTracker/GasTrackerNetworkUtilization.tsx

@@ -1,6 +1,7 @@
 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import getNetworkUtilizationParams from 'lib/networks/getNetworkUtilizationParams';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { mdash } from 'toolkit/utils/htmlEntities';
 
@@ -10,24 +11,7 @@ interface Props {
 }
 
 const GasTrackerNetworkUtilization = ({ percentage, isLoading }: Props) => {
-  const load = (() => {
-    if (percentage > 80) {
-      return 'high';
-    }
-
-    if (percentage > 50) {
-      return 'medium';
-    }
-
-    return 'low';
-  })();
-
-  const colors = {
-    high: 'red.600',
-    medium: 'orange.600',
-    low: 'green.600',
-  };
-  const color = colors[load];
+  const { load, color } = getNetworkUtilizationParams(percentage);
 
   return (
     <Skeleton loading={ isLoading } whiteSpace="pre-wrap">

ui/home/LatestBlocks.tsx

@@ -1,5 +1,6 @@
 import { chakra, Box, Flex, Text, VStack } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
+import { upperFirst } from 'es-toolkit';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
@@ -11,6 +12,7 @@ import config from 'configs/app';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useInitialList from 'lib/hooks/useInitialList';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import getNetworkUtilizationParams from 'lib/networks/getNetworkUtilizationParams';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { BLOCK } from 'stubs/block';
@@ -18,6 +20,7 @@ import { HOMEPAGE_STATS } from 'stubs/stats';
 import { Heading } from 'toolkit/chakra/heading';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import { nbsp } from 'toolkit/utils/htmlEntities';
 
 import LatestBlocksItem from './LatestBlocksItem';
@@ -101,6 +104,8 @@ const LatestBlocks = () => {
     );
   }
 
+  const networkUtilization = getNetworkUtilizationParams(statsQueryResult.data?.network_utilization_percentage ?? 0);
+
   return (
     <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
       <Heading level="3">Latest blocks</Heading>
@@ -109,9 +114,11 @@ const LatestBlocks = () => {
           <Text as="span">
             Network utilization:{ nbsp }
           </Text>
-          <Text as="span" color="blue.500" fontWeight={ 700 }>
-            { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
-          </Text>
+          <Tooltip content={ `${ upperFirst(networkUtilization.load) } load` }>
+            <Text as="span" color={ networkUtilization.color } fontWeight={ 700 }>
+              { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
+            </Text>
+          </Tooltip>
         </Skeleton>
       ) }
       { statsQueryResult.data?.celo && (