feat: add network stats to dashboard (#33)

subsquid · Jun 16, 2024 · d3ad4fe · d3ad4fe
1 parent 167e6db
commit d3ad4fe
Show file tree

Hide file tree

Showing 10 changed files with 521 additions and 114 deletions.
diff --git a/src/api/subsquid-network-squid/api.graphql b/src/api/subsquid-network-squid/api.graphql
@@ -322,3 +322,33 @@ query vestingByAddress($address: String!) {
     ...VestingFragment
   }
 }
+
+query networkSummary {
+  networkStats {
+    onlineWorkersCount
+    queries90Days
+    queries24Hours
+    servedData90Days
+    servedData24Hours
+    stakerApr
+    totalBond
+    totalDelegation
+    storedData
+    workerApr
+    workersCount
+  }
+}
+
+query currentEpoch {
+  networkStats {
+    blockTimeL1
+    lastBlockL1
+    lastBlockTimestampL1
+  }
+
+  epoches(limit: 1, orderBy: id_DESC) {
+    number
+    start
+    end
+  }
+}
diff --git a/src/api/subsquid-network-squid/graphql.tsx b/src/api/subsquid-network-squid/graphql.tsx
@@ -2561,6 +2561,27 @@ export type GatewaysConnection = {
   totalCount: Scalars['Int']['output'];
 };
 
+export type NetworkStats = {
+  __typename?: 'NetworkStats';
+  blockTime: Scalars['Float']['output'];
+  blockTimeL1: Scalars['Float']['output'];
+  lastBlock: Scalars['Float']['output'];
+  lastBlockL1: Scalars['Float']['output'];
+  lastBlockTimestamp: Scalars['DateTime']['output'];
+  lastBlockTimestampL1: Scalars['DateTime']['output'];
+  onlineWorkersCount: Scalars['Float']['output'];
+  queries24Hours: Scalars['BigInt']['output'];
+  queries90Days: Scalars['BigInt']['output'];
+  servedData24Hours: Scalars['BigInt']['output'];
+  servedData90Days: Scalars['BigInt']['output'];
+  stakerApr: Scalars['Float']['output'];
+  storedData: Scalars['BigInt']['output'];
+  totalBond: Scalars['BigInt']['output'];
+  totalDelegation: Scalars['BigInt']['output'];
+  workerApr: Scalars['Float']['output'];
+  workersCount: Scalars['Float']['output'];
+};
+
 export type PageInfo = {
   __typename?: 'PageInfo';
   endCursor: Scalars['String']['output'];
@@ -2631,6 +2652,7 @@ export type Query = {
   gatewayStatusChangesConnection: GatewayStatusChangesConnection;
   gateways: Array<Gateway>;
   gatewaysConnection: GatewaysConnection;
+  networkStats: NetworkStats;
   settings: Array<Settings>;
   settingsById?: Maybe<Settings>;
   /** @deprecated Use settingsById */
@@ -4684,7 +4706,7 @@ export enum WorkerStatus {
   Deregistered = 'DEREGISTERED',
   Deregistering = 'DEREGISTERING',
   Registering = 'REGISTERING',
-  Unknow = 'UNKNOW',
+  Unknown = 'UNKNOWN',
   Withdrawn = 'WITHDRAWN',
 }
 
@@ -5929,6 +5951,39 @@ export type VestingByAddressQuery = {
   };
 };
 
+export type NetworkSummaryQueryVariables = Exact<{ [key: string]: never }>;
+
+export type NetworkSummaryQuery = {
+  __typename?: 'Query';
+  networkStats: {
+    __typename?: 'NetworkStats';
+    onlineWorkersCount: number;
+    queries90Days: string;
+    queries24Hours: string;
+    servedData90Days: string;
+    servedData24Hours: string;
+    stakerApr: number;
+    totalBond: string;
+    totalDelegation: string;
+    storedData: string;
+    workerApr: number;
+    workersCount: number;
+  };
+};
+
+export type CurrentEpochQueryVariables = Exact<{ [key: string]: never }>;
+
+export type CurrentEpochQuery = {
+  __typename?: 'Query';
+  networkStats: {
+    __typename?: 'NetworkStats';
+    blockTimeL1: number;
+    lastBlockL1: number;
+    lastBlockTimestampL1: string;
+  };
+  epoches: Array<{ __typename?: 'Epoch'; number: number; start: number; end: number }>;
+};
+
 export const WorkerBaseFragmentFragmentDoc = `
     fragment WorkerBaseFragment on Worker {
   id
@@ -6633,3 +6688,74 @@ export const useVestingByAddressQuery = <TData = VestingByAddressQuery, TError =
     ...options,
   });
 };
+
+export const NetworkSummaryDocument = `
+    query networkSummary {
+  networkStats {
+    onlineWorkersCount
+    queries90Days
+    queries24Hours
+    servedData90Days
+    servedData24Hours
+    stakerApr
+    totalBond
+    totalDelegation
+    storedData
+    workerApr
+    workersCount
+  }
+}
+    `;
+
+export const useNetworkSummaryQuery = <TData = NetworkSummaryQuery, TError = unknown>(
+  dataSource: { endpoint: string; fetchParams?: RequestInit },
+  variables?: NetworkSummaryQueryVariables,
+  options?: Omit<UseQueryOptions<NetworkSummaryQuery, TError, TData>, 'queryKey'> & {
+    queryKey?: UseQueryOptions<NetworkSummaryQuery, TError, TData>['queryKey'];
+  },
+) => {
+  return useQuery<NetworkSummaryQuery, TError, TData>({
+    queryKey: variables === undefined ? ['networkSummary'] : ['networkSummary', variables],
+    queryFn: fetcher<NetworkSummaryQuery, NetworkSummaryQueryVariables>(
+      dataSource.endpoint,
+      dataSource.fetchParams || {},
+      NetworkSummaryDocument,
+      variables,
+    ),
+    ...options,
+  });
+};
+
+export const CurrentEpochDocument = `
+    query currentEpoch {
+  networkStats {
+    blockTimeL1
+    lastBlockL1
+    lastBlockTimestampL1
+  }
+  epoches(limit: 1, orderBy: id_DESC) {
+    number
+    start
+    end
+  }
+}
+    `;
+
+export const useCurrentEpochQuery = <TData = CurrentEpochQuery, TError = unknown>(
+  dataSource: { endpoint: string; fetchParams?: RequestInit },
+  variables?: CurrentEpochQueryVariables,
+  options?: Omit<UseQueryOptions<CurrentEpochQuery, TError, TData>, 'queryKey'> & {
+    queryKey?: UseQueryOptions<CurrentEpochQuery, TError, TData>['queryKey'];
+  },
+) => {
+  return useQuery<CurrentEpochQuery, TError, TData>({
+    queryKey: variables === undefined ? ['currentEpoch'] : ['currentEpoch', variables],
+    queryFn: fetcher<CurrentEpochQuery, CurrentEpochQueryVariables>(
+      dataSource.endpoint,
+      dataSource.fetchParams || {},
+      CurrentEpochDocument,
+      variables,
+    ),
+    ...options,
+  });
+};
diff --git a/src/api/subsquid-network-squid/settings-graphql.ts b/src/api/subsquid-network-squid/settings-graphql.ts
@@ -1,7 +1,7 @@
 import { toSqd } from '@lib/network';
 
 import { useSquidDataSource } from './datasource';
-import { useSettingsQuery } from './graphql';
+import { useCurrentEpochQuery, useNetworkSummaryQuery, useSettingsQuery } from './graphql';
 
 export function useNetworkSettings() {
   const dataSource = useSquidDataSource();
@@ -19,3 +19,43 @@ export function useNetworkSettings() {
     isPending,
   };
 }
+
+export function useNetworkSummary() {
+  const dataSource = useSquidDataSource();
+  const { data: networkStats, isLoading: isNetworkStatsLoading } = useNetworkSummaryQuery(
+    dataSource,
+    {},
+    {
+      select: res => {
+        return {
+          ...res.networkStats,
+        };
+      },
+    },
+  );
+
+  const { data: currentEpoch, isLoading: isCurrentEpochLoading } = useCurrentEpochQuery(
+    dataSource,
+    {},
+    {
+      select: res => {
+        return {
+          ...res.networkStats,
+          epoch: res.epoches[0],
+        };
+      },
+      refetchInterval: 6000, // a half of block time in l1
+    },
+  );
+
+  return {
+    data:
+      networkStats && currentEpoch
+        ? {
+            ...networkStats,
+            ...currentEpoch,
+          }
+        : undefined,
+    isLoading: isNetworkStatsLoading || isCurrentEpochLoading,
+  };
+}
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
@@ -5,9 +5,8 @@ import { Box, styled } from '@mui/material';
 
 import { TextField } from '@components/Form';
 
-export const Field = styled(TextField)(() => ({
+export const Field = styled(TextField)(({ theme }) => ({
   // background: theme.palette.background.default,
-  borderWidth: 0,
   [`& .MuiInputBase-root`]: {
     paddingLeft: 10,
   },
@@ -20,6 +19,8 @@ export const Field = styled(TextField)(() => ({
     paddingLeft: 5,
     minHeight: 36,
   },
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: 6,
 }));
 
 export const Search = ({
@@ -45,7 +46,7 @@ export const Search = ({
   const handleChange = useCallback((value: string) => onChange?.(value), [onChange]);
 
   return (
-    <Box sx={{ flex: fullWidth ? '1' : '0 0 200px', position: 'relative' }}>
+    <Box sx={{ flex: fullWidth ? 1 : '0 0 250px', position: 'relative' }}>
       <Field
         placeholder={placeholder}
         variant="filled"

diff --git a/src/components/Table/BorderedTable.tsx b/src/components/Table/BorderedTable.tsx
@@ -19,6 +19,7 @@ export const BorderedTable = styled(Table)(({ theme }) => ({
     background: theme.palette.background.paper,
     borderBottom: `1px solid ${theme.palette.background.content}`,
     padding: theme.spacing(2.5, 1.5),
+    fontVariantNumeric: 'tabular-nums',
   },
 
   '& td:first-of-type, & th:first-of-type': {

diff --git a/src/pages/AssetsPage/Assets.tsx b/src/pages/AssetsPage/Assets.tsx
@@ -90,7 +90,7 @@ function TotalBalance({
         <Box sx={{ textAlign: 'center', width: '100%' }}>
           <Box sx={{ color: 'text.secondary', fontSize: '0.85rem' }}>Total</Box>
           <Box sx={{ fontWeight: 500, fontSize: '1.25rem' }}>
-            {tokenFormatter(total, SQD_TOKEN, 4)}
+            {tokenFormatter(total, SQD_TOKEN, 3)}
           </Box>
         </Box>
       </Box>
@@ -168,7 +168,7 @@ export function MyAssets() {
                         value={d.name}
                       />
                       <HelpTooltip help={d.help}>
-                        <TokenBalanceValue value={d.balance} decimals={8} />
+                        <TokenBalanceValue value={d.balance} decimals={6} />
                       </HelpTooltip>
                     </TokenBalanceItem>
 

diff --git a/src/pages/DashboardPage/DashboardPage.tsx b/src/pages/DashboardPage/DashboardPage.tsx
@@ -1,14 +1,15 @@
-import React from 'react';
-
 import { Outlet } from 'react-router-dom';
 
-import { CenteredPageWrapper } from '@layouts/NetworkLayout';
+import { CenteredPageWrapper, NetworkPageTitle } from '@layouts/NetworkLayout';
 
+import { NetworkSummary } from './Summary';
 import { Workers } from './Workers';
 
 export function DashboardPage() {
   return (
     <CenteredPageWrapper className="wide">
+      <NetworkPageTitle title="Dashboard" />
+      <NetworkSummary />
       <Workers />
       <Outlet />
     </CenteredPageWrapper>