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:
parent
2a24985930
commit
cfaa1711c3
@ -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
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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 () => {
|
||||
|
@ -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
|
||||
|
@ -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}
|
||||
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user