Implement sumsub websdk integration

.env.example

@@ -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=

src/pages/ConnectWallet.tsx

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

src/pages/UserVerification.tsx

@@ -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({
+  const config = {
     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");
+    // 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}
+      />
     </>
   )
 }