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=

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",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@babel/core": "^7.16.0",
+    "@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",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@svgr/webpack": "^5.5.0",
-    "eslint-plugin-react": "^7.33.2",
-    "husky": "^9.0.11",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "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/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

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import { Box, Typography } from '@mui/material'
+import SumsubWebSdk from '@sumsub/websdk-react'
+
+const UserVerification = () => {
+
+  const config = {
+    lang: "en", //language of WebSDK texts and comments (ISO 639-1 format)
+    // email: applicantEmail,
+    // phone: applicantPhone,
+    theme: "light",
+  }
+
+  const options = {
+    addViewportTag: false,
+    adaptIframeHeight: true
+  }
+
+  const accessTokenExpirationHandler = async () => {
+    return "Token expired";
+  }
+
+  const accessToken  = {
+    "token": process.env.REACT_APP_SUMSUB_TOKEN,
+    "userId": "deepstack1234"
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          marginTop: "100px",
+          gap: "10px",
+        }}
+      >
+        <Typography variant="h5">User verification</Typography>
+        <div id="sumsub-websdk-container">
+
+        </div>
+      </Box>
+      <SumsubWebSdk
+        accessToken={accessToken.token}
+        expirationHandler={accessTokenExpirationHandler}
+        config={config}
+        options={options}
+      />
+    </>
+  )
+}
+
+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"