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"; +};