tooltip on stats page

ui/stats/ChartsWidgetsList.tsx

+import type { TooltipProps } from '@chakra-ui/react';
 import { Box, Grid, Heading, List, ListItem, Skeleton } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { StatsChartsSection } from 'types/api/stats';
+import type { HomeStats, StatsChartsSection } from 'types/api/stats';
 import type { StatsIntervalIds } from 'types/client/stats';
 
+import { getResourceKey } from 'lib/api/useApiQuery';
 import { apos } from 'lib/html-entities';
 import EmptySearchResult from 'ui/shared/EmptySearchResult';
+import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
+import Hint from 'ui/shared/Hint';
 
 import ChartsLoadingErrorAlert from './ChartsLoadingErrorAlert';
 import ChartWidgetContainer from './ChartWidgetContainer';
 
+const GAS_TOOLTIP_PROPS: Partial<TooltipProps> = {
+  borderRadius: 'md',
+  hasArrow: false,
+  padding: 0,
+};
+
 type Props = {
   filterQuery: string;
   isError: boolean;
@@ -23,6 +34,9 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
   const isAnyChartDisplayed = charts?.some((section) => section.charts.length > 0);
   const isEmptyChartList = Boolean(filterQuery) && !isAnyChartDisplayed;
 
+  const queryClient = useQueryClient();
+  const homeStatsData = queryClient.getQueryData<HomeStats>(getResourceKey('homepage_stats'));
+
   const handleChartLoadingError = useCallback(
     () => setIsSomeChartLoadingError(true),
     [ setIsSomeChartLoadingError ]);
@@ -51,10 +65,12 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
                 marginBottom: 0,
               }}
             >
-              <Skeleton isLoaded={ !isPlaceholderData } mb={ 4 } display="inline-block">
+              <Skeleton isLoaded={ !isPlaceholderData } mb={ 4 } display="inline-flex" alignItems="center" columnGap={ 2 }>
                 <Heading size="md" >
                   { section.title }
                 </Heading>
+                { section.id === 'gas' && homeStatsData && homeStatsData.gas_prices &&
+                  <Hint label={ <GasInfoTooltipContent data={ homeStatsData }/> } tooltipProps={ GAS_TOOLTIP_PROPS }/> }
               </Skeleton>
 
               <Grid