From 0eb859467ee24a67aef10029063d7845c5b1e124 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 10 Aug 2022 15:09:44 +0200
Subject: [PATCH 1/9] adding a switch between networks

---
 explorer/src/api/constants.ts         |  2 +-
 explorer/src/api/index.ts             |  7 +++++++
 explorer/src/components/Nav.tsx       | 21 +++++++++++++++++++--
 explorer/src/context/main.tsx         | 11 +++++++++--
 explorer/src/typeDefs/explorer-api.ts |  2 ++
 5 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/explorer/src/api/constants.ts b/explorer/src/api/constants.ts
index 109586c0fd..442fd68ad1 100644
--- a/explorer/src/api/constants.ts
+++ b/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
diff --git a/explorer/src/api/index.ts b/explorer/src/api/index.ts
index 5a9b40ef9a..02b4190a01 100644
--- a/explorer/src/api/index.ts
+++ b/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';
+};
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index ab6c2d36c8..9b0d7f4f51 100644
--- a/explorer/src/components/Nav.tsx
+++ b/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
diff --git a/explorer/src/context/main.tsx b/explorer/src/context/main.tsx
index 9255eb20e3..8e5186577b 100644
--- a/explorer/src/context/main.tsx
+++ b/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>;
diff --git a/explorer/src/typeDefs/explorer-api.ts b/explorer/src/typeDefs/explorer-api.ts
index 3463f55d98..3cf3c42b41 100644
--- a/explorer/src/typeDefs/explorer-api.ts
+++ b/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';

From fd90175e87786f31efe24b6f402d0d1209aa22f1 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 10 Aug 2022 15:43:42 +0200
Subject: [PATCH 2/9] adding button on mov nav and make it smaller

---
 explorer/src/components/MobileNav.tsx | 22 ++++++++++++++++++++--
 explorer/src/components/Nav.tsx       |  4 ++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index cab6e50e5b..313a9ae8ba 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/explorer/src/components/MobileNav.tsx
@@ -30,9 +30,16 @@ type MobileNavProps = {
 
 export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }: MobileNavProps) => {
   const theme = useTheme();
-  const { navState, updateNavState } = useMainContext();
+  const { navState, updateNavState, environment } = useMainContext();
   const [drawerOpen, setDrawerOpen] = React.useState(false);
 
+  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 toggleDrawer = () => {
     setDrawerOpen(!drawerOpen);
   };
@@ -81,11 +88,22 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
                 fontSize: '18px',
                 fontWeight: 600,
                 ml: 2,
+                display: 'flex',
+                flexDirection: 'column',
               }}
             >
               <MuiLink component={Link} to="/overview" underline="none" color="inherit">
-                Network Explorer
+                {explorerName}
               </MuiLink>
+              <Button
+                size="small"
+                variant="outlined"
+                color="inherit"
+                href={switchNetworkLink}
+                sx={{ textTransform: 'none', width: 150 }}
+              >
+                {switchNetworkText}
+              </Button>
             </Typography>
           </Box>
 
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index 9b0d7f4f51..4b13edda46 100644
--- a/explorer/src/components/Nav.tsx
+++ b/explorer/src/components/Nav.tsx
@@ -308,11 +308,11 @@ export const Nav: React.FC = ({ children }) => {
                 {explorerName}
               </MuiLink>
               <Button
-                size="large"
+                size="small"
                 variant="outlined"
                 color="inherit"
                 href={switchNetworkLink}
-                sx={{ textTransform: 'none', width: 200, ml: 4 }}
+                sx={{ textTransform: 'none', width: 150, ml: 4 }}
               >
                 {switchNetworkText}
               </Button>

From 76773c58d7fe8fed97fafd23763e3b2ff7aa3cbd Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 10 Aug 2022 16:34:30 +0200
Subject: [PATCH 3/9] some styles

---
 explorer/src/components/MobileNav.tsx | 13 +++++--------
 explorer/src/components/Nav.tsx       |  2 +-
 explorer/src/components/Switch.tsx    |  2 +-
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index 313a9ae8ba..16846c4b42 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/explorer/src/components/MobileNav.tsx
@@ -78,7 +78,7 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
             }}
           >
             <IconButton component="a" href={NYM_WEBSITE} target="_blank">
-              <NymLogo height="40px" width="40px" />
+              <NymLogo height="24px" width="24px" />
             </IconButton>
             <Typography
               variant="h6"
@@ -87,12 +87,9 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
                 color: theme.palette.nym.networkExplorer.nav.text,
                 fontSize: '18px',
                 fontWeight: 600,
