first validators dropdown implementation

nym-wallet/src/components/ValidatorSelector.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { FormControl, InputLabel, ListItemText, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material';
+// import { getValidators } from '../requests';
+
+interface ValidatorDropdownProps {
+    onChangeValidatorSelection: (validator: TValidatorOption) => void;
+}
+
+type TValidatorOption = string;
+
+export const ValidatorSelector: React.FC<ValidatorDropdownProps> = ({
+    onChangeValidatorSelection,
+  }) => {
+    const [validators, setValidators] = useState<TValidatorOption[] | null>(null);
+    const [selectedValidator, setSelectedValidator] = useState<TValidatorOption>('');
+  
+    useEffect(() => {
+    //   (async () => {
+    //     await getValidators();
+    //   })();
+    setValidators(['aaa', 'bbb', 'ccc']);
+    }, []);
+  
+    useEffect(() => {
+        onChangeValidatorSelection(selectedValidator);
+    }, [selectedValidator]);
+
+    return validators &&
+                <Select
+                labelId="validatorSelect_label"
+                id="validatorSelect"
+                value={selectedValidator}
+                onChange={(e: SelectChangeEvent) => {
+                    setSelectedValidator(e.target.value as TValidatorOption);
+                }}
+                renderValue={(value) => <Typography sx={{ textTransform: 'capitalize' }}>{value}</Typography>}
+                >
+                    {
+                        validators.map((validator) => (
+                            <MenuItem value={validator} key={validator}>
+                                <ListItemText>{validator}</ListItemText>
+                            </MenuItem>
+                        ))
+                    }
+                </Select>
+  };
+  

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

@@ -4,6 +4,7 @@ import { BalanceCard } from './balance';
 import { VestingCard } from './vesting';
 import { ClientContext } from '../../context/main';
 import { PageLayout } from '../../layouts';
+import { ValidatorSelector } from '../../components/ValidatorSelector';
 
 export const Balance = () => {
   const { userBalance } = useContext(ClientContext);
@@ -18,6 +19,9 @@ export const Balance = () => {
         <BalanceCard />
         {userBalance.originalVesting && <VestingCard />}
       </Box>
+      <ValidatorSelector
+        onChangeValidatorSelection={(selectedValidator) => console.log('selectedValidator:', selectedValidator)}
+      />
     </PageLayout>
   );
 };