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 ( - ); 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;