Merge pull request #316 from blockscout/home-chart

homepage chart

.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']"

icons/globe.svg

+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.2 19.4c3.972 0 7.2-3.228 7.2-7.2S16.172 5 12.2 5A7.206 7.206 0 0 0 5 12.2c0 3.972 3.228 7.2 7.2 7.2Zm-5.574-4.332 2.926-.023c.325 1.173.871 2.311 1.614 3.333a6.28 6.28 0 0 1-4.54-3.31Zm3.67-4.842h3.646a9.853 9.853 0 0 1 .023 3.867l-3.67.023a9.544 9.544 0 0 1 0-3.89Zm1.823 7.885a9.323 9.323 0 0 1-1.591-3.066l3.193-.023a9.813 9.813 0 0 1-1.602 3.089Zm.929.302a10.24 10.24 0 0 0 1.637-3.403l3.124-.023a6.286 6.286 0 0 1-4.761 3.426ZM18.47 12.2c0 .65-.105 1.277-.279 1.858l-3.286.023c.232-1.277.22-2.578-.023-3.855h3.263c.209.615.325 1.289.325 1.974Zm-.72-2.903h-3.09a10.675 10.675 0 0 0-1.613-3.31 6.244 6.244 0 0 1 4.703 3.31Zm-4.053 0H10.54a9.593 9.593 0 0 1 1.58-3.008 9.595 9.595 0 0 1 1.58 3.008Zm-2.532-3.275a10.317 10.317 0 0 0-1.59 3.275H6.648a6.249 6.249 0 0 1 4.517-3.275Zm-1.811 4.204a10.685 10.685 0 0 0-.012 3.89l-3.1.023a6.173 6.173 0 0 1 .012-3.914h3.1Z" fill="currentColor"/>
+</svg>

lib/formatters.ts

+export function shortenNumberWithLetter(
+  x: number,
+  params?: {
+    unitSeparator: string;
+  },
+  _options?: Intl.NumberFormatOptions,
+) {
+  const options = _options || { maximumFractionDigits: 2 };
+  const unitSeparator = params?.unitSeparator || '';
+
+  if (x > 1_000_000_000) {
+    return (x / 1_000_000_000).toLocaleString('en', options) + unitSeparator + 'B';
+  }
+
+  if (x > 1_000_000) {
+    return (x / 1_000_000).toLocaleString('en', options) + unitSeparator + 'M';
+  }
+
+  if (x > 1_000) {
+    return (x / 1_000).toLocaleString('en', options) + unitSeparator + 'K';
+  }
+
+  return x.toLocaleString('en', options);
+}

pages/_document.tsx

@@ -13,6 +13,10 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
             rel="stylesheet"
           />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
+            rel="stylesheet"
+          />
           <link rel="icon" sizes="32x32" type="image/png" href="/static/favicon-32x32.png"/>
           <link rel="icon" sizes="16x16" type="image/png"href="/static/favicon-16x16.png"/>
           <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>

pages/api/stats/charts/market.ts

+import handler from 'lib/api/handler';
+
+const getUrl = () => '/v2/stats/charts/market';
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

pages/api/stats/charts/transactions.ts

+import handler from 'lib/api/handler';
+
+const getUrl = () => '/v2/stats/charts/transactions';
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

pages/api/stats/index.ts

+// todo_tom leave only one api endpoint
+import handler from 'lib/api/handler';
+
+const getUrl = () => '/v2/stats';
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

theme/foundations/borders.ts

@@ -4,7 +4,8 @@ const borders = {
     sm: '4px',
     base: '8px',
     md: '12px',
-    lg: '24px',
+    lg: '16px',
+    xl: '24px',
     full: '9999px',
   },
 };

types/api/charts.ts

+export interface ChartTransactionItem {
+  date: string;
+  tx_count: number;
+}
+
+export interface ChartMarketItem {
+  date: string;
+  closing_price: string;
+}
+
+export interface ChartTransactionResponse {
+  chart_data: Array<ChartTransactionItem>;
+}
+
+export interface ChartMarketResponse {
+  available_supply: string;
+  chart_data: Array<ChartMarketItem>;
+}