-                ml: 2,
-                display: 'flex',
-                flexDirection: 'column',
               }}
             >
-              <MuiLink component={Link} to="/overview" underline="none" color="inherit">
+              <MuiLink component={Link} to="/overview" underline="none" color="inherit" fontSize={14} fontWeight={700}>
                 {explorerName}
               </MuiLink>
               <Button
@@ -100,16 +97,16 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
                 variant="outlined"
                 color="inherit"
                 href={switchNetworkLink}
-                sx={{ textTransform: 'none', width: 150 }}
+                sx={{ textTransform: 'none', width: 114, fontSize: '12px', fontWeight: 600, ml: 1 }}
               >
                 {switchNetworkText}
               </Button>
             </Typography>
           </Box>
 
-          <Box>
+          <Box sx={{ mr: 1 }}>
             <DarkLightSwitchMobile />
-            <Button onClick={toggleDrawer}>
+            <Button onClick={toggleDrawer} sx={{ p: 0, minWidth: 0 }}>
               <Menu sx={{ color: theme.palette.primary.contrastText }} />
             </Button>
           </Box>
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index 4b13edda46..5203e1df62 100644
--- a/explorer/src/components/Nav.tsx
+++ b/explorer/src/components/Nav.tsx
@@ -312,7 +312,7 @@ export const Nav: React.FC = ({ children }) => {
                 variant="outlined"
                 color="inherit"
                 href={switchNetworkLink}
-                sx={{ textTransform: 'none', width: 150, ml: 4 }}
+                sx={{ borderRadius: 2, textTransform: 'none', width: 150, ml: 4, fontSize: 14, fontWeight: 600 }}
               >
                 {switchNetworkText}
               </Button>
diff --git a/explorer/src/components/Switch.tsx b/explorer/src/components/Switch.tsx
index 835100a1db..25e76ccdfa 100644
--- a/explorer/src/components/Switch.tsx
+++ b/explorer/src/components/Switch.tsx
@@ -54,7 +54,7 @@ export const DarkLightSwitch = styled(Switch)(({ theme }) => ({
 export const DarkLightSwitchMobile: React.FC = () => {
   const { toggleMode } = useMainContext();
   return (
-    <Button onClick={() => toggleMode()} data-testid="switch-button">
+    <Button onClick={() => toggleMode()} data-testid="switch-button" sx={{ p: 0, minWidth: 0 }}>
       <LightSwitchSVG />
     </Button>
   );

From a74a99d81d1024e7ad9c0193dae753c58b92c847 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 10 Aug 2022 16:38:56 +0200
Subject: [PATCH 4/9] cleaning

---
 explorer/src/components/UptimeChart.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/explorer/src/components/UptimeChart.tsx b/explorer/src/components/UptimeChart.tsx
index 44490c1196..8d6c934775 100644
--- a/explorer/src/components/UptimeChart.tsx
+++ b/explorer/src/components/UptimeChart.tsx
@@ -23,7 +23,7 @@ export const UptimeChart: React.FC<ChartProps> = ({ title, xLabel, yLabel, uptim
   const color = theme.palette.text.primary;
   React.useEffect(() => {
     if (uptimeStory.data?.history) {
-      const allFormattedChartData: FormattedChartData = [['Date', 'Routing Score']];
+      const allFormattedChartData: FormattedChartData = [['Date', 'Uptime']];
       uptimeStory.data.history.forEach((eachDate) => {
         const formattedDateUptimeRecord: FormattedDateRecord = [
           format(new Date(eachDate.date), 'MMM dd'),
@@ -34,7 +34,7 @@ export const UptimeChart: React.FC<ChartProps> = ({ title, xLabel, yLabel, uptim
       setFormattedChartData(allFormattedChartData);
     } else {
       const emptyData: any = [
-        ['Date', 'Routing Score'],
+        ['Date', 'Uptime'],
         ['Jul 27', 10],
       ];
       setFormattedChartData(emptyData);
@@ -55,7 +55,7 @@ export const UptimeChart: React.FC<ChartProps> = ({ title, xLabel, yLabel, uptim
             uptimeStory.data
               ? formattedChartData
               : [
-                  ['Date', 'Routing Score'],
+                  ['Date', 'Uptime'],
                   [format(new Date(Date.now()), 'MMM dd'), 0],
                 ]
           }

From 06ed8716a1e8e3498a7a7f66190bc22ed35ba3be Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 10 Aug 2022 15:09:44 +0200
Subject: [PATCH 5/9] adding a switch between networks

---
 explorer/src/api/index.ts             |  7 +++++++
 explorer/src/components/Nav.tsx       | 21 +++++++++++++++++++--
 explorer/src/context/main.tsx         | 11 +++++++++--
 explorer/src/typeDefs/explorer-api.ts |  2 ++
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/explorer/src/api/index.ts b/explorer/src/api/index.ts
index 37e68b8096..be0af90cb6 100644
--- a/explorer/src/api/index.ts
+++ b/explorer/src/api/index.ts
@@ -1,4 +1,5 @@
 import {
+  API_BASE_URL,
   BLOCK_API,
   COUNTRY_DATA_API,
   GATEWAYS_API,
@@ -27,6 +28,7 @@ import {
   StatusResponse,
   SummaryOverviewResponse,
   ValidatorsResponse,
+  Environment,
 } from '../typeDefs/explorer-api';
 
 function getFromCache(key: string) {
@@ -143,3 +145,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';
+};
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index e2808871a0..3a3d703446 100644
--- a/explorer/src/components/Nav.tsx
+++ b/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';
@@ -231,13 +232,20 @@ 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);
   // Set maintenance banner to false by default to don't display it
   const [openMaintenance, setOpenMaintenance] = 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);
   };
@@ -302,8 +310,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
diff --git a/explorer/src/context/main.tsx b/explorer/src/context/main.tsx
index 42e89b32ee..7d9287d0bf 100644
--- a/explorer/src/context/main.tsx
+++ b/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');
 
@@ -166,10 +171,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,
@@ -184,7 +191,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>;
diff --git a/explorer/src/typeDefs/explorer-api.ts b/explorer/src/typeDefs/explorer-api.ts
index f8350775c4..0f832b9f59 100644
--- a/explorer/src/typeDefs/explorer-api.ts
+++ b/explorer/src/typeDefs/explorer-api.ts
@@ -224,3 +224,5 @@ export type MixNodeEconomicDynamicsStatsResponse = {
   estimated_delegators_reward: number;
   current_interval_uptime: number;
 };
+
+export type Environment = 'mainnet' | 'sandbox' | 'qa';

From b9fbab60247ad1d150094a821a69cd9dcb8ec451 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 10 Aug 2022 15:43:42 +0200
Subject: [PATCH 6/9] adding button on mov nav and make it smaller

---
 explorer/src/components/MobileNav.tsx | 22 ++++++++++++++++++++--
 explorer/src/components/Nav.tsx       |  4 ++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index cb44210e9d..2a808e3c91 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/explorer/src/components/MobileNav.tsx
@@ -31,11 +31,18 @@ type MobileNavProps = {
 
 export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }: MobileNavProps) => {
   const theme = useTheme();
-  const { navState, updateNavState } = useMainContext();
+  const { navState, updateNavState, environment } = useMainContext();
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   // Set maintenance banner to false by default to don't display it
   const [openMaintenance, setOpenMaintenance] = React.useState(false);
 
+  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 toggleDrawer = () => {
     setDrawerOpen(!drawerOpen);
   };
@@ -86,11 +93,22 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
                 fontSize: '18px',
                 fontWeight: 600,
                 ml: 2,
+                display: 'flex',
+                flexDirection: 'column',
               }}
             >
               <MuiLink component={Link} to="/overview" underline="none" color="inherit">
-                Network Explorer
+                {explorerName}
               </MuiLink>
+              <Button
+                size="small"
+                variant="outlined"
+                color="inherit"
+                href={switchNetworkLink}
+                sx={{ textTransform: 'none', width: 150 }}
+              >
+                {switchNetworkText}
+              </Button>
             </Typography>
           </Box>
 
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index 3a3d703446..d4aa202071 100644
--- a/explorer/src/components/Nav.tsx
+++ b/explorer/src/components/Nav.tsx
@@ -313,11 +313,11 @@ export const Nav: React.FC = ({ children }) => {
                 {explorerName}
               </MuiLink>
               <Button
-                size="large"
+                size="small"
                 variant="outlined"
                 color="inherit"
                 href={switchNetworkLink}
-                sx={{ textTransform: 'none', width: 200, ml: 4 }}
+                sx={{ textTransform: 'none', width: 150, ml: 4 }}
               >
                 {switchNetworkText}
               </Button>

From 75a726ebbec3881464c2360310a2f01ac2098d51 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 10 Aug 2022 16:34:30 +0200
Subject: [PATCH 7/9] some styles

---
 explorer/src/components/MobileNav.tsx | 13 +++++--------
 explorer/src/components/Nav.tsx       |  2 +-
 explorer/src/components/Switch.tsx    |  2 +-
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index 2a808e3c91..e3515dff7f 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/explorer/src/components/MobileNav.tsx
@@ -83,7 +83,7 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
             }}
           >
             <IconButton component="a" href={NYM_WEBSITE} target="_blank">
-              <NymLogo height="40px" width="40px" />
+              <NymLogo height="24px" width="24px" />
             </IconButton>
             <Typography
               variant="h6"
@@ -92,12 +92,9 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
                 color: theme.palette.nym.networkExplorer.nav.text,
                 fontSize: '18px',
                 fontWeight: 600,
-                ml: 2,
-                display: 'flex',
-                flexDirection: 'column',
               }}
             >
-              <MuiLink component={Link} to="/overview" underline="none" color="inherit">
+              <MuiLink component={Link} to="/overview" underline="none" color="inherit" fontSize={14} fontWeight={700}>
                 {explorerName}
               </MuiLink>
               <Button
@@ -105,16 +102,16 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
                 variant="outlined"
                 color="inherit"
                 href={switchNetworkLink}
-                sx={{ textTransform: 'none', width: 150 }}
+                sx={{ textTransform: 'none', width: 114, fontSize: '12px', fontWeight: 600, ml: 1 }}
               >
                 {switchNetworkText}
               </Button>
             </Typography>
           </Box>
 
-          <Box>
+          <Box sx={{ mr: 1 }}>
             <DarkLightSwitchMobile />
-            <Button onClick={toggleDrawer}>
+            <Button onClick={toggleDrawer} sx={{ p: 0, minWidth: 0 }}>
               <Menu sx={{ color: theme.palette.primary.contrastText }} />
             </Button>
           </Box>
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index d4aa202071..93ea445a33 100644
--- a/explorer/src/components/Nav.tsx
+++ b/explorer/src/components/Nav.tsx
@@ -317,7 +317,7 @@ export const Nav: React.FC = ({ children }) => {
                 variant="outlined"
                 color="inherit"
                 href={switchNetworkLink}
-                sx={{ textTransform: 'none', width: 150, ml: 4 }}
+                sx={{ borderRadius: 2, textTransform: 'none', width: 150, ml: 4, fontSize: 14, fontWeight: 600 }}
               >
                 {switchNetworkText}
               </Button>
diff --git a/explorer/src/components/Switch.tsx b/explorer/src/components/Switch.tsx
index 835100a1db..25e76ccdfa 100644
--- a/explorer/src/components/Switch.tsx
+++ b/explorer/src/components/Switch.tsx
@@ -54,7 +54,7 @@ export const DarkLightSwitch = styled(Switch)(({ theme }) => ({
 export const DarkLightSwitchMobile: React.FC = () => {
   const { toggleMode } = useMainContext();
   return (
-    <Button onClick={() => toggleMode()} data-testid="switch-button">
+    <Button onClick={() => toggleMode()} data-testid="switch-button" sx={{ p: 0, minWidth: 0 }}>
       <LightSwitchSVG />
     </Button>
   );

From acd832d8e54c7b15ad5745db4cbabb7f90de86a6 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 10 Aug 2022 16:38:56 +0200
Subject: [PATCH 8/9] cleaning

---
 explorer/src/components/UptimeChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/src/components/UptimeChart.tsx b/explorer/src/components/UptimeChart.tsx
index 51f2c9b62b..c5b4c0a402 100644
--- a/explorer/src/components/UptimeChart.tsx
+++ b/explorer/src/components/UptimeChart.tsx
@@ -55,7 +55,7 @@ export const UptimeChart: React.FC<ChartProps> = ({ title, xLabel, yLabel, uptim
             uptimeStory.data
               ? formattedChartData
               : [
-                  ['Date', 'Routing Score'],
+                  ['Date', 'Uptime'],
                   [format(new Date(Date.now()), 'MMM dd'), 0],
                 ]
           }

From 4120234155a1a738af8d6ccbadb8ff12742d0415 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Thu, 22 Dec 2022 11:09:55 +0100
Subject: [PATCH 9/9] fix build problem

---
 explorer/src/components/MobileNav.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index 26543b9ec3..e3515dff7f 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/explorer/src/components/MobileNav.tsx
@@ -36,13 +36,6 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
   // Set maintenance banner to false by default to don't display it
   const [openMaintenance, setOpenMaintenance] = React.useState(false);
 
-  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 explorerName =
     `${environment && environment.charAt(0).toUpperCase() + environment.slice(1)} Explorer` || 'Mainnet Explorer';