connect also info settings and adding schemas for both forms

nym-wallet/src/components/Bonding/forms/mixnodeValidationSchema.ts

@@ -49,3 +49,31 @@ export const amountSchema = Yup.object().shape({
   }),
   profitMargin: Yup.number().required('Profit Percentage is required').min(0).max(100),
 });
+
+export const bondedInfoParametersValidationSchema = Yup.object().shape({
+  host: Yup.string()
+    .required('A host is required')
+    .test('valid-host', 'A valid host is required', (value) => (value ? isValidHostname(value) : false)),
+
+  version: Yup.string()
+    .required('A version is required')
+    .test('valid-version', 'A valid version is required', (value) => (value ? validateVersion(value) : false)),
+
+  mixPort: Yup.number()
+    .required('A mixport is required')
+    .test('valid-mixport', 'A valid mixport is required', (value) => (value ? validateRawPort(value) : false)),
+
+  verlocPort: Yup.number()
+    .required('A verloc port is required')
+    .test('valid-verloc', 'A valid verloc port is required', (value) => (value ? validateRawPort(value) : false)),
+
+  httpApiPort: Yup.number()
+    .required('A http-api port is required')
+    .test('valid-http', 'A valid http-api port is required', (value) => (value ? validateRawPort(value) : false)),
+});
+
+export const bondedNodeParametersValidationSchema = Yup.object().shape({
+  profitMargin: Yup.number().required('Profit Percentage is required').min(0).max(100),
+
+  operatorCost: Yup.number().required('Operator cost is required'),
+})

nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Button, Divider, Typography, TextField, Grid, Alert, IconButton } from '@mui/material';
+import { Button, Divider, Typography, TextField, Grid, Alert, IconButton, CircularProgress } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import CloseIcon from '@mui/icons-material/Close';
+import { updateMixnodeConfig } from '../../../../requests';
 import { TBondedMixnode, TBondedGateway } from '../../../../context/bonding';
 import { SimpleModal } from '../../../../components/Modals/SimpleModal';
-import { mixnodeValidationSchema } from '../../../../components/Bonding/forms/mixnodeValidationSchema';
+import { bondedInfoParametersValidationSchema } from '../../../../components/Bonding/forms/mixnodeValidationSchema';
 
 export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBondedGateway }) => {
   const [open, setOpen] = useState(true);
@@ -17,14 +18,36 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
   const {
     register,
     handleSubmit,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isDirty, isValid },
   } = useForm({
-    resolver: yupResolver(mixnodeValidationSchema),
+    resolver: yupResolver(bondedInfoParametersValidationSchema),
+    mode: 'onChange',
     defaultValues: bondedNode.type === 'mixnode' ? bondedNode : {},
   });
 
-  const onSubmit = async () => {
-    await setOpenConfirmationModal(false);
+  const onSubmit = async (data: {
+    host?: string;
+    version?: string;
+    mixPort?: number;
+    verlocPort?: number;
+    httpApiPort?: number;
+  }) => {
+    const { host, version, mixPort, verlocPort, httpApiPort } = data;
+    if (host && version && mixPort && verlocPort && httpApiPort) {
+      const MixNodeConfigParams = {
+        host,
+        mix_port: mixPort,
+        verloc_port: verlocPort,
+        http_api_port: httpApiPort,
+        version,
+      };
+      try {
+        await updateMixnodeConfig(MixNodeConfigParams);
+        setOpenConfirmationModal(true);
+      } catch (error) {
+        console.error(error);
+      }
+    }
   };
 
   return (
@@ -171,10 +194,11 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
           <Button
             size="large"
             variant="contained"
-            disabled={isSubmitting}
-            onClick={handleSubmit(onSubmit)}
+            disabled={isSubmitting || !isDirty || !isValid}
+            onClick={handleSubmit((d) => onSubmit(d))}
             type="submit"
             sx={{ m: 3, width: '320px' }}
+            endIcon={isSubmitting && <CircularProgress size={20} />}
           >
             Save all display changes
           </Button>

nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx

@@ -14,10 +14,10 @@ import {
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import CloseIcon from '@mui/icons-material/Close';
-import { updateMixnodeCostParams, vestingUpdateMixnodeCostParams } from '../../../../requests';
+import { updateMixnodeCostParams } from '../../../../requests';
 import { TBondedMixnode, TBondedGateway } from '../../../../context/bonding';
 import { SimpleModal } from '../../../../components/Modals/SimpleModal';
-import { mixnodeparametersValidationSchema } from '../../../../components/Bonding/forms/mixnodeValidationSchema';
+import { bondedNodeParametersValidationSchema } from '../../../../components/Bonding/forms/mixnodeValidationSchema';
 
 export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBondedGateway }): JSX.Element => {
   const [open, setOpen] = useState(true);
@@ -28,11 +28,9 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
   const {
     register,
     handleSubmit,
-    getValues,
     formState: { errors, isSubmitting, isDirty, isValid },
-    getFieldState,
   } = useForm({
-    resolver: yupResolver(mixnodeparametersValidationSchema),
+    resolver: yupResolver(bondedNodeParametersValidationSchema),
     mode: 'onChange',
     defaultValues:
       bondedNode.type === 'mixnode'