From 8a1d2af3cfa8b4b3925afc22441df7867be18d5b Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 22 Dec 2022 14:44:58 +0100 Subject: [PATCH 1/2] adding changes --- explorer/src/api/index.ts | 7 +++++++ explorer/src/components/MobileNav.tsx | 29 ++++++++++++++++++++------- explorer/src/components/Nav.tsx | 21 +++++++++++++++++-- explorer/src/components/Switch.tsx | 2 +- explorer/src/context/main.tsx | 11 ++++++++-- explorer/src/typeDefs/explorer-api.ts | 2 ++ 6 files changed, 60 insertions(+), 12 deletions(-) diff --git a/explorer/src/api/index.ts b/explorer/src/api/index.ts index 37e68b8096..f5ee0216df 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 => (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'; +}; \ No newline at end of file diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx index cb44210e9d..e3515dff7f 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); }; @@ -76,7 +83,7 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }: }} > - + = ({ children }: color: theme.palette.nym.networkExplorer.nav.text, fontSize: '18px', fontWeight: 600, - ml: 2, }} > - - Network Explorer + + {explorerName} + - + - diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx index e2808871a0..93ea445a33 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 }) => { }} > - Network Explorer + {explorerName} + ({ export const DarkLightSwitchMobile: React.FC = () => { const { toggleMode } = useMainContext(); return ( - ); 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; + 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'); @@ -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( () => ({ + 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 {children}; 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 4f59678ded67b6123c41582cf683f7107dbc4e35 Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 22 Dec 2022 15:31:35 +0100 Subject: [PATCH 2/2] center layout --- explorer/src/components/MobileNav.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx index e3515dff7f..1e37800894 100644 --- a/explorer/src/components/MobileNav.tsx +++ b/explorer/src/components/MobileNav.tsx @@ -70,6 +70,7 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }: sx={{ display: 'flex', justifyContent: 'space-between', + alignItems: 'center', width: '100%', }} > @@ -111,7 +112,7 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }: -