From 17100fa7daaf65d9e9ee4ba3ae2b676beba0416e Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Mon, 23 Aug 2021 10:38:17 +0100
Subject: [PATCH] create node type selector component

---
 .../src/components/NodeTypeSelector.tsx       | 44 +++++++++++++++++++
 tauri-wallet/src/routes/bond/BondForm.tsx     | 10 ++++-
 2 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 tauri-wallet/src/components/NodeTypeSelector.tsx

diff --git a/tauri-wallet/src/components/NodeTypeSelector.tsx b/tauri-wallet/src/components/NodeTypeSelector.tsx
new file mode 100644
index 0000000000..25f8279e91
--- /dev/null
+++ b/tauri-wallet/src/components/NodeTypeSelector.tsx
@@ -0,0 +1,44 @@
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@material-ui/core'
+import React from 'react'
+import { EnumNodeType } from '../types/global'
+
+export const NodeTypeSelector = ({
+  nodeType,
+  setNodeType,
+}: {
+  nodeType: EnumNodeType
+  setNodeType: (nodeType: EnumNodeType) => void
+}) => {
+  const handleNodeTypeChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setNodeType(e.target.value as EnumNodeType)
+
+  return (
+    <FormControl component="fieldset">
+      <FormLabel component="legend">Select node type</FormLabel>
+      <RadioGroup
+        aria-label="nodeType"
+        name="nodeTypeRadio"
+        value={nodeType}
+        onChange={handleNodeTypeChange}
+        style={{ display: 'block' }}
+      >
+        <FormControlLabel
+          value={EnumNodeType.Mixnode}
+          control={<Radio />}
+          label="Mixnode"
+        />
+        <FormControlLabel
+          value={EnumNodeType.Gateway}
+          control={<Radio />}
+          label="Gateway"
+        />
+      </RadioGroup>
+    </FormControl>
+  )
+}
diff --git a/tauri-wallet/src/routes/bond/BondForm.tsx b/tauri-wallet/src/routes/bond/BondForm.tsx
index dcb53eac9a..aef7dcbeec 100644
--- a/tauri-wallet/src/routes/bond/BondForm.tsx
+++ b/tauri-wallet/src/routes/bond/BondForm.tsx
@@ -7,10 +7,10 @@ import {
   InputAdornment,
   TextField,
   Theme,
-  useMediaQuery,
 } from '@material-ui/core'
 import { EnumNodeType } from '../../types/global'
 import { useTheme } from '@material-ui/styles'
+import { NodeTypeSelector } from '../../components/NodeTypeSelector'
 
 type TBondNodeFormProps = {
   // minimumBond: Coin
@@ -20,14 +20,20 @@ type TBondNodeFormProps = {
 export const BondNodeForm = () => {
   const [advancedShown, setAdvancedShown] = React.useState(false)
   const [type, setType] = useState(EnumNodeType.Mixnode)
+  const [nodeType, setNodeType] = useState(EnumNodeType.Mixnode)
 
   const theme: Theme = useTheme()
-  const matches = useMediaQuery('(min-width:768px)')
 
   return (
     <form>
       <div style={{ padding: theme.spacing(3) }}>
         <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <NodeTypeSelector
+              nodeType={nodeType}
+              setNodeType={(nodeType) => setNodeType(nodeType)}
+            />
+          </Grid>
           <Grid item xs={12}>
             <TextField
               variant="outlined"