From a4cc95d9b847b5649afe0e870afbbe64f55f204a Mon Sep 17 00:00:00 2001 From: Adw8 Date: Tue, 30 Jul 2024 14:44:21 +0530 Subject: [PATCH 1/3] Display KYC status on success page --- src/pages/OnboardingSuccess.tsx | 41 +++++++++++++++++++++++++++++++++ src/pages/UserVerification.tsx | 21 +++-------------- src/utils/sumsub.ts | 15 ++++++++++++ 3 files changed, 59 insertions(+), 18 deletions(-) diff --git a/src/pages/OnboardingSuccess.tsx b/src/pages/OnboardingSuccess.tsx index 2a839f8..8f135f0 100644 --- a/src/pages/OnboardingSuccess.tsx +++ b/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(); + const [token, setToken] = useState(''); + const [loading, setLoading] = useState(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 ( { )} + {!loading && token && ( + + )} ); diff --git a/src/pages/UserVerification.tsx b/src/pages/UserVerification.tsx index 3efa720..0120d56 100644 --- a/src/pages/UserVerification.tsx +++ b/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 { accessTokenExpirationHandler, config, fetchAccessToken, options } from '../utils/sumsub'; const UserVerification = () => { const [kycId, setKycId] = useState('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); diff --git a/src/utils/sumsub.ts b/src/utils/sumsub.ts index 62a48c2..8d4e2bc 100644 --- a/src/utils/sumsub.ts +++ b/src/utils/sumsub.ts @@ -14,3 +14,18 @@ export const fetchAccessToken = async (userId: string): Promise => { 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"; +}; -- 2.45.2 From 5f356c8bce5d8e20329a21125afcd052e17c35d2 Mon Sep 17 00:00:00 2001 From: Adw8 Date: Tue, 30 Jul 2024 15:49:02 +0530 Subject: [PATCH 2/3] Navigate to sign with cosmos page if KYC verification is complete --- src/components/TermsAndConditionsCard.tsx | 2 +- src/pages/OnboardingSuccess.tsx | 6 ++++-- src/pages/SignWithCosmos.tsx | 9 ++++++--- src/pages/SignWithNitroKey.tsx | 8 ++++---- src/pages/UserVerification.tsx | 7 +++++-- 5 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/components/TermsAndConditionsCard.tsx b/src/components/TermsAndConditionsCard.tsx index 413390d..148bf8b 100644 --- a/src/components/TermsAndConditionsCard.tsx +++ b/src/components/TermsAndConditionsCard.tsx @@ -32,7 +32,7 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce }; return ( - + Select your role { sx={{ display: "flex", flexDirection: "column", - marginTop: "100px", - gap: "10px", + marginTop: 6, + gap: 1, }} > Transaction Successful @@ -96,6 +96,7 @@ const OnboardingSuccess = () => { backgroundColor: "lightgray", padding: 3, wordWrap: "break-word", + marginBottom: 6, }} > 
@@ -110,6 +111,7 @@ const OnboardingSuccess = () => {
           )}
+ KYC Status {!loading && token && ( { sx={{ display: "flex", flexDirection: "column", - marginY: "100px", - gap: "10px", + marginTop: 6, + gap: 1, }} > Please accept terms and conditions to continue @@ -190,7 +190,10 @@ const SignWithCosmos = () => { - + { diff --git a/src/pages/SignWithNitroKey.tsx b/src/pages/SignWithNitroKey.tsx index d754c6a..5358276 100644 --- a/src/pages/SignWithNitroKey.tsx +++ b/src/pages/SignWithNitroKey.tsx @@ -75,11 +75,11 @@ const SignWithNitroKey = () => {
{session ? ( Sign with Nitro key @@ -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 diff --git a/src/pages/UserVerification.tsx b/src/pages/UserVerification.tsx index 0120d56..792965e 100644 --- a/src/pages/UserVerification.tsx +++ b/src/pages/UserVerification.tsx @@ -69,6 +69,9 @@ const UserVerification = () => { if ((payload as EventPayload<'idCheck.onApplicantStatusChanged'>).reviewStatus === 'pending') { setApplicationSubmitted(true); } + if ((payload as any).reviewResult.reviewAnswer === 'GREEN') { + setApplicationSubmitted(true); + } } }; @@ -78,8 +81,8 @@ const UserVerification = () => { sx={{ display: "flex", flexDirection: "column", - marginTop: "100px", - gap: "10px", + marginTop: 12, + gap: 1, }} > User verification -- 2.45.2 From b54260bc1f1a2f20603ace090cb392f610b7f08f Mon Sep 17 00:00:00 2001 From: Adw8 Date: Tue, 30 Jul 2024 16:21:01 +0530 Subject: [PATCH 3/3] Implement expiration handler for access token --- src/pages/OnboardingSuccess.tsx | 15 ++++----------- src/pages/UserVerification.tsx | 6 +++--- src/utils/sumsub.ts | 8 +++++--- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/pages/OnboardingSuccess.tsx b/src/pages/OnboardingSuccess.tsx index 0e439eb..4249e83 100644 --- a/src/pages/OnboardingSuccess.tsx +++ b/src/pages/OnboardingSuccess.tsx @@ -7,7 +7,7 @@ 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"; +import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from "../utils/sumsub"; interface Participant { cosmosAddress: string; @@ -31,12 +31,7 @@ const OnboardingSuccess = () => { const [loading, setLoading] = useState(true); const messageHandler: MessageHandler = (event, payload) => { - console.log('sumsubEvent:', event); - - if (payload) { - console.log("Event payload is: ", payload); - } - + console.log('sumsubEvent:', event, payload); }; useEffect(() => { @@ -69,12 +64,10 @@ const OnboardingSuccess = () => { }; if (cosmosAddress) { - console.log("Cosmos addy: ", cosmosAddress); getToken(cosmosAddress).catch(error => { console.error(error); alert("Failed to fetch token"); }); - } }, [cosmosAddress]); @@ -112,10 +105,10 @@ const OnboardingSuccess = () => { KYC Status - {!loading && token && ( + {!loading && token && cosmosAddress && ( { const [kycId, setKycId] = useState('unknown'); @@ -88,10 +88,10 @@ const UserVerification = () => { User verification
- {!loading && token && ( + {!loading && token && userId && ( { - alert("Please renew token"); - return "Token expired"; +export const getAccessTokenExpirationHandler = (userId: string) => { + return async () => { + const newToken = await fetchAccessToken(userId); + return newToken; + } }; -- 2.45.2