config setting

.env.template

@@ -30,6 +30,7 @@ NEXT_PUBLIC_MARKETPLACE_APP_LIST=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_APP_L
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM__
 NEXT_PUBLIC_LOGOUT_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_LOGOUT_URL__
 NEXT_PUBLIC_LOGOUT_RETURN_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_LOGOUT_RETURN_URL__
+NEXT_PUBLIC_HOMEPAGE_CHARTS=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_CHARTS__
 
 # api config
 NEXT_PUBLIC_API_HOST=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_HOST__

README.md

@@ -70,6 +70,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` or `mining` *(optional)* | Verification type in the network | `mining` |
 | NEXT_PUBLIC_LOGOUT_URL | `string` *(optional)* | Account logout url | `https://blockscoutcom.us.auth0.com/v2/logout` |
 | NEXT_PUBLIC_LOGOUT_RETURN_URL | `string` *(optional)* | Account logout return url | `https://blockscout.com/poa/core/auth/logout` |
+| NEXT_PUBLIC_HOMEPAGE_CHARTS | `Array<'daily_txs' \| 'coin_price' \| 'market_cup'>` *(optional)* | List of charts displayed on the home page | `['daily_txs','coin_price','market_cup']` |
 
 ### App configuration
 

configs/app/config.ts

 /* eslint-disable no-restricted-properties */
 import type { AppItemOverview } from 'types/client/apps';
 import type { FeaturedNetwork, NetworkExplorer, PreDefinedNetwork } from 'types/networks';
+import type { ChainIndicatorId } from 'ui/home/indicators/types';
 
 const getEnvValue = (env: string | undefined) => env?.replaceAll('\'', '"');
 const parseEnvJson = <DataType>(env: string | undefined): DataType | null => {
@@ -86,6 +87,9 @@ const config = Object.freeze({
     socket: apiHost ? `wss://${ apiHost }` : 'wss://blockscout.com',
     basePath: stripTrailingSlash(getEnvValue(process.env.NEXT_PUBLIC_API_BASE_PATH) || ''),
   },
+  homepage: {
+    charts: parseEnvJson<Array<ChainIndicatorId>>(getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_CHARTS)) || [],
+  },
 });
 
 export default config;

configs/envs/.env.poa_core

@@ -3,6 +3,7 @@ NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=https://t.me/poa_network
 NEXT_PUBLIC_FOOTER_STAKING_LINK=https://duneanalytics.com/maxaleks/xdai-staking
 NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Gnosis Chain','url':'https://blockscout.com/xdai/mainnet','group':'mainnets','type':'xdai_mainnet'},{'title':'Optimism on Gnosis Chain','url':'https://blockscout.com/xdai/optimism','group':'mainnets','icon':'https://www.fillmurray.com/60/60','type':'xdai_optimism'},{'title':'Arbitrum on xDai','url':'https://blockscout.com/xdai/aox','group':'mainnets'},{'title':'Ethereum','url':'https://blockscout.com/eth/mainnet','group':'mainnets','type':'eth_mainnet'},{'title':'Ethereum Classic','url':'https://blockscout.com/etx/mainnet','group':'mainnets','type':'etc_mainnet'},{'title':'POA','url':'https://blockscout.com/poa/core','group':'mainnets','type':'poa_core'},{'title':'RSK','url':'https://blockscout.com/rsk/mainnet','group':'mainnets','type':'rsk_mainnet'},{'title':'Gnosis Chain Testnet','url':'https://blockscout.com/xdai/testnet','group':'testnets','type':'xdai_testnet'},{'title':'POA Sokol','url':'https://blockscout.com/poa/sokol','group':'testnets','type':'poa_sokol'},{'title':'ARTIS Σ1','url':'https://blockscout.com/artis/sigma1','group':'other','type':'artis_sigma1'},{'title':'LUKSO L14','url':'https://blockscout.com/lukso/l14','group':'other','type':'lukso_l14'},{'title':'Astar','url':'https://blockscout.com/astar','group':'other','type':'astar'}]
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction'}}]
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cup']
 
 # network config
 NEXT_PUBLIC_NETWORK_NAME=POA

deploy/values/main/values.yaml

@@ -452,3 +452,5 @@ frontend:
       _default: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_LOGOUT_RETURN_URL:
       _default: https://blockscout.com/auth/logout
+    NEXT_PUBLIC_HOMEPAGE_CHARTS:
+      _default: "['daily_txs','coin_price','market_cup']"

deploy/values/review/values.yaml

@@ -373,3 +373,5 @@ frontend:
       _default: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_LOGOUT_RETURN_URL:
       _default: https://blockscout.com/auth/logout
+    NEXT_PUBLIC_HOMEPAGE_CHARTS:
+      _default: "['daily_txs','coin_price','market_cup']"

ui/home/indicators/ChainIndicators.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import type { Stats } from 'types/api/stats';
 import { QueryKeys } from 'types/client/queries';
 
+import appConfig from 'configs/app/config';
 import infoIcon from 'icons/info.svg';
 import useFetch from 'lib/hooks/useFetch';
 
@@ -13,9 +14,23 @@ import ChainIndicatorItem from './ChainIndicatorItem';
 import useFetchChartData from './useFetchChartData';
 import INDICATORS from './utils/indicators';
 
+const indicators = INDICATORS
+  .filter(({ id }) => appConfig.homepage.charts.includes(id))
+  .sort((a, b) => {
+    if (appConfig.homepage.charts.indexOf(a.id) > appConfig.homepage.charts.indexOf(b.id)) {
+      return 1;
+    }
+
+    if (appConfig.homepage.charts.indexOf(a.id) < appConfig.homepage.charts.indexOf(b.id)) {
+      return -1;
+    }
+
+    return 0;
+  });
+
 const ChainIndicators = () => {
-  const [ selectedIndicator, selectIndicator ] = React.useState(INDICATORS[0].id);
-  const indicator = INDICATORS.find(({ id }) => id === selectedIndicator);
+  const [ selectedIndicator, selectIndicator ] = React.useState(indicators[0]?.id);
+  const indicator = indicators.find(({ id }) => id === selectedIndicator);
 
   const queryResult = useFetchChartData(indicator);
 
@@ -28,6 +43,10 @@ const ChainIndicators = () => {
   const bgColor = useColorModeValue('white', 'gray.900');
   const listBgColor = useColorModeValue('gray.50', 'black');
 
+  if (indicators.length === 0) {
+    return null;
+  }
+
   const valueTitle = (() => {
     if (statsQueryResult.isLoading) {
       return <Skeleton h="48px" w="215px" mt={ 3 } mb={ 4 }/>;
@@ -60,17 +79,19 @@ const ChainIndicators = () => {
         { valueTitle }
         <ChainIndicatorChartContainer { ...queryResult }/>
       </Flex>
-      <Flex flexShrink={ 0 } flexDir="column" as="ul" p={ 3 } borderRadius="lg" bgColor={ listBgColor } rowGap={ 3 }>
-        { INDICATORS.map((indicator) => (
-          <ChainIndicatorItem
-            key={ indicator.id }
-            { ...indicator }
-            isSelected={ selectedIndicator === indicator.id }
-            onClick={ selectIndicator }
-            stats={ statsQueryResult }
-          />
-        )) }
-      </Flex>
+      { indicators.length > 1 && (
+        <Flex flexShrink={ 0 } flexDir="column" as="ul" p={ 3 } borderRadius="lg" bgColor={ listBgColor } rowGap={ 3 }>
+          { indicators.map((indicator) => (
+            <ChainIndicatorItem
+              key={ indicator.id }
+              { ...indicator }
+              isSelected={ selectedIndicator === indicator.id }
+              onClick={ selectIndicator }
+              stats={ statsQueryResult }
+            />
+          )) }
+        </Flex>
+      ) }
     </Flex>
   );
 };