Display KYC status on success page

src/pages/OnboardingSuccess.tsx

@@ -4,6 +4,10 @@ import { useLocation } from "react-router-dom";
 
 import { Box, Typography } from "@mui/material";
 import { Registry } from "@cerc-io/registry-sdk";
+import SumsubWebSdk from "@sumsub/websdk-react";
+import { MessageHandler } from "@sumsub/websdk";
+
+import { accessTokenExpirationHandler, config, fetchAccessToken, options } from "../utils/sumsub";
 
 interface Participant {
   cosmosAddress: string;
@@ -23,6 +27,17 @@ const OnboardingSuccess = () => {
   }
 
   const [participant, setParticipant] = useState<Participant>();
+  const [token, setToken] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const messageHandler: MessageHandler = (event, payload) => {
+    console.log('sumsubEvent:', event);
+
+    if (payload) {
+      console.log("Event payload is: ", payload);
+    }
+
+  };
 
   useEffect(() => {
     const fetchParticipants = async () => {
@@ -46,6 +61,23 @@ const OnboardingSuccess = () => {
     fetchParticipants();
   }, [cosmosAddress]);
 
+  useEffect(() => {
+    const getToken = async (userId: string) => {
+      const newToken = await fetchAccessToken(userId);
+      setToken(newToken);
+      setLoading(false);
+    };
+
+    if (cosmosAddress) {
+      console.log("Cosmos addy: ", cosmosAddress);
+      getToken(cosmosAddress).catch(error => {
+        console.error(error);
+        alert("Failed to fetch token");
+      });
+
+    }
+  }, [cosmosAddress]);
+
   return (
     <Box
       sx={{
@@ -78,6 +110,15 @@ const OnboardingSuccess = () => {
           )}
         </pre>
       </Box>
+      {!loading && token && (
+        <SumsubWebSdk
+          accessToken={token}
+          expirationHandler={accessTokenExpirationHandler}
+          config={config}
+          options={options}
+          onMessage={messageHandler}
+        />
+      )}
       <SnackbarProvider />
     </Box>
   );

src/pages/UserVerification.tsx

@@ -6,17 +6,7 @@ import SumsubWebSdk from '@sumsub/websdk-react';
 import { MessageHandler } from '@sumsub/websdk';
 import { EventPayload } from '@sumsub/websdk/types/types';
 
-import { fetchAccessToken } from '../utils/sumsub';
+import { accessTokenExpirationHandler, config, fetchAccessToken, options } from '../utils/sumsub';
-
-const config = {
-  lang: "en", // language of WebSDK texts and comments (ISO 639-1 format)
-  theme: "light",
-};
-
-const options = {
-  addViewportTag: false,
-  adaptIframeHeight: true,
-};
 
 const UserVerification = () => {
   const [kycId, setKycId] = useState<string>('unknown');
@@ -64,11 +54,6 @@ const UserVerification = () => {
     }
   }, [applicationSubmitted, kycId, navigate, cosmosAddress, message, receivedEthSig]);
 
-  const accessTokenExpirationHandler = async () => {
-    alert("Please renew token");
-    return "Token expired";
-  };
-
   const messageHandler: MessageHandler = (event, payload) => {
     console.log('sumsubEvent:', event);
 

src/utils/sumsub.ts

@@ -14,3 +14,18 @@ export const fetchAccessToken = async (userId: string): Promise<string> => {
   const data = await response.json();
   return data.token;
 };
+
+export const config = {
+  lang: "en", // language of WebSDK texts and comments (ISO 639-1 format)
+  theme: "light",
+};
+
+export const options = {
+  addViewportTag: false,
+  adaptIframeHeight: true,
+};
+
+export const accessTokenExpirationHandler = async () => {
+  alert("Please renew token");
+  return "Token expired";
+};