types/api/stats.ts

+export type Stats = {
+  total_blocks: string;
+  total_addresses: string;
+  total_transactions: string;
+  average_block_time: number;
+  coin_price: string;
+  total_gas_used: string;
+  transactions_today: string;
+  gas_used_today: string;
+  gas_prices: {average: number; fast: number; slow: number};
+  static_gas_price: string;
+  market_cap: string;
+}

types/client/queries.ts

@@ -3,6 +3,7 @@ export enum QueryKeys {
   profile = 'profile',
   txsValidate = 'txs-validated',
   txsPending = 'txs-pending',
+  stats='stats',
   tx = 'tx',
   txInternals = 'tx-internals',
   txLogs = 'tx-logs',
@@ -11,4 +12,6 @@ export enum QueryKeys {
   blockTxs = 'block-transactions',
   block = 'block',
   blocks = 'blocks',
+  chartsTxs = 'charts-txs',
+  chartsMarket = 'charts-market',
 }

ui/charts/EthereumChart.tsx

@@ -32,12 +32,12 @@ const EthereumChart = () => {
 
   const data: TimeChartData = [
     {
-      name: 'Daily Transactions',
+      name: 'Daily txs',
       color: useToken('colors', 'blue.500'),
       items: ethTxsData.slice(range[0], range[1]).map((d) => ({ ...d, date: new Date(d.date) })),
     },
     {
-      name: 'ERC-20 Token Transfers',
+      name: 'ERC-20 tr.',
       color: useToken('colors', 'green.500'),
       items: ethTokenTransferData.slice(range[0], range[1]).map((d) => ({ ...d, date: new Date(d.date) })),
     },
@@ -139,7 +139,6 @@ const EthereumChart = () => {
                 anchorEl={ overlayRef.current }
                 width={ innerWidth }
                 height={ innerHeight }
-                margin={ CHART_MARGIN }
                 xScale={ xScale }
                 yScale={ yScale }
                 data={ filteredData }

ui/charts/SplineChartExample.tsx

@@ -5,7 +5,7 @@ import ethTxsData from 'data/charts_eth_txs.json';
 import ChartLine from 'ui/shared/chart/ChartLine';
 import useChartSize from 'ui/shared/chart/useChartSize';
 import useTimeChartController from 'ui/shared/chart/useTimeChartController';
-import { BlueLinearGradient } from 'ui/shared/chart/utils/gradients';
+import { BlueLineGradient } from 'ui/shared/chart/utils/gradients';
 
 const CHART_MARGIN = { bottom: 0, left: 0, right: 0, top: 0 };
 const DATA = ethTxsData.slice(-30).map((d) => ({ ...d, date: new Date(d.date) }));
@@ -23,13 +23,13 @@ const SplineChartExample = () => {
   return (
     <svg width={ width || '100%' } height={ height || '100%' } ref={ ref }>
       <defs>
-        <BlueLinearGradient.defs/>
+        <BlueLineGradient.defs/>
       </defs>
       <ChartLine
         data={ DATA }
         xScale={ xScale }
         yScale={ yScale }
-        stroke={ `url(#${ BlueLinearGradient.id })` }
+        stroke={ `url(#${ BlueLineGradient.id })` }
         animation="left"
         strokeWidth={ 3 }
       />

ui/home/indicators/ChainIndicatorChart.tsx

+import React from 'react';
+
+import type { ChainIndicatorChartData } from './types';
+
+import ChartArea from 'ui/shared/chart/ChartArea';
+import ChartLine from 'ui/shared/chart/ChartLine';
+import ChartOverlay from 'ui/shared/chart/ChartOverlay';
+import ChartTooltip from 'ui/shared/chart/ChartTooltip';
+import useChartSize from 'ui/shared/chart/useChartSize';
+import useTimeChartController from 'ui/shared/chart/useTimeChartController';
+import { BlueLineGradient } from 'ui/shared/chart/utils/gradients';
+
+interface Props {
+  data: ChainIndicatorChartData;
+  caption?: string;
+}
+
+const CHART_MARGIN = { bottom: 0, left: 10, right: 10, top: 0 };
+
+const ChainIndicatorChart = ({ data }: Props) => {
+  const ref = React.useRef<SVGSVGElement>(null);
+  const overlayRef = React.useRef<SVGRectElement>(null);
+
+  const { width, height, innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN);
+  const { xScale, yScale } = useTimeChartController({
+    data,
+    width: innerWidth,
+    height: innerHeight,
+  });
+
+  return (
+    <svg width={ width || '100%' } height={ height || '100%' } ref={ ref } cursor="pointer">
+      <defs>
+        <BlueLineGradient.defs/>
+      </defs>
+      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ width ? 1 : 0 }>
+        <ChartArea
+          data={ data[0].items }
+          color={ data[0].color }
+          xScale={ xScale }
+          yScale={ yScale }
+        />
+        <ChartLine
+          data={ data[0].items }
+          xScale={ xScale }
+          yScale={ yScale }
+          stroke={ `url(#${ BlueLineGradient.id })` }
+          animation="left"
+          strokeWidth={ 3 }
+        />
+        <ChartOverlay ref={ overlayRef } width={ innerWidth } height={ innerHeight }>
+          <ChartTooltip
+            anchorEl={ overlayRef.current }
+            width={ innerWidth }
+            height={ innerHeight }
+            xScale={ xScale }
+            yScale={ yScale }
+            data={ data }
+          />
+        </ChartOverlay>
+      </g>
+    </svg>
+  );
+};
+
+export default React.memo(ChainIndicatorChart);

ui/home/indicators/ChainIndicatorChartContainer.tsx

+import { Flex } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { ChainIndicatorChartData } from './types';
+
+import ChartLineLoader from 'ui/shared/chart/ChartLineLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+import ChainIndicatorChart from './ChainIndicatorChart';
+
+type Props = UseQueryResult<ChainIndicatorChartData>;
+
+const ChainIndicatorChartContainer = ({ data, isError, isLoading }: Props) => {
+
+  const content = (() => {
+    if (isLoading) {
+      return <ChartLineLoader mt="auto"/>;
+    }
+
+    if (isError) {
+      return <DataFetchAlert/>;
+    }
+
+    return <ChainIndicatorChart data={ data }/>;
+  })();
+
+  return <Flex h={{ base: '150px', lg: '250px' }} alignItems="flex-start">{ content }</Flex>;
+};
+
+export default React.memo(ChainIndicatorChartContainer);

ui/home/indicators/ChainIndicatorItem.tsx

+import { Text, Flex, Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { ChainIndicatorId } from './types';
+import type { Stats } from 'types/api/stats';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+interface Props {
+  id: ChainIndicatorId;
+  title: string;
+  value: (stats: Stats) => string;
+  icon: React.ReactNode;
+  isSelected: boolean;
+  onClick: (id: ChainIndicatorId) => void;
+  stats: UseQueryResult<Stats>;
+}
+
+const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats }: Props) => {
+  const bgColor = useColorModeValue('white', 'gray.900');
+  const isMobile = useIsMobile();
+
+  const handleClick = React.useCallback(() => {
+    onClick(id);
+  }, [ id, onClick ]);
+
+  const valueContent = (() => {
+    if (isMobile) {
+      return null;
+    }
+
+    if (stats.isLoading) {
+      return <Skeleton h={ 3 } w="70px" my={ 1.5 }/>;
+    }
+
+    if (stats.isError) {
+      return <Text variant="secondary" fontWeight={ 400 }>no data</Text>;
+    }
+
+    return <Text variant="secondary" fontWeight={ 600 }>{ value(stats.data) }</Text>;
+  })();
+
+  return (
+    <Flex
+      alignItems="center"
+      columnGap={ 3 }
+      p={ 4 }
+      as="li"
+      borderRadius="md"
+      cursor="pointer"
+      onClick={ handleClick }
+      bgColor={ isSelected ? bgColor : 'inherit' }
+      boxShadow={ isSelected ? 'lg' : 'none' }
+      zIndex={ isSelected ? 1 : 'initial' }
+      _hover={{
+        bgColor,
+        zIndex: 1,
+      }}
+    >
+      { icon }
+      <Box>
+        <Text fontFamily="heading" fontWeight={ 500 }>{ title }</Text>
+        { valueContent }
+      </Box>
+    </Flex>
+  );
+};
+
+export default React.memo(ChainIndicatorItem);

ui/home/indicators/ChainIndicators.tsx

+import { Box, Flex, Icon, Skeleton, Text, Tooltip, useColorModeValue } 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 appConfig from 'configs/app/config';
+import infoIcon from 'icons/info.svg';
+import useFetch from 'lib/hooks/useFetch';
+
+import ChainIndicatorChartContainer from './ChainIndicatorChartContainer';
+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 queryResult = useFetchChartData(indicator);
+
+  const fetch = useFetch();
+  const statsQueryResult = useQuery<unknown, unknown, Stats>(
+    [ QueryKeys.stats ],
+    () => fetch('/node-api/stats'),
+  );
+
+  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 }/>;
+    }
+
+    if (statsQueryResult.isError) {
+      return <Text mt={ 3 } mb={ 4 }>There is no data</Text>;
+    }
+
+    return (
+      <Text fontWeight={ 600 } fontFamily="heading" fontSize="48px" lineHeight="48px" mt={ 3 } mb={ 4 }>
+        { indicator?.value(statsQueryResult.data) }
+      </Text>
+    );
+  })();
+
+  return (
+    <Flex
+      p={{ base: 0, lg: 8 }}
+      borderRadius={{ base: 'none', lg: 'lg' }}
+      boxShadow={{ base: 'none', lg: 'xl' }}
+      bgColor={ bgColor }
+      columnGap={ 12 }
+      rowGap={ 0 }
+      flexDir={{ base: 'column', lg: 'row' }}
+      w="100%"
+      alignItems="stretch"
+    >
+      <Flex flexGrow={ 1 } flexDir="column" order={{ base: 2, lg: 1 }} p={{ base: 6, lg: 0 }}>
+        <Flex alignItems="center">
+          <Text fontWeight={ 500 } fontFamily="heading" fontSize="lg">{ indicator?.title }</Text>
+          { indicator?.hint && (
+            <Tooltip label={ indicator.hint } maxW="300px">
+              <Box display="inline-flex" cursor="pointer" ml={ 1 }>
+                <Icon as={ infoIcon } boxSize={ 4 }/>
+              </Box>
+            </Tooltip>
+          ) }
+        </Flex>
+        { valueTitle }
+        <ChainIndicatorChartContainer { ...queryResult }/>
+      </Flex>
+      { indicators.length > 1 && (
+        <Flex flexShrink={ 0 } flexDir="column" as="ul" p={ 3 } borderRadius="lg" bgColor={ listBgColor } rowGap={ 3 } order={{ base: 1, lg: 2 }}>
+          { indicators.map((indicator) => (
+            <ChainIndicatorItem
+              key={ indicator.id }
+              { ...indicator }
+              isSelected={ selectedIndicator === indicator.id }
+              onClick={ selectIndicator }
+              stats={ statsQueryResult }
+            />
+          )) }
+        </Flex>
+      ) }
+    </Flex>
+  );
+};
+
+export default ChainIndicators;

