new data format and update times

mocks/stats/index.ts

@@ -5,10 +5,24 @@ export const base: HomeStats = {
   coin_price: '0.00199678',
   coin_price_change_percentage: -7.42,
   gas_prices: {
-    average: 48.0,
-    fast: 67.5,
-    slow: 48.0,
+    average: {
+      fiat_price: '1.01',
+      price: 20.41,
+      time: 12283,
+    },
+    fast: {
+      fiat_price: '1.26',
+      price: 25.47,
+      time: 9321,
+    },
+    slow: {
+      fiat_price: '0.97',
+      price: 19.55,
+      time: 24543,
+    },
   },
+  gas_price_updated_at: '2022-11-11T11:09:49.051171Z',
+  gas_prices_update_in: 300000,
   gas_used_today: '4108680603',
   market_cap: '330809.96443288102524',
   network_utilization_percentage: 1.55372064,

stubs/stats.ts

@@ -5,10 +5,24 @@ export const HOMEPAGE_STATS: HomeStats = {
   coin_price: '1807.68',
   coin_price_change_percentage: 42,
   gas_prices: {
-    average: 0.1,
-    fast: 0.11,
-    slow: 0.1,
+    average: {
+      fiat_price: '1.01',
+      price: 20.41,
+      time: 12283,
+    },
+    fast: {
+      fiat_price: '1.26',
+      price: 25.47,
+      time: 9321,
+    },
+    slow: {
+      fiat_price: '0.97',
+      price: 19.55,
+      time: 24543,
+    },
   },
+  gas_price_updated_at: '2022-11-11T11:09:49.051171Z',
+  gas_prices_update_in: 300000,
   gas_used_today: '0',
   market_cap: '0',
   network_utilization_percentage: 22.56,

types/api/stats.ts

@@ -9,6 +9,8 @@ export type HomeStats = {
   transactions_today: string;
   gas_used_today: string;
   gas_prices: GasPrices | null;
+  gas_price_updated_at: string | null;
+  gas_prices_update_in: number;
   static_gas_price: string | null;
   market_cap: string;
   network_utilization_percentage: number;
@@ -17,9 +19,15 @@ export type HomeStats = {
 }
 
 export type GasPrices = {
-  average: number | null;
-  fast: number | null;
-  slow: number | null;
+  average: GasPriceInfo | null;
+  fast: GasPriceInfo | null;
+  slow: GasPriceInfo | null;
+}
+
+export interface GasPriceInfo {
+  fiat_price: string | null;
+  price: number | null;
+  time: number | null;
 }
 
 export type Counters = {

ui/home/Stats.tsx

@@ -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 gasPrices={ data.gas_prices }/> : null;
+    const gasLabel = hasGasTracker && data.gas_prices ? <GasInfoTooltipContent data={ data }/> : null;
 
     content = (
       <>
@@ -98,7 +98,10 @@ const Stats = () => {
           <StatsItem
             icon="gas"
             title="Gas tracker"
-            value={ data.gas_prices.average !== null ? `${ Number(data.gas_prices.average).toLocaleString() } Gwei` : 'N/A' }
+            value={ data.gas_prices.average && data.gas_prices.average.price !== null ?
+              `${ Number(data.gas_prices.average.price).toLocaleString() } Gwei` :
+              'N/A'
+            }
             _last={ isOdd ? lastItemTouchStyle : undefined }
             tooltipLabel={ gasLabel }
             isLoading={ isPlaceholderData }

ui/shared/GasInfoTooltipContent/GasInfoRow.tsx

+import { GridItem, chakra, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { GasPriceInfo } from 'types/api/stats';
+
+import { asymp, space } from 'lib/html-entities';
+
+interface Props {
+  name: string;
+  info: GasPriceInfo | null;
+}
+
+const GasInfoRow = ({ name, info }: Props) => {
+  const labelColor = useColorModeValue('blue.100', 'blue.600');
+
+  const content = (() => {
+    if (!info || info.price === null) {
+      return 'N/A';
+    }
+
+    return (
+      <>
+        <span>{ info.price } Gwei</span>
+        { info.time && (
+          <chakra.span color="text_secondary">
+            { space }per tx { asymp } { (info.time / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s
+          </chakra.span>
+        ) }
+      </>
+    );
+  })();
+
+  return (
+    <>
+      <GridItem color={ labelColor }>{ name }</GridItem>
+      <GridItem textAlign="right">{ content }</GridItem>
+    </>
+  );
+};
+
+export default React.memo(GasInfoRow);

ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx

-import { Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
+import { Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
-import type { GasPrices } from 'types/api/stats';
+import type { HomeStats } from 'types/api/stats';
 
-const GasInfoTooltipContent = ({ gasPrices }: {gasPrices: GasPrices}) => {
-  const nameStyleProps = {
-    color: useColorModeValue('blue.100', 'blue.600'),
-  };
+import dayjs from 'lib/date/dayjs';
+
+import GasInfoRow from './GasInfoRow';
+import GasInfoUpdateTimer from './GasInfoUpdateTimer';
+
+interface Props {
+  data: HomeStats;
+}
+
+const GasInfoTooltipContent = ({ data }: Props) => {
+
+  if (!data.gas_prices) {
+    return null;
+  }
 
   return (
-    <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs">
-      <GridItem { ...nameStyleProps }>Slow</GridItem>
-      <GridItem>{ gasPrices.slow !== null ? `${ gasPrices.slow } Gwei` : 'N/A' }</GridItem>
-      <GridItem { ...nameStyleProps }>Average</GridItem>
-      <GridItem>{ gasPrices.average !== null ? `${ gasPrices.average } Gwei` : 'N/A' }</GridItem>
-      <GridItem { ...nameStyleProps }>Fast</GridItem>
-      <GridItem>{ gasPrices.fast !== null ? `${ gasPrices.fast } Gwei` : 'N/A' }</GridItem>
+    <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs" lineHeight={ 4 }>
+      { data.gas_price_updated_at && (
+        <>
+          <GridItem color="text_secondary">Last update</GridItem>
+          <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 }/> }
+          </GridItem>
+        </>
+      ) }
+      <GasInfoRow name="Slow" info={ data.gas_prices.slow }/>
+      <GasInfoRow name="Average" info={ data.gas_prices.average }/>
+      <GasInfoRow name="Fast" info={ data.gas_prices.fast }/>
     </Grid>
   );
 };

ui/shared/GasInfoTooltipContent/GasInfoUpdateTimer.tsx

+import { CircularProgress } from '@chakra-ui/react';
+import React from 'react';
+
+import { SECOND } from 'lib/consts';
+import dayjs from 'lib/date/dayjs';
+
+interface Props {
+  startTime: string;
+  duration: number;
+}
+
+const getValue = (startDate: dayjs.Dayjs, duration: number) => {
+  const now = dayjs();
+  const diff = now.diff(startDate, 'ms');
+  const value = diff / duration * 100;
+
+  if (value >= 99) {
+    return 99;
+  }
+
+  return value;
+};
+
+const GasInfoUpdateTimer = ({ startTime, duration }: Props) => {
+  const [ value, setValue ] = React.useState(getValue(dayjs(startTime), duration));
+
+  React.useEffect(() => {
+    const startDate = dayjs(startTime);
+
+    const intervalId = window.setInterval(() => {
+      const nextValue = getValue(startDate, duration);
+      setValue(nextValue);
+      if (nextValue === 99) {
+        window.clearInterval(intervalId);
+      }
+    }, SECOND);
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [ startTime, duration ]);
+
+  return <CircularProgress value={ value } trackColor="whiteAlpha.100" size={ 4 }/>;
+};
+
+export default React.memo(GasInfoUpdateTimer);

ui/snippets/topBar/TopBarStats.tsx

@@ -3,6 +3,8 @@ 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';
 import TextSeparator from 'ui/shared/TextSeparator';
@@ -16,7 +18,7 @@ const TopBarStats = () => {
     onToggle();
   }, [ onToggle ]);
 
-  const { data, isPlaceholderData, isError } = useApiQuery('homepage_stats', {
+  const { data, isPlaceholderData, isError, refetch } = useApiQuery('homepage_stats', {
     fetchParams: {
       headers: {
         'updated-gas-oracle': 'true',
@@ -28,6 +30,27 @@ const TopBarStats = () => {
     },
   });
 
+  React.useEffect(() => {
+    if (isPlaceholderData || !data?.gas_price_updated_at) {
+      return;
+    }
+
+    const endDate = dayjs(data.gas_price_updated_at).add(data.gas_prices_update_in, 'ms');
+    const timeout = endDate.diff(dayjs(), 'ms');
+
+    if (timeout <= 0) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      refetch();
+    }, timeout + SECOND);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [ isPlaceholderData, data?.gas_price_updated_at, data?.gas_prices_update_in, refetch ]);
+
   if (isError) {
     return <div/>;
   }
@@ -59,7 +82,7 @@ const TopBarStats = () => {
           <chakra.span color="text_secondary">Gas </chakra.span>
           <LightMode>
             <Tooltip
-              label={ <GasInfoTooltipContent gasPrices={ data.gas_prices }/> }
+              label={ <GasInfoTooltipContent data={ data }/> }
               hasArrow={ false }
               borderRadius="md"
               offset={ [ 0, 16 ] }
@@ -73,7 +96,7 @@ const TopBarStats = () => {
                 onMouseEnter={ onOpen }
                 onMouseLeave={ onClose }
               >
-                { data.gas_prices.average } Gwei
+                { data.gas_prices.average.price } Gwei
               </Link>
             </Tooltip>
           </LightMode>