cerc-io/testnet-onboarding-app
17
0
Fork 2
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

Integrate sumsub KYC with terms & conditions #6

Merged
nabarun merged 5 commits from deep-stack/testnet-onboarding-app:kyc-integration into main 2024-07-30 08:22:10 +00:00
Conversation 0 Commits 5 Files Changed 16 +459 -82
16 changed files with 459 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

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

18
package.json
View File

@ -3,13 +3,15 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@cerc-io/registry-sdk": "^0.2.2",
"@cerc-io/registry-sdk": "^0.2.4",
"@cosmjs/stargate": "^0.32.4",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@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",

15
src/App.tsx
View File

@ -7,22 +7,31 @@ import SignWithCosmos from "./pages/SignWithCosmos";
import PageNotFound from "./pages/PageNotFound";
import OnboardingSuccess from "./pages/OnboardingSuccess";
import SignPageLayout from "./layout/SignPageLayout";
import UserVerification from "./pages/UserVerification";
import TermsAndConditions from "./pages/TermsAndConditions";
import Header from "./components/Header";
import { WalletConnectProvider } from "./context/WalletConnectContext";
function App() {
return (
<Router>
<Header />
<WalletConnectProvider>
<Routes>
<Route path="/" element={<ConnectWallet />} />
<Route path="/" element={<TermsAndConditions />} />
<Route path="/connect-wallet" element={<ConnectWallet />} />
<Route element={<SignPageLayout />}>
<Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
<Route
path="/sign-with-cosmos/:cosmosAddress/:ethSignature"
path="/user-verification"
element={<UserVerification />}
/>
<Route
path="/sign-with-cosmos"
element={<SignWithCosmos />}
/>
<Route
path="/onboarding-success/:cosmosAddress"
path="/onboarding-success"
element={<OnboardingSuccess />}
></Route>
</Route>

33
src/components/Header.tsx Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { AppBar, Toolbar, Avatar, Box, IconButton } from '@mui/material';
const Header: React.FC = () => {
const location = useLocation()
return (
<AppBar position="static" color="inherit">
<Toolbar>
<Link to={location.pathname === "/" ? "/" : "/connect-wallet"} style={{ color: "inherit", textDecoration: "none" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Avatar
alt="Laconic logo"
src="https://avatars.githubusercontent.com/u/92608123"
/>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
sx={{ ml: 2, mr: 2 }}
>
Testnet Onboarding
</IconButton>
</Box>
</Link>
</Toolbar>
</AppBar>
);
};
export default Header;

83
src/components/TermsAndConditionsCard.tsx Normal file
View File

@ -0,0 +1,83 @@
import React, { useState } from 'react';
import { Typography, Button, Box, Paper, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, Link, Checkbox } from '@mui/material';
import TermsAndConditionsDialog from './TermsAndConditionsDialog';
export enum Role {
Validator = 'validator',
Participant = 'participant'
}
const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: Role) => void }) => {
const [selectedRole, setSelectedRole] = useState<Role>(Role.Participant);
const [checked, setChecked] = useState(false);
const [isHidden, setIsHidden] = useState(false);
const [isDialogOpen, setisDialogOpen] = useState(false)
const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
};
const handleContinue = () => {
handleAccept()
setIsHidden(true)
}
const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSelectedRole(event.target.value as Role);
handleRoleChange((event.target as HTMLInputElement).value === Role.Validator ? Role.Validator : Role.Participant);
setChecked(false);
};
return (
<Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', display: isHidden ? "none" : "block" }}>
<FormControl component="fieldset">
<FormLabel component="legend">Select your role</FormLabel>
<RadioGroup
aria-label="roles"
name="roles"
value={selectedRole}
onChange={handleRadioChange}
>
<FormControlLabel
value={Role.Validator}
control={<Radio />}
label="Validator"
/>
<FormControlLabel
value={Role.Participant}
control={<Radio />}
label="Participant"
/>
</RadioGroup>
</FormControl>
<Box mt={2} display="flex" alignItems="center">
<Checkbox
checked={checked}
onChange={handleCheckboxChange}
color="primary"
/>
<Typography variant="body1">
I accept the <Link onClick={() => setisDialogOpen(true)} target="_blank" rel="noopener">
terms and conditions
</Link>
</Typography>
</Box>
<Box mt={4} display="flex" justifyContent="end">
<Button
variant="contained"
color="primary"
onClick={handleContinue}
disabled={!checked}
>
Continue
</Button>
</Box>
<TermsAndConditionsDialog isValidator = { selectedRole === Role.Validator } open={isDialogOpen} onClose={() => setisDialogOpen(false)}/>
</Paper>
);
};
export default TermsAndConditionsCard;