ui/home/indicators/types.ts

+import type { ChartTransactionResponse, ChartMarketResponse } from 'types/api/charts';
+import type { Stats } from 'types/api/stats';
+import type { QueryKeys } from 'types/client/queries';
+import type { TimeChartDataItem } from 'ui/shared/chart/types';
+
+export type ChartsQueryKeys = QueryKeys.chartsTxs | QueryKeys.chartsMarket;
+
+export type ChainIndicatorId = 'daily_txs' | 'coin_price' | 'market_cup';
+
+export interface TChainIndicator<Q extends ChartsQueryKeys> {
+  id: ChainIndicatorId;
+  title: string;
+  value: (stats: Stats) => string;
+  icon: React.ReactNode;
+  hint?: string;
+  api: {
+    queryName: Q;
+    path: string;
+    dataFn: (response: ChartsResponse<Q>) => ChainIndicatorChartData;
+  };
+}
+
+export type ChartsResponse<Q extends ChartsQueryKeys> =
+    Q extends QueryKeys.chartsTxs ? ChartTransactionResponse :
+      Q extends QueryKeys.chartsMarket ? ChartMarketResponse :
+        never;
+
+export type ChainIndicatorChartData = Array<TimeChartDataItem>;

ui/home/indicators/useFetchChartData.tsx

