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 => (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 }) => { }} > - Network Explorer + {explorerName} + ; + environment?: Environment; } interface StateApi { @@ -47,6 +49,9 @@ export const MainContext = React.createContext({ export const useMainContext = (): React.ContextType => React.useContext(MainContext); export const MainContextProvider: React.FC = ({ children }) => { + // network explorer environment + const [environment, setEnvironment] = React.useState('mainnet'); + // light/dark mode const [mode, setMode] = React.useState('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( () => ({ + 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 {children}; 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';