From ae46a2468ccfdba1b7387709efe966b9b7c21d74 Mon Sep 17 00:00:00 2001 From: nabarun Date: Thu, 25 Jul 2024 13:28:23 +0000 Subject: [PATCH] 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 Reviewed-on: https://git.vdb.to/deep-stack/testnet-onboarding-app/pulls/1 --- .env.example | 1 + package.json | 16 ++++--- src/App.tsx | 7 ++- src/pages/ConnectWallet.tsx | 2 +- src/pages/UserVerification.tsx | 84 ++++++++++++++++++++++++++++++++++ yarn.lock | 10 ++++ 6 files changed, 111 insertions(+), 9 deletions(-) create mode 100644 src/pages/UserVerification.tsx diff --git a/.env.example b/.env.example index 2c5252b..2006948 100644 --- a/.env.example +++ b/.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= diff --git a/package.json b/package.json index fbee887..b99f9ec 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 50c6eac..82125ac 100644 --- a/src/App.tsx +++ b/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() { } /> + } + /> }> - } /> + } /> } diff --git a/src/pages/ConnectWallet.tsx b/src/pages/ConnectWallet.tsx index 53b2c9f..f286d5e 100644 --- a/src/pages/ConnectWallet.tsx +++ b/src/pages/ConnectWallet.tsx @@ -12,7 +12,7 @@ const ConnectWallet = () => { useEffect(() => { if (session) { - navigate("/sign-with-nitro-key"); + navigate("/user-verification"); } }, [session, navigate]); diff --git a/src/pages/UserVerification.tsx b/src/pages/UserVerification.tsx new file mode 100644 index 0000000..6e8a015 --- /dev/null +++ b/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(''); + const [applicationSubmitted, setApplicationSubmitted] = useState(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 ( + <> + + User verification +
+ +
+ + + + ) +} + +export default UserVerification diff --git a/yarn.lock b/yarn.lock index ba8809e..3012d49 100644 --- a/yarn.lock +++ b/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"