src/pages/UserVerification.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+
 import { Box, Typography } from '@mui/material';
 import SumsubWebSdk from '@sumsub/websdk-react';
+import { MessageHandler } from '@sumsub/websdk';
+import { EventPayload } from '@sumsub/websdk/types/types';
 
-import { fetchToken } from '../utils/getToken';
+import { fetchAccessToken } from '../utils/sumsub';
 
 const config = {
   lang: "en", // language of WebSDK texts and comments (ISO 639-1 format)
@@ -35,21 +38,18 @@ const UserVerification = () => {
   useEffect(() => {
     const getToken = async (userId: string) => {
       console.log(userId);
-      const newToken = await fetchToken(userId);
-      if (newToken) {
-        console.log('newToken: ', newToken);
-        setToken(newToken);
-      } else {
-        alert("Failed to fetch token");
-      }
+      const newToken = await fetchAccessToken(userId);
+      
+      setToken(newToken);
       setLoading(false);
     };
-
+    
     if (userId) {
-      console.log(userId);
-      getToken(userId);
+      getToken(userId).catch(error => {
+        console.error(error);
+        alert("Failed to fetch token");
+      });
     }
-
   }, [userId]);
 
   useEffect(() => {
@@ -69,10 +69,11 @@ const UserVerification = () => {
     return "Token expired";
   };
 
-  const messageHandler = (event: any, payload: any) => {
-    console.log(event);
+  const messageHandler: MessageHandler = (event, payload) => {
+    console.log('sumsubEvent:', event);
+
     if (event === 'idCheck.onApplicantLoaded') {
-      setKycId(payload.applicantId);
+      setKycId((payload as EventPayload<'idCheck.onApplicantLoaded'>).applicantId);
     }
 
     if (event === 'idCheck.onApplicantSubmitted') {
@@ -80,7 +81,7 @@ const UserVerification = () => {
     }
 
     if (event === 'idCheck.onApplicantStatusChanged') {
-      if (payload.reviewStatus === 'pending') {
+      if ((payload as EventPayload<'idCheck.onApplicantStatusChanged'>).reviewStatus === 'pending') {
         setApplicationSubmitted(true);
       }
     }

src/utils/getToken.ts

@@ -1,21 +0,0 @@
-export const fetchToken = async (userId: string) => {
-  try {
-    const response = await fetch(`${process.env.REACT_APP_SUMSUB_API_ENDPOINT}/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;
-  }
-};

src/utils/sumsub.ts

@@ -0,0 +1,16 @@
+export const fetchAccessToken = async (userId: string): Promise<string> => {
+  const response = await fetch(`${process.env.REACT_APP_SUMSUB_API_ENDPOINT}/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;
+};

yarn.lock

@@ -1183,10 +1183,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@cerc-io/registry-sdk@^0.2.2":
-  version "0.2.2"
-  resolved "https://git.vdb.to/api/packages/cerc-io/npm/%40cerc-io%2Fregistry-sdk/-/0.2.2/registry-sdk-0.2.2.tgz#2e8a533f069b4bb9f4cd4798e783f52e29167d0d"
-  integrity sha512-ocRMbWtdewOg02ORfK1U+qbTqB46anHP4ApXokGkY4d+mFSApR3sdUEi2geHcs8oh+SG8YAp7LUJ9AAJneNY8g==
+"@cerc-io/registry-sdk@^0.2.3":
+  version "0.2.3"
+  resolved "https://git.vdb.to/api/packages/cerc-io/npm/%40cerc-io%2Fregistry-sdk/-/0.2.3/registry-sdk-0.2.3.tgz#73e955b4d49d7c97eea40c351bbc21f98bb330f9"
+  integrity sha512-8fXRdyiTXn8WsJ8r3DCSBYzUBNEZYPPk5JGUrEmkGQhKOJr+ZeakN+2t6HrqEVB9IMYTJK9BtVLPA0KlaXILYA==
   dependencies:
     "@cosmjs/amino" "^0.28.1"
     "@cosmjs/crypto" "^0.28.1"