diff --git a/src/pages/UserVerification.tsx b/src/pages/UserVerification.tsx index 9bab1b4..c0c93bf 100644 --- a/src/pages/UserVerification.tsx +++ b/src/pages/UserVerification.tsx @@ -1,26 +1,49 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import { Box, Typography } from '@mui/material'; +import SumsubWebSdk from '@sumsub/websdk-react'; -import { Box, Typography } from '@mui/material' -import SumsubWebSdk from '@sumsub/websdk-react' +import { fetchToken } from '../utils/getToken'; const config = { - lang: "en", //language of WebSDK texts and comments (ISO 639-1 format) + lang: "en", // language of WebSDK texts and comments (ISO 639-1 format) theme: "light", -} +}; const options = { addViewportTag: false, - adaptIframeHeight: true -} + adaptIframeHeight: true, +}; const UserVerification = () => { - const [kycId, setKycId] = useState(''); + const [kycId, setKycId] = useState(''); const [applicationSubmitted, setApplicationSubmitted] = useState(false); + const [token, setToken] = useState(''); + const [loading, setLoading] = useState(true); const navigate = useNavigate(); - useEffect(()=>{ + useEffect(() => { + const getToken = async (kycId: string) => { + console.log(kycId); + const newToken = await fetchToken(kycId); + if (newToken) { + console.log('newToken: ', newToken); + setToken(newToken); + } else { + alert("Failed to fetch token"); + } + setLoading(false); + }; + + if (kycId) { + console.log(kycId); + getToken(kycId); + } + + }, [kycId]); + + useEffect(() => { if (applicationSubmitted && kycId !== '') { navigate("/connect-wallet", { state: { @@ -30,25 +53,18 @@ const UserVerification = () => { } }, [applicationSubmitted, kycId, navigate]); - // TODO: Implement const accessTokenExpirationHandler = async () => { alert("Please renew token"); return "Token expired"; - } + }; - const accessToken = { - // TODO: Programmatically fetch access-token using sumsub API - "token": process.env.REACT_APP_SUMSUB_TOKEN!, - // TODO: Generate random user-id string - "userId": "alice" - } - - const messageHandler = (event: any, payload: any ) => { + const messageHandler = (event: any, payload: any) => { + console.log(event); if (event === 'idCheck.onApplicantLoaded') { setKycId(payload.applicantId); } - if (event === 'idCheck.onApplicantSubmitted'){ + if (event === 'idCheck.onApplicantSubmitted') { setApplicationSubmitted(true); } @@ -57,7 +73,7 @@ const UserVerification = () => { setApplicationSubmitted(true); } } - } + }; return ( <> @@ -70,19 +86,19 @@ const UserVerification = () => { }} > User verification -
- -
+
- + {!loading && token && ( + + )} - ) -} + ); +}; -export default UserVerification +export default UserVerification; diff --git a/src/utils/getToken.ts b/src/utils/getToken.ts new file mode 100644 index 0000000..d424c67 --- /dev/null +++ b/src/utils/getToken.ts @@ -0,0 +1,21 @@ +export const fetchToken = async (userId: string) => { + try { + const response = await fetch('http://localhost:3000/generate-token', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ userId }) + }); + + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + const data = await response.json(); + return data.token; + } catch (error) { + console.error('Error fetching token:', error); + return null; + } +};