src/components/TermsAndConditionsCard.tsx

@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
 
 import { Typography, Button, Box, Paper, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, Link, Checkbox } from '@mui/material';
-import { Role } from '@cerc-io/registry-sdk/dist/proto/cerc/onboarding/v1/onboarding';
 
 import TermsAndConditionsDialog from './TermsAndConditionsDialog';
 
-const VALIDATOR_OPTION = "validator";
-const PARTICIPANT_OPTION = "participant";
+export enum Role {
+  Validator = 'validator',
+  Participant = 'participant'
+}
 
 const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: Role) => void }) => {
-  const [selectedRole, setSelectedRole] = useState(PARTICIPANT_OPTION);
+  const [selectedRole, setSelectedRole] = useState<Role>(Role.Participant);
   const [checked, setChecked] = useState(false);
   const [isHidden, setIsHidden] = useState(false);
 
@@ -25,8 +26,8 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce
   }
 
   const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedRole((event.target as HTMLInputElement).value);
-    handleRoleChange((event.target as HTMLInputElement).value === VALIDATOR_OPTION ? Role.ROLE_VALIDATOR : Role.ROLE_PARTICIPANT);
+    setSelectedRole(event.target.value as Role);
+    handleRoleChange((event.target as HTMLInputElement).value === Role.Validator ? Role.Validator : Role.Participant);
   };
 
   return (
@@ -40,12 +41,12 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce
           onChange={handleRadioChange}
         >
           <FormControlLabel
-            value={VALIDATOR_OPTION}
+            value={Role.Validator}
             control={<Radio />}
             label="Validator"
           />
           <FormControlLabel
-            value={PARTICIPANT_OPTION}
+            value={Role.Participant}
             control={<Radio />}
             label="Participant"
           />
@@ -73,7 +74,7 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce
           Continue
         </Button>
       </Box>
-      <TermsAndConditionsDialog isValidator = { selectedRole === VALIDATOR_OPTION } open={isDialogOpen} onClose={() => setisDialogOpen(false)}/>
+      <TermsAndConditionsDialog isValidator = { selectedRole === Role.Validator } open={isDialogOpen} onClose={() => setisDialogOpen(false)}/>
     </Paper>
   );
 };

src/pages/SignWithCosmos.tsx

@@ -8,11 +8,10 @@ import {
   MsgOnboardParticipantEncodeObject,
   typeUrlMsgOnboardParticipant,
 } from "@cerc-io/registry-sdk";
-import { Role } from "@cerc-io/registry-sdk/dist/proto/cerc/onboarding/v1/onboarding";
 import { StargateClient } from "@cosmjs/stargate";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
-import TermsAndConditionsCard from "../components/TermsAndConditionsCard";
+import TermsAndConditionsCard, {Role} from "../components/TermsAndConditionsCard";
 
 const SignWithCosmos = () => {
   const { session, signClient } = useWalletConnectContext();
@@ -22,7 +21,7 @@ const SignWithCosmos = () => {
   const [balance, setBalance] = useState('');
   const [isRequesting, setIsRequesting] = useState(false);
   const [isTncAccepted, setIsTncAccepted] = useState(false);
-  const [role, setRole] = useState(Role.ROLE_PARTICIPANT);
+  const [role, setRole] = useState(Role.Participant);
 
   const navigate = useNavigate();
   const {message: innerMessage, cosmosAddress, ethSignature, kycId} = location.state as {