From 89a19815fce04ed60f76ebcde501b91cfb558953 Mon Sep 17 00:00:00 2001
From: gala1234 <calero.vg@gmail.com>
Date: Wed, 30 Mar 2022 13:33:52 +0200
Subject: [PATCH] first validators dropdown implementation

---
 .../src/components/ValidatorSelector.tsx      | 47 +++++++++++++++++++
 nym-wallet/src/pages/balance/index.tsx        |  4 ++
 2 files changed, 51 insertions(+)
 create mode 100644 nym-wallet/src/components/ValidatorSelector.tsx

diff --git a/nym-wallet/src/components/ValidatorSelector.tsx b/nym-wallet/src/components/ValidatorSelector.tsx
new file mode 100644
index 0000000000..44f2023cb6
--- /dev/null
+++ b/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>
+  };
+  
\ No newline at end of file
diff --git a/nym-wallet/src/pages/balance/index.tsx b/nym-wallet/src/pages/balance/index.tsx
index 60f9836687..5132a6fbb8 100644
--- a/nym-wallet/src/pages/balance/index.tsx
+++ b/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>
   );
 };