From bb18961c77a17c139c99cc98a89a8f4f22a7b273 Mon Sep 17 00:00:00 2001 From: Adw8 Date: Wed, 24 Jul 2024 19:11:52 +0530 Subject: [PATCH] Setup page for user verification --- package.json | 16 ++++---- src/App.tsx | 5 +++ src/pages/UserVerification.tsx | 75 ++++++++++++++++++++++++++++++++++ yarn.lock | 10 +++++ 4 files changed, 99 insertions(+), 7 deletions(-) create mode 100644 src/pages/UserVerification.tsx 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..8d237e2 100644 --- a/src/App.tsx +++ b/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={} > + } + > } /> diff --git a/src/pages/UserVerification.tsx b/src/pages/UserVerification.tsx new file mode 100644 index 0000000..658b026 --- /dev/null +++ b/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 ( + <> + + + 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"