adding a switch between networks

explorer/src/api/constants.ts

@@ -1,7 +1,7 @@
 // master APIs
 export const API_BASE_URL = process.env.EXPLORER_API_URL;
 export const VALIDATOR_API_BASE_URL = process.env.VALIDATOR_API_URL;
-export const VALIDATOR_URL = process.env.VALIDATOR_URL;
+export const { VALIDATOR_URL } = process.env;
 export const BIG_DIPPER = process.env.BIG_DIPPER_URL;
 
 // specific API routes

explorer/src/api/index.ts

@@ -1,4 +1,5 @@
 import {
+  API_BASE_URL,
   BLOCK_API,
   COUNTRY_DATA_API,
   GATEWAYS_API,
@@ -25,6 +26,7 @@ import {
   SummaryOverviewResponse,
   UptimeStoryResponse,
   ValidatorsResponse,
+  Environment,
 } from '../typeDefs/explorer-api';
 
 function getFromCache(key: string) {
@@ -135,3 +137,8 @@ export class Api {
   static fetchUptimeStoryById = async (id: string): Promise<UptimeStoryResponse> =>
     (await fetch(`${UPTIME_STORY_API}/${id}/history`)).json();
 }
+
+export const getEnvironment = (): Environment => {
+  const matchEnv = (env: Environment) => API_BASE_URL?.toLocaleLowerCase().includes(env) && env;
+  return matchEnv('sandbox') || matchEnv('qa') || 'mainnet';
+};

explorer/src/components/Nav.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { ExpandLess, ExpandMore, Menu } from '@mui/icons-material';
 import { CSSObject, styled, Theme, useTheme } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 import MuiLink from '@mui/material/Link';
 import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
@@ -229,11 +230,18 @@ ExpandableButton.defaultProps = {
 };
 
 export const Nav: React.FC = ({ children }) => {
-  const { updateNavState, navState } = useMainContext();
+  const { updateNavState, navState, environment } = useMainContext();
   const [drawerIsOpen, setDrawerToOpen] = React.useState(false);
   const [fixedOpen, setFixedOpen] = React.useState(false);
   const theme = useTheme();
 
+  const explorerName =
+    `${environment && environment.charAt(0).toUpperCase() + environment.slice(1)} Explorer` || 'Mainnet Explorer';
+
+  const switchNetworkText = environment === 'mainnet' ? 'Switch to Testnet' : 'Switch to Mainnet';
+  const switchNetworkLink =
+    environment === 'mainnet' ? 'https://sandbox-explorer.nymtech.net' : 'https://explorer.nymtech.net';
+
   const setToActive = (id: number) => {
     updateNavState(id);
   };
@@ -297,8 +305,17 @@ export const Nav: React.FC = ({ children }) => {
               }}
             >
               <MuiLink component={Link} to="/" underline="none" color="inherit">
-                Network Explorer
+                {explorerName}
               </MuiLink>
+              <Button
+                size="large"
+                variant="outlined"
+                color="inherit"
+                href={switchNetworkLink}
+                sx={{ textTransform: 'none', width: 200, ml: 4 }}
+              >
+                {switchNetworkText}
+              </Button>
             </Typography>
           </Box>
           <Box

explorer/src/context/main.tsx

@@ -9,9 +9,10 @@ import {
   MixnodeStatus,
   SummaryOverviewResponse,
   ValidatorsResponse,
+  Environment,
 } from '../typeDefs/explorer-api';
 import { EnumFilterKey } from '../typeDefs/filters';
-import { Api } from '../api';
+import { Api, getEnvironment } from '../api';
 import { NavOptionType, originalNavOptions } from './nav';
 
 interface StateData {
@@ -24,6 +25,7 @@ interface StateData {
   mode: PaletteMode;
   navState: NavOptionType[];
   validators?: ApiState<ValidatorsResponse>;
+  environment?: Environment;
 }
 
 interface StateApi {
@@ -47,6 +49,9 @@ export const MainContext = React.createContext<State>({
 export const useMainContext = (): React.ContextType<typeof MainContext> => React.useContext<State>(MainContext);
 
 export const MainContextProvider: React.FC = ({ children }) => {
+  // network explorer environment
+  const [environment, setEnvironment] = React.useState<Environment>('mainnet');
+
   // light/dark mode
   const [mode, setMode] = React.useState<PaletteMode>('dark');
 
@@ -163,10 +168,12 @@ export const MainContextProvider: React.FC = ({ children }) => {
 
   React.useEffect(() => {
     Promise.all([fetchOverviewSummary(), fetchGateways(), fetchValidators(), fetchBlock(), fetchCountryData()]);
+    setEnvironment(getEnvironment());
   }, []);
 
   const state = React.useMemo<State>(
     () => ({
+      environment,
       block,
       countryData,
       fetchMixnodes,
@@ -181,7 +188,7 @@ export const MainContextProvider: React.FC = ({ children }) => {
       updateNavState,
       validators,
     }),
-    [block, countryData, gateways, globalError, mixnodes, mode, navState, summaryOverview, validators],
+    [environment, block, countryData, gateways, globalError, mixnodes, mode, navState, summaryOverview, validators],
   );
 
   return <MainContext.Provider value={state}>{children}</MainContext.Provider>;

explorer/src/typeDefs/explorer-api.ts

@@ -222,3 +222,5 @@ export type MixNodeEconomicDynamicsStatsResponse = {
   estimated_delegators_reward: number;
   current_interval_uptime: number;
 };
+
+export type Environment = 'mainnet' | 'sandbox' | 'qa';