Use enum for role

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";
+export enum Role {
-const PARTICIPANT_OPTION = "participant";
+  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);
+    setSelectedRole(event.target.value as Role);
-    handleRoleChange((event.target as HTMLInputElement).value === VALIDATOR_OPTION ? Role.ROLE_VALIDATOR : Role.ROLE_PARTICIPANT);
+    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 {

src/pages/UserVerification.tsx

@@ -1,26 +1,49 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Box, Typography } from '@mui/material';
+import SumsubWebSdk from '@sumsub/websdk-react';
 
-import { Box, Typography } from '@mui/material'
+import { fetchToken } from '../utils/getToken';
-import SumsubWebSdk from '@sumsub/websdk-react'
 
 const config = {
-  lang: "en", //language of WebSDK texts and comments (ISO 639-1 format)
+  lang: "en", // language of WebSDK texts and comments (ISO 639-1 format)
   theme: "light",
-}
+};
 
 const options = {
   addViewportTag: false,
-  adaptIframeHeight: true
+  adaptIframeHeight: true,
-}
+};
 
 const UserVerification = () => {
-  const [kycId, setKycId] = useState<String>('');
+  const [kycId, setKycId] = useState<string>('');
   const [applicationSubmitted, setApplicationSubmitted] = useState<boolean>(false);
+  const [token, setToken] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
 
   const navigate = useNavigate();
 
-  useEffect(()=>{
+  useEffect(() => {
+    const getToken = async (kycId: string) => {
+      console.log(kycId);
+      const newToken = await fetchToken(kycId);
+      if (newToken) {
+        console.log('newToken: ', newToken);
+        setToken(newToken);
+      } else {
+        alert("Failed to fetch token");
+      }
+      setLoading(false);
+    };
+
+    if (kycId) {
+      console.log(kycId);
+      getToken(kycId);
+    }
+
+  }, [kycId]);
+
+  useEffect(() => {
     if (applicationSubmitted && kycId !== '') {
       navigate("/connect-wallet", {
         state: {
@@ -30,25 +53,18 @@ const UserVerification = () => {
     }
   }, [applicationSubmitted, kycId, navigate]);
 
-  // TODO: Implement
   const accessTokenExpirationHandler = async () => {
     alert("Please renew token");
     return "Token expired";
-  }
+  };
 
-  const accessToken  = {
+  const messageHandler = (event: any, payload: any) => {
-    // TODO: Programmatically fetch access-token using sumsub API
+    console.log(event);
-    "token": process.env.REACT_APP_SUMSUB_TOKEN!,
-    // TODO: Generate random user-id string
-    "userId": "alice"
-  }
-
-  const messageHandler = (event: any, payload: any ) => {
     if (event === 'idCheck.onApplicantLoaded') {
       setKycId(payload.applicantId);
     }
 
-    if (event === 'idCheck.onApplicantSubmitted'){
+    if (event === 'idCheck.onApplicantSubmitted') {
       setApplicationSubmitted(true);
     }
 
@@ -57,7 +73,7 @@ const UserVerification = () => {
         setApplicationSubmitted(true);
       }
     }
-  }
+  };
 
   return (
     <>
@@ -70,19 +86,19 @@ const UserVerification = () => {
         }}
       >
         <Typography variant="h5">User verification</Typography>
-        <div id="sumsub-websdk-container">
+        <div id="sumsub-websdk-container"></div>
-
-        </div>
       </Box>
+      {!loading && token && (
         <SumsubWebSdk
-        accessToken={accessToken.token}
+          accessToken={token}
           expirationHandler={accessTokenExpirationHandler}
           config={config}
           options={options}
           onMessage={messageHandler}
         />
+      )}
     </>
-  )
+  );
-}
+};
 
-export default UserVerification
+export default UserVerification;

src/utils/getToken.ts

@@ -0,0 +1,21 @@
+export const fetchToken = async (userId: string) => {
+  try {
+    const response = await fetch('http://localhost:3000/generate-token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ userId })
+    });
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+
+    const data = await response.json();
+    return data.token;
+  } catch (error) {
+    console.error('Error fetching token:', error);
+    return null;
+  }
+};