wip creating settings modal

nym-wallet/.storybook/mocks/tauri/index.js

@@ -4,7 +4,17 @@
  */
 
 module.exports = {
-  invoke: (operation) => {
+  invoke: (operation, ...args) => {
+    switch(operation) {
+      case 'get_validator_nymd_urls': {
+        const { network } = args;
+        return new Promise(resolve => {
+          resolve({
+            urls: ['foo', 'bar'],
+          });
+        });
+      }
+    }
     console.error(`Tauri cannot be used in Storybook. The operation requested was "${operation}". You can add mock responses to "nym_wallet/.storybook/mocks/tauri.js" if you need. The default response is "void".`);
     return new Promise((resolve, reject) => {
       reject(new Error(`Tauri operation ${operation} not available in storybook.`));

nym-wallet/src/components/AppBar.tsx

@@ -4,9 +4,11 @@ import { Logout } from '@mui/icons-material';
 import { ClientContext } from '../context/main';
 import { NetworkSelector } from './NetworkSelector';
 import { Node as NodeIcon } from '../svg-icons/node';
+import { Delegate as DelegateIcon } from '../svg-icons';
+
 
 export const AppBar = () => {
-  const { showSettings, logOut, handleShowSettings } = useContext(ClientContext);
+  const { showSettings, logOut, handleShowSettings, handleShowValidatorSettings } = useContext(ClientContext);
 
   return (
     <MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'transparent' }}>
@@ -16,6 +18,15 @@ export const AppBar = () => {
             <NetworkSelector />
           </Grid>
           <Grid item container justifyContent="flex-end" md={12} lg={5} spacing={2}>
+            <Grid item>
+              <IconButton
+                onClick={handleShowValidatorSettings}
+                sx={{ color: showSettings ? 'primary.main' : 'nym.background.dark' }}
+                size="small"
+              >
+                <DelegateIcon fontSize="small" />
+              </IconButton>
+            </Grid>
             <Grid item>
               <IconButton
                 onClick={handleShowSettings}

nym-wallet/src/context/main.tsx

@@ -28,6 +28,7 @@ type TClientContext = {
   userBalance: TUseuserBalance;
   showAdmin: boolean;
   showSettings: boolean;
+  showValidatorSettings: boolean;
   network?: Network;
   currency?: TCurrency;
   isLoading: boolean;
@@ -35,6 +36,7 @@ type TClientContext = {
   switchNetwork: (network: Network) => void;
   getBondDetails: () => Promise<void>;
   handleShowSettings: () => void;
+  handleShowValidatorSettings: () => void;
   handleShowAdmin: () => void;
   logIn: (mnemonic: string) => void;
   logOut: () => void;
@@ -49,6 +51,7 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
   const [currency, setCurrency] = useState<TCurrency>();
   const [showAdmin, setShowAdmin] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
+  const [showValidatorSettings, setShowValidatorSettings] = useState(false);
   const [mode] = useState<'light' | 'dark'>('light');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>();
@@ -117,6 +120,7 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
 
   const handleShowAdmin = () => setShowAdmin((show) => !show);
   const handleShowSettings = () => setShowSettings((show) => !show);
+  const handleShowValidatorSettings = () => setShowValidatorSettings((show) => !show);
   const switchNetwork = (_network: Network) => setNetwork(_network);
 
   const memoizedValue = useMemo(
@@ -129,17 +133,21 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
       userBalance,
       showAdmin,
       showSettings,
+      showValidatorSettings,
       network,
       currency,
       switchNetwork,
       getBondDetails,
       handleShowSettings,
+      handleShowValidatorSettings,
       handleShowAdmin,
       logIn,
       logOut,
     }),
-    [mode, isLoading, error, clientDetails, mixnodeDetails, userBalance, showAdmin, showSettings, network, currency],
+    [mode, isLoading, error, clientDetails, mixnodeDetails, userBalance, showAdmin, showSettings, showValidatorSettings, network, currency],
   );
 
+  console.log('showValidatorSettings', showValidatorSettings);
+
   return <ClientContext.Provider value={memoizedValue}>{children}</ClientContext.Provider>;
 };

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

@@ -4,7 +4,7 @@ import { BalanceCard } from './balance';
 import { VestingCard } from './vesting';
 import { ClientContext } from '../../context/main';
 import { PageLayout } from '../../layouts';
-import { ValidatorSelector } from '../../components/ValidatorSelector';
+import { ValidatorSelector } from '../validators/ValidatorSelector';
 
 export const Balance = () => {
   const { userBalance } = useContext(ClientContext);

nym-wallet/src/pages/validators/ValidatorSelector.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { FormControl, InputLabel, ListItemText, MenuItem, Select, SelectChangeEvent, Typography, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { ClientContext } from '../context/main';
-import { validatorUrls } from '../utils';
+import { ClientContext } from '../../context/main';
+import { validatorUrls } from '../../utils';
 
 type TValidatorUrl = string;
 
@@ -12,6 +12,10 @@ export const ValidatorSelector: React.FC<{ onChangeValidatorSelection: (validato
     const [validators, setValidators] = useState<string[] | null>();
     const [selectedValidator, setSelectedValidator] = useState<TValidatorUrl>('');
 
+    const resetState = () => {
+        setValidators(undefined);
+    };
+    
     const {
         network
     } = useContext(ClientContext);
@@ -25,6 +29,9 @@ export const ValidatorSelector: React.FC<{ onChangeValidatorSelection: (validato
                 setValidators(validator?.urls);
             }
         })();
+
+        // will unmount
+        return () => resetState();
     }, []);
 
     useEffect(() => {

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

@@ -0,0 +1,32 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Alert, Box, Dialog } from '@mui/material';
+import { NymCard } from '../../components';
+import { ClientContext } from '../../context/main';
+import { ValidatorSelector } from './ValidatorSelector';
+import { Delegate as DelegateIcon } from '../../svg-icons';
+
+export const ValidatorSettings = () => {
+
+    const { mixnodeDetails, showValidatorSettings, getBondDetails, handleShowSettings } = useContext(ClientContext);
+
+    useEffect(() => {
+        getBondDetails();
+    }, [showValidatorSettings]);
+
+    return showValidatorSettings ? (
+        <Dialog open onClose={handleShowSettings} maxWidth="md" fullWidth>
+            <NymCard
+                title={
+                    <Box display="flex" alignItems="center">
+                        <DelegateIcon sx={{ mr: 1 }} />
+                        Settings
+                    </Box>
+                }
+            >
+                <ValidatorSelector
+                    onChangeValidatorSelection={(selectedValidator) => console.log('selectedValidator:', selectedValidator)}
+                />
+            </NymCard>
+        </Dialog>
+    ) : null;
+};