deep-stack/testnet-onboarding-app
3
0
Fork 0
forked from cerc-io/testnet-onboarding-app
Code Pull Requests Activity

Setup page for user verification

Browse Source
This commit is contained in:
Adw8 2024-07-24 19:11:52 +05:30
parent d48f2aaac1
commit bb18961c77
4 changed files with 99 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package.json
View File

@ -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",

5
src/App.tsx
View File

@ -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>

75
src/pages/UserVerification.tsx Normal file
View File

@ -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

10
yarn.lock
View File

@ -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"