stats fixes

README.md

@@ -64,6 +64,8 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_FOOTER_TWITTER_LINK | `string` *(optional)* | Link to Twitter in the footer | `https://www.twitter.com/blockscoutcom` |
 | NEXT_PUBLIC_FOOTER_TELEGRAM_LINK | `string` *(optional)* | Link to Telegram in the footer | `https://t.me/poa_network` |
 | NEXT_PUBLIC_FOOTER_STAKING_LINK | `string` *(optional)* | Link to staking dashboard in the footer | `https://duneanalytics.com/maxaleks/xdai-staking` |
+| NEXT_PUBLIC_STATS_SHOW_GAS_TRACKER | `boolean` *(optional)* | Set to false if network doesn't have gas tracker | `true` |
+| NEXT_PUBLIC_STATS_SHOW_AVG_BLOCK_TIME | `boolean` *(optional)* | Set to false if average block time is useless for the network | `true` |
 | NEXT_PUBLIC_MARKETPLACE_APP_LIST | `Array<MarketplaceApp>` where `MarketplaceApp` can have following [properties](#marketplace-app-configuration-properties) | List of apps that will be shown on the marketplace page | `[{'author': 'Bob', 'id': 'app', 'title': 'The App', 'logo': 'https://foo.app/icon.png', 'categories': ['security'], 'shortDescription': 'Awesome app', 'site': 'https://foo.app', 'description': 'The best app', 'url': 'https://foo.app/launch'}]` |
 | NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | `https://airtable.com/shrqUAcjgGJ4jU88C` |
 | NEXT_PUBLIC_NETWORK_EXPLORERS | `Array<NetworkExplorer>` where `NetworkExplorer` can have following [properties](#network-explorer-configuration-properties) | Used to build up links to transactions, blocks, addresses in other chain explorers.  | `[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]` |

configs/app/config.ts

@@ -72,6 +72,10 @@ const config = Object.freeze({
     telegram: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK),
     staking: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK),
   },
+  stats: {
+    showGasTracker: getEnvValue(process.env.NEXT_PUBLIC_STATS_SHOW_GAS_TRACKER) === 'false' ? false : true,
+    showAvgBlockTime: getEnvValue(process.env.NEXT_PUBLIC_STATS_SHOW_AVG_BLOCK_TIME) === 'false' ? false : true,
+  },
   featuredNetworks: parseEnvJson<Array<FeaturedNetwork>>(getEnvValue(process.env.NEXT_PUBLIC_FEATURED_NETWORKS)) || [],
   blockScoutVersion: getEnvValue(process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION),
   isAccountSupported: getEnvValue(process.env.NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED) === 'true',

icons/gas.svg

+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.5 23.75h1.25v2.5H2.5v-2.5h1.25V5A1.25 1.25 0 0 1 5 3.75h11.25A1.25 1.25 0 0 1 17.5 5v10H20a2.5 2.5 0 0 1 2.5 2.5v5a1.25 1.25 0 0 0 2.5 0v-8.75h-2.5a1.25 1.25 0 0 1-1.25-1.25V8.018l-2.071-2.072 1.767-1.767 6.188 6.187a1.244 1.244 0 0 1 .366.884V22.5a3.75 3.75 0 0 1-7.5 0v-5h-2.5v6.25Zm-11.25 0H15v-7.5H6.25v7.5Zm0-17.5v7.5H15v-7.5H6.25Z" fill="currentColor"/>
+</svg>

ui/home/Stats.tsx

-import { Grid, Skeleton } from '@chakra-ui/react';
+import { Grid } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import { Stats } from 'types/api/stats';
 import { QueryKeys } from 'types/client/queries';
 
+import appConfig from 'configs/app/config';
 import blockIcon from 'icons/block.svg';
 import clockIcon from 'icons/clock-light.svg';
+import gasIcon from 'icons/gas.svg';
 import txIcon from 'icons/transactions.svg';
 import walletIcon from 'icons/wallet.svg';
 import useFetch from 'lib/hooks/useFetch';
 
 import StatsItem from './StatsItem';
+import StatsItemSkeleton from './StatsItemSkeleton';
 
 const Stats = () => {
   const fetch = useFetch();
 
+  const hasGasTracker = appConfig.stats.showGasTracker;
+  const hasAvgBlockTime = appConfig.stats.showAvgBlockTime;
+
+  let itemsCount = 5;
+  !hasGasTracker && itemsCount--;
+  !hasAvgBlockTime && itemsCount--;
+
   const { data, isLoading, isError } = useQuery<unknown, unknown, Stats>(
     [ QueryKeys.stats ],
     async() => await fetch(`/api/index/stats`),
@@ -28,14 +38,7 @@ const Stats = () => {
   let content;
 
   if (isLoading) {
-    content = (
-      <>
-        <Skeleton h="80px"/>
-        <Skeleton h="80px"/>
-        <Skeleton h="80px"/>
-        <Skeleton h="80px"/>
-      </>
-    );
+    content = Array.from(Array(itemsCount)).map((item, index) => <StatsItemSkeleton key={ index }/>);
   }
 
   if (data) {
@@ -46,11 +49,13 @@ const Stats = () => {
           title="Total blocks"
           value={ Number(data.total_blocks).toLocaleString() }
         />
+        { hasAvgBlockTime && (
           <StatsItem
             icon={ clockIcon }
             title="Average block time"
             value={ `${ (data.average_block_time / 1000).toFixed(1) } s` }
           />
+        ) }
         <StatsItem
           icon={ txIcon }
           title="Total transactions"
@@ -61,19 +66,27 @@ const Stats = () => {
           title="Wallet addresses"
           value={ Number(data.total_addresses).toLocaleString() }
         />
+        { hasGasTracker && (
+          <StatsItem
+            icon={ gasIcon }
+            title="Gas tracker"
+            value={ `${ Number(data.gas_prices.average).toLocaleString() } Gwei` }
+          />
+        ) }
       </>
     );
   }
 
   return (
     <Grid
-      gridTemplateColumns={{ lg: 'repeat(4, 1fr)', base: 'none' }}
-      gridTemplateRows={{ lg: 'none', base: 'repeat(4, 1fr)' }}
+      gridTemplateColumns={{ lg: `repeat(${ itemsCount }, 1fr)`, base: 'none' }}
+      gridTemplateRows={{ lg: 'none', base: `repeat(${ itemsCount }, 1fr)` }}
       gridGap="10px"
       marginTop="32px"
     >
       { content }
     </Grid>
+
   );
 };
 

ui/home/StatsItemSkeleton.tsx

+import { Box, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const StatsItemSkeleton = () => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <Flex background={ bgColor } padding={ 5 } borderRadius="16px">
+      <Skeleton w="40px" h="40px"/>
+      <Box ml={ 4 }>
+        <Skeleton w="69px" h="10px" mb="10px"/>
+        <Skeleton w="93px" h="10px"/>
+      </Box>
+    </Flex>
+  );
+};
+
+export default StatsItemSkeleton;