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
This commit is contained in:
nabarun 2024-07-30 10:57:07 +00:00
parent 2a24985930
commit cfaa1711c3
6 changed files with 76 additions and 32 deletions

View File

@ -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

View File

@ -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>
);

View File

@ -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 () => {

View File

@ -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

View File

@ -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');
@ -39,11 +29,11 @@ const UserVerification = () => {
const getToken = async (userId: string) => {
console.log(userId);
const newToken = await fetchAccessToken(userId);
setToken(newToken);
setLoading(false);
};
if (userId) {
getToken(userId).catch(error => {
console.error(error);
@ -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}

View File

@ -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;
}
};