Display KYC status in success page (#8)

Part of [Sumsub KYC integration in onboarding app](https://www.notion.so/Sumsub-KYC-integration-in-onboarding-app-607b598c9c1d4d12adc71725e2ab5e7e)

Co-authored-by: Adw8 <adwaitgharpure@gmail.com>
Reviewed-on: cerc-io/testnet-onboarding-app#8

src/components/TermsAndConditionsCard.tsx

@@ -32,7 +32,7 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce
   };
 
   return (
-    <Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', display: isHidden ? "none" : "block" }}>
+    <Paper elevation={3} sx={{ padding: 2, marginTop: 2, display: isHidden ? "none" : "block", marginBottom: 3 }} >
       <FormControl component="fieldset">
         <FormLabel component="legend">Select your role</FormLabel>
         <RadioGroup

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 { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from "../utils/sumsub";
 
 interface Participant {
   cosmosAddress: string;
@@ -23,6 +27,12 @@ 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, payload);
+  };
 
   useEffect(() => {
     const fetchParticipants = async () => {
@@ -46,13 +56,28 @@ const OnboardingSuccess = () => {
     fetchParticipants();
   }, [cosmosAddress]);
 
+  useEffect(() => {
+    const getToken = async (userId: string) => {
+      const newToken = await fetchAccessToken(userId);
+      setToken(newToken);
+      setLoading(false);
+    };
+
+    if (cosmosAddress) {
+      getToken(cosmosAddress).catch(error => {
+        console.error(error);
+        alert("Failed to fetch token");
+      });
+    }
+  }, [cosmosAddress]);
+
   return (
     <Box
       sx={{
         display: "flex",
         flexDirection: "column",
-        marginTop: "100px",
-        gap: "10px",
+        marginTop: 6,
+        gap: 1,
       }}
     >
       <Typography variant="h5">Transaction Successful</Typography>
@@ -64,6 +89,7 @@ const OnboardingSuccess = () => {
           backgroundColor: "lightgray",
           padding: 3,
           wordWrap: "break-word",
+          marginBottom: 6,
         }}
       >
         <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
@@ -78,6 +104,16 @@ const OnboardingSuccess = () => {
           )}
         </pre>
       </Box>
+      <Typography variant="h5">KYC Status</Typography>
+      {!loading && token && cosmosAddress && (
+        <SumsubWebSdk
+          accessToken={token}
+          expirationHandler={getAccessTokenExpirationHandler(cosmosAddress)}
+          config={config}
+          options={options}
+          onMessage={messageHandler}
+        />
+      )}
       <SnackbarProvider />
     </Box>
   );

src/pages/SignWithCosmos.tsx

@@ -147,8 +147,8 @@ const SignWithCosmos = () => {
       sx={{
         display: "flex",
         flexDirection: "column",
-        marginY: "100px",
-        gap: "10px",
+        marginTop: 6,
+        gap: 1,
       }}
     >
       <Typography variant="h5" display={`${isTncAccepted ? "none" : "block"}`}>Please accept terms and conditions to continue</Typography>
@@ -190,7 +190,10 @@ const SignWithCosmos = () => {
         </pre>
       </Box>
 
-      <Box>
+      <Box
+        sx={{
+          paddingBottom: 2,
+        }}>
         <LoadingButton
           variant="contained"
           onClick={async () => {

src/pages/SignWithNitroKey.tsx

@@ -75,11 +75,11 @@ const SignWithNitroKey = () => {
     <div>
       {session ? (
         <Box
-          style={{
+          sx={{
             display: "flex",
             flexDirection: "column",
-            marginTop: "100px",
-            gap: "10px",
+            marginTop: 6,
+            gap: 1,
           }}
         >
           <Typography variant="h5">Sign with Nitro key</Typography>
@@ -130,7 +130,7 @@ const SignWithNitroKey = () => {
               variant="contained"
               onClick={signEth}
               disabled={!Boolean(ethAddress)}
-              style={{ marginTop: "20px" }}
+              sx={{ marginTop: 2 }}
               loading={isLoading}
             >
               Sign using Nitro key

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';
-
-const config = {
-  lang: "en", // language of WebSDK texts and comments (ISO 639-1 format)
-  theme: "light",
-};
-
-const options = {
-  addViewportTag: false,
-  adaptIframeHeight: true,
-};
+import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from '../utils/sumsub';
 
 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);
 
@@ -84,6 +69,9 @@ const UserVerification = () => {
       if ((payload as EventPayload<'idCheck.onApplicantStatusChanged'>).reviewStatus === 'pending') {
         setApplicationSubmitted(true);
       }
+      if ((payload as any).reviewResult.reviewAnswer === 'GREEN') {
+        setApplicationSubmitted(true);
+      }
     }
   };
 
@@ -93,17 +81,17 @@ const UserVerification = () => {
         sx={{
           display: "flex",
           flexDirection: "column",
-          marginTop: "100px",
-          gap: "10px",
+          marginTop: 12,
+          gap: 1,
         }}
       >
         <Typography variant="h5">User verification</Typography>
         <div id="sumsub-websdk-container"></div>
       </Box>
-      {!loading && token && (
+      {!loading && token && userId && (
         <SumsubWebSdk
           accessToken={token}
-          expirationHandler={accessTokenExpirationHandler}
+          expirationHandler={getAccessTokenExpirationHandler(userId)}
           config={config}
           options={options}
           onMessage={messageHandler}

src/utils/sumsub.ts

@@ -14,3 +14,20 @@ 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 getAccessTokenExpirationHandler = (userId: string) => {
+  return async () => {
+    const newToken = await fetchAccessToken(userId);
+    return newToken;
+  }
+};