+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { TChainIndicator, ChartsResponse, ChartsQueryKeys, ChainIndicatorChartData } from './types';
+
+import useFetch from 'lib/hooks/useFetch';
+
+type NotUndefined<T> = T extends undefined ? never : T;
+
+export default function useFetchCharData<Q extends ChartsQueryKeys>(indicator: TChainIndicator<Q> | undefined): UseQueryResult<ChainIndicatorChartData> {
+  const fetch = useFetch();
+
+  type ResponseType = ChartsResponse<NotUndefined<typeof indicator>['api']['queryName']>;
+
+  const queryResult = useQuery<unknown, unknown, ResponseType>(
+    [ indicator?.api.queryName ],
+    () => fetch(indicator?.api.path || ''),
+    { enabled: Boolean(indicator) },
+  );
+
+  return React.useMemo(() => {
+    return {
+      ...queryResult,
+      data: queryResult.data && indicator ? indicator.api.dataFn(queryResult.data) : queryResult.data,
+    } as UseQueryResult<ChainIndicatorChartData>;
+  }, [ indicator, queryResult ]);
+}

ui/home/indicators/utils/indicators.tsx

+import { Icon } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TChainIndicator } from '../types';
+import { QueryKeys } from 'types/client/queries';
+
+import appConfig from 'configs/app/config';
+import globeIcon from 'icons/globe.svg';
+import txIcon from 'icons/transactions.svg';
+import { shortenNumberWithLetter } from 'lib/formatters';
+import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
+import TokenLogo from 'ui/shared/TokenLogo';
+const CHART_COLOR = '#439AE2';
+
+const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
+  id: 'daily_txs',
+  title: 'Daily transactions',
+  value: (stats) => shortenNumberWithLetter(Number(stats.transactions_today), undefined, { maximumFractionDigits: 2 }),
+  icon: <Icon as={ txIcon } boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
+  hint: `The total daily number of transactions on the blockchain for the last month.`,
+  api: {
+    queryName: QueryKeys.chartsTxs,
+    path: '/node-api/stats/charts/transactions',
+    dataFn: (response) => ([ {
+      items: response.chart_data
+        .map((item) => ({ date: new Date(item.date), value: item.tx_count }))
+        .sort(sortByDateDesc),
+      name: 'Tx/day',
+      color: CHART_COLOR,
+      valueFormatter: (x) => shortenNumberWithLetter(x, undefined, { maximumFractionDigits: 2 }),
+    } ]),
+  },
+};
+
+const coinPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
+  id: 'coin_price',
+  title: `${ appConfig.network.currency.symbol } price`,
+  value: (stats) => '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+  icon: <TokenLogo hash={ appConfig.network.nativeTokenAddress || '' } name={ appConfig.network.currency.name } boxSize={ 6 }/>,
+  hint: `${ appConfig.network.currency.symbol } token daily price in USD.`,
+  api: {
+    queryName: QueryKeys.chartsMarket,
+    path: '/node-api/stats/charts/market',
+    dataFn: (response) => ([ {
+      items: response.chart_data
+        .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) }))
+        .sort(sortByDateDesc),
+      name: `${ appConfig.network.currency.symbol } price`,
+      color: CHART_COLOR,
+      valueFormatter: (x) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+    } ]),
+  },
+};
+
+const marketPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
+  id: 'market_cup',
+  title: 'Market cap',
+  value: (stats) => '$' + shortenNumberWithLetter(Number(stats.market_cap), undefined, { maximumFractionDigits: 0 }),
+  icon: <Icon as={ globeIcon } boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
+  // eslint-disable-next-line max-len
+  hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
+  api: {
+    queryName: QueryKeys.chartsMarket,
+    path: '/node-api/stats/charts/market',
+    dataFn: (response) => ([ {
+      items: response.chart_data
+        .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) * Number(response.available_supply) }))
+        .sort(sortByDateDesc),
+      name: 'Market cap',
+      color: CHART_COLOR,
+      valueFormatter: (x) => '$' + shortenNumberWithLetter(x, undefined, { maximumFractionDigits: 0 }),
+    } ]),
+  },
+};
+
+const INDICATORS = [
+  dailyTxsIndicator,
+  coinPriceIndicator,
+  marketPriceIndicator,
+];
+
+export default INDICATORS;

