gas tracker info

types/api/stats.ts

@@ -7,12 +7,18 @@ export type HomeStats = {
   total_gas_used: string;
   transactions_today: string;
   gas_used_today: string;
-  gas_prices: {average: number; fast: number; slow: number};
+  gas_prices: GasPrices;
   static_gas_price: string;
   market_cap: string;
   network_utilization_percentage: number;
 }
 
+export type GasPrices = {
+  average: number;
+  fast: number;
+  slow: number;
+}
+
 export type Stats = {
   total_blocks: string;
 }

ui/home/Stats.tsx

@@ -13,6 +13,7 @@ import txIcon from 'icons/transactions.svg';
 import walletIcon from 'icons/wallet.svg';
 import useFetch from 'lib/hooks/useFetch';
 
+import StatsGasPrices from './StatsGasPrices';
 import StatsItem from './StatsItem';
 import StatsItemSkeleton from './StatsItemSkeleton';
 
@@ -44,6 +45,7 @@ const Stats = () => {
   const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } };
 
   if (data) {
+    const gasLabel = hasGasTracker ? <StatsGasPrices gasPrices={ data.gas_prices }/> : null;
     content = (
       <>
         <StatsItem
@@ -75,6 +77,7 @@ const Stats = () => {
             title="Gas tracker"
             value={ `${ Number(data.gas_prices.average).toLocaleString() } Gwei` }
             _last={ itemsCount % 2 ? lastItemTouchStyle : undefined }
+            tooltipLabel={ gasLabel }
           />
         ) }
       </>

ui/home/StatsGasPrices.tsx

+import { Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { GasPrices } from 'types/api/stats';
+
+const StatsGasPrices = ({ gasPrices }: {gasPrices: GasPrices}) => {
+  const nameStyleProps = {
+    color: useColorModeValue('blue.100', 'blue.600'),
+  };
+
+  return (
+    <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs">
+      <GridItem { ...nameStyleProps }>Slow</GridItem>
+      <GridItem>{ `${ gasPrices.slow } Gwei` }</GridItem>
+      <GridItem { ...nameStyleProps }>Average</GridItem>
+      <GridItem>{ `${ gasPrices.average } Gwei` }</GridItem>
+      <GridItem { ...nameStyleProps }>Fast</GridItem>
+      <GridItem>{ `${ gasPrices.fast } Gwei` }</GridItem>
+    </Grid>
+  );
+};
+
+export default StatsGasPrices;

ui/home/StatsItem.tsx

-import { Flex, Icon, Text, useColorModeValue, chakra } from '@chakra-ui/react';
+import { Box, Flex, Icon, Text, useColorModeValue, chakra, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
+import infoIcon from 'icons/info.svg';
 import breakpoints from 'theme/foundations/breakpoints';
 
 type Props = {
@@ -8,11 +9,12 @@ type Props = {
   title: string;
   value: string;
   className?: string;
+  tooltipLabel?: React.ReactNode;
 }
 
 const LARGEST_BREAKPOINT = '1240px';
 
-const StatsItem = ({ icon, title, value, className }: Props) => {
+const StatsItem = ({ icon, title, value, className, tooltipLabel }: Props) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const sxContainer = {} as any;
   sxContainer[`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`] = { flexDirection: 'column' };
@@ -21,6 +23,8 @@ const StatsItem = ({ icon, title, value, className }: Props) => {
   const sxText = {} as any;
   sxText[`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`] = { alignItems: 'center' };
 
+  const infoColor = useColorModeValue('gray.600', 'gray.400');
+
   return (
     <Flex
       backgroundColor={ useColorModeValue('blue.50', 'blue.800') }
@@ -33,6 +37,7 @@ const StatsItem = ({ icon, title, value, className }: Props) => {
       rowGap={ 2 }
       className={ className }
       color={ useColorModeValue('black', 'white') }
+      position="relative"
     >
       <Icon as={ icon } boxSize={ 7 }/>
       <Flex
@@ -43,6 +48,20 @@ const StatsItem = ({ icon, title, value, className }: Props) => {
         <Text variant="secondary" fontSize="xs" lineHeight="16px">{ title }</Text>
         <Text fontWeight={ 500 } fontSize="md" color={ useColorModeValue('black', 'white') }>{ value }</Text>
       </Flex>
+      { tooltipLabel && (
+        <Tooltip label={ tooltipLabel } hasArrow={ false } borderRadius="12px" placement="bottom-end" offset={ [ 0, 0 ] }>
+          <Box
+            position="absolute"
+            top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
+            right="10px">
+            <Icon
+              as={ infoIcon }
+              boxSize={ 6 }
+              color={ infoColor }
+            />
+          </Box>
+        </Tooltip>
+      ) }
     </Flex>
   );
 };