Merge pull request #2747 from nymtech/339-net-switch-bttn

339 net switch bttn

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,
   GatewayBondAnnotated,
   GatewayBond,
   DirectoryService,
@@ -157,3 +159,8 @@ export class Api {
     return 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/MobileNav.tsx

@@ -27,11 +27,18 @@ import { DarkLightSwitchMobile } from './Switch';
 
 export const MobileNav: FCWithChildren = ({ children }) => {
   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);
   };
@@ -59,6 +66,7 @@ export const MobileNav: FCWithChildren = ({ children }) => {
           sx={{
             display: 'flex',
             justifyContent: 'space-between',
+            alignItems: 'center',
             width: '100%',
           }}
         >
@@ -72,7 +80,7 @@ export const MobileNav: FCWithChildren = ({ children }) => {
             }}
           >
             <IconButton component="a" href={NYM_WEBSITE} target="_blank">
-              <NymLogo height="40px" width="40px" />
+              <NymLogo height="24px" width="24px" />
             </IconButton>
             <Typography
               variant="h6"
@@ -81,16 +89,24 @@ export const MobileNav: FCWithChildren = ({ children }) => {
                 color: theme.palette.nym.networkExplorer.nav.text,
                 fontSize: '18px',
                 fontWeight: 600,
-                ml: 2,
               }}
             >
-              <MuiLink component={Link} to="/overview" underline="none" color="inherit">
-                Network Explorer
+              <MuiLink component={Link} to="/overview" underline="none" color="inherit" fontSize={14} fontWeight={700}>
+                {explorerName}
               </MuiLink>
+              <Button
+                size="small"
+                variant="outlined"
+                color="inherit"
+                href={switchNetworkLink}
+                sx={{ textTransform: 'none', width: 114, fontSize: '12px', fontWeight: 600, ml: 1 }}
+              >
+                {switchNetworkText}
+              </Button>
             </Typography>
           </Box>
 
-          <Box>
+          <Box sx={{ mr: 1 }}>
             <DarkLightSwitchMobile />
             <Button onClick={toggleDrawer}>
               <Menu sx={{ color: theme.palette.primary.contrastText }} />

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: FCWithChildren = ({ 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: FCWithChildren = ({ children }) => {
               }}
             >
               <MuiLink component={Link} to="/" underline="none" color="inherit">
-                Network Explorer
+                {explorerName}
               </MuiLink>
+              <Button
+                size="small"
+                variant="outlined"
+                color="inherit"
+                href={switchNetworkLink}
+                sx={{ borderRadius: 2, textTransform: 'none', width: 150, ml: 4, fontSize: 14, fontWeight: 600 }}
+              >
+                {switchNetworkText}
+              </Button>
             </Typography>
           </Box>
           <Box

explorer/src/components/Switch.tsx

@@ -54,7 +54,7 @@ export const DarkLightSwitch = styled(Switch)(({ theme }) => ({
 export const DarkLightSwitchMobile: FCWithChildren = () => {
   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>
   );

explorer/src/context/main.tsx

@@ -10,9 +10,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 {
@@ -25,6 +26,7 @@ interface StateData {
   mode: PaletteMode;
   navState: NavOptionType[];
   validators?: ApiState<ValidatorsResponse>;
+  environment?: Environment;
   serviceProviders?: ApiState<DirectoryService>;
 }
 
@@ -49,6 +51,9 @@ export const MainContext = React.createContext<State>({
 export const useMainContext = (): React.ContextType<typeof MainContext> => React.useContext<State>(MainContext);
 
 export const MainContextProvider: FCWithChildren = ({ children }) => {
+  // network explorer environment
+  const [environment, setEnvironment] = React.useState<Environment>('mainnet');
+
   // light/dark mode
   const [mode, setMode] = React.useState<PaletteMode>('dark');
 
@@ -190,10 +195,12 @@ export const MainContextProvider: FCWithChildren = ({ children }) => {
       fetchCountryData(),
       fetchServiceProviders(),
     ]);
+    setEnvironment(getEnvironment());
   }, []);
 
   const state = React.useMemo<State>(
     () => ({
+      environment,
       block,
       countryData,
       fetchMixnodes,
@@ -210,6 +217,7 @@ export const MainContextProvider: FCWithChildren = ({ children }) => {
       serviceProviders,
     }),
     [
+      environment,
       block,
       countryData,
       gateways,

explorer/src/typeDefs/explorer-api.ts

@@ -239,6 +239,8 @@ export type MixNodeEconomicDynamicsStatsResponse = {
   current_interval_uptime: number;
 };
 
+export type Environment = 'mainnet' | 'sandbox' | 'qa';
+
 export type DirectoryServiceProvider = {
   id: string;
   description: string;