diff --git a/nym-wallet/src/components/AppBar.tsx b/nym-wallet/src/components/AppBar.tsx index 47d9127c26..b747950ef9 100644 --- a/nym-wallet/src/components/AppBar.tsx +++ b/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 ( @@ -31,7 +32,15 @@ export const AppBar = () => { )} - + + + + + 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(); const [appVersion, setAppVersion] = useState(); const [isAdminAddress, setIsAdminAddress] = useState(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, ], ); diff --git a/nym-wallet/src/pages/settings/index.tsx b/nym-wallet/src/pages/settings/index.tsx index 59db6d1967..7e5e592138 100644 --- a/nym-wallet/src/pages/settings/index.tsx +++ b/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 ( - + useEffect(() => { + getBondDetails(); + if (mixnodeDetails) { + updateAllMixnodeStats(mixnodeDetails.mix_node.identity_key); + } + }, [showSettings, selectedTab]); + + return showSettings ? ( + @@ -51,5 +58,5 @@ export const Settings = () => { - ); + ) : null; }; diff --git a/nym-wallet/src/pages/settings/useSettingsState.ts b/nym-wallet/src/pages/settings/useSettingsState.ts index b7d5d2b867..6f7e7e2e9a 100644 --- a/nym-wallet/src/pages/settings/useSettingsState.ts +++ b/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('not_found'); const [saturation, setSaturation] = useState(0); const [rewardEstimation, setRewardEstimation] = useState(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, }; }; diff --git a/nym-wallet/src/routes/app.tsx b/nym-wallet/src/routes/app.tsx index d6059fe244..b1a8ae7750 100644 --- a/nym-wallet/src/routes/app.tsx +++ b/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 = () => ( + } /> } />