Add network tables for Hubble Stats

.github/workflows/deploy-hubble-stats.yml

@@ -68,7 +68,7 @@ jobs:
           echo "NETLIFY_LOGS_URL=$LOGS_URL" >> $GITHUB_OUTPUT
 
       - name: Netlify Preview URL
-        uses: unsplash/comment-on-pr@v1.3.1
+        uses: unsplash/comment-on-pr@master
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           MSG: |

apps/hubble-stats/app/pool/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import {
+  NetworkTablesContainer,
   PoolMetadataTableContainer,
   PoolOverviewContainer,
   PoolTransactionsTableContainer,
@@ -15,7 +16,11 @@ export default function Pool({ params }: { params: { slug: string } }) {
         </div>
         <div className="flex-grow"></div>
       </div>
+
+      <NetworkTablesContainer />
+
       <PoolTransactionsTableContainer />
+
       <PoolMetadataTableContainer />
     </div>
   );

apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx

@@ -0,0 +1,123 @@
+import { FC, useMemo } from 'react';
+import {
+  createColumnHelper,
+  useReactTable,
+  getCoreRowModel,
+  ColumnDef,
+  Table as RTTable,
+} from '@tanstack/react-table';
+import {
+  ChainChip,
+  Table,
+  fuzzyFilter,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+import { ShieldedAssetLight, ShieldedAssetDark } from '@webb-tools/icons';
+import { chainsConfig } from '@webb-tools/dapp-config/chains';
+
+import { NetworkPoolType, NetworkPoolTableProps } from './types';
+import { HeaderCell, NumberCell } from '../table';
+import { getSortedTypedChainIds } from '../../utils';
+
+const columnHelper = createColumnHelper<NetworkPoolType>();
+
+const staticColumns: ColumnDef<NetworkPoolType, any>[] = [
+  columnHelper.accessor('symbol', {
+    header: () => null,
+    cell: (props) => (
+      <div className="flex items-center gap-1">
+        <ShieldedAssetLight className="block dark:hidden" />
+        <ShieldedAssetDark className="hidden dark:block" />
+        <Typography
+          variant="body1"
+          fw="bold"
+          className="text-mono-200 dark:text-mono-0"
+        >
+          {props.row.original.symbol}
+        </Typography>
+      </div>
+    ),
+  }),
+  columnHelper.accessor('aggregate', {
+    header: () => (
+      <HeaderCell
+        title="Aggregate"
+        className="text-mono-200 dark:text-mono-0"
+      />
+    ),
+    cell: (props) => <NumberCell value={props.getValue()} prefix="$" />,
+  }),
+];
+
+const NetworkPoolTable: FC<NetworkPoolTableProps> = ({
+  typedChainIds,
+  data,
+  prefixUnit = '$',
+}) => {
+  const sortedTypedChainIds = useMemo(
+    () => getSortedTypedChainIds(typedChainIds),
+    [typedChainIds]
+  );
+
+  const columns = useMemo<ColumnDef<NetworkPoolType, any>[]>(
+    () => [
+      ...staticColumns,
+      ...sortedTypedChainIds.map((typedChainId) =>
+        columnHelper.accessor('chainsData', {
+          id: typedChainId.toString(),
+          header: () => (
+            <div className="w-full text-center">
+              <ChainChip
+                chainName={chainsConfig[typedChainId].name}
+                chainType={chainsConfig[typedChainId].group}
+                // shorten the title to last word of the chain name
+                title={chainsConfig[typedChainId].name.split(' ').pop()}
+              />
+            </div>
+          ),
+          cell: (props) =>
+            typeof props.row.original.chainsData[typedChainId] === 'number' ? (
+              <NumberCell
+                value={props.row.original.chainsData[typedChainId]}
+                prefix={prefixUnit}
+              />
+            ) : (
+              <Typography variant="body1" ta="center">
+                *
+              </Typography>
+            ),
+        })
+      ),
+    ],
+    [sortedTypedChainIds, prefixUnit]
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter,
+    },
+    globalFilterFn: fuzzyFilter,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  if (typedChainIds.length === 0) {
+    return (
+      <Typography variant="body1">No network pool data available</Typography>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-mono-40 dark:border-mono-160">
+      <Table
+        thClassName="border-t-0 bg-mono-0 border-r first:px-3 last:border-r-0 last:pr-2"
+        tdClassName="border-r last:border-r-0 first:px-3 last:pr-2"
+        tableProps={table as RTTable<unknown>}
+        totalRecords={data.length}
+      />
+    </div>
+  );
+};
+
+export default NetworkPoolTable;

apps/hubble-stats/components/NetworkPoolTable/index.ts

@@ -0,0 +1 @@
+export { default as NetworkPoolTable } from './NetworkPoolTable';

apps/hubble-stats/components/NetworkPoolTable/types.ts

@@ -0,0 +1,33 @@
+export type NetworkPoolType = {
+  /**
+   * The pool symbol
+   */
+  symbol: string;
+
+  /**
+   * The aggregate of all the values from different chains
+   */
+  aggregate: number;
+
+  /**
+   * The value on each chain indexed by typedChainId
+   */
+  chainsData: Record<number, number | undefined>;
+};
+
+export interface NetworkPoolTableProps {
+  /**
+   * The list of all available chains
+   */
+  typedChainIds: number[];
+
+  /**
+   * The data for whole table
+   */
+  data: Array<NetworkPoolType>;
+
+  /**
+   * The prefix unit of all the values on the table
+   */
+  prefixUnit?: string;
+}

apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx

@@ -0,0 +1,152 @@
+import { FC, useMemo } from 'react';
+import cx from 'classnames';
+import {
+  useReactTable,
+  createColumnHelper,
+  getExpandedRowModel,
+  getCoreRowModel,
+  ColumnDef,
+  Table as RTTable,
+} from '@tanstack/react-table';
+import {
+  ChainChip,
+  Table,
+  fuzzyFilter,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+import { TokenIcon, CornerDownRightLine } from '@webb-tools/icons';
+import { chainsConfig } from '@webb-tools/dapp-config/chains';
+
+import { NetworkTokenType, NetworkTokenTableProps } from './types';
+import { HeaderCell, NumberCell } from '../table';
+import { getSortedTypedChainIds } from '../../utils';
+
+const columnHelper = createColumnHelper<NetworkTokenType>();
+
+const staticColumns: ColumnDef<NetworkTokenType, any>[] = [
+  columnHelper.accessor('symbol', {
+    header: () => null,
+    cell: (props) => {
+      const isSubToken = !props.row.getCanExpand();
+      return (
+        <div className={cx('flex items-center gap-1', { 'pl-2': isSubToken })}>
+          {isSubToken && <CornerDownRightLine />}
+          {/* Token Icon */}
+          <TokenIcon
+            name={isSubToken ? props.row.original.symbol : 'webb'}
+            size="lg"
+          />
+
+          {/* Symbol */}
+          <Typography
+            variant="body1"
+            fw="bold"
+            className={cx('text-mono-200 dark:text-mono-0', {
+              uppercase: isSubToken,
+            })}
+          >
+            {props.row.original.symbol}
+          </Typography>
+
+          {/* Composition Percentage */}
+          {isSubToken && props.row.original.compositionPercentage && (
+            <Typography
+              variant="body2"
+              fw="bold"
+              className="!text-[12px] text-mono-120 dark:text-mono-80 uppercase"
+            >
+              {props.row.original.compositionPercentage}%
+            </Typography>
+          )}
+        </div>
+      );
+    },
+  }),
+  columnHelper.accessor('aggregate', {
+    header: () => (
+      <HeaderCell
+        title="Aggregate"
+        className="text-mono-200 dark:text-mono-0"
+      />
+    ),
+    cell: (props) => <NumberCell value={props.getValue()} prefix="$" />,
+  }),
+];
+
+const NetworkTokenTable: FC<NetworkTokenTableProps> = ({
+  typedChainIds,
+  data,
+  prefixUnit = '$',
+}) => {
+  const sortedTypedChainIds = useMemo(
+    () => getSortedTypedChainIds(typedChainIds),
+    [typedChainIds]
+  );
+
+  const columns = useMemo<ColumnDef<NetworkTokenType, any>[]>(
+    () => [
+      ...staticColumns,
+      ...sortedTypedChainIds.map((typedChainId) =>
+        columnHelper.accessor('chainsData', {
+          id: typedChainId.toString(),
+          header: () => (
+            <div className="w-full text-center">
+              <ChainChip
+                chainName={chainsConfig[typedChainId].name}
+                chainType={chainsConfig[typedChainId].group}
+                // shorten the title to last word of the chain name
+                title={chainsConfig[typedChainId].name.split(' ').pop()}
+              />
+            </div>
+          ),
+          cell: (props) =>
+            typeof props.row.original.chainsData[typedChainId] === 'number' ? (
+              <NumberCell
+                value={props.row.original.chainsData[typedChainId]}
+                prefix={prefixUnit}
+              />
+            ) : (
+              <Typography variant="body1" ta="center">
+                *
+              </Typography>
+            ),
+        })
+      ),
+    ],
+    [sortedTypedChainIds, prefixUnit]
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      expanded: true,
+    },
+    filterFns: {
+      fuzzy: fuzzyFilter,
+    },
+    getSubRows: (row) => row.tokens,
+    globalFilterFn: fuzzyFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+  });
+
+  if (typedChainIds.length === 0) {
+    return (
+      <Typography variant="body1">No network token data available</Typography>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-mono-40 dark:border-mono-160">
+      <Table
+        thClassName="border-t-0 bg-mono-0 border-r first:px-3 last:border-r-0 last:pr-2"
+        tdClassName="border-r last:border-r-0 first:px-3 last:pr-2"
+        tableProps={table as RTTable<unknown>}
+        totalRecords={data.length}
+      />
+    </div>
+  );
+};
+
+export default NetworkTokenTable;

apps/hubble-stats/components/NetworkTokenTable/index.ts

@@ -0,0 +1 @@
+export { default as NetworkTokenTable } from './NetworkTokenTable';

apps/hubble-stats/components/NetworkTokenTable/types.ts

@@ -0,0 +1,43 @@
+export type NetworkTokenType = {
+  /**
+   * The token symbol and render on the TokenIcon
+   */
+  symbol: string;
+
+  /**
+   * The percentage of the token in the composition (0 - 100)
+   */
+  compositionPercentage?: number;
+
+  /**
+   * The aggregate value of all the tokens combine
+   */
+  aggregate: number;
+
+  /**
+   * The detailed data of the tokens on each chain
+   */
+  chainsData: Record<number, number | undefined>;
+
+  /**
+   * The list all the tokens and their data
+   */
+  tokens?: Array<NetworkTokenType>;
+};
+
+export interface NetworkTokenTableProps {
+  /**
+   * The list of all available chains
+   */
+  typedChainIds: number[];
+
+  /**
+   * The data for whole table (list of tokens and subTokens)
+   */
+  data: Array<NetworkTokenType>;
+
+  /**
+   * The prefix unit of all the values on the table
+   */
+  prefixUnit?: string;
+}

apps/hubble-stats/components/index.ts

@@ -2,6 +2,8 @@ export * from './AreaChart';
 export * from './BarChart';
 export * from './Header';
 export * from './KeyMetricItem';
+export * from './NetworkPoolTable';
+export * from './NetworkTokenTable';
 export * from './PoolMetadataTable';
 export * from './PoolOverviewItem';
 export * from './PoolTransactionsTable';