update bond page

nym-wallet/src/components/NodeTypeSelector.tsx

@@ -1,11 +1,5 @@
 import React from 'react'
-import {
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-} from '@mui/material'
+import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from '@mui/material'
 import { EnumNodeType } from '../types/global'
 
 export const NodeTypeSelector = ({
@@ -17,8 +11,7 @@ export const NodeTypeSelector = ({
   nodeType: EnumNodeType
   setNodeType: (nodeType: EnumNodeType) => void
 }) => {
-  const handleNodeTypeChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-    setNodeType(e.target.value as EnumNodeType)
+  const handleNodeTypeChange = (e: React.ChangeEvent<HTMLInputElement>) => setNodeType(e.target.value as EnumNodeType)
 
   return (
     <FormControl component="fieldset">
@@ -32,14 +25,14 @@ export const NodeTypeSelector = ({
       >
         <FormControlLabel
           value={EnumNodeType.mixnode}
-          control={<Radio />}
+          control={<Radio color="default" />}
           label="Mixnode"
           data-testid="mix-node"
           disabled={disabled}
         />
         <FormControlLabel
           value={EnumNodeType.gateway}
-          control={<Radio />}
+          control={<Radio color="default" />}
           data-testid="gate-way"
           label="Gateway"
           disabled={disabled}

nym-wallet/src/routes/bond/BondForm.tsx

@@ -10,6 +10,7 @@ import {
   Grid,
   InputAdornment,
   TextField,
+  Typography,
 } from '@mui/material'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { useForm } from 'react-hook-form'
@@ -98,10 +99,7 @@ export const BondForm = ({
   const { userBalance } = useContext(ClientContext)
 
   const watchNodeType = watch('nodeType', defaultValues.nodeType)
-  const watchAdvancedOptions = watch(
-    'withAdvancedOptions',
-    defaultValues.withAdvancedOptions,
-  )
+  const watchAdvancedOptions = watch('withAdvancedOptions', defaultValues.withAdvancedOptions)
 
   const onSubmit = async (data: TBondFormFields) => {
     const hasEnoughFunds = await checkHasEnoughFunds(data.amount)
@@ -132,23 +130,11 @@ export const BondForm = ({
                 nodeType={watchNodeType}
                 setNodeType={(nodeType) => {
                   setValue('nodeType', nodeType)
-                  if (nodeType === EnumNodeType.mixnode)
-                    setValue('location', undefined)
+                  if (nodeType === EnumNodeType.mixnode) setValue('location', undefined)
                 }}
                 disabled={disabled}
               />
             </Grid>
-            {fees && (
-              <Grid item>
-                <Alert severity="info" data-testid="fee-amount">
-                  {`A fee of ${
-                    watchNodeType === EnumNodeType.mixnode
-                      ? fees.mixnode.amount
-                      : fees?.gateway?.amount
-                  } PUNK will apply to this transaction`}
-                </Alert>
-              </Grid>
-            )}
           </Grid>
           <Grid item xs={12}>
             <TextField
@@ -190,9 +176,7 @@ export const BondForm = ({
               error={!!errors.amount}
               helperText={errors.amount?.message}
               InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">punks</InputAdornment>
-                ),
+                endAdornment: <InputAdornment position="end">punks</InputAdornment>,
               }}
               disabled={disabled}
             />
@@ -303,9 +287,7 @@ export const BondForm = ({
                   label="Mix Port"
                   fullWidth
                   error={!!errors.mixPort}
-                  helperText={
-                    errors.mixPort?.message && 'A valid port value is required'
-                  }
+                  helperText={errors.mixPort?.message && 'A valid port value is required'}
                   disabled={disabled}
                 />
               </Grid>
@@ -320,10 +302,7 @@ export const BondForm = ({
                       label="Verloc Port"
                       fullWidth
                       error={!!errors.verlocPort}
-                      helperText={
-                        errors.verlocPort?.message &&
-                        'A valid port value is required'
-                      }
+                      helperText={errors.verlocPort?.message && 'A valid port value is required'}
                       disabled={disabled}
                     />
                   </Grid>
@@ -337,10 +316,7 @@ export const BondForm = ({
                       label="HTTP API Port"
                       fullWidth
                       error={!!errors.httpApiPort}
-                      helperText={
-                        errors.httpApiPort?.message &&
-                        'A valid port value is required'
-                      }
+                      helperText={errors.httpApiPort?.message && 'A valid port value is required'}
                       disabled={disabled}
                     />
                   </Grid>
@@ -355,16 +331,23 @@ export const BondForm = ({
                     label="client WS API Port"
                     fullWidth
                     error={!!errors.clientsPort}
-                    helperText={
-                      errors.clientsPort?.message &&
-                      'A valid port value is required'
-                    }
+                    helperText={errors.clientsPort?.message && 'A valid port value is required'}
                     disabled={disabled}
                   />
                 </Grid>
               )}
             </>
           )}
+          {fees && (
+            <Grid item xs={12}>
+              <Typography sx={{ color: 'nym.info' }}>
+                {' '}
+                {`A bonding fee: ${
+                  watchNodeType === EnumNodeType.mixnode ? fees.mixnode.amount : fees?.gateway?.amount
+                }`}
+              </Typography>
+            </Grid>
+          )}
         </Grid>
       </Box>
       <Box