Implement sumsub websdk integration

This commit is contained in:
Adw8 2024-07-25 11:35:37 +05:30
parent bb18961c77
commit aa700e3f0a
3 changed files with 28 additions and 48 deletions

View File

@ -5,3 +5,4 @@ REACT_APP_REGISTRY_GQL_ENDPOINT=http://localhost:9473/api
REACT_APP_LACONICD_RPC_ENDPOINT=http://localhost:26657
REACT_APP_LACONICD_DENOM=photon
REACT_APP_FAUCET_ENDPOINT=http://localhost:4000
REACT_APP_SUMSUB_TOKEN=

View File

@ -12,7 +12,7 @@ const ConnectWallet = () => {
useEffect(() => {
if (session) {
navigate("/sign-with-nitro-key");
navigate("/user-verification");
}
}, [session, navigate]);

View File

@ -1,60 +1,33 @@
import { Box, Typography } from '@mui/material'
import { SnsWebSdk } from '@sumsub/websdk';
import SumsubWebSdk from '@sumsub/websdk-react'
import React from 'react'
import { Box, Typography } from '@mui/material'
import SumsubWebSdk from '@sumsub/websdk-react'
const UserVerification = () => {
function launchWebSdk(accessToken, applicantEmail, applicantPhone, customI18nMessages) {
let snsWebSdkInstance = SnsWebSdk
.init(
accessToken,
// token update callback, must return Promise
// Access token expired
// get a new one and pass it to the callback to re-initiate the WebSDK
() => this.getNewAccessToken()
)
.withConf({
lang: "en", //language of WebSDK texts and comments (ISO 639-1 format)
email: applicantEmail,
phone: applicantPhone,
theme: "dark" | "light",
})
.withOptions({ addViewportTag: false, adaptIframeHeight: true })
// see below what kind of messages WebSDK generates
.on("idCheck.onStepCompleted", (payload) => {
console.log("onStepCompleted", payload);
})
.on("idCheck.onError", (error) => {
console.log("onError", error);
})
.build();
// you are ready to go:
// just launch the WebSDK by providing the container element for it
snsWebSdkInstance.launch("#sumsub-websdk-container");
const config = {
lang: "en", //language of WebSDK texts and comments (ISO 639-1 format)
// email: applicantEmail,
// phone: applicantPhone,
theme: "light",
}
// function getNewAccessToken() {
// return Promise.resolve(newAccessToken); // get a new token from your backend
// }
const options = {
addViewportTag: false,
adaptIframeHeight: true
}
const accessTokenExpirationHandler = async () => {
return "Token expired";
}
const accessToken = {
"token": process.env.REACT_APP_SUMSUB_TOKEN,
"userId": "deepstack1234"
}
const accessToken = "93d3d449a293765748731383b55f6794"
return (
<>
<SumsubWebSdk
accessToken={accessToken}
expirationHandler={accessTokenExpirationHandler}
config={config}
options={options}
onMessage={messageHandler}
onError={errorHandler}
/>
<Box
sx={{
display: "flex",
@ -68,6 +41,12 @@ const UserVerification = () => {
</div>
</Box>
<SumsubWebSdk
accessToken={accessToken.token}
expirationHandler={accessTokenExpirationHandler}
config={config}
options={options}
/>
</>
)
}