Use sumsub web SDK for KYC form without access token generation (#1)

Part of https://www.notion.so/Sumsub-KYC-integration-in-onboarding-app-607b598c9c1d4d12adc71725e2ab5e7e

Co-authored-by: Adw8 <adwaitgharpure@gmail.com>
Reviewed-on: deep-stack/testnet-onboarding-app#1

.env.example

@@ -6,3 +6,4 @@ REACT_APP_LACONICD_RPC_ENDPOINT=http://localhost:26657
 REACT_APP_LACONICD_DENOM=photon
 REACT_APP_FAUCET_ENDPOINT=http://localhost:4000
 REACT_APP_WALLET_META_URL=http://localhost:3000
+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",
+    "@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

@@ -6,6 +6,7 @@ import SignWithNitroKey from "./pages/SignWithNitroKey";
 import SignWithCosmos from "./pages/SignWithCosmos";
 import PageNotFound from "./pages/PageNotFound";
 import OnboardingSuccess from "./pages/OnboardingSuccess";
+import UserVerification from "./pages/UserVerification";
 import SignPageLayout from "./layout/SignPageLayout";
 import { WalletConnectProvider } from "./context/WalletConnectContext";
 
@@ -15,8 +16,12 @@ function App() {
       <WalletConnectProvider>
         <Routes>
           <Route path="/" element={<ConnectWallet />} />
+          <Route
+            path="/user-verification"
+            element={<UserVerification />}
+          />
           <Route element={<SignPageLayout />}>
-            <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
+            <Route path="/sign-with-nitro-key/:userId" element={<SignWithNitroKey />} />
             <Route
               path="/sign-with-cosmos/:cosmosAddress/:ethSignature"
               element={<SignWithCosmos />}

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,84 @@
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom';
+
+import { Box, Typography } from '@mui/material'
+import SumsubWebSdk from '@sumsub/websdk-react'
+
+const config = {
+  lang: "en", //language of WebSDK texts and comments (ISO 639-1 format)
+  theme: "light",
+}
+
+const options = {
+  addViewportTag: false,
+  adaptIframeHeight: true
+}
+
+const UserVerification = () => {
+  const [userId, setUserId] = useState<String>('');
+  const [applicationSubmitted, setApplicationSubmitted] = useState<boolean>(false);
+
+  const navigate = useNavigate();
+
+  useEffect(()=>{
+    if (applicationSubmitted && userId !== '') {
+      navigate(`/sign-with-nitro-key/${userId}`)
+    }
+  }, [applicationSubmitted, userId, 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 ) => {
+    if (event === 'idCheck.onApplicantLoaded') {
+      setUserId(payload.applicantId);
+    }
+
+    if (event === 'idCheck.onApplicantSubmitted'){
+      setApplicationSubmitted(true);
+    }
+
+    if (event === 'idCheck.onApplicantStatusChanged') {
+      if (payload.reviewStatus === 'pending') {
+        setApplicationSubmitted(true);
+      }
+    }
+  }
+
+  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}
+        onMessage={messageHandler}
+      />
+    </>
+  )
+}
+
+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"