package.json

@@ -10,6 +10,8 @@
     "@mui/icons-material": "^5.15.14",
     "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.15.14",
+    "@sumsub/websdk": "^2.3.1",
+    "@sumsub/websdk-react": "^2.3.1",
     "@walletconnect/encoding": "^1.0.2",
     "@walletconnect/modal": "^2.6.2",
     "@walletconnect/sign-client": "^2.11.3",
@@ -51,8 +53,9 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@babel/core": "^7.16.0",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -60,11 +63,8 @@
     "@types/node": "^16.18.90",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
-    "@babel/core": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@typescript-eslint/parser": "^6.13.2",
-    "@svgr/webpack": "^5.5.0",
-    "eslint-plugin-react": "^7.33.2",
-    "husky": "^9.0.11",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-named-asset-import": "^0.3.8",
@@ -78,10 +78,12 @@
     "dotenv-expand": "^5.1.0",
     "eslint": "^8.3.0",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
+    "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.4.3",
     "jest-resolve": "^27.4.2",

src/App.tsx

@@ -8,6 +8,7 @@ import PageNotFound from "./pages/PageNotFound";
 import OnboardingSuccess from "./pages/OnboardingSuccess";
 import SignPageLayout from "./layout/SignPageLayout";
 import { WalletConnectProvider } from "./context/WalletConnectContext";
+import UserVerification from "./pages/UserVerification";
 
 function App() {
   return (
@@ -25,6 +26,10 @@ function App() {
               path="/onboarding-success/:cosmosAddress"
               element={<OnboardingSuccess />}
             ></Route>
+            <Route
+              path="/user-verification"
+              element={<UserVerification />}
+            ></Route>
           </Route>
           <Route path="*" element={<PageNotFound />} />
         </Routes>

src/pages/UserVerification.tsx

@@ -0,0 +1,75 @@
+import { Box, Typography } from '@mui/material'
+import { SnsWebSdk } from '@sumsub/websdk';
+
+import SumsubWebSdk from '@sumsub/websdk-react'
+
+
+import React from '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");
+  }
+
+//   function getNewAccessToken() {
+//     return Promise.resolve(newAccessToken); // get a new token from your backend
+//   }
+
+  const accessToken = "93d3d449a293765748731383b55f6794"
+  return (
+    <>
+      <SumsubWebSdk
+        accessToken={accessToken}
+        expirationHandler={accessTokenExpirationHandler}
+        config={config}
+        options={options}
+        onMessage={messageHandler}
+        onError={errorHandler}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          marginTop: "100px",
+          gap: "10px",
+        }}
+      >
+        <Typography variant="h5">User verification</Typography>
+        <div id="sumsub-websdk-container">
+
+        </div>
+      </Box>
+    </>
+  )
+}
+
+export default UserVerification

yarn.lock

@@ -3015,6 +3015,16 @@
     "@stablelib/random" "^1.0.2"
     "@stablelib/wipe" "^1.0.1"
 
+"@sumsub/websdk-react@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@sumsub/websdk-react/-/websdk-react-2.3.1.tgz#43345cbe8bfe08f38da172b8a8d282dcbca9cb17"
+  integrity sha512-v6ZKsz3DRBNRzB36hx4pPGlMJH7Biwso3YWVtApgb0pJlhWkONUnuokhd58qnA4qwAPQAamI5JOkjFL8qsFhmw==
+
+"@sumsub/websdk@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@sumsub/websdk/-/websdk-2.3.1.tgz#20177e08dee8b15527c8a10722fa72d713e94b7f"
+  integrity sha512-pIxjLZybN+7eqVC7Hpl24Jf2Vk0ahsRuCO+wuNA8h4dna9AdnyjOxpxS4Akw7knNi8AHs4fQFHaDa9WfUPgTBQ==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"