wip display validators settings on a modal

nym-wallet/src/components/AppBar.tsx

@@ -8,7 +8,7 @@ import { Delegate as DelegateIcon } from '../svg-icons';
 
 
 export const AppBar = () => {
-  const { showSettings, logOut, handleShowSettings, handleShowValidatorSettings } = useContext(ClientContext);
+  const { showSettings, showValidatorSettings, logOut, handleShowSettings, handleShowValidatorSettings } = useContext(ClientContext);
 
   return (
     <MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'transparent' }}>
@@ -21,7 +21,7 @@ export const AppBar = () => {
             <Grid item>
               <IconButton
                 onClick={handleShowValidatorSettings}
-                sx={{ color: showSettings ? 'primary.main' : 'nym.background.dark' }}
+                sx={{ color: showValidatorSettings ? 'primary.main' : 'nym.background.dark' }}
                 size="small"
               >
                 <DelegateIcon fontSize="small" />

nym-wallet/src/context/main.tsx

@@ -119,8 +119,14 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
   };
 
   const handleShowAdmin = () => setShowAdmin((show) => !show);
-  const handleShowSettings = () => setShowSettings((show) => !show);
-  const handleShowValidatorSettings = () => setShowValidatorSettings((show) => !show);
+  const handleShowSettings = () => {
+    setShowSettings((show) => !show)
+    setShowValidatorSettings(false);
+  };
+  const handleShowValidatorSettings = () => {
+    setShowValidatorSettings((show) => !show)
+    setShowSettings(false);
+  };
   const switchNetwork = (_network: Network) => setNetwork(_network);
 
   const memoizedValue = useMemo(

nym-wallet/src/index.tsx

@@ -6,7 +6,7 @@ import { SnackbarProvider } from 'notistack';
 import { Routes } from './routes';
 import { ClientContext, ClientContextProvider } from './context/main';
 import { ApplicationLayout } from './layouts';
-import { Admin, Welcome, Settings } from './pages';
+import { Admin, Welcome, Settings, ValidatorSettings } from './pages';
 import { ErrorFallback } from './components';
 import { NymWalletTheme, WelcomeTheme } from './theme';
 import { maximizeWindow } from './utils';
@@ -26,6 +26,7 @@ const App = () => {
     <NymWalletTheme>
       <ApplicationLayout>
         <Settings />
+        <ValidatorSettings />
         <Admin />
         <Routes />
       </ApplicationLayout>

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

@@ -19,9 +19,6 @@ export const Balance = () => {
         <BalanceCard />
         {userBalance.originalVesting && <VestingCard />}
       </Box>
-      <ValidatorSelector
-        onChangeValidatorSelection={(selectedValidator) => console.log('selectedValidator:', selectedValidator)}
-      />
     </PageLayout>
   );
 };

nym-wallet/src/pages/index.ts

@@ -9,3 +9,4 @@ export * from './welcome';
 export * from './settings';
 export * from './unbond';
 export * from './undelegate';
+export * from './validators';

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

@@ -6,8 +6,8 @@ import { validatorUrls } from '../../utils';
 
 type TValidatorUrl = string;
 
-export const ValidatorSelector: React.FC<{ onChangeValidatorSelection: (validator: TValidatorUrl) => void }> = ({
-    onChangeValidatorSelection,
+export const ValidatorSelector: React.FC<{ onChangeValidatorSelection: (validator: TValidatorUrl) => void, type: string }> = ({
+    onChangeValidatorSelection, type,
 }) => {
     const [validators, setValidators] = useState<string[] | null>();
     const [selectedValidator, setSelectedValidator] = useState<TValidatorUrl>('');
@@ -15,7 +15,7 @@ export const ValidatorSelector: React.FC<{ onChangeValidatorSelection: (validato
     const resetState = () => {
         setValidators(undefined);
     };
-    
+
     const {
         network
     } = useContext(ClientContext);
@@ -29,6 +29,7 @@ export const ValidatorSelector: React.FC<{ onChangeValidatorSelection: (validato
                 setValidators(validator?.urls);
             }
         })();
+        console.log('type', type);
 
         // will unmount
         return () => resetState();
@@ -40,7 +41,7 @@ export const ValidatorSelector: React.FC<{ onChangeValidatorSelection: (validato
 
     return (
         <FormControl fullWidth>
-            <InputLabel id="validatorSelect_label">Choose a Validator</InputLabel>
+            <InputLabel id="validatorSelect_label">{type}</InputLabel>
             <Select
                 labelId="validatorSelect_label"
                 id="validatorSelect"

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

@@ -1,20 +1,43 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Alert, Box, Dialog } from '@mui/material';
+import { Button, Box, Dialog, CircularProgress } from '@mui/material';
+import { Tabs } from '../settings/tabs';
 import { NymCard } from '../../components';
 import { ClientContext } from '../../context/main';
 import { ValidatorSelector } from './ValidatorSelector';
 import { Delegate as DelegateIcon } from '../../svg-icons';
+import { Console } from '../../utils/console';
+
+const tabs = ['Validators', 'APIs'];
 
 export const ValidatorSettings = () => {
+    const [selectedTab, setSelectedTab] = useState(0);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [data, setData] = useState({});
 
-    const { mixnodeDetails, showValidatorSettings, getBondDetails, handleShowSettings } = useContext(ClientContext);
+    const { showValidatorSettings, getBondDetails, handleShowValidatorSettings } = useContext(ClientContext);
+
+    const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab);
 
     useEffect(() => {
         getBondDetails();
     }, [showValidatorSettings]);
 
+    const onDataChanged = (selectedValidator?: string, selectedAPI?: string) => {
+        if (selectedValidator) {
+            setData(selectedValidator);
+        };
+        if (selectedAPI) {
+            setData(selectedAPI);
+        };
+        console.log('selectedValidator:', selectedValidator, 'selectedAPI', selectedAPI);
+    }
+
+    const handleSubmit = (data: {}) => {
+        console.log('data', data);
+    }
+
     return showValidatorSettings ? (
-        <Dialog open onClose={handleShowSettings} maxWidth="md" fullWidth>
+        <Dialog open onClose={handleShowValidatorSettings} maxWidth="md" fullWidth>
             <NymCard
                 title={
                     <Box display="flex" alignItems="center">
@@ -22,10 +45,51 @@ export const ValidatorSettings = () => {
                         Settings
                     </Box>
                 }
+                noPadding
             >
-                <ValidatorSelector
-                    onChangeValidatorSelection={(selectedValidator) => console.log('selectedValidator:', selectedValidator)}
-                />
+                <>
+                    <Tabs tabs={tabs} selectedTab={selectedTab} onChange={handleTabChange} disabled={false} />
+                    {selectedTab === 0 &&
+                        <ValidatorSelector
+                            type={tabs[selectedTab]}
+                            onChangeValidatorSelection={(selectedValidator) => onDataChanged(selectedValidator)}
+                        />
+                    }
+                    {selectedTab === 1 &&
+                        <ValidatorSelector
+                            type={tabs[selectedTab]} onChangeValidatorSelection={(selectedAPI) => onDataChanged(selectedAPI)}
+                        />
+                    }
+                </>
+                <Box
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'flex-end',
+                    }}
+                >
+                    <Button
+                        size="large"
+                        variant="contained"
+                        data-testid="validatorsSettings-button"
+                        color="primary"
+                        disableElevation
+                        onClick={async () => {
+                            setIsSubmitting(true);
+                            try {
+                                console.log('hello')
+                            } catch (e) {
+                                Console.error(e as string);
+                            } finally {
+                                setIsSubmitting(false);
+                            }
+                        }}
+                        disabled={isSubmitting}
+                        endIcon={isSubmitting && <CircularProgress size={20} />}
+                    >
+                        Save Changes
+                    </Button>
+                </Box>
             </NymCard>
         </Dialog>
     ) : null;