dashboard: use search param for network, fixes #181

Author: evan-gray

dashboard/src/App.tsx

@@ -1,4 +1,5 @@
 import { CssBaseline } from '@mui/material';
+import { HashRouter as Router } from 'react-router-dom';
 import CustomThemeProvider from './components/CustomThemeProvider';
 import Main from './components/Main';
 import { NetworkContextProvider } from './contexts/NetworkContext';
@@ -9,9 +10,11 @@ function App() {
     <SettingsContextProvider>
       <CustomThemeProvider>
         <CssBaseline />
-        <NetworkContextProvider>
-          <Main />
-        </NetworkContextProvider>
+        <Router>
+          <NetworkContextProvider>
+            <Main />
+          </NetworkContextProvider>
+        </Router>
       </CustomThemeProvider>
     </SettingsContextProvider>
   );

dashboard/src/components/Main.tsx

@@ -1,28 +1,34 @@
 import { GitHub } from '@mui/icons-material';
 import { AppBar, Box, Button, Hidden, IconButton, Toolbar, Typography } from '@mui/material';
-import { Route, HashRouter as Router, Switch, NavLink } from 'react-router-dom';
+import { NavLink, Route, Switch } from 'react-router-dom';
 import useChainHeartbeats from '../hooks/useChainHeartbeats';
 import useHeartbeats from '../hooks/useHeartbeats';
 import useLatestRelease from '../hooks/useLatestRelease';
 import WormholeStatsIcon from '../icons/WormholeStatsIcon';
 import Alerts from './Alerts';
 import Home from './Home';
+import Metrics from './Metrics';
 import NetworkSelector from './NetworkSelector';
 import Settings from './Settings';
