Cross-chain: ICTT users index, bridged tokens tab, and stats layout (#3351)

* fix stats counters layout

* ICTT users index

* bridged tokens page

* move bridged tokens to the tab on tokens page

* migrate to new API version

* add support for sankey chart on stats page

* rename Chart into LineChart

* create reusable chart components

* sankey widget

* cross chain txs paths chart page

* add filter for bridged tokens and fix sorting for ictt users

* hide chain select for paths chart

* add chain filter to paths chart page

* show zero-value nodes on sankey chart

* add tests

* refactoring

* fix tests

* review fixes

* Update ChainStatsDetails to handle counterparty chain IDs as an array and change chart sorting to ascending order

Author: tom2drum

ui/shared/chart/ChartIntervalSelect.tsx …stats/components/ChartIntervalSelect.tsxui/shared/chart/ChartIntervalSelect.tsx renamed to client/features/chain-stats/components/ChartIntervalSelect.tsx ui/shared/chart/ChartIntervalSelect.tsx renamed to client/features/chain-stats/components/ChartIntervalSelect.tsx

@@ -1,13 +1,14 @@
 import { createListCollection } from '@chakra-ui/react';
 import React from 'react';
 
-import type { StatsInterval, StatsIntervalIds } from 'types/client/stats';
+import type { StatsInterval, StatsIntervalIds } from '../types/client';
 
 import { Select } from 'toolkit/chakra/select';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import type { TagProps } from 'toolkit/chakra/tag';
 import TagGroupSelect from 'ui/shared/tagGroupSelect/TagGroupSelect';
-import { STATS_INTERVALS } from 'ui/stats/constants';
+
+import { STATS_INTERVALS } from '../utils/interval';
 
 const intervalCollection = createListCollection({
   items: Object.keys(STATS_INTERVALS).map((id: string) => ({
@@ -28,7 +29,7 @@ type Props = {
   selectTagSize?: TagProps['size'];
 };
 
-const ChartIntervalSelect = ({ interval, onIntervalChange, isLoading, selectTagSize }: Props) => {
+const ChartIntervalSelect = ({ interval, onIntervalChange, isLoading, selectTagSize = 'lg' }: Props) => {
 
   const handleItemSelect = React.useCallback(({ value }: { value: Array<string> }) => {
     onIntervalChange(value[0] as StatsIntervalIds);

client/features/chain-stats/components/ChartWidgetContainer.tsx

@@ -0,0 +1,81 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { StatsIntervalIds } from '../types/client';
+
+import { route, type Route } from 'nextjs-routes';
+
+import { ChartResolution } from 'toolkit/components/charts';
+import { LineChartWidget } from 'toolkit/components/charts/line/LineChartWidget';
+import { useChartsConfig } from 'ui/shared/chart/config';
+
+import useChartQuery from '../hooks/useChartQuery';
+import { getChartUrl } from '../utils/chart';
+
+export interface Props {
+  id: string;
+  title: string;
+  description: string;
+  interval: StatsIntervalIds;
+  onLoadingError: () => void;
+  isLoading: boolean;
+  className?: string;
+  href?: Route;
+};
+
+const ChartWidgetContainer = ({
+  id,
+  title,
+  description,
+  interval,
+  onLoadingError,
+  isLoading,
+  className,
+  href,
+}: Props) => {
+  const query = useChartQuery({ id, resolution: ChartResolution.DAY, interval, enabled: !isLoading });
+
+  React.useEffect(() => {
+    if (query.isError) {
+      onLoadingError();
+    }
+  }, [ query.isError, onLoadingError ]);
+
+  const chartsConfig = useChartsConfig();
+
+  const data = query.data?.data;
+  const units = query.data?.info?.units;
+
+  const charts = React.useMemo(() => {
+    if (!data || data.length === 0) {
+      return [];
+    }
+
+    return [
+      {
+        id,
+        name: 'Value',
+        items: data,
+        charts: chartsConfig,
+        units,
+      },
+    ];
+  }, [ data, id, chartsConfig, units ]);
+
+  return (
+    <LineChartWidget
+      id={ id }
+      charts={ charts }
+      title={ title }
+      description={ description }
+      isLoading={ query.isPlaceholderData }
+      isError={ query.isError }
+      minH="230px"
+      className={ className }
+      href={ href ? route(href) : undefined }
+      chartUrl={ getChartUrl(href) }
+    />
+  );
+};
+
+export default chakra(ChartWidgetContainer);

client/features/chain-stats/hooks/useChainStats.tsx

@@ -0,0 +1,109 @@
+import { uniqBy } from 'es-toolkit';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { ChainStatsChart, ChainStatsPayload, ChainStatsSection, StatsIntervalIds } from '../types/client';
+import type { ClusterChainConfig } from 'types/multichain';
+
+import { CROSS_CHAIN_TXS_SECTIONS } from 'client/features/cross-chain-txs/utils/chain-stats';
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+import { CHAIN_STATS_CHARTS } from '../stubs/charts';
+
+function isSectionMatches(section: ChainStatsSection, currentSection: string): boolean {
+  return currentSection === 'all' || section.id === currentSection;
+}
+
+function isChartNameMatches(q: string, chart: ChainStatsChart) {
+  return chart.title.toLowerCase().includes(q.toLowerCase());
+}
+
+interface Props {
+  chain?: ClusterChainConfig;
+}
+
+export default function useChainStats({ chain }: Props = {}) {
+  const router = useRouter();
+
+  const [ sectionId, setSectionId ] = React.useState('all');
+  const [ filterQuery, setFilterQuery ] = React.useState('');
+  const [ initialFilterQuery, setInitialFilterQuery ] = React.useState('');
+  const [ interval, setInterval ] = React.useState<StatsIntervalIds>('oneMonth');
+
+  const { data, isPlaceholderData, isError } = useApiQuery<'stats:lines', unknown, ChainStatsPayload>('stats:lines', {
+    queryOptions: {
+      placeholderData: CHAIN_STATS_CHARTS,
+      select: (data) => {
+        const crossChainTxsFeature = (chain?.app_config || config).features.crossChainTxs;
+        if (!crossChainTxsFeature.isEnabled) {
+          return data;
+        }
+
+        const sections: Array<ChainStatsSection> = data.sections.slice();
+
+        for (const extraSection of CROSS_CHAIN_TXS_SECTIONS) {
+          const existingSection = sections.find((section) => section.id === extraSection.id);
+          if (existingSection) {
+            existingSection.charts = uniqBy([
+              ...existingSection.charts,
+              ...extraSection.charts,
+            ], (chart) => chart.id);
+          } else {
+            sections.push(extraSection);
+          }
+        }
+
+        return {
+          sections,
+        };
+      },
+    },
+    chain,
+  });
+
+  React.useEffect(() => {
+    if (!isPlaceholderData && !isError) {
+      const chartId = getQueryParamString(router.query.chartId);
+      const chartName = data?.sections.map((section) => section.charts.find((chart) => chart.id === chartId)).filter(Boolean)[0]?.title;
+      if (chartName) {
+        setInitialFilterQuery(chartName);
+        setFilterQuery(chartName);
+        router.replace({ pathname: '/stats' }, undefined, { scroll: false });
+      }
+    }
+  // run only when data is loaded
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ isPlaceholderData ]);
+
+  const displayedSections = React.useMemo(() => {
+    return data?.sections
+      ?.map((section) => {
+        const charts = section.charts.filter((chart) => isSectionMatches(section, sectionId) && isChartNameMatches(filterQuery, chart));
+
+        return {
+          ...section,
+          charts,
+        };
+      }).filter((section) => section.charts.length > 0);
+  }, [ sectionId, data?.sections, filterQuery ]);
+
+  return React.useMemo(() => ({
+    sections: data?.sections,
+    displayedSections,
+    sectionId,
+
+    isLoading: isPlaceholderData,
+    isError,
+
+    initialFilterQuery,
+    filterQuery,
+
+    interval,
+
+    onFilterChange: setFilterQuery,
+    onSectionChange: setSectionId,
+    onIntervalChange: setInterval,
+  }), [ data?.sections, displayedSections, sectionId, isPlaceholderData, isError, initialFilterQuery, filterQuery, interval ]);
+}

client/features/chain-stats/hooks/useChartQuery.tsx

@@ -0,0 +1,55 @@
+import type { ChartDataPayloadLine, StatsIntervalIds } from '../types/client';
+import type { ChartResolution } from 'toolkit/components/charts/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+
+import { CHAIN_STATS_LINE_CHART } from '../stubs/charts';
+import { getDatesFromInterval } from '../utils/interval';
+
+interface Props {
+  id: string;
+  resolution: ChartResolution;
+  interval: StatsIntervalIds;
+  enabled?: boolean;
+}
+
+export default function useChartQuery({ id, resolution, interval, enabled = true }: Props) {
+
+  const { start: startDate, end: endDate } = getDatesFromInterval(interval);
+  const resourceName = 'stats:line';
+
+  return useApiQuery<typeof resourceName, unknown, ChartDataPayloadLine | undefined>(resourceName, {
+    pathParams: { id },
+    queryParams: {
+      from: startDate,
+      to: endDate,
+      resolution,
+    },
+    queryOptions: {
+      enabled: enabled,
+      refetchOnMount: false,
+      placeholderData: (prevData) => {
+        return prevData ?? CHAIN_STATS_LINE_CHART;
+      },
+      select: (data) => {
+        return {
+          type: 'line',
+          info: data.info ?? {
+            id: id,
+            title: 'Chart title',
+            description: 'Chart description',
+            resolutions: [ ],
+          },
+          data: data.chart.map((item) => {
+            return {
+              date: new Date(item.date),
+              date_to: new Date(item.date_to),
+              value: Number(item.value),
+              isApproximate: item.is_approximate,
+            };
+          }),
+        };
+      },
+    },
+  });
+}

client/features/chain-stats/mocks/cross-chain-txs-paths.ts

@@ -0,0 +1,23 @@
+import type { GetMessagePathsResponse } from '@blockscout/interchain-indexer-types';
+
+import { chainA, chainB, chainC, chainD } from 'mocks/multichain/chains';
+
+export const incomingMessagesPaths: GetMessagePathsResponse = {
+  items: [
+    {
+      source_chain: chainB,
+      destination_chain: chainA,
+      messages_count: 7282,
+    },
+    {
+      source_chain: chainC,
+      destination_chain: chainA,
+      messages_count: 0,
+    },
+    {
+      source_chain: chainD,
+      destination_chain: chainA,
+      messages_count: 420,
+    },
+  ],
+};

mocks/stats/line.ts client/features/chain-stats/mocks/line.tsmocks/stats/line.ts renamed to client/features/chain-stats/mocks/line.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { ChartResolution } from 'toolkit/components/charts/types';
+
+import { CROSS_CHAIN_TXS_CHARTS } from 'client/features/cross-chain-txs/utils/chain-stats';
+import * as chainsMock from 'mocks/multichain/chains';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import * as crossChainTxsPathsMock from '../../mocks/cross-chain-txs-paths';
+import * as statsLineMock from '../../mocks/line';
+import ChainStatsDetails from './ChainStatsDetails';
+
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
+test('base view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+
+  const CHART_ID = 'averageGasPrice';
+  const hooksConfig = {
+    router: {
+      query: { id: CHART_ID, interval: 'all' },
+    },
+  };
+
+  const chartApiUrl = await mockApiResponse(
+    'stats:line',
+    statsLineMock.averageGasPrice,
+    {
+      pathParams: { id: CHART_ID },
+      queryParams: {
+        resolution: ChartResolution.DAY,
+      },
+    },
+  );
+
+  const component = await render(<ChainStatsDetails/>, { hooksConfig });
+  await page.waitForResponse(chartApiUrl);
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="chart-fullscreen"]')?.getAttribute('opacity') === '1';
+  });
+  await expect(component).toHaveScreenshot();
+});
+
+test('cross-chain txs paths view +@dark-mode +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
+  const CHART = CROSS_CHAIN_TXS_CHARTS[0];
+  const hooksConfig = {
+    router: {
+      query: { id: CHART.id, interval: 'all' },
+    },
+  };
+
+  await mockEnvs([
+    ...ENVS_MAP.crossChainTxs,
+    [ 'NEXT_PUBLIC_NETWORK_NAME', chainsMock.chainA.name ],
+    [ 'NEXT_PUBLIC_NETWORK_ID', chainsMock.chainA.id ],
+  ]);
+  await mockApiResponse('interchainIndexer:chains', { items: [ chainsMock.chainA, chainsMock.chainB, chainsMock.chainC, chainsMock.chainD ] });
+  await mockApiResponse(
+    CHART.resourceName!,
+    crossChainTxsPathsMock.incomingMessagesPaths,
+    {
+      pathParams: { chainId: chainsMock.chainA.id },
+    },
+  );
+
+  const component = await render(<ChainStatsDetails/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});