Merge pull request #1350 from nymtech/feature/bring-back-node-settings

bing back node settings

nym-wallet/src/components/AppBar.tsx

@@ -5,11 +5,12 @@ import { Logout } from '@mui/icons-material';
 import TerminalIcon from '@mui/icons-material/Terminal';
 import { AppContext } from '../context/main';
 import { NetworkSelector } from './NetworkSelector';
+import { Node as NodeIcon } from '../svg-icons/node';
 import { MultiAccounts } from './Accounts';
 import { config } from '../config';
 
 export const AppBar = () => {
-  const { logOut, handleShowTerminal, appEnv } = useContext(AppContext);
+  const { logOut, handleShowTerminal, appEnv, handleShowSettings, showSettings } = useContext(AppContext);
   const navigate = useNavigate();
   return (
     <MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'transparent' }}>
@@ -31,7 +32,15 @@ export const AppBar = () => {
                 </IconButton>
               </Grid>
             )}
-
+            <Grid item>
+              <IconButton
+                onClick={handleShowSettings}
+                sx={{ color: showSettings ? 'primary.main' : 'nym.background.dark' }}
+                size="small"
+              >
+                <NodeIcon fontSize="small" />
+              </IconButton>
+            </Grid>
             <Grid item>
               <IconButton
                 size="small"

nym-wallet/src/context/main.tsx

@@ -45,6 +45,8 @@ type TAppContext = {
   isAdminAddress: boolean;
   error?: string;
   loginType?: TLoginType;
+  showSettings: boolean;
+  handleShowSettings?: () => void;
   setIsLoading: (isLoading: boolean) => void;
   setError: (value?: string) => void;
   switchNetwork: (network: Network) => void;
@@ -73,6 +75,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const [error, setError] = useState<string>();
   const [appVersion, setAppVersion] = useState<string>();
   const [isAdminAddress, setIsAdminAddress] = useState<boolean>(false);
+  const [showSettings, setShowSettings] = useState(false);
 
   const userBalance = useGetBalance(clientDetails);
   const navigate = useNavigate();
@@ -196,6 +199,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const handleShowAdmin = () => setShowAdmin((show) => !show);
   const handleShowTerminal = () => setShowTerminal((show) => !show);
   const switchNetwork = (_network: Network) => setNetwork(_network);
+  const handleShowSettings = () => setShowSettings((show) => !show);
 
   const memoizedValue = useMemo(
     () => ({
@@ -211,6 +215,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       userBalance,
       showAdmin,
       showTerminal,
+      showSettings,
       network,
       loginType,
       setIsLoading,
@@ -223,6 +228,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       logIn,
       logOut,
       onAccountChange,
+      handleShowSettings,
     }),
     [
       appVersion,
@@ -239,6 +245,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       network,
       storedAccounts,
       showTerminal,
+      showSettings,
     ],
   );
 

nym-wallet/src/pages/settings/index.tsx

@@ -15,13 +15,20 @@ const tabs = ['Profile', 'System variables', 'Node stats'];
 export const Settings = () => {
   const [selectedTab, setSelectedTab] = useState(0);
 
-  const { mixnodeDetails, getBondDetails } = useContext(AppContext);
-  const { status, saturation, rewardEstimation, inclusionProbability } = useSettingsState(false);
+  const { mixnodeDetails, showSettings, getBondDetails, handleShowSettings } = useContext(AppContext);
+  const { status, saturation, rewardEstimation, inclusionProbability, updateAllMixnodeStats } = useSettingsState();
 
   const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab);
 
-  return (
-    <Dialog open maxWidth="md" fullWidth>
+  useEffect(() => {
+    getBondDetails();
+    if (mixnodeDetails) {
+      updateAllMixnodeStats(mixnodeDetails.mix_node.identity_key);
+    }
+  }, [showSettings, selectedTab]);
+
+  return showSettings ? (
+    <Dialog open onClose={handleShowSettings} maxWidth="md" fullWidth>
       <NymCard
         title={
           <Box display="flex" alignItems="center">
@@ -51,5 +58,5 @@ export const Settings = () => {
         </>
       </NymCard>
     </Dialog>
-  );
+  ) : null;
 };

nym-wallet/src/pages/settings/useSettingsState.ts

@@ -1,10 +1,9 @@
-import { useContext, useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useSnackbar } from 'notistack';
 import { InclusionProbabilityResponse, MixnodeStatus } from '@nymproject/types';
-import { AppContext } from '../../context/main';
 import { getInclusionProbability, getMixnodeStakeSaturation, getMixnodeStatus } from '../../requests';
 
-export const useSettingsState = (shouldUpdate: boolean) => {
+export const useSettingsState = () => {
   const [status, setStatus] = useState<MixnodeStatus>('not_found');
   const [saturation, setSaturation] = useState<number>(0);
   const [rewardEstimation, setRewardEstimation] = useState<number>(0);
@@ -13,8 +12,6 @@ export const useSettingsState = (shouldUpdate: boolean) => {
     in_reserve: 'Low',
   });
 
-  const { mixnodeDetails } = useContext(AppContext);
-
   const { enqueueSnackbar } = useSnackbar();
 
   const getStatus = async (mixnodeKey: string) => {
@@ -45,26 +42,22 @@ export const useSettingsState = (shouldUpdate: boolean) => {
     setInclusionProbability({ in_active: 'Low', in_reserve: 'Low' });
   };
 
-  useEffect(() => {
-    if (shouldUpdate && mixnodeDetails?.mix_node.identity_key) {
-      (async () => {
-        try {
-          await getStatus(mixnodeDetails?.mix_node.identity_key);
-          await getStakeSaturation(mixnodeDetails?.mix_node.identity_key);
-          await getMixnodeInclusionProbability(mixnodeDetails?.mix_node.identity_key);
-        } catch (e) {
-          enqueueSnackbar(e as string, { variant: 'error', preventDuplicate: true });
-        }
-      })();
-    } else {
+  const updateAllMixnodeStats = async (mixnodeId: string) => {
+    try {
+      await getStatus(mixnodeId);
+      await getStakeSaturation(mixnodeId);
+      await getMixnodeInclusionProbability(mixnodeId);
+    } catch (e) {
+      enqueueSnackbar(e as string, { variant: 'error', preventDuplicate: true });
       reset();
     }
-  }, [shouldUpdate]);
+  };
 
   return {
     status,
     saturation,
     rewardEstimation,
     inclusionProbability,
+    updateAllMixnodeStats,
   };
 };

nym-wallet/src/routes/app.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { ApplicationLayout } from 'src/layouts';
 import { Terminal } from 'src/pages/terminal';
-import { Bond, Balance, InternalDocs, Receive, Send, Unbond, DelegationPage, Admin } from '../pages';
+import { Bond, Balance, InternalDocs, Receive, Send, Unbond, DelegationPage, Admin, Settings } from '../pages';
 
 export const AppRoutes = () => (
   <ApplicationLayout>
     <Terminal />
+    <Settings />
     <Routes>
       <Route path="/balance" element={<Balance />} />
       <Route path="/send" element={<Send />} />