Proper way to get environment variables, and hoisted obtaining the env vars to the consumer of the stats manager

apps/explorer-e2e/.env

@@ -2,6 +2,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'
 
 NX_EXPLORER_ASSETS = 1
 NX_EXPLORER_GENESIS = 1

apps/explorer-e2e/.env.devent

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://n04.d.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n04.d.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n04.d.vega.xyz/query"
+NX_VEGA_ENV = 'Devnet'
+NX_VEGA_REST = 'https://n04.d.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer-e2e/.env.mainnet

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://mainnet-observer-proxy01.ops.vega.xyz/"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://mainnet-observer-proxy01.ops.vega.xyz/websocket"
 NX_VEGA_URL = "https://api.token.vega.xyz/query"
+NX_VEGA_ENV = 'Mainnet'
+NX_VEGA_REST = 'https://api.token.vega.xyz/'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer-e2e/.env.stagnet1

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://n03.s.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n03.s.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n03.s.vega.xyz/query"
+NX_VEGA_ENV = 'Stagnet 1'
+NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer-e2e/.env.stagnet2

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://n03.stagnet2.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n03.stagnet2.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n03.stagnet2.vega.xyz/query"
+NX_VEGA_ENV = 'Stagnet 2'
+NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer-e2e/.env.testnet

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer/.env.devent

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://n04.d.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n04.d.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n04.d.vega.xyz/query"
+NX_VEGA_ENV = 'Devnet'
+NX_VEGA_REST = 'https://n04.d.vega.xyz/datanode/rest'

apps/explorer/.env.local

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer/.env.mainnet

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://mainnet-observer-proxy01.ops.vega.xyz/"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://mainnet-observer-proxy01.ops.vega.xyz/websocket"
 NX_VEGA_URL = "https://api.token.vega.xyz/query"
+NX_VEGA_ENV = 'Mainnet'
+NX_VEGA_REST = 'https://api.token.vega.xyz/'

apps/explorer/.env.stagnet1

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://n03.s.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n03.s.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n03.s.vega.xyz/query"
+NX_VEGA_ENV = 'Stagnet 1'
+NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'

apps/explorer/.env.stagnet2

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://n03.stagnet2.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n03.stagnet2.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n03.stagnet2.vega.xyz/query"
+NX_VEGA_ENV = 'Stagnet 2'
+NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'

apps/explorer/.env.testnet

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'

apps/explorer/src/app/config/index.tsx

@@ -3,4 +3,6 @@ export const DATA_SOURCES = {
   tendermintUrl: process.env['NX_TENDERMINT_URL'] as string,
   tendermintWebsocketUrl: process.env['NX_TENDERMINT_WEBSOCKET_URL'] as string,
   dataNodeUrl: process.env['NX_VEGA_URL'] as string,
+  envName: process.env['NX_VEGA_ENV'] as string,
+  restEndpoint: process.env['NX_VEGA_REST'] as string,
 };

apps/explorer/src/app/routes/home/index.tsx

@@ -1,9 +1,20 @@
+import { DATA_SOURCES } from '../../config';
 import { StatsManager } from '@vegaprotocol/network-stats';
 
+const envName = DATA_SOURCES.envName;
+const restEndpoint = DATA_SOURCES.restEndpoint;
+const statsEndpoint = `${restEndpoint}/statistics`;
+const nodesEndpoint = `${restEndpoint}/nodes-data`;
+
 const Home = () => {
   return (
     <section>
-      <StatsManager className="mt-12 grid grid-cols-1 lg:grid-cols-2 lg:gap-16" />
+      <StatsManager
+        envName={envName}
+        statsEndpoint={statsEndpoint}
+        nodesEndpoint={nodesEndpoint}
+        className="mt-12 grid grid-cols-1 lg:grid-cols-2 lg:gap-16"
+      />
     </section>
   );
 };

apps/stats-e2e/.env

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'