-import Metrics from './Metrics';
+
+function NavButton(props: any) {
+  // fix for Invalid value for prop `navigate` on <a> tag
+  const { navigate, ...rest } = props;
+  return <Button {...rest} />;
+}
 
 function Main() {
   const heartbeats = useHeartbeats();
   const chainIdsToHeartbeats = useChainHeartbeats(heartbeats);
   const latestRelease = useLatestRelease();
   return (
-    <Router>
+    <>
       <AppBar position="static">
         <Toolbar variant="dense">
           <NavLink
             to="/"
             exact
-            component={Button}
+            component={NavButton}
             color="inherit"
             activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
             style={{ marginLeft: -8, textTransform: 'none', borderRadius: 0, minWidth: 0 }}
@@ -39,7 +45,7 @@ function Main() {
           <NavLink
             to="/metrics"
             exact
-            component={Button}
+            component={NavButton}
             color="inherit"
             activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
             style={{ paddingRight: 8, marginLeft: 8, textTransform: 'none', borderRadius: 0 }}
@@ -79,7 +85,7 @@ function Main() {
           />
         </Route>
       </Switch>
-    </Router>
+    </>
   );
 }
 export default Main;

dashboard/src/contexts/NetworkContext.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, useContext, useEffect, useMemo, useState } from 'react';
-import { useSettingsContext } from './SettingsContext';
+import React, { ReactNode, useCallback, useContext, useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 
 export type Environment = 'mainnet' | 'testnet' | 'devnet';
 export type Network = {
@@ -12,7 +12,7 @@ export type Network = {
 
 type NetworkContextValue = {
   currentNetwork: Network;
-  setCurrentNetwork: React.Dispatch<React.SetStateAction<Network>>;
+  setCurrentNetwork: (network: Network) => void;
 };
 
 // https://book.wormhole.com/reference/rpcnodes.html
@@ -107,23 +107,40 @@ export const networkOptions: Network[] = [
 ];
 
 const defaultNetwork: Network = networkOptions[0];
+const urlParamKey = 'endpoint';
 
 const NetworkContext = React.createContext<NetworkContextValue>({
   currentNetwork: defaultNetwork,
   setCurrentNetwork: () => {},
 });
 
 export const NetworkContextProvider = ({ children }: { children: ReactNode }) => {
-  const {
-    settings: { defaultEndpoint },
-    updateDefaultEndpoint,
-  } = useSettingsContext();
-  const [currentNetwork, setCurrentNetwork] = useState<Network>(
-    networkOptions.find((option) => option.endpoint === defaultEndpoint) || defaultNetwork
+  const { push, replace } = useHistory();
+  const { search } = useLocation();
+  const { urlParams, urlNetwork, currentNetwork } = useMemo(() => {
+    const urlParams = new URLSearchParams(search);
+    const urlNetwork = urlParams.get(urlParamKey);
+    const currentNetwork =
+      networkOptions.find((option) => option.name === urlNetwork) || defaultNetwork;
+    return { urlParams, urlNetwork, currentNetwork };
+  }, [search]);
+  const setCurrentNetwork = useCallback(
+    (network: Network, shouldReplace?: boolean) => {
+      if (urlNetwork !== network.name) {
+        urlParams.set(urlParamKey, network.name);
+        if (shouldReplace) {
+          replace({ search: urlParams.toString() });
+        } else {
+          push({ search: urlParams.toString() });
+        }
+      }
+    },
+    [urlNetwork, urlParams, replace, push]
   );
   useEffect(() => {
-    updateDefaultEndpoint(currentNetwork.endpoint);
-  }, [currentNetwork, updateDefaultEndpoint]);
+    // sync initial / bad param with drop down, this will do nothing when the current network matches
+    setCurrentNetwork(currentNetwork, true);
+  }, [currentNetwork, setCurrentNetwork]);
   const value = useMemo(
     () => ({ currentNetwork, setCurrentNetwork }),
     [currentNetwork, setCurrentNetwork]

dashboard/src/contexts/SettingsContext.tsx

@@ -7,7 +7,6 @@ export type Theme = 'light' | 'dark' | 'auto';
 type Settings = {
   backgroundUrl?: string;
   backgroundOpacity?: number;
-  defaultEndpoint?: string;
   theme: Theme;
   showChainName?: boolean;
   showAllMisses?: boolean;
@@ -18,7 +17,6 @@ type SettingsContextValue = {
   settings: Settings;
   updateBackgroundOpacity(value: number): void;
   updateBackgroundUrl(value: string): void;
-  updateDefaultEndpoint(value: string): void;
   updateTheme(value: Theme): void;
   updateShowChainName(value: boolean): void;
   updateShowAllMisses(value: boolean): void;
@@ -56,7 +54,6 @@ const SettingsContext = React.createContext<SettingsContextValue>({
   settings: initialSettings,
   updateBackgroundOpacity: (value: number) => {},
   updateBackgroundUrl: (value: string) => {},
-  updateDefaultEndpoint: (value: string) => {},
   updateTheme: (value: Theme) => {},
   updateShowChainName: (value: boolean) => {},
   updateShowAllMisses: (value: boolean) => {},
@@ -71,9 +68,6 @@ export const SettingsContextProvider = ({ children }: { children: ReactNode }) =
   const updateBackgroundUrl = useCallback((value: string) => {
     setSettings((settings) => ({ ...settings, backgroundUrl: value }));
   }, []);
-  const updateDefaultEndpoint = useCallback((value: string) => {
-    setSettings((settings) => ({ ...settings, defaultEndpoint: value }));
-  }, []);
   const updateTheme = useCallback((value: Theme) => {
     setSettings((settings) => ({ ...settings, theme: value }));
   }, []);
@@ -95,7 +89,6 @@ export const SettingsContextProvider = ({ children }: { children: ReactNode }) =
       settings,
       updateBackgroundOpacity,
       updateBackgroundUrl,
-      updateDefaultEndpoint,
       updateTheme,
       updateShowChainName,
       updateShowAllMisses,
@@ -105,7 +98,6 @@ export const SettingsContextProvider = ({ children }: { children: ReactNode }) =
       settings,
       updateBackgroundOpacity,
       updateBackgroundUrl,
-      updateDefaultEndpoint,
       updateTheme,
       updateShowChainName,
       updateShowAllMisses,