feat(explorer): add epoch to block explorer homepage (#3536)

apps/explorer-e2e/src/integration/home.cy.js

@@ -9,21 +9,22 @@ context('Home Page', function () {
     it('should show connected environment stats', function () {
       const statTitles = {
         0: 'Status',
-        1: 'Block height',
+        1: 'Epoch',
-        2: 'Uptime',
+        2: 'Block height',
-        3: 'Total nodes',
+        3: 'Uptime',
-        4: 'Total staked',
+        4: 'Total nodes',
-        5: 'Backlog',
+        5: 'Total staked',
-        6: 'Trades / second',
+        6: 'Backlog',
-        7: 'Orders / block',
+        7: 'Trades / second',
-        8: 'Orders / second',
+        8: 'Orders / block',
-        9: 'Transactions / block',
+        9: 'Orders / second',
-        10: 'Block time',
+        10: 'Transactions / block',
-        11: 'Time',
+        11: 'Block time',
-        12: 'App',
+        12: 'Time',
-        13: 'Tendermint',
+        13: 'App',
-        14: 'Up since',
+        14: 'Tendermint',
-        15: 'Chain ID',
+        15: 'Up since',
+        16: 'Chain ID',
       };
 
       cy.get('[data-testid="stats-title"]')
@@ -31,42 +32,13 @@ context('Home Page', function () {
           cy.wrap($list).should('contain.text', statTitles[index]);
         })
         .then(($list) => {
-          cy.wrap($list).should('have.length', 16);
+          cy.wrap($list).should('have.length', 17);
         });
-
-      cy.get(statsValue).eq(0).should('contain.text', 'CONNECTED');
-      cy.get(statsValue).eq(1).should('not.be.empty');
-      cy.get(statsValue)
-        .eq(2)
-        .invoke('text')
-        .should('match', /\d+d \d+h \d+m \d+s/i);
-      cy.get(statsValue).eq(3).should('contain.text', '2');
-      cy.get(statsValue)
-        .eq(4)
-        .invoke('text')
-        .should('match', /\d+\.\d\d(?!\d)/i);
-      cy.get(statsValue).eq(5).should('contain.text', '0');
-      cy.get(statsValue).eq(6).should('contain.text', '0');
-      cy.get(statsValue).eq(7).should('contain.text', '0');
-      cy.get(statsValue).eq(8).should('contain.text', '0');
-      cy.get(statsValue).eq(9).should('not.be.empty');
-      cy.get(statsValue).eq(10).should('not.be.empty');
-      cy.get(statsValue).eq(11).should('not.be.empty');
-      cy.get(statsValue)
-        .eq(12)
-        .invoke('text')
-        .should('match', /v\d+\.\d+\.\d+/i);
-      cy.get(statsValue)
-        .eq(13)
-        .invoke('text')
-        .should('match', /\d+\.\d+\.\d+/i);
-      cy.get(statsValue).eq(14).should('not.be.empty');
-      cy.get(statsValue).eq(15).should('not.be.empty');
     });
 
     it('Block height should be updating', function () {
       cy.get(statsValue)
-        .eq(1)
+        .eq(2)
         .invoke('text')
         .then((blockHeightTxt) => {
           cy.get(statsValue)

libs/network-stats/src/components/stats-manager/Stats.graphql

@@ -1,4 +1,7 @@
 query Stats {
+  epoch {
+    id
+  }
   nodeData {
     stakedTotal
     totalNodes

libs/network-stats/src/components/stats-manager/__generated__/Stats.ts

@@ -6,11 +6,14 @@ const defaultOptions = {} as const;
 export type StatsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type StatsQuery = { __typename?: 'Query', nodeData?: { __typename?: 'NodeData', stakedTotal: string, totalNodes: number, inactiveNodes: number } | null, statistics: { __typename?: 'Statistics', status: string, blockHeight: string, blockDuration: string, backlogLength: string, txPerBlock: string, tradesPerSecond: string, ordersPerSecond: string, averageOrdersPerBlock: string, vegaTime: any, appVersion: string, chainVersion: string, chainId: string, genesisTime: any } };
+export type StatsQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string }, nodeData?: { __typename?: 'NodeData', stakedTotal: string, totalNodes: number, inactiveNodes: number } | null, statistics: { __typename?: 'Statistics', status: string, blockHeight: string, blockDuration: string, backlogLength: string, txPerBlock: string, tradesPerSecond: string, ordersPerSecond: string, averageOrdersPerBlock: string, vegaTime: any, appVersion: string, chainVersion: string, chainId: string, genesisTime: any } };
 
 
 export const StatsDocument = gql`
     query Stats {
+  epoch {
+    id
+  }
   nodeData {
     stakedTotal
     totalNodes

libs/network-stats/src/components/stats-manager/stats-manager.tsx

@@ -19,10 +19,14 @@ export const StatsManager = ({ className }: StatsManagerProps) => {
     return () => stopPolling();
   }, [startPolling, stopPolling]);
 
-  const getValue = (field: keyof NodeData | keyof Statistics) =>
+  const getValue = (field: keyof NodeData | keyof Statistics | 'epoch') => {
-    ['stakedTotal', 'totalNodes', 'inactiveNodes'].includes(field)
+    if (['stakedTotal', 'totalNodes', 'inactiveNodes'].includes(field)) {
-      ? data?.nodeData?.[field as keyof NodeData]
+      return data?.nodeData?.[field as keyof NodeData];
-      : data?.statistics?.[field as keyof Statistics];
+    } else if (field === 'epoch') {
+      return data?.epoch.id;
+    }
+    return data?.statistics?.[field as keyof Statistics];
+  };
 
   const panels = fieldsDefinition.map(
     ({ field, title, description, formatter, goodThreshold }) => ({
@@ -50,7 +54,7 @@ export const StatsManager = ({ className }: StatsManagerProps) => {
           className={classNames(
             'border rounded p-2 relative border-vega-light-200 dark:border-vega-dark-200',
             {
-              'col-span-2': field === 'chainId' || field === 'status',
+              'col-span-2': field === 'chainId',
             },
             {
               'bg-transparent border-vega-light-200 dark:border-vega-dark-200':

libs/network-stats/src/config/stats-fields.ts

@@ -20,7 +20,7 @@ export type FieldValue = any;
 export type GoodThreshold = (...args: FieldValue[]) => boolean;
 
 export interface Stats {
-  field: keyof NodeData | keyof Statistics;
+  field: keyof NodeData | keyof Statistics | 'epoch';
   title: string;
   goodThreshold?: GoodThreshold;
   // eslint-disable-next-line
@@ -161,6 +161,11 @@ const VEGA_TIME: Stats = {
   description: t('The time on the blockchain'),
 };
 
+const EPOCH: Stats = {
+  field: 'epoch',
+  title: 'Epoch',
+};
+
 const APP_VERSION: Stats = {
   field: 'appVersion',
   title: t('App'),
@@ -217,6 +222,7 @@ const CHAIN_ID: Stats = {
 
 export const fieldsDefinition: Stats[] = [
   STATUS,
+  EPOCH,
   BLOCK_HEIGHT,
   UPTIME,
   TOTAL_NODES,