diff --git a/explorer/src/api/index.ts b/explorer/src/api/index.ts
index c83b033283..fa3dae5cb1 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,
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';
+};
diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index ac03cb9c80..58d0120988 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/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 }) => {
}}
>
-
+
{
color: theme.palette.nym.networkExplorer.nav.text,
fontSize: '18px',
fontWeight: 600,
- ml: 2,
}}
>
-
- Network Explorer
+
+ {explorerName}
+
-
+
({
export const DarkLightSwitchMobile: FCWithChildren = () => {
const { toggleMode } = useMainContext();
return (
- toggleMode()} data-testid="switch-button">
+ toggleMode()} data-testid="switch-button" sx={{ p: 0, minWidth: 0 }}>
);
diff --git a/explorer/src/context/main.tsx b/explorer/src/context/main.tsx
index 6c0dc490e1..38335830fa 100644
--- a/explorer/src/context/main.tsx
+++ b/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;
+ environment?: Environment;
serviceProviders?: ApiState;
}
@@ -49,6 +51,9 @@ export const MainContext = React.createContext({
export const useMainContext = (): React.ContextType => React.useContext(MainContext);
export const MainContextProvider: FCWithChildren = ({ children }) => {
+ // network explorer environment
+ const [environment, setEnvironment] = React.useState('mainnet');
+
// light/dark mode
const [mode, setMode] = React.useState('dark');
@@ -190,10 +195,12 @@ export const MainContextProvider: FCWithChildren = ({ children }) => {
fetchCountryData(),
fetchServiceProviders(),
]);
+ setEnvironment(getEnvironment());
}, []);
const state = React.useMemo(
() => ({
+ environment,
block,
countryData,
fetchMixnodes,
@@ -210,6 +217,7 @@ export const MainContextProvider: FCWithChildren = ({ children }) => {
serviceProviders,
}),
[
+ environment,
block,
countryData,
gateways,
diff --git a/explorer/src/typeDefs/explorer-api.ts b/explorer/src/typeDefs/explorer-api.ts
index d81e3a3d8a..e6cc617ddb 100644
--- a/explorer/src/typeDefs/explorer-api.ts
+++ b/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;