src/components/TermsAndConditionsCard.tsx

@@ -1,16 +1,15 @@
 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';
 
-export enum Role {
+const VALIDATOR_OPTION = "validator";
-  Validator = 'validator',
+const PARTICIPANT_OPTION = "participant";
-  Participant = 'participant'
-}
 
 const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: Role) => void }) => {
-  const [selectedRole, setSelectedRole] = useState<Role>(Role.Participant);
+  const [selectedRole, setSelectedRole] = useState(PARTICIPANT_OPTION);
   const [checked, setChecked] = useState(false);
   const [isHidden, setIsHidden] = useState(false);
 
@@ -26,8 +25,8 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce
   }
 
   const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedRole(event.target.value as Role);
+    setSelectedRole((event.target as HTMLInputElement).value);
-    handleRoleChange((event.target as HTMLInputElement).value === Role.Validator ? Role.Validator : Role.Participant);
+    handleRoleChange((event.target as HTMLInputElement).value === VALIDATOR_OPTION ? Role.ROLE_VALIDATOR : Role.ROLE_PARTICIPANT);
   };
 
   return (
@@ -41,12 +40,12 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce
           onChange={handleRadioChange}
         >
           <FormControlLabel
-            value={Role.Validator}
+            value={VALIDATOR_OPTION}
             control={<Radio />}
             label="Validator"
           />
           <FormControlLabel
-            value={Role.Participant}
+            value={PARTICIPANT_OPTION}
             control={<Radio />}
             label="Participant"
           />
@@ -74,7 +73,7 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce
           Continue
         </Button>
       </Box>
-      <TermsAndConditionsDialog isValidator = { selectedRole === Role.Validator } open={isDialogOpen} onClose={() => setisDialogOpen(false)}/>
+      <TermsAndConditionsDialog isValidator = { selectedRole === VALIDATOR_OPTION } open={isDialogOpen} onClose={() => setisDialogOpen(false)}/>
     </Paper>
   );
 };

src/pages/SignWithCosmos.tsx

@@ -8,10 +8,11 @@ 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, {Role} from "../components/TermsAndConditionsCard";
+import TermsAndConditionsCard from "../components/TermsAndConditionsCard";
 
 const SignWithCosmos = () => {
   const { session, signClient } = useWalletConnectContext();
@@ -21,7 +22,7 @@ const SignWithCosmos = () => {
   const [balance, setBalance] = useState('');
   const [isRequesting, setIsRequesting] = useState(false);
   const [isTncAccepted, setIsTncAccepted] = useState(false);
-  const [role, setRole] = useState(Role.Participant);
+  const [role, setRole] = useState(Role.ROLE_PARTICIPANT);
 
   const navigate = useNavigate();
   const {message: innerMessage, cosmosAddress, ethSignature, kycId} = location.state as {

src/pages/UserVerification.tsx

@@ -1,49 +1,26 @@
-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 { fetchToken } from '../utils/getToken';
+import { Box, Typography } from '@mui/material'
+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: {
@@ -53,18 +30,25 @@ const UserVerification = () => {
     }
   }, [applicationSubmitted, kycId, navigate]);
 
+  // TODO: Implement
   const accessTokenExpirationHandler = async () => {
     alert("Please renew token");
     return "Token expired";
-  };
+  }
 
-  const messageHandler = (event: any, payload: any) => {
+  const accessToken  = {
-    console.log(event);
+    // TODO: Programmatically fetch access-token using sumsub API
+    "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);
     }
 
@@ -73,7 +57,7 @@ const UserVerification = () => {
         setApplicationSubmitted(true);
       }
     }
-  };
+  }
 
   return (
     <>
@@ -86,19 +70,19 @@ const UserVerification = () => {
         }}
       >
         <Typography variant="h5">User verification</Typography>
-        <div id="sumsub-websdk-container"></div>
+        <div id="sumsub-websdk-container">
-      </Box>
-      {!loading && token && (
-        <SumsubWebSdk
-          accessToken={token}
-          expirationHandler={accessTokenExpirationHandler}
-          config={config}
-          options={options}
-          onMessage={messageHandler}
-        />
-      )}
-    </>
-  );
-};
 
-export default UserVerification;
+        </div>
+      </Box>
+      <SumsubWebSdk
+        accessToken={accessToken.token}
+        expirationHandler={accessTokenExpirationHandler}
+        config={config}
+        options={options}
+        onMessage={messageHandler}
+      />
+    </>
+  )
+}
+
+export default UserVerification

src/utils/getToken.ts

@@ -1,21 +0,0 @@
-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;
-  }
-};