tests

mocks/stats/main.tsx

@@ -0,0 +1,71 @@
+import type * as stats from '@blockscout/stats-types';
+
+import { averageGasPrice } from './line';
+
+export const base: stats.MainPageStats = {
+  average_block_time: {
+    id: 'averageBlockTime',
+    value: '14.909090909090908',
+    title: 'Average block time',
+    units: 's',
+    description: 'Average time taken in seconds for a block to be included in the blockchain',
+  },
+  total_addresses: {
+    id: 'totalAddresses',
+    value: '113606435',
+    title: 'Total addresses',
+    description: 'Number of addresses that participated in the blockchain',
+  },
+  total_blocks: {
+    id: 'totalBlocks',
+    value: '7660515',
+    title: 'Total blocks',
+    description: 'Number of blocks over all time',
+  },
+  total_transactions: {
+    id: 'totalTxns',
+    value: '411264599',
+    title: 'Total txns',
+    description: 'All transactions including pending, dropped, replaced, failed transactions',
+  },
+  yesterday_transactions: {
+    id: 'yesterdayTxns',
+    value: '213019',
+    title: 'Yesterday txns',
+    description: 'Number of transactions yesterday (0:00 - 23:59 UTC)',
+  },
+  total_operational_transactions: {
+    id: 'totalOperationalTxns',
+    value: '403598877',
+    title: 'Total operational txns',
+    description: '\'Total txns\' without block creation transactions',
+  },
+  yesterday_operational_transactions: {
+    id: 'yesterdayOperationalTxns',
+    value: '210852',
+    title: 'Yesterday operational txns',
+    description: 'Number of transactions yesterday (0:00 - 23:59 UTC) without block creation transactions',
+  },
+  daily_new_transactions: {
+    chart: averageGasPrice.chart,
+    info: {
+      id: 'newTxnsWindow',
+      title: 'Daily transactions',
+      description: 'The chart displays daily transactions for the past 30 days',
+      resolutions: [
+        'DAY',
+      ],
+    },
+  },
+  daily_new_operational_transactions: {
+    chart: averageGasPrice.chart,
+    info: {
+      id: 'newOperationalTxnsWindow',
+      title: 'Daily operational transactions',
+      description: 'The chart displays daily transactions for the past 30 days (without block creation transactions)',
+      resolutions: [
+        'DAY',
+      ],
+    },
+  },
+};

ui/home/Stats.pw.tsx

@@ -12,6 +12,7 @@ test.describe('all items', () => {
   test.beforeEach(async({ render, mockApiResponse, mockEnvs }) => {
     await mockEnvs([
       [ 'NEXT_PUBLIC_HOMEPAGE_STATS', '["total_blocks","average_block_time","total_txs","wallet_addresses","gas_tracker","btc_locked"]' ],
+      [ 'NEXT_PUBLIC_STATS_API_HOST', '' ],
     ]);
     await mockApiResponse('stats', statsMock.withBtcLocked);
     component = await render(<Stats/>);
@@ -22,7 +23,10 @@ test.describe('all items', () => {
   });
 });
 
-test('no gas info', async({ render, mockApiResponse }) => {
+test('no gas info', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_STATS_API_HOST', '' ],
+  ]);
   await mockApiResponse('stats', statsMock.withoutGasInfo);
   const component = await render(<Stats/>);
 
@@ -32,6 +36,7 @@ test('no gas info', async({ render, mockApiResponse }) => {
 test('4 items default view +@mobile -@default', async({ render, mockApiResponse, mockEnvs }) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_HOMEPAGE_STATS', '["total_txs","gas_tracker","wallet_addresses","total_blocks"]' ],
+    [ 'NEXT_PUBLIC_STATS_API_HOST', '' ],
   ]);
   await mockApiResponse('stats', statsMock.base);
   const component = await render(<Stats/>);
@@ -41,6 +46,7 @@ test('4 items default view +@mobile -@default', async({ render, mockApiResponse,
 test('3 items default view +@mobile -@default', async({ render, mockApiResponse, mockEnvs }) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_HOMEPAGE_STATS', '["total_txs","wallet_addresses","total_blocks"]' ],
+    [ 'NEXT_PUBLIC_STATS_API_HOST', '' ],
   ]);
   await mockApiResponse('stats', statsMock.base);
   const component = await render(<Stats/>);

ui/home/Stats.tsx

@@ -15,7 +15,7 @@ import type { Props as StatsWidgetProps } from 'ui/shared/stats/StatsWidget';
 import StatsWidget from 'ui/shared/stats/StatsWidget';
 
 const rollupFeature = config.features.rollup;
-const statsFeature = config.features.stats;
+const isStatsFeatureEnabled = config.features.stats.isEnabled;
 
 const Stats = () => {
   const [ hasGasTracker, setHasGasTracker ] = React.useState(config.features.gasTracker.isEnabled);
@@ -24,8 +24,8 @@ const Stats = () => {
   const statsQuery = useApiQuery('stats_main', {
     queryOptions: {
       refetchOnMount: false,
-      placeholderData: statsFeature.isEnabled ? HOMEPAGE_STATS_MICROSERVICE : undefined,
-      enabled: statsFeature.isEnabled,
+      placeholderData: isStatsFeatureEnabled ? HOMEPAGE_STATS_MICROSERVICE : undefined,
+      enabled: isStatsFeatureEnabled,
     },
   });
 
@@ -135,7 +135,11 @@ const Stats = () => {
         id: 'average_block_time' as const,
         icon: 'clock-light' as const,
         label: statsData?.average_block_time?.title || 'Average block time',
-        value: `${ Number(statsData?.average_block_time?.value).toFixed(1) || (apiData ? (apiData.average_block_time / 1000).toFixed(1) : 'N/A') }s`,
+        value: `${
+          statsData?.average_block_time?.value ?
+            Number(statsData.average_block_time.value).toFixed(1) :
+            (apiData!.average_block_time / 1000).toFixed(1)
+        }s`,
         isLoading,
       },
       (statsData?.total_transactions?.value || apiData?.total_transactions) && {

ui/home/indicators/ChainIndicators.pw.tsx

@@ -11,6 +11,7 @@ test.beforeEach(async({ mockEnvs }) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_HOMEPAGE_CHARTS', '["daily_txs","coin_price","secondary_coin_price","market_cap","tvl"]' ],
     [ 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', 'DUCK' ],
+    [ 'NEXT_PUBLIC_STATS_API_HOST', '' ],
   ]);
 });
 

ui/home/indicators/ChainIndicators.tsx

@@ -68,7 +68,7 @@ const ChainIndicators = () => {
 
   const title = (() => {
     let title: string | undefined;
-    if (selectedIndicatorData?.titleMicroservice && statsMicroserviceQueryResult?.data) {
+    if (isStatsFeatureEnabled && selectedIndicatorData?.titleMicroservice && statsMicroserviceQueryResult?.data) {
       title = selectedIndicatorData.titleMicroservice(statsMicroserviceQueryResult.data);
     }
 
@@ -77,7 +77,7 @@ const ChainIndicators = () => {
 
   const hint = (() => {
     let hint: string | undefined;
-    if (selectedIndicatorData?.hintMicroservice && statsMicroserviceQueryResult?.data) {
+    if (isStatsFeatureEnabled && selectedIndicatorData?.hintMicroservice && statsMicroserviceQueryResult?.data) {
       hint = selectedIndicatorData.hintMicroservice(statsMicroserviceQueryResult.data);
     }
 

ui/pages/Home.pw.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import * as blockMock from 'mocks/blocks/block';
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
+import * as statsMainMock from 'mocks/stats/main';
 import * as txMock from 'mocks/txs/tx';
 import { test, expect, devices } from 'playwright/lib';
 import * as pwConfig from 'playwright/utils/config';
@@ -15,6 +16,7 @@ test.describe('default view', () => {
 
   test.beforeEach(async({ render, mockApiResponse, mockAssetResponse }) => {
     await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse('stats_main', statsMainMock.base);
     await mockApiResponse('stats', statsMock.base);
     await mockApiResponse('homepage_blocks', [
       blockMock.base,
@@ -55,6 +57,7 @@ test.describe('mobile', () => {
 
   test('base view', async({ render, page, mockAssetResponse, mockApiResponse }) => {
     await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse('stats_main', statsMainMock.base);
     await mockApiResponse('stats', statsMock.base);
     await mockApiResponse('homepage_blocks', [
       blockMock.base,

ui/pages/VerifiedContracts.pw.tsx

@@ -6,7 +6,8 @@ import { test, expect } from 'playwright/lib';
 
 import VerifiedContracts from './VerifiedContracts';
 
-test('base view +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+test('base view +@mobile', async({ render, mockTextAd, mockApiResponse, mockEnvs }) => {
+  await mockEnvs([ [ 'NEXT_PUBLIC_STATS_API_HOST', '' ] ]);
   await mockTextAd();
   await mockApiResponse('verified_contracts', verifiedContractsMock.baseResponse);
   await mockApiResponse('verified_contracts_counters', verifiedContractsCountersMock);

ui/txs/TxsStats.pw.tsx

@@ -6,7 +6,8 @@ import { test, expect } from 'playwright/lib';
 
 import TxsStats from './TxsStats';
 
-test('base view +@mobile', async({ render, mockApiResponse }) => {
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs([ [ 'NEXT_PUBLIC_STATS_API_HOST', '' ] ]);
   await mockApiResponse('stats', statsMock.base);
   await mockApiResponse('txs_stats', txsStatsMock.base);
   const component = await render(<TxsStats/>);

ui/txs/TxsStats.tsx

@@ -15,14 +15,14 @@ const TxsStats = () => {
   const txsStatsQuery = useApiQuery('stats_transactions', {
     queryOptions: {
       enabled: isStatsFeatureEnabled,
-      placeholderData: TXS_STATS_MICROSERVICE,
+      placeholderData: isStatsFeatureEnabled ? TXS_STATS_MICROSERVICE : undefined,
     },
   });
 
   const txsStatsApiQuery = useApiQuery('txs_stats', {
     queryOptions: {
       enabled: !isStatsFeatureEnabled,
-      placeholderData: TXS_STATS,
+      placeholderData: !isStatsFeatureEnabled ? TXS_STATS : undefined,
     },
   });
 
@@ -39,6 +39,7 @@ const TxsStats = () => {
   const isLoading = isStatsFeatureEnabled ? txsStatsQuery.isPlaceholderData : txsStatsApiQuery.isPlaceholderData;
 
   const txCount24h = isStatsFeatureEnabled ? txsStatsQuery.data?.transactions_24h?.value : txsStatsApiQuery.data?.transactions_count_24h;
+  const operationalTxns24h = isStatsFeatureEnabled ? txsStatsQuery.data?.operational_transactions_24h?.value : null;
 
   const pendingTxns = isStatsFeatureEnabled ? txsStatsQuery.data?.pending_transactions_30m?.value : txsStatsApiQuery.data?.pending_transactions_count;
 
@@ -57,10 +58,18 @@ const TxsStats = () => {
     accuracyUsd: 2,
   }) : null;
 
+  const itemsCount = [
+    txCount24h,
+    operationalTxns24h,
+    pendingTxns,
+    txFeeSum24h,
+    txFeeAvg,
+  ].filter(Boolean).length;
+
   return (
     <Box
       display="grid"
-      gridTemplateColumns={{ base: '1fr', lg: 'repeat(5, calc(20% - 9px))' }}
+      gridTemplateColumns={{ base: '1fr', lg: `repeat(${ itemsCount }, calc(${ 100 / itemsCount }% - 9px))` }}
       rowGap={ 3 }
       columnGap={ 3 }
       mb={ 6 }
@@ -74,10 +83,10 @@ const TxsStats = () => {
           href={ config.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'newTxns' } } : undefined }
         />
       ) }
-      { isStatsFeatureEnabled && txsStatsQuery.data?.operational_transactions_24h?.value && (
+      { operationalTxns24h && (
         <StatsWidget
           label={ txsStatsQuery.data?.operational_transactions_24h?.title || 'Daily op txns' }
-          value={ Number(txsStatsQuery.data.operational_transactions_24h.value).toLocaleString() }
+          value={ Number(operationalTxns24h).toLocaleString() }
           period="24h"
           isLoading={ isLoading }
         />

ui/verifiedContracts/VerifiedContractsCounters.tsx

@@ -12,18 +12,18 @@ const VerifiedContractsCounters = () => {
   const countersStatsQuery = useApiQuery('stats_contracts', {
     queryOptions: {
       enabled: isStatsFeatureEnabled,
-      placeholderData: VERIFIED_CONTRACTS_COUNTERS_MICROSERVICE,
+      placeholderData: isStatsFeatureEnabled ? VERIFIED_CONTRACTS_COUNTERS_MICROSERVICE : undefined,
     },
   });
 
   const countersApiQuery = useApiQuery('verified_contracts_counters', {
     queryOptions: {
       enabled: !isStatsFeatureEnabled,
-      placeholderData: VERIFIED_CONTRACTS_COUNTERS,
+      placeholderData: !isStatsFeatureEnabled ? VERIFIED_CONTRACTS_COUNTERS : undefined,
     },
   });
 
-  if (!(countersStatsQuery.data || countersApiQuery.data)) {
+  if (!(isStatsFeatureEnabled ? countersStatsQuery.data : countersApiQuery.data)) {
     return null;
   }