ui/pages/Home.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import appConfig from 'configs/app/config';
 import * as cookies from 'lib/cookies';
 import useToast from 'lib/hooks/useToast';
+import ChainIndicators from 'ui/home/indicators/ChainIndicators';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
@@ -48,11 +49,11 @@ const Home = () => {
 
   return (
     <Page>
-      <VStack gap={ 4 } alignItems="flex-start" maxW="800px">
+      <VStack gap={ 4 } alignItems="flex-start" maxW="1000px">
         <PageTitle text={
           `Home Page for ${ appConfig.network.name } network`
         }/>
-        <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
+        <ChainIndicators/>
         { /* will be deleted when we move to new CI */ }
         { isFormVisible && (
           <>
@@ -70,6 +71,7 @@ const Home = () => {
             <Button onClick={ handleSetTokenClick }>Set cookie</Button>
           </>
         ) }
+        <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
       </VStack>
     </Page>
   );

ui/shared/chart/ChartArea.tsx

+import { useColorModeValue, useToken } from '@chakra-ui/react';
 import * as d3 from 'd3';
 import React from 'react';
 
@@ -13,6 +14,8 @@ interface Props extends React.SVGProps<SVGPathElement> {
 
 const ChartArea = ({ xScale, yScale, color, data, disableAnimation, ...props }: Props) => {
   const ref = React.useRef(null);
+  const gradientStopColor = useToken('colors', useColorModeValue('whiteAlpha.200', 'blackAlpha.100'));
+
   React.useEffect(() => {
     if (disableAnimation) {
       d3.select(ref.current).attr('opacity', 1);
@@ -39,8 +42,8 @@ const ChartArea = ({ xScale, yScale, color, data, disableAnimation, ...props }:
       { color && (
         <defs>
           <linearGradient id={ `gradient-${ color }` } x1="0%" x2="0%" y1="0%" y2="100%">
-            <stop offset="0%" stopColor={ color } stopOpacity={ 0.8 }/>
-            <stop offset="100%" stopColor={ color } stopOpacity={ 0.02 }/>
+            <stop offset="2%" stopColor={ color }/>
+            <stop offset="78%" stopColor={ gradientStopColor }/>
           </linearGradient>
         </defs>
       ) }

ui/shared/chart/ChartLine.tsx

@@ -69,6 +69,7 @@ const ChartLine = ({ xScale, yScale, data, animation, ...props }: Props) => {
       ref={ ref }
       d={ line(data) || undefined }
       strokeWidth={ 1 }
+      strokeLinecap="round"
       fill="none"
       opacity={ 0 }
       { ...props }

ui/shared/chart/ChartLineLoader.tsx

+import { useColorModeValue, useToken, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+// eslint-disable-next-line max-len
+const d = 'M2 87.8491C2 87.8491 33.0576 108.005 66.5621 87.8491C100.067 67.693 104.693 112.847 115.444 112.847C126.196 112.847 127.564 -14.2956 150.132 4.10659C172.701 22.5087 204.973 118.132 231.009 87.8491C257.044 57.5664 282.524 27.2837 300.355 57.5664C318.185 87.8491 419.225 111.026 439.651 57.5664C460.077 4.10659 479.504 244.505 516.708 244.505C553.911 244.505 560.47 122.168 589.929 144.014C619.388 165.861 604.48 198.172 633.774 198.172C663.068 198.172 704.562 89 704.562 89';
+const INCREMENT = 3;
+
+const ChartLineLoader = ({ className }: { className?: string }) => {
+  const ref = React.useRef<SVGPathElement>(null);
+  const raf = React.useRef<number>();
+  const offset = React.useRef(0);
+
+  const lineBgColor = useToken('colors', useColorModeValue('gray.200', 'gray.500'));
+  const lineFgColor = useToken('colors', useColorModeValue('gray.400', 'gray.300'));
+  const gradientStopColor = useToken('colors', useColorModeValue('whiteAlpha.200', 'blackAlpha.100'));
+
+  React.useEffect(() => {
+    const length = ref.current?.getTotalLength() || 0;
+
+    ref.current?.setAttribute('stroke-dasharray', `${ length },${ length }`);
+
+    const animatePath = () => {
+      ref.current?.setAttribute('stroke-dashoffset', `${ length - offset.current }`);
+      const nextOffset = offset.current + INCREMENT <= length ? offset.current + INCREMENT : 0;
+
+      offset.current = nextOffset;
+      raf.current = window.requestAnimationFrame(animatePath);
+    };
+    raf.current = window.requestAnimationFrame(animatePath);
+
+    return () => {
+      raf.current && window.cancelAnimationFrame(raf.current);
+    };
+  }, []);
+
+  return (
+    <svg className={ className } width="100%" viewBox="0 0 707 272" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id="chart_line_loader" x1="0" y1="0" x2="0" y2="272" gradientUnits="userSpaceOnUse">
+          <stop offset="0.02" stopColor="#D9D9D9"/>
+          <stop offset="0.78" stopColor={ gradientStopColor }/>
+        </linearGradient>
+      </defs>
+      <path
+        // eslint-disable-next-line max-len
+        d="M2 87.8491C2 87.8491 33.0576 108.005 66.5621 87.8491C100.067 67.693 104.693 112.847 115.444 112.847C126.196 112.847 127.564 -14.2956 150.132 4.10659C172.701 22.5087 204.973 118.132 231.009 87.8491C257.044 57.5664 282.524 27.2837 300.355 57.5664C318.185 87.8491 419.225 111.026 439.651 57.5664C460.077 4.10659 479.504 244.505 516.708 244.505C553.911 244.505 560.47 122.168 589.929 144.014C619.388 165.861 604.48 198.172 633.774 198.172C663.068 198.172 704.562 89 704.562 83.4575L702.467 231.992V268H0V85.5Z"
+        fill="url(#chart_line_loader)"
+        transform="translate(0,2)"
+      />
+      <path
+        d={ d }
+        stroke={ lineBgColor }
+        strokeWidth="4"
+        strokeLinecap="round"
+        fill="none"
+      />
+      <path
+        ref={ ref }
+        d={ d }
+        stroke={ lineFgColor }
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeDasharray="10000,100000"
+        strokeDashoffset="-10000"
+        fill="none"
+      />
+    </svg>
+  );
+};
+
+export default chakra(ChartLineLoader);

ui/shared/chart/types.tsx

@@ -19,6 +19,7 @@ export interface TimeChartDataItem {
   items: Array<TimeChartItem>;
   name: string;
   color?: string;
+  valueFormatter?: (value: number) => string;
 }
 
 export type TimeChartData = Array<TimeChartDataItem>;

ui/shared/chart/utils/computeTooltipPosition.ts

+import _clamp from 'lodash/clamp';
+
+interface Params {
+  pointX: number;
+  pointY: number;
+  offset: number;
+  nodeWidth: number;
+  nodeHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
+}
+
+export default function computeTooltipPosition({ pointX, pointY, canvasWidth, canvasHeight, nodeWidth, nodeHeight, offset }: Params): [ number, number ] {
+  // right
+  if (pointX + offset + nodeWidth <= canvasWidth) {
+    const x = pointX + offset;
+    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
+    return [ x, y ];
+  }
+
+  // left
+  if (nodeWidth + offset <= pointX) {
+    const x = pointX - offset - nodeWidth;
+    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
+    return [ x, y ];
+  }
+
+  // top
+  if (nodeHeight + offset <= pointY) {
+    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
+    const y = pointY - offset - nodeHeight;
+    return [ x, y ];
+  }
+
+  // bottom
+  if (pointY + offset + nodeHeight <= canvasHeight) {
+    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
+    const y = pointY + offset;
+    return [ x, y ];
+  }
+
+  const x = _clamp(pointX / 2, 0, canvasWidth - nodeWidth);
+  const y = _clamp(pointY / 2, 0, canvasHeight - nodeHeight);
+
+  return [ x, y ];
+}

ui/shared/chart/utils/gradients.tsx

 import React from 'react';
 
-export const BlueLinearGradient = {
+export const BlueLineGradient = {
   id: 'blue-linear-gradient',
   defs: () => (
     <linearGradient id="blue-linear-gradient">

ui/shared/chart/utils/pointerTracker.tsx

+import * as d3 from 'd3';
+
+export interface Pointer {
+  id: number;
+  point: [number, number] | null;
+  prev: [number, number] | null;
+  sourceEvent?: PointerEvent;
+}
+
+export interface PointerOptions {
+  start?: (tracker: Pointer) => void;
+  move?: (tracker: Pointer) => void;
+  out?: (tracker: Pointer) => void;
+  end?: (tracker: Pointer) => void;
+}
+
+export function trackPointer(event: PointerEvent, { start, move, out, end }: PointerOptions) {
+  const tracker: Pointer = {
+    id: event.pointerId,
+    point: null,
+    prev: null,
+  };
+
+  const id = event.pointerId;
+  const target = event.target as Element;
+  tracker.point = d3.pointer(event, target);
+  target.setPointerCapture(id);
+
+  d3.select(target)
+    .on(`pointerup.${ id } pointercancel.${ id } lostpointercapture.${ id }`, (sourceEvent: PointerEvent) => {
+      if (sourceEvent.pointerId !== id) {
+        return;
+      }
+
+      tracker.sourceEvent = sourceEvent;
+      d3.select(target).on(`.${ id }`, null);
+      target.releasePointerCapture(id);
+      end?.(tracker);
+    })
+    .on(`pointermove.${ id }`, (sourceEvent) => {
+      if (sourceEvent.pointerId !== id) {
+        return;
+      }
+      tracker.sourceEvent = sourceEvent;
+      tracker.prev = tracker.point;
+      tracker.point = d3.pointer(sourceEvent, target);
+      move?.(tracker);
+    })
+    .on(`pointerout.${ id }`, (e) => {
+      if (e.pointerId !== id) {
+        return;
+      }
+      tracker.sourceEvent = e;
+      tracker.point = null;
+      out?.(tracker);
+    });
+
+  start?.(tracker);
+
+  return [ 'pointerup', 'pointercancel', 'lostpointercapture', 'pointermove', 'pointerout' ].map((event) => `${ event }.${ id }`);
+}

ui/shared/chart/utils/sorts.tsx

+import type { TimeChartItem } from '../types';
+
+export const sortByDateDesc = (a: TimeChartItem, b: TimeChartItem) => {
+  return a.date.getTime() - b.date.getTime();
+};