Gas tracker: bug fixes and improvements (blockscout#2792)

* Gas tracker page: hide `Gas price history` if chart is not enabled

Fixes blockscout#2781

* change default value for NEXT_PUBLIC_GAS_TRACKER_UNITS for testnets

* fix env for pw tests

Author: tom2drum

configs/app/features/gasTracker.ts

@@ -2,13 +2,17 @@ import type { Feature } from './types';
 import { GAS_UNITS } from 'types/client/gasTracker';
 import type { GasUnit } from 'types/client/gasTracker';
 
+import chainConfig from '../chain';
 import { getEnvValue, parseEnvJson } from '../utils';
 
 const isDisabled = getEnvValue('NEXT_PUBLIC_GAS_TRACKER_ENABLED') === 'false';
 
 const units = ((): Array<GasUnit> => {
   const envValue = getEnvValue('NEXT_PUBLIC_GAS_TRACKER_UNITS');
   if (!envValue) {
+    if (chainConfig.isTestnet) {
+      return [ 'gwei' ];
+    }
     return [ 'usd', 'gwei' ];
   }
 

configs/envs/.env.pw

@@ -58,4 +58,5 @@ NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
 NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT=['base16','bech32']
 NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX=tom
-NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED=false
+NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED=false
+NEXT_PUBLIC_GAS_TRACKER_UNITS=['usd','gwei']

docs/ENVS.md

@@ -383,7 +383,7 @@ This feature is **enabled by default**. To switch it off pass `NEXT_PUBLIC_GAS_T
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_GAS_TRACKER_ENABLED | `boolean` | Set to true to enable "Gas tracker" in the app | Required | `true` | `false` | v1.25.0+ |
-| NEXT_PUBLIC_GAS_TRACKER_UNITS | Array<`usd` \| `gwei`> | Array of units for displaying gas prices on the Gas Tracker page, in the stats snippet on the Home page, and in the top bar. The first value in the array will take priority over the second one in all mentioned views. If only one value is provided, gas prices will be displayed only in that unit. | - | `[ 'usd', 'gwei' ]` | `[ 'gwei' ]` | v1.25.0+ |
+| NEXT_PUBLIC_GAS_TRACKER_UNITS | Array<`usd` \| `gwei`> | Array of units for displaying gas prices on the Gas Tracker page, in the stats snippet on the Home page, and in the top bar. The first value in the array will take priority over the second one in all mentioned views. If only one value is provided, gas prices will be displayed only in that unit. | - | For testnets: `[ 'gwei' ]`, for mainnets: `[ 'usd', 'gwei' ]` | `[ 'gwei' ]` | v1.25.0+ |
 
 &nbsp;
 

stubs/stats.ts

@@ -79,6 +79,18 @@ export const STATS_CHARTS_SECTION: stats.LineChartSection = {
   ],
 };
 
+export const STATS_CHARTS_SECTION_GAS: stats.LineChartSection = {
+  id: 'gas',
+  title: 'Gas',
+  charts: [ {
+    id: 'averageGasPrice',
+    title: 'Average gas price',
+    description: 'Average gas price',
+    units: 'ETH',
+    resolutions: [ 'DAY', 'MONTH' ],
+  } ],
+};
+
 export const STATS_CHARTS = {
   sections: [ STATS_CHARTS_SECTION ],
 };

ui/gasTracker/GasTrackerChart.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import { STATS_CHARTS } from 'stubs/stats';
+import { STATS_CHARTS_SECTION_GAS } from 'stubs/stats';
 import { Link } from 'toolkit/chakra/link';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -16,14 +16,18 @@ const GasTrackerChart = () => {
   const [ isChartLoadingError, setChartLoadingError ] = React.useState(false);
   const { data, isPlaceholderData, isError } = useApiQuery('stats:lines', {
     queryOptions: {
-      placeholderData: STATS_CHARTS,
+      placeholderData: {
+        sections: [ STATS_CHARTS_SECTION_GAS ],
+      },
     },
   });
 
   const handleLoadingError = React.useCallback(() => {
     setChartLoadingError(true);
   }, []);
 
+  const chart = data?.sections.map((section) => section.charts.find((chart) => chart.id === GAS_PRICE_CHART_ID)).filter(Boolean)?.[0];
+
   const content = (() => {
     if (isPlaceholderData) {
       return <ContentLoader/>;
@@ -33,10 +37,8 @@ const GasTrackerChart = () => {
       return <DataFetchAlert/>;
     }
 
-    const chart = data?.sections.map((section) => section.charts.find((chart) => chart.id === GAS_PRICE_CHART_ID)).filter(Boolean)?.[0];
-
     if (!chart) {
-      return <DataFetchAlert/>;
+      return null;
     }
 
     return (
@@ -53,6 +55,10 @@ const GasTrackerChart = () => {
     );
   })();
 
+  if (!chart) {
+    return null;
+  }
+
   return (
     <Box>
       <Flex justifyContent="space-between" alignItems="center" mb={ 6 }>

ui/pages/GasTracker.tsx

@@ -91,7 +91,7 @@ const GasTracker = () => {
       <Heading level="2" mt={ 8 } mb={ 4 }>{ `Track ${ config.chain.name } gas fees` }</Heading>
       { snippets }
       { config.features.stats.isEnabled && (
-        <Box mt={ 12 }>
+        <Box mt={ 12 } _empty={{ display: 'none' }}>
           <GasTrackerChart/>
         </Box>
       ) }