34
src/components/TermsAndConditionsDialog.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button, Typography } from '@mui/material';
import { TNC_PARTICIPANT_CONTENT, TNC_VALIDATOR_CONTENT } from '../constants';
interface TermsDialogProps {
isValidator: boolean;
open: boolean;
onClose: () => void;
}
const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ isValidator, open, onClose }) => {
return (
<Dialog open={open} onClose={onClose}>
<DialogTitle>Terms and Conditions</DialogTitle>
<DialogContent>
<Typography variant="h6" gutterBottom>
Onboard as a {isValidator ? "validator" : "participant"}
</Typography>
<DialogContentText>
<div dangerouslySetInnerHTML={{__html: isValidator ? TNC_VALIDATOR_CONTENT : TNC_PARTICIPANT_CONTENT }} />
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
);
};
export default TermsAndConditionsDialog;

29
src/constants.ts Normal file
View File

@ -0,0 +1,29 @@
export const TNC_GENERIC_CONTENT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
export const TNC_VALIDATOR_CONTENT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
export const TNC_PARTICIPANT_CONTENT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;

22
src/layout/SignPageLayout.tsx
View File

@ -1,14 +1,12 @@
import React from "react";
import { Outlet, useNavigate, Link } from "react-router-dom";
import { Outlet, useNavigate } from "react-router-dom";
import {
Toolbar,
IconButton,
Avatar,
Button,
Typography,
Container,
Box,
Container
} from "@mui/material";
import { useWalletConnectContext } from "../context/WalletConnectContext";
@ -25,22 +23,6 @@ const SignPageLayout = () => {
return (
<>
<Toolbar variant="dense">
<Link to="/" style={{ color: "inherit", textDecoration: "none" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Avatar
alt="Laconic logo"
src="https://avatars.githubusercontent.com/u/92608123"
/>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
sx={{ ml: 2, mr: 2 }}
>
Testnet Onboarding
</IconButton>
</Box>
</Link>
<Button
variant="outlined"

26
src/pages/ConnectWallet.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {useNavigate } from "react-router-dom";
import { Typography, Button, Box, Container, Avatar } from "@mui/material";
import { Button, Box, Container } from "@mui/material";
import { useWalletConnectContext } from "../context/WalletConnectContext";
@ -10,11 +10,13 @@ const ConnectWallet = () => {
const navigate = useNavigate();
useEffect(() => {
if (session) {
navigate("/sign-with-nitro-key");
}
}, [session, navigate]);
}, [session, navigate,]);
const handler = async () => {
await connect();
@ -30,28 +32,12 @@ const ConnectWallet = () => {
justifyContent="center"
padding={5}
>
<Box display="flex" alignItems="center">
<Avatar
alt="Laconic logo"
src="https://avatars.githubusercontent.com/u/92608123"
/>
<Typography
variant="h4"
component="h6"
style={{ marginLeft: "10px" }}
>
Testnet Onboarding
</Typography>
</Box>
<Typography variant="h6" component="h6" style={{ marginTop: "30px" }}>
Connect wallet
</Typography>
<Button
variant="contained"
onClick={handler}
style={{ marginTop: "20px" }}
>
Connect
Connect Wallet
</Button>
</Box>
</Container>

21
src/pages/OnboardingSuccess.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import { SnackbarProvider, enqueueSnackbar } from "notistack";
import { useParams } from "react-router-dom";
import { useLocation } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import { Registry } from "@cerc-io/registry-sdk";
@ -8,6 +8,8 @@ import { Registry } from "@cerc-io/registry-sdk";
interface Participant {
cosmosAddress: string;
nitroAddress: string;
role: string;
kycId: string;
}
const registry = new Registry(
@ -15,18 +17,21 @@ const registry = new Registry(
);
const OnboardingSuccess = () => {
const { cosmosAddress } = useParams();
const location = useLocation();
const { cosmosAddress } = location.state as {
cosmosAddress?: string
}
const [participant, setParticipant] = useState<Participant>();
useEffect(() => {
const fetchParticipants = async () => {
try {
const allParticipants: Participant[] = await registry.getParticipants();
const participant = allParticipants.find(
(participant) => participant.cosmosAddress === cosmosAddress
);
if (!cosmosAddress) {
enqueueSnackbar("Cosmos address is not provided", { variant: "error" });
return;
}
const participant: Participant = await registry.getParticipantByAddress(cosmosAddress);
if (!participant) {
enqueueSnackbar("Participant not found", { variant: "error" });
return;
@ -66,6 +71,8 @@ const OnboardingSuccess = () => {
<div>
Cosmos Address: {participant.cosmosAddress} <br />
Nitro Address: {participant.nitroAddress} <br />
Role: {participant.role} <br />
KYC ID: {participant.kycId} <br />
<br />
</div>
)}

45
src/pages/SignWithCosmos.tsx
View File

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom";
import { useLocation, useNavigate } from "react-router-dom";
import { SnackbarProvider, enqueueSnackbar } from "notistack";
import { Box, Card, CardContent, Grid, Typography } from "@mui/material";
@ -11,20 +11,31 @@ import {
import { StargateClient } from "@cosmjs/stargate";
import { useWalletConnectContext } from "../context/WalletConnectContext";
import TermsAndConditionsCard, {Role} from "../components/TermsAndConditionsCard";
const SignWithCosmos = () => {
const { session, signClient } = useWalletConnectContext();
const { cosmosAddress, ethSignature } = useParams();
const location = useLocation();
const [isLoading, setIsLoading] = useState(false);
const [balance, setBalance] = useState('');
const [isRequesting, setIsRequesting] = useState(false);
const [isTncAccepted, setIsTncAccepted] = useState(false);
const [role, setRole] = useState(Role.Participant);
const navigate = useNavigate();
const location = useLocation();
const innerMessage = location.state;
const ethAddress = innerMessage.address;
const {message: innerMessage, cosmosAddress, receivedEthSig: ethSignature, kycId} = location.state as {
message?: {
msg: string;
address: string;
};
cosmosAddress?: string;
receivedEthSig?: string;
kycId?: string;
};
const ethAddress = innerMessage!.address;
const createCosmosClient = useCallback(async (endpoint: string) => {
return await StargateClient.connect(endpoint);
@ -35,12 +46,14 @@ const SignWithCosmos = () => {
return {
typeUrl: typeUrlMsgOnboardParticipant,
value: {
participant: cosmosAddress,
participant: cosmosAddress!,
ethPayload: innerMessage,
ethSignature,
ethSignature: ethSignature!,
kycId: kycId!,
role
},
};
}, [cosmosAddress, innerMessage, ethSignature]);
}, [cosmosAddress, innerMessage, ethSignature, kycId, role]);
const handleTokenRequest = async () => {
try {
@ -100,7 +113,11 @@ const SignWithCosmos = () => {
if (responseFromWallet.code !== 0) {
enqueueSnackbar("Transaction not sent", { variant: "error" });
} else {
navigate(`/onboarding-success/${cosmosAddress}`);
navigate("/onboarding-success", {
state: {
cosmosAddress
}
});
}
} catch (error) {
console.error(error);
@ -130,10 +147,12 @@ const SignWithCosmos = () => {
sx={{
display: "flex",
flexDirection: "column",
marginTop: "100px",
marginY: "100px",
gap: "10px",
}}
>
<Typography variant="h5" display={`${isTncAccepted ? "none" : "block"}`}>Please accept terms and conditions to continue</Typography>
<TermsAndConditionsCard handleAccept={() => setIsTncAccepted(true)} handleRoleChange={setRole}/>
<Typography variant="h5">Send transaction to chain</Typography>
<Typography>Cosmos Account:</Typography>
<Card className='mt-1 mb-1'>
@ -147,7 +166,7 @@ const SignWithCosmos = () => {
<LoadingButton
variant="contained"
onClick={handleTokenRequest}
disabled={isRequesting}
disabled={isTncAccepted ? isRequesting : !isTncAccepted}
loading={isRequesting}
>
Request tokens from Faucet
@ -178,7 +197,7 @@ const SignWithCosmos = () => {
await sendTransaction(onboardParticipantMsg);
}}
loading={isLoading}
disabled={balance === '0'}
disabled={isTncAccepted ? (balance === '0') : !isTncAccepted}
>
Send transaction
</LoadingButton>

12
src/pages/SignWithNitroKey.tsx
View File

@ -15,6 +15,7 @@ import { utf8ToHex } from "@walletconnect/encoding";
import { useWalletConnectContext } from "../context/WalletConnectContext";
const SignWithNitroKey = () => {
const { session, signClient, checkPersistedState } =
useWalletConnectContext();
@ -34,7 +35,7 @@ const SignWithNitroKey = () => {
const message = useMemo(() => {
return {
msg: "Register my account as a validator on the Laconic network",
msg: "Register my account as a participant on the Laconic network",
address: ethAddress,
};
}, [ethAddress]);
@ -55,8 +56,12 @@ const SignWithNitroKey = () => {
});
setIsLoading(false)
setEthSignature(ethSignature);
navigate(`/sign-with-cosmos/${cosmosAddress}/${receivedEthSig}`, {
state: message,
navigate("/user-verification", {
state: {
message,
cosmosAddress,
receivedEthSig,
},
});
} catch (error) {
console.log("err in signing ", error);
@ -66,7 +71,6 @@ const SignWithNitroKey = () => {
}
};
return (
<div>
{session ? (

48
src/pages/TermsAndConditions.tsx Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Container, Typography, Button, Box, Paper } from '@mui/material';
import { TNC_GENERIC_CONTENT } from '../constants';
const TermsAndConditions = () => {
const navigate = useNavigate();
const handleAccept = () => {
navigate('/connect-wallet');
};
return (
<Container maxWidth="md">
<Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', height: '80vh', display: 'flex', flexDirection: 'column' }}>
<Typography variant="h4" gutterBottom>
Terms and Conditions
</Typography>
<Box
style={{
overflowY: 'auto',
flexGrow: 1,
paddingRight: '1rem',
marginBottom: '1rem',
}}
>
<Typography
variant="body1"
gutterBottom
component="div"
>
<div dangerouslySetInnerHTML={{__html: TNC_GENERIC_CONTENT}} />
</Typography>
</Box>
<Box mt={2} display="flex" justifyContent="center">
<Button variant="contained" color="primary" onClick={handleAccept}>
Accept
</Button>
</Box>
</Paper>
</Container>
);
};
export default TermsAndConditions;

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

@ -0,0 +1,116 @@
import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Box, Typography } from '@mui/material';
import SumsubWebSdk from '@sumsub/websdk-react';
import { MessageHandler } from '@sumsub/websdk';
import { EventPayload } from '@sumsub/websdk/types/types';
import { fetchAccessToken } from '../utils/sumsub';
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 [kycId, setKycId] = useState<string>('unknown');
const [applicationSubmitted, setApplicationSubmitted] = useState<boolean>(false);
const [token, setToken] = useState<string>('');
const [loading, setLoading] = useState<boolean>(true);
const location = useLocation();
const navigate = useNavigate();
const {message, cosmosAddress, receivedEthSig} = location.state as {
message?: string;
cosmosAddress?: string;
receivedEthSig?: string;
};
const userId = cosmosAddress;
useEffect(() => {
const getToken = async (userId: string) => {
console.log(userId);
const newToken = await fetchAccessToken(userId);
setToken(newToken);
setLoading(false);
};
if (userId) {
getToken(userId).catch(error => {
console.error(error);
alert("Failed to fetch token");
});
}
}, [userId]);
useEffect(() => {
if (applicationSubmitted && kycId !== '') {
navigate("/sign-with-cosmos", {
state: {
message,
cosmosAddress,
receivedEthSig,
kycId,
}})
}
}, [applicationSubmitted, kycId, navigate, cosmosAddress, message, receivedEthSig]);
const accessTokenExpirationHandler = async () => {
alert("Please renew token");
return "Token expired";
};
const messageHandler: MessageHandler = (event, payload) => {
console.log('sumsubEvent:', event);
if (event === 'idCheck.onApplicantLoaded') {
setKycId((payload as EventPayload<'idCheck.onApplicantLoaded'>).applicantId);
}
if (event === 'idCheck.onApplicantSubmitted') {
setApplicationSubmitted(true);
}
if (event === 'idCheck.onApplicantStatusChanged') {
if ((payload as EventPayload<'idCheck.onApplicantStatusChanged'>).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>
{!loading && token && (
<SumsubWebSdk
accessToken={token}
expirationHandler={accessTokenExpirationHandler}
config={config}
options={options}
onMessage={messageHandler}
/>
)}
</>
);
};
export default UserVerification;

16
src/utils/sumsub.ts Normal file
View File

@ -0,0 +1,16 @@
export const fetchAccessToken = async (userId: string): Promise<string> => {
const response = await fetch(`${process.env.REACT_APP_SUMSUB_API_ENDPOINT}/generate-token`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ userId })
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return data.token;
};

20
yarn.lock
View File

@ -1183,10 +1183,10 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
"@cerc-io/registry-sdk@^0.2.2":
version "0.2.2"
resolved "https://git.vdb.to/api/packages/cerc-io/npm/%40cerc-io%2Fregistry-sdk/-/0.2.2/registry-sdk-0.2.2.tgz#2e8a533f069b4bb9f4cd4798e783f52e29167d0d"
integrity sha512-ocRMbWtdewOg02ORfK1U+qbTqB46anHP4ApXokGkY4d+mFSApR3sdUEi2geHcs8oh+SG8YAp7LUJ9AAJneNY8g==
"@cerc-io/registry-sdk@^0.2.4":
version "0.2.4"
resolved "https://git.vdb.to/api/packages/cerc-io/npm/%40cerc-io%2Fregistry-sdk/-/0.2.4/registry-sdk-0.2.4.tgz#60e4e75b1e6a957cf2b97490af4fda4af07b105f"
integrity sha512-hRZJP+s+uBvfrqtmQ38pmf74SyfFDC65AVwvWigJGxc6uKJG4jyuMyhsoD1P4XkjwAQSnFO89TuDC5JGkdXyrA==
dependencies:
"@cosmjs/amino" "^0.28.1"
"@cosmjs/crypto" "^0.28.1"
@ -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"
@ -12199,8 +12209,6 @@ tr46@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
dependencies:
punycode "^2.1.0"
tr46@^2.1.0:
version "2.1.0"