apps/stats-e2e/.env.devnet

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Devnet'
+NX_VEGA_REST = 'https://n04.d.vega.xyz/datanode/rest'

apps/stats-e2e/.env.mainnet

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Mainnet'
+NX_VEGA_REST = 'https://api.token.vega.xyz/'

apps/stats-e2e/.env.stagnet1

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Stagnet 1'
+NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'

apps/stats-e2e/.env.stagnet2

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Stagnet 2'
+NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'

apps/stats-e2e/.env.testnet

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'

apps/stats-e2e/src/integration/app.spec.ts

@@ -1,37 +1,9 @@
+const textToCheck = process.env['NX_VEGA_ENV'];
+
 describe('stats', () => {
   beforeEach(() => cy.visit('/'));
 
-  let textToCheck = '';
+  it('should display header based on environment name', () => {
-
-  const dataNodeUrl = process.env['NX_VEGA_URL'];
-
-  if (dataNodeUrl) {
-    if (dataNodeUrl.includes('api')) {
-      textToCheck = 'Mainnet';
-    }
-
-    if (dataNodeUrl.includes('testnet')) {
-      textToCheck = 'Testnet';
-    }
-
-    if (dataNodeUrl.includes('n04.d')) {
-      textToCheck = 'Devnet';
-    }
-
-    if (dataNodeUrl.includes('n03.s.vega')) {
-      textToCheck = 'Stagnet 1';
-    }
-
-    if (dataNodeUrl.includes('stagnet2')) {
-      textToCheck = 'Stagnet 2';
-    }
-  } else {
-    // Network-stats falls back to showing Mainnet stats if no
-    // environment variables have been set
-    textToCheck = 'Mainnet';
-  }
-
-  it('should display header based on environment', () => {
     cy.get('h3').should('have.text', `/ ${textToCheck}`);
   });
 });

apps/stats/.env.devnet

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Devnet'
+NX_VEGA_REST = 'https://n04.d.vega.xyz/datanode/rest'

apps/stats/.env.mainnet

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Mainnet'
+NX_VEGA_REST = 'https://api.token.vega.xyz/'

apps/stats/.env.stagnet1

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Stagnet 1'
+NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'

apps/stats/.env.stagnet2

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Stagnet 2'
+NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'

apps/stats/.env.testnet

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'

apps/stats/src/app.tsx

@@ -1,7 +1,13 @@
 import React, { useState } from 'react';
+import { DATA_SOURCES } from './config';
 import { Header } from './components/header';
 import { StatsManager } from '@vegaprotocol/network-stats';
 
+const envName = DATA_SOURCES.envName;
+const restEndpoint = DATA_SOURCES.restEndpoint;
+const statsEndpoint = `${restEndpoint}/statistics`;
+const nodesEndpoint = `${restEndpoint}/nodes-data`;
+
 function App() {
   const [darkMode, setDarkMode] = useState<boolean>(
     document.documentElement.classList.contains('dark-mode-preferred')
@@ -15,7 +21,12 @@ function App() {
     >
       <div className="layout-grid w-screen justify-self-center">
         <Header darkMode={darkMode} setDarkMode={setDarkMode} />
-        <StatsManager className="max-w-3xl px-24" />
+        <StatsManager
+          envName={envName}
+          statsEndpoint={statsEndpoint}
+          nodesEndpoint={nodesEndpoint}
+          className="max-w-3xl px-24"
+        />
       </div>
     </div>
   );

apps/stats/src/config/index.tsx

@@ -0,0 +1,4 @@
+export const DATA_SOURCES = {
+  envName: process.env['NX_VEGA_ENV'] as string,
+  restEndpoint: process.env['NX_VEGA_REST'] as string,
+};

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

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import classnames from 'classnames';
 import { statsFields } from '../../config/stats-fields';
 import {
@@ -10,85 +10,28 @@ import { TableRow } from '../table-row';
 import { PromotedStats } from '../promoted-stats';
 import { PromotedStatsItem } from '../promoted-stats-item';
 
-interface statsManagerProps {
+interface StatsManagerProps {
+  envName: string;
+  statsEndpoint: string;
+  nodesEndpoint: string;
   className?: string;
 }
 
-interface dataSourceProps {
+export const StatsManager = ({
-  title: string;
+  envName,
-  stats: string;
+  statsEndpoint,
-  nodes: string;
+  nodesEndpoint,
-}
+  className,
-
+}: StatsManagerProps) => {
-const dataSources = {
-  mainnet: {
-    title: 'Mainnet',
-    stats: 'https://api.token.vega.xyz/statistics',
-    nodes: 'https://api.token.vega.xyz/nodes-data',
-  },
-  testnet: {
-    title: 'Testnet',
-    stats: 'https://lb.testnet.vega.xyz/statistics',
-    nodes: 'https://lb.testnet.vega.xyz/datanode/rest/nodes-data',
-  },
-  devnet: {
-    title: 'Devnet',
-    stats: 'https://n04.d.vega.xyz/datanode/rest/statistics',
-    nodes: 'https://n04.d.vega.xyz/datanode/rest/nodes-data',
-  },
-  stagnet1: {
-    title: 'Stagnet 1',
-    stats: 'https://n03.s.vega.xyz/datanode/rest/statistics',
-    nodes: 'https://n03.s.vega.xyz/datanode/rest/nodes-data',
-  },
-  stagnet2: {
-    title: 'Stagnet 2',
-    stats: 'https://n01.stagnet2.vega.xyz/datanode/rest/statistics',
-    nodes: 'https://n01.stagnet2.vega.xyz/datanode/rest/nodes-data',
-  },
-};
-
-const getDataSource = () => {
-  const dataNodeUrl = process.env['NX_VEGA_URL'];
-
-  if (dataNodeUrl) {
-    if (dataNodeUrl.includes('api')) {
-      return dataSources.mainnet;
-    }
-
-    if (dataNodeUrl.includes('testnet')) {
-      return dataSources.testnet;
-    }
-
-    if (dataNodeUrl.includes('n04.d')) {
-      return dataSources.devnet;
-    }
-
-    if (dataNodeUrl.includes('n03.s.vega')) {
-      return dataSources.stagnet1;
-    }
-
-    if (dataNodeUrl.includes('stagnet2')) {
-      return dataSources.stagnet2;
-    }
-  }
-
-  return dataSources.mainnet;
-};
-
-export const StatsManager = ({ className }: statsManagerProps) => {
-  const dataSource = useRef<dataSourceProps>(getDataSource());
   const [data, setData] = useState<IStructuredStats | null>(null);
   const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
-    getDataSource();
-
     async function getStats() {
       try {
         const [res1, res2] = await Promise.all([
-          fetch(dataSource.current.stats),
+          fetch(statsEndpoint),
-          fetch(dataSource.current.nodes),
+          fetch(nodesEndpoint),
         ]);
         const [{ statistics }, { nodeData }] = await Promise.all([
           res1.json(),
@@ -134,7 +77,7 @@ export const StatsManager = ({ className }: statsManagerProps) => {
     return () => {
       clearInterval(interval);
     };
-  }, []);
+  }, [nodesEndpoint, statsEndpoint]);
 
   const classes = classnames(
     className,
@@ -144,8 +87,7 @@ export const StatsManager = ({ className }: statsManagerProps) => {
   return (
     <div className={classes}>
       <h3 className="font-alpha uppercase text-h3 pb-16 col-span-full">
-        {(error && `/ ${error}`) ||
+        {(error && `/ ${error}`) || (data ? `/ ${envName}` : '/ Connecting...')}
-          (data ? `/ ${dataSource.current.title}` : '/ Connecting...')}
       </h3>
 
       {data?.promoted ? (