src/components/TermsAndConditionsCard.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+
+import { Typography, Button, Box, Paper, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, Link, Checkbox } from '@mui/material';
+
+const VALIDATOR_OPTION = "validator";
+const PARTICIPANT_OPTION = "participant";
+
+const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: string) => void }) => {
+  const [selectedRole, setSelectedRole] = useState(PARTICIPANT_OPTION);
+  const [checked, setChecked] = useState(false);
+  const [isHidden, setIsHidden] = useState(false);
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  const handleContinue = () => {
+    handleAccept()
+    setIsHidden(true)
+  }
+
+  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedRole((event.target as HTMLInputElement).value);
+    handleRoleChange((event.target as HTMLInputElement).value);
+  };
+
+  return (
+    <Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', display: isHidden ? "none" : "block" }}>
+      <FormControl component="fieldset">
+        <FormLabel component="legend">Select your role</FormLabel>
+        <RadioGroup
+          aria-label="roles"
+          name="roles"
+          value={selectedRole}
+          onChange={handleRadioChange}
+        >
+          <FormControlLabel
+            value={VALIDATOR_OPTION}
+            control={<Radio />}
+            label="Validator"
+          />
+          <FormControlLabel
+            value={PARTICIPANT_OPTION}
+            control={<Radio />}
+            label="Participant"
+          />
+        </RadioGroup>
+      </FormControl>
+      <Box mt={2} display="flex" alignItems="center">
+        <Checkbox
+          checked={checked}
+          onChange={handleCheckboxChange}
+          color="primary"
+        />
+        <Typography variant="body1">
+          I accept the <Link href={selectedRole === VALIDATOR_OPTION ? '/validators' : '/participants'} target="_blank" rel="noopener">
+            terms and conditions
+          </Link>
+        </Typography>
+      </Box>
+      <Box mt={4} display="flex" justifyContent="end">
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleContinue}
+          disabled={!checked}
+        >
+          Continue
+        </Button>
+      </Box>
+    </Paper>
+  );
+};
+
+export default TermsAndConditionsCard;

src/pages/ConnectWallet.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import { Button, Box, Container } from "@mui/material";
 
@@ -10,11 +10,16 @@ const ConnectWallet = () => {
 
   const navigate = useNavigate();
 
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const kycId = queryParams.get('kycId');
+
   useEffect(() => {
+
     if (session) {
-      navigate("/user-verification");
+      navigate(`/sign-with-nitro-key?kycId=${kycId}`);
     }
-  }, [session, navigate]);
+  }, [session, navigate, kycId]);
 
   const handler = async () => {
     await connect();

src/pages/SignWithCosmos.tsx

@@ -11,6 +11,7 @@ import {
 import { StargateClient } from "@cosmjs/stargate";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
+import TermsAndConditionsCard from "../components/TermsAndConditionsCard";
 
 const SignWithCosmos = () => {
   const { session, signClient } = useWalletConnectContext();
@@ -24,6 +25,8 @@ const SignWithCosmos = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [balance, setBalance] = useState('');
   const [isRequesting, setIsRequesting] = useState(false);
+  const [isTncAccepted, setIsTncAccepted] = useState(false);
+  const [role, setRole] = useState('participant');
 
   const navigate = useNavigate();
   const innerMessage = location.state;
@@ -41,10 +44,11 @@ const SignWithCosmos = () => {
           participant: cosmosAddress!,
           ethPayload: innerMessage,
           ethSignature: ethSignature!,
-          kycId: kycId
+          kycId,
+          role
         },
       };
-    }, [cosmosAddress, innerMessage, ethSignature, kycId]);
+    }, [cosmosAddress, innerMessage, ethSignature, kycId, role]);
 
   const handleTokenRequest = async () => {
     try {
@@ -134,10 +138,12 @@ const SignWithCosmos = () => {
       sx={{
         display: "flex",
         flexDirection: "column",
-        marginTop: "100px",
+        marginY: "100px",
         gap: "10px",
       }}
     >
+      <Typography variant="h5">Please accept terms and conditions to continue</Typography>
+      <TermsAndConditionsCard handleAccept={() => setIsTncAccepted(true)} handleRoleChange={setRole}/>
       <Typography variant="h5">Send transaction to chain</Typography>
       <Typography>Cosmos Account:</Typography>
       <Card className='mt-1 mb-1'>
@@ -151,7 +157,7 @@ const SignWithCosmos = () => {
               <LoadingButton
                 variant="contained"
                 onClick={handleTokenRequest}
-                disabled={isRequesting}
+                disabled={isTncAccepted ? isRequesting : !isTncAccepted}
                 loading={isRequesting}
               >
                 Request tokens from Faucet
@@ -182,7 +188,7 @@ const SignWithCosmos = () => {
             await sendTransaction(onboardParticipantMsg);
           }}
           loading={isLoading}
-          disabled={balance === '0'}
+          disabled={isTncAccepted ? (balance === '0') : !isTncAccepted}
         >
           Send transaction
         </LoadingButton>

src/pages/UserVerification.tsx

@@ -22,7 +22,7 @@ const UserVerification = () => {
 
   useEffect(()=>{
     if (applicationSubmitted && kycId !== '') {
-      navigate(`/sign-with-nitro-key?kycId=${kycId}`)
+      navigate(`/connect-wallet?kycId=${kycId}`)
     }
   }, [applicationSubmitted, kycId, navigate]);