use dataUpdatedAt as a reference

ui/blocks/BlocksTabSlot.tsx

@@ -14,6 +14,11 @@ interface Props {
 
 const BlocksTabSlot = ({ pagination }: Props) => {
   const statsQuery = useApiQuery('homepage_stats', {
+    fetchParams: {
+      headers: {
+        'updated-gas-oracle': 'true',
+      },
+    },
     queryOptions: {
       placeholderData: HOMEPAGE_STATS,
     },

ui/home/Stats.tsx

@@ -16,7 +16,7 @@ const hasGasTracker = config.UI.homepage.showGasTracker;
 const hasAvgBlockTime = config.UI.homepage.showAvgBlockTime;
 
 const Stats = () => {
-  const { data, isPlaceholderData, isError } = useApiQuery('homepage_stats', {
+  const { data, isPlaceholderData, isError, dataUpdatedAt } = useApiQuery('homepage_stats', {
     fetchParams: {
       headers: {
         'updated-gas-oracle': 'true',
@@ -51,7 +51,7 @@ const Stats = () => {
     !data.gas_prices && itemsCount--;
     data.rootstock_locked_btc && itemsCount++;
     const isOdd = Boolean(itemsCount % 2);
-    const gasLabel = hasGasTracker && data.gas_prices ? <GasInfoTooltipContent data={ data }/> : null;
+    const gasLabel = hasGasTracker && data.gas_prices ? <GasInfoTooltipContent data={ data } dataUpdatedAt={ dataUpdatedAt }/> : null;
 
     const gasPriceText = (() => {
       if (data.gas_prices?.average?.fiat_price) {

ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx

@@ -10,9 +10,10 @@ import GasInfoUpdateTimer from './GasInfoUpdateTimer';
 
 interface Props {
   data: HomeStats;
+  dataUpdatedAt: number;
 }
 
-const GasInfoTooltipContent = ({ data }: Props) => {
+const GasInfoTooltipContent = ({ data, dataUpdatedAt }: Props) => {
 
   if (!data.gas_prices) {
     return null;
@@ -26,7 +27,7 @@ const GasInfoTooltipContent = ({ data }: Props) => {
           <GridItem color="text_secondary" display="flex" justifyContent="flex-end" columnGap={ 2 }>
             { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
             { data.gas_prices_update_in !== 0 &&
-              <GasInfoUpdateTimer startTime={ data.gas_price_updated_at } duration={ data.gas_prices_update_in }/> }
+              <GasInfoUpdateTimer startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }
           </GridItem>
         </>
       ) }

ui/shared/GasInfoTooltipContent/GasInfoUpdateTimer.tsx

@@ -5,7 +5,7 @@ import { SECOND } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 
 interface Props {
-  startTime: string;
+  startTime: number;
   duration: number;
 }
 
@@ -14,8 +14,8 @@ const getValue = (startDate: dayjs.Dayjs, duration: number) => {
   const diff = now.diff(startDate, 'ms');
   const value = diff / duration * 100;
 
-  if (value >= 99) {
-    return 99;
+  if (value >= 95) {
+    return 95;
   }
 
   return value;
@@ -30,7 +30,7 @@ const GasInfoUpdateTimer = ({ startTime, duration }: Props) => {
     const intervalId = window.setInterval(() => {
       const nextValue = getValue(startDate, duration);
       setValue(nextValue);
-      if (nextValue === 99) {
+      if (nextValue === 95) {
         window.clearInterval(intervalId);
       }
     }, SECOND);

ui/snippets/topBar/TopBarStats.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
-import { SECOND } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
@@ -18,7 +17,7 @@ const TopBarStats = () => {
     onToggle();
   }, [ onToggle ]);
 
-  const { data, isPlaceholderData, isError, refetch } = useApiQuery('homepage_stats', {
+  const { data, isPlaceholderData, isError, refetch, dataUpdatedAt } = useApiQuery('homepage_stats', {
     fetchParams: {
       headers: {
         'updated-gas-oracle': 'true',
@@ -35,7 +34,7 @@ const TopBarStats = () => {
       return;
     }
 
-    const endDate = dayjs(data.gas_price_updated_at).add(data.gas_prices_update_in, 'ms');
+    const endDate = dayjs(dataUpdatedAt).add(data.gas_prices_update_in, 'ms');
     const timeout = endDate.diff(dayjs(), 'ms');
 
     if (timeout <= 0) {
@@ -44,12 +43,12 @@ const TopBarStats = () => {
 
     const timeoutId = window.setTimeout(() => {
       refetch();
-    }, timeout + SECOND);
+    }, timeout);
 
     return () => {
       window.clearTimeout(timeoutId);
     };
-  }, [ isPlaceholderData, data?.gas_price_updated_at, data?.gas_prices_update_in, refetch ]);
+  }, [ isPlaceholderData, data?.gas_price_updated_at, dataUpdatedAt, data?.gas_prices_update_in, refetch ]);
 
   if (isError) {
     return <div/>;
@@ -82,7 +81,7 @@ const TopBarStats = () => {
           <chakra.span color="text_secondary">Gas </chakra.span>
           <LightMode>
             <Tooltip
-              label={ <GasInfoTooltipContent data={ data }/> }
+              label={ <GasInfoTooltipContent data={ data } dataUpdatedAt={ dataUpdatedAt }/> }
               hasArrow={ false }
               borderRadius="md"
               offset={ [ 0, 16 ] }

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 { HomeStats, StatsChartsSection } from 'types/api/stats';
+import type { StatsChartsSection } from 'types/api/stats';
 import type { StatsIntervalIds } from 'types/client/stats';
 
-import { getResourceKey } from 'lib/api/useApiQuery';
+import useApiQuery from 'lib/api/useApiQuery';
 import { apos } from 'lib/html-entities';
 import EmptySearchResult from 'ui/shared/EmptySearchResult';
 import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
@@ -34,8 +33,16 @@ 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 homeStatsQuery = useApiQuery('homepage_stats', {
+    fetchParams: {
+      headers: {
+        'updated-gas-oracle': 'true',
+      },
+    },
+    queryOptions: {
+      refetchOnMount: false,
+    },
+  });
 
   const handleChartLoadingError = useCallback(
     () => setIsSomeChartLoadingError(true),
@@ -69,8 +76,12 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
                 <Heading size="md" >
                   { section.title }
                 </Heading>
-                { section.id === 'gas' && homeStatsData && homeStatsData.gas_prices &&
-                  <Hint label={ <GasInfoTooltipContent data={ homeStatsData }/> } tooltipProps={ GAS_TOOLTIP_PROPS }/> }
+                { section.id === 'gas' && homeStatsQuery.data && homeStatsQuery.data.gas_prices && (
+                  <Hint
+                    label={ <GasInfoTooltipContent data={ homeStatsQuery.data } dataUpdatedAt={ homeStatsQuery.dataUpdatedAt }/> }
+                    tooltipProps={ GAS_TOOLTIP_PROPS }
+                  />
+                ) }
               </Skeleton>
 
               <Grid