From cfaa1711c3e80750de66bb47592f730de3dff405 Mon Sep 17 00:00:00 2001 From: nabarun Date: Tue, 30 Jul 2024 10:57:07 +0000 Subject: [PATCH] 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 Reviewed-on: https://git.vdb.to/cerc-io/testnet-onboarding-app/pulls/8 --- src/components/TermsAndConditionsCard.tsx | 2 +- src/pages/OnboardingSuccess.tsx | 40 +++++++++++++++++++++-- src/pages/SignWithCosmos.tsx | 9 +++-- src/pages/SignWithNitroKey.tsx | 8 ++--- src/pages/UserVerification.tsx | 32 ++++++------------ src/utils/sumsub.ts | 17 ++++++++++ 6 files changed, 76 insertions(+), 32 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 { } const [participant, setParticipant] = useState(); + const [token, setToken] = useState(''); + const [loading, setLoading] = useState(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 ( Transaction Successful @@ -64,6 +89,7 @@ const OnboardingSuccess = () => { backgroundColor: "lightgray", padding: 3, wordWrap: "break-word", + marginBottom: 6, }} > 
@@ -78,6 +104,16 @@ const OnboardingSuccess = () => {
           )}
+ KYC Status + {!loading && token && cosmosAddress && ( + + )} ); diff --git a/src/pages/SignWithCosmos.tsx b/src/pages/SignWithCosmos.tsx index 1107b0e..431af88 100644 --- a/src/pages/SignWithCosmos.tsx +++ b/src/pages/SignWithCosmos.tsx @@ -147,8 +147,8 @@ const SignWithCosmos = () => { 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 3efa720..fb62e1b 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 { config, fetchAccessToken, getAccessTokenExpirationHandler, 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); @@ -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, }} > User verification
- {!loading && token && ( + {!loading && token && userId && ( => { 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; + } +};