diff --git a/nym-wallet/src/components/Bonding/forms/GatewayInitForm.tsx b/nym-wallet/src/components/Bonding/forms/GatewayInitForm.tsx
index 670c5a9e0a..1e9a97fe3b 100644
--- a/nym-wallet/src/components/Bonding/forms/GatewayInitForm.tsx
+++ b/nym-wallet/src/components/Bonding/forms/GatewayInitForm.tsx
@@ -6,6 +6,7 @@ import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyForm
import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
import { GatewayData } from '../../../pages/bonding/types';
import { gatewayValidationSchema } from './gatewayValidationSchema';
+import { TermsAndConditions, TermsAndConditionsHelp } from './TermsAndConditions';
const GatewayInitForm = ({
gatewayData,
@@ -21,6 +22,7 @@ const GatewayInitForm = ({
formState: { errors },
handleSubmit,
setValue,
+ setError,
} = useForm({ resolver: yupResolver(gatewayValidationSchema), defaultValues: gatewayData });
const handleRequestValidation = (event: { detail: { step: number } }) => {
@@ -30,7 +32,11 @@ const GatewayInitForm = ({
...data,
version: clean(data.version) as string,
};
- onNext(validatedData);
+ if (!validatedData.acceptedTermsAndConditions) {
+ setError('acceptedTermsAndConditions', { message: 'You must accept the terms and conditions' });
+ } else {
+ onNext(validatedData);
+ }
})();
}
};
@@ -117,6 +123,17 @@ const GatewayInitForm = ({
/>
)}
+ }
+ label={}
+ />
+
);
};
diff --git a/nym-wallet/src/components/Bonding/forms/MixnodeInitForm.tsx b/nym-wallet/src/components/Bonding/forms/MixnodeInitForm.tsx
index 3c97bb22ce..74cba861f6 100644
--- a/nym-wallet/src/components/Bonding/forms/MixnodeInitForm.tsx
+++ b/nym-wallet/src/components/Bonding/forms/MixnodeInitForm.tsx
@@ -6,6 +6,7 @@ import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyForm
import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
import { mixnodeValidationSchema } from './mixnodeValidationSchema';
import { MixnodeData } from '../../../pages/bonding/types';
+import { TermsAndConditions, TermsAndConditionsHelp } from './TermsAndConditions';
const MixnodeInitForm = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNext: (data: any) => void }) => {
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
@@ -15,6 +16,7 @@ const MixnodeInitForm = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; on
formState: { errors },
handleSubmit,
setValue,
+ setError,
} = useForm({ resolver: yupResolver(mixnodeValidationSchema), defaultValues: mixnodeData });
const handleRequestValidation = (event: { detail: { step: number } }) => {
@@ -24,7 +26,11 @@ const MixnodeInitForm = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; on
...data,
version: clean(data.version),
};
- onNext(validatedData);
+ if (!validatedData.acceptedTermsAndConditions) {
+ setError('acceptedTermsAndConditions', { message: 'You must accept the terms and conditions' });
+ } else {
+ onNext(validatedData);
+ }
})();
}
};
@@ -110,6 +116,17 @@ const MixnodeInitForm = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; on
/>
)}
+ }
+ label={}
+ />
+
);
};
diff --git a/nym-wallet/src/components/Bonding/forms/TermsAndConditions.tsx b/nym-wallet/src/components/Bonding/forms/TermsAndConditions.tsx
new file mode 100644
index 0000000000..a1aea8fa18
--- /dev/null
+++ b/nym-wallet/src/components/Bonding/forms/TermsAndConditions.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+
+export const TermsAndConditions: React.FC<{
+ error?: boolean;
+}> = ({ error }) => (
+ (error ? theme.palette.error.main : undefined)}>
+ I agree to the{' '}
+
+ operator terms and conditions
+
+
+);
+
+export const TermsAndConditionsHelp: React.FC<{
+ error?: boolean;
+ helperText?: string;
+}> = ({ error, helperText }) => {
+ if (!error || !helperText) {
+ return null;
+ }
+ return (
+
+
+ {helperText}
+
+ );
+};
diff --git a/nym-wallet/src/pages/bonding/types.ts b/nym-wallet/src/pages/bonding/types.ts
index 0e2b4a6c8d..7968898464 100644
--- a/nym-wallet/src/pages/bonding/types.ts
+++ b/nym-wallet/src/pages/bonding/types.ts
@@ -11,6 +11,7 @@ export type NodeIdentity = {
host: string;
version: string;
mixPort: number;
+ acceptedTermsAndConditions?: boolean;
};
export type MixnodeData = NodeIdentity & {