Add number widget to the Stats page.

types/api/stats.ts

@@ -12,3 +12,7 @@ export type HomeStats = {
   market_cap: string;
   network_utilization_percentage: number;
 }
+
+export type Stats = {
+  total_blocks: string;
+}

ui/pages/Stats.tsx

@@ -4,9 +4,10 @@ import React from 'react';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
+import ChartsWidgetsList from '../stats/ChartsWidgetsList';
+import NumberWidgetsList from '../stats/NumberWidgetsList';
 import StatsFilters from '../stats/StatsFilters';
 import useStats from '../stats/useStats';
-import WidgetsList from '../stats/WidgetsList';
 
 const Stats = () => {
   const {
@@ -22,6 +23,10 @@ const Stats = () => {
     <Page>
       <PageTitle text="Ethereum Stats"/>
 
+      <Box mb={{ base: 6, sm: 8 }}>
+        <NumberWidgetsList/>
+      </Box>
+
       <Box mb={{ base: 6, sm: 8 }}>
         <StatsFilters
           section={ section }
@@ -32,7 +37,7 @@ const Stats = () => {
         />
       </Box>
 
-      <WidgetsList
+      <ChartsWidgetsList
         charts={ displayedCharts }
       />
     </Page>

ui/stats/ChartWidget.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Grid, Heading, Text, useColorModeValue } from '@chakra-ui/
 import React, { useCallback } from 'react';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
-import { demoData } from './constants/demo-data';
+import { demoChartsData } from './constants/demo-charts-data';
 
 type Props = {
   apiMethodURL: string;
@@ -62,7 +62,7 @@ const ChartWidget = ({ title, description }: Props) => {
       </Grid>
 
       <ChartWidgetGraph
-        items={ demoData }
+        items={ demoChartsData }
         onZoom={ handleZoom }
         isZoomResetInitial={ isZoomResetInitial }
         title={ title }

ui/stats/WidgetsList.tsx → ui/stats/ChartsWidgetsList.tsx

@@ -12,7 +12,7 @@ type Props = {
   charts: Array<StatsSection>;
 }
 
-const WidgetsList = ({ charts }: Props) => {
+const ChartsWidgetsList = ({ charts }: Props) => {
   const isAnyChartDisplayed = charts.some((section) => section.charts.some(chart => chart.visible));
 
   return isAnyChartDisplayed ? (
@@ -62,4 +62,4 @@ const WidgetsList = ({ charts }: Props) => {
   );
 };
 
-export default WidgetsList;
+export default ChartsWidgetsList;

ui/stats/NumberWidget.tsx

+import { Box, Text, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  label: string;
+  value: string;
+}
+
+const NumberWidget = ({ label, value }: Props) => {
+  return (
+    <Box
+      border="1px"
+      borderColor={ useColorModeValue('gray.200', 'gray.600') }
+      p={ 3 }
+      borderRadius={ 12 }
+    >
+      <Text
+        variant="secondary"
+        fontSize="xs"
+      >
+        { label }
+      </Text>
+
+      <Text
+        fontWeight={ 500 }
+        fontSize="lg"
+      >
+        { value }
+      </Text>
+    </Box>
+  );
+};
+
+export default NumberWidget;

ui/stats/NumberWidgetSkeleton.tsx

+import { Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const NumberWidgetSkeleton = () => {
+  return (
+    <Box
+      border="1px"
+      borderColor={ useColorModeValue('gray.200', 'gray.600') }
+      p={ 3 }
+      borderRadius={ 12 }
+    >
+      <Skeleton w="70px" h="10px" mb={ 2 }/>
+
+      <Skeleton w="100px" h="27px"/>
+    </Box>
+  );
+};
+
+export default NumberWidgetSkeleton;

ui/stats/NumberWidgetsList.tsx

+import { Grid } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Stats } from 'types/api/stats';
+import { QueryKeys } from 'types/client/queries';
+
+import useFetch from 'lib/hooks/useFetch';
+
+import NumberWidget from './NumberWidget';
+import NumberWidgetSkeleton from './NumberWidgetSkeleton';
+
+const skeletonsCount = 4;
+
+const NumberWidgetsList = () => {
+  const fetch = useFetch();
+
+  const { data, isLoading } = useQuery<unknown, unknown, Stats>(
+    [ QueryKeys.stats ],
+    // TODO: Just temporary. Remove this when the API is ready.
+    async() => await fetch(`/node-api/stats`),
+  );
+
+  return (
+    <Grid
+      gridTemplateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
+      gridGap={ 4 }
+    >
+      { isLoading ? [ ...Array(skeletonsCount) ]
+        .map((e, i) => <NumberWidgetSkeleton key={ i }/>) :
+        (
+          <NumberWidget
+            label="Total blocks"
+            value={ Number(data?.total_blocks).toLocaleString() }
+          />
+        ) }
+    </Grid>
+  );
+};
+
+export default NumberWidgetsList;

ui/stats/constants/demo-data.ts → ui/stats/constants/demo-charts-data.ts

 import type { TimeChartItem } from 'ui/shared/chart/types';
 
-export const demoData: Array<TimeChartItem> = [ { date: new Date('2022-10-17T00:00:00.000Z'), value: 432670 }, {
+export const demoChartsData: Array<TimeChartItem> = [ { date: new Date('2022-10-17T00:00:00.000Z'), value: 432670 }, {
   date: new Date('2022-10-18T00:00:00.000Z'),
   value: 370100,
 }, { date: new Date('2022-10-19T00:00:00.000Z'), value: 283234 }, { date: new Date('2022-10-20T00:00:00.000Z'), value: 420910 }, {

ui/stats/constants/index.ts

 import type { StatsSectionIds, StatsIntervalIds } from 'types/client/stats';
 
-export const STATS_SECTIONS: { [key in StatsSectionIds]: string } = {
+export const STATS_SECTIONS: { [key in StatsSectionIds]?: string } = {
   all: 'All stats',
   accounts: 'Accounts',
   blocks: 'Blocks',