From 6a9e85d5db423b1f09f1c4492d0f786cbf40a5ee Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Thu, 25 Jul 2024 16:56:05 +0530 Subject: [PATCH 1/7] Add terms and conditions page --- src/App.tsx | 6 ++-- src/pages/TermsAndConditions.tsx | 61 ++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 src/pages/TermsAndConditions.tsx diff --git a/src/App.tsx b/src/App.tsx index 82125ac..7d74c45 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,8 +6,9 @@ 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 UserVerification from "./pages/UserVerification"; +import TermsAndConditions from "./pages/TermsAndConditions"; import { WalletConnectProvider } from "./context/WalletConnectContext"; function App() { @@ -15,7 +16,8 @@ function App() { - } /> + } /> + } /> } diff --git a/src/pages/TermsAndConditions.tsx b/src/pages/TermsAndConditions.tsx new file mode 100644 index 0000000..85d150c --- /dev/null +++ b/src/pages/TermsAndConditions.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { Container, Typography, Button, Box, Paper } from '@mui/material'; + +const TermsAndConditions: React.FC = () => { + const navigate = useNavigate(); + + const handleAccept = () => { + navigate('/connect-wallet'); + }; + + return ( + + + + Terms and Conditions + + + + 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. + + + 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. + + + 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. + + + 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. + + + 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. + + + 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. + + + 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. + + + 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 default TermsAndConditions; -- 2.45.2 From 11465b505e8d1c4b2381cd88fd4ba3a6f022549c Mon Sep 17 00:00:00 2001 From: Shreerang Kale Date: Thu, 25 Jul 2024 17:34:04 +0530 Subject: [PATCH 2/7] Refactor app title and logo to header --- src/App.tsx | 2 ++ src/components/Header.tsx | 32 ++++++++++++++++++++++++++++++++ src/layout/SignPageLayout.tsx | 22 ++-------------------- src/pages/ConnectWallet.tsx | 20 ++------------------ 4 files changed, 38 insertions(+), 38 deletions(-) create mode 100644 src/components/Header.tsx diff --git a/src/App.tsx b/src/App.tsx index 7d74c45..6c5fedd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,11 +9,13 @@ 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 ( +
} /> diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..86faaca --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { AppBar, Toolbar, Avatar, Box, IconButton } from '@mui/material'; +import { Link, useLocation } from 'react-router-dom'; + +const Header: React.FC = () => { + const location = useLocation() + + return ( + + + + + + + Testnet Onboarding + + + + + + ); +}; + +export default Header; diff --git a/src/layout/SignPageLayout.tsx b/src/layout/SignPageLayout.tsx index 3bb5e9e..c59f459 100644 --- a/src/layout/SignPageLayout.tsx +++ b/src/layout/SignPageLayout.tsx @@ -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 ( <> - - - - - Testnet Onboarding - - - -- 2.45.2 From 723d51db0d510a0090b2d145d676d6c982ab8643 Mon Sep 17 00:00:00 2001 From: Shreerang Kale Date: Thu, 25 Jul 2024 17:50:27 +0530 Subject: [PATCH 3/7] Navigate to user verification after accepting terms and conditions --- src/App.tsx | 2 +- src/pages/TermsAndConditions.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6c5fedd..72ce01f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,11 +19,11 @@ function App() { } /> - } /> } /> + } /> }> } /> { const navigate = useNavigate(); const handleAccept = () => { - navigate('/connect-wallet'); + navigate('/user-verification'); }; return ( -- 2.45.2 From f1fea8e6f8a3f702a50a0731e95ff6fcd4c33fa5 Mon Sep 17 00:00:00 2001 From: Shreerang Kale Date: Thu, 25 Jul 2024 18:34:44 +0530 Subject: [PATCH 4/7] Pass kycId in cosmos message --- src/App.tsx | 6 +++--- src/pages/OnboardingSuccess.tsx | 6 ++++-- src/pages/SignWithCosmos.tsx | 18 +++++++++++------- src/pages/SignWithNitroKey.tsx | 8 ++++++-- src/pages/UserVerification.tsx | 10 +++++----- 5 files changed, 29 insertions(+), 19 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 72ce01f..af3f1ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,13 +25,13 @@ function App() { /> } /> }> - } /> + } /> } /> } > diff --git a/src/pages/OnboardingSuccess.tsx b/src/pages/OnboardingSuccess.tsx index 72b24e5..051a65b 100644 --- a/src/pages/OnboardingSuccess.tsx +++ b/src/pages/OnboardingSuccess.tsx @@ -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"; @@ -15,7 +15,9 @@ const registry = new Registry( ); const OnboardingSuccess = () => { - const { cosmosAddress } = useParams(); + const location = useLocation(); + const queryParams = new URLSearchParams(location.search); + const cosmosAddress = queryParams.get('cosmosAddress'); const [participant, setParticipant] = useState(); diff --git a/src/pages/SignWithCosmos.tsx b/src/pages/SignWithCosmos.tsx index bb8f44b..ba59956 100644 --- a/src/pages/SignWithCosmos.tsx +++ b/src/pages/SignWithCosmos.tsx @@ -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"; @@ -15,14 +15,17 @@ import { useWalletConnectContext } from "../context/WalletConnectContext"; const SignWithCosmos = () => { const { session, signClient } = useWalletConnectContext(); - const { cosmosAddress, ethSignature } = useParams(); + const location = useLocation(); + const queryParams = new URLSearchParams(location.search); + const cosmosAddress = queryParams.get('cosmosAddress'); + const ethSignature = queryParams.get('ethSignature'); + const kycId = queryParams.get('kycId'); const [isLoading, setIsLoading] = useState(false); const [balance, setBalance] = useState(''); const [isRequesting, setIsRequesting] = useState(false); const navigate = useNavigate(); - const location = useLocation(); const innerMessage = location.state; const ethAddress = innerMessage.address; @@ -35,12 +38,13 @@ const SignWithCosmos = () => { return { typeUrl: typeUrlMsgOnboardParticipant, value: { - participant: cosmosAddress, + participant: cosmosAddress!, ethPayload: innerMessage, - ethSignature, + ethSignature: ethSignature!, + kycId: kycId }, }; - }, [cosmosAddress, innerMessage, ethSignature]); + }, [cosmosAddress, innerMessage, ethSignature, kycId]); const handleTokenRequest = async () => { try { @@ -100,7 +104,7 @@ const SignWithCosmos = () => { if (responseFromWallet.code !== 0) { enqueueSnackbar("Transaction not sent", { variant: "error" }); } else { - navigate(`/onboarding-success/${cosmosAddress}`); + navigate(`/onboarding-success?cosmosAddress=${cosmosAddress}`); } } catch (error) { console.error(error); diff --git a/src/pages/SignWithNitroKey.tsx b/src/pages/SignWithNitroKey.tsx index 038fda2..08bff6d 100644 --- a/src/pages/SignWithNitroKey.tsx +++ b/src/pages/SignWithNitroKey.tsx @@ -1,5 +1,5 @@ import React, { useState, useMemo, useEffect } from "react"; -import { useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import { SnackbarProvider, enqueueSnackbar } from "notistack"; import canonicalStringify from "canonical-json"; @@ -15,6 +15,10 @@ import { utf8ToHex } from "@walletconnect/encoding"; import { useWalletConnectContext } from "../context/WalletConnectContext"; const SignWithNitroKey = () => { + const location = useLocation(); + const queryParams = new URLSearchParams(location.search); + const kycId = queryParams.get('kycId'); + const { session, signClient, checkPersistedState } = useWalletConnectContext(); @@ -55,7 +59,7 @@ const SignWithNitroKey = () => { }); setIsLoading(false) setEthSignature(ethSignature); - navigate(`/sign-with-cosmos/${cosmosAddress}/${receivedEthSig}`, { + navigate(`/sign-with-cosmos?cosmosAddress=${cosmosAddress}ðSignature=${receivedEthSig}&kycId=${kycId}`, { state: message, }); } catch (error) { diff --git a/src/pages/UserVerification.tsx b/src/pages/UserVerification.tsx index 6e8a015..7baa173 100644 --- a/src/pages/UserVerification.tsx +++ b/src/pages/UserVerification.tsx @@ -15,16 +15,16 @@ const options = { } const UserVerification = () => { - const [userId, setUserId] = useState(''); + const [kycId, setKycId] = useState(''); const [applicationSubmitted, setApplicationSubmitted] = useState(false); const navigate = useNavigate(); useEffect(()=>{ - if (applicationSubmitted && userId !== '') { - navigate(`/sign-with-nitro-key/${userId}`) + if (applicationSubmitted && kycId !== '') { + navigate(`/sign-with-nitro-key?kycId=${kycId}`) } - }, [applicationSubmitted, userId, navigate]); + }, [applicationSubmitted, kycId, navigate]); // TODO: Implement const accessTokenExpirationHandler = async () => { @@ -41,7 +41,7 @@ const UserVerification = () => { const messageHandler = (event: any, payload: any ) => { if (event === 'idCheck.onApplicantLoaded') { - setUserId(payload.applicantId); + setKycId(payload.applicantId); } if (event === 'idCheck.onApplicantSubmitted'){ -- 2.45.2 From 818fe47367d5400334dcb606f8fa7f1ebd0e5fac Mon Sep 17 00:00:00 2001 From: Shreerang Kale Date: Thu, 25 Jul 2024 19:40:17 +0530 Subject: [PATCH 5/7] Add terms and conditions before sending cosmos tx --- src/components/TermsAndConditionsCard.tsx | 75 +++++++++++++++++++++++ src/pages/ConnectWallet.tsx | 11 +++- src/pages/SignWithCosmos.tsx | 16 +++-- src/pages/SignWithNitroKey.tsx | 2 +- src/pages/UserVerification.tsx | 2 +- 5 files changed, 96 insertions(+), 10 deletions(-) create mode 100644 src/components/TermsAndConditionsCard.tsx diff --git a/src/components/TermsAndConditionsCard.tsx b/src/components/TermsAndConditionsCard.tsx new file mode 100644 index 0000000..bcca621 --- /dev/null +++ b/src/components/TermsAndConditionsCard.tsx @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; + +import { Typography, Button, Box, Paper, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, Link, Checkbox } from '@mui/material'; + +const VALIDATOR_OPTION = "validator"; +const PARTICIPANT_OPTION = "participant"; + +const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: string) => void }) => { + const [selectedRole, setSelectedRole] = useState(PARTICIPANT_OPTION); + const [checked, setChecked] = useState(false); + const [isHidden, setIsHidden] = useState(false); + + const handleCheckboxChange = (event: React.ChangeEvent) => { + setChecked(event.target.checked); + }; + + const handleContinue = () => { + handleAccept() + setIsHidden(true) + } + + const handleRadioChange = (event: React.ChangeEvent) => { + setSelectedRole((event.target as HTMLInputElement).value); + handleRoleChange((event.target as HTMLInputElement).value); + }; + + return ( + + + Select your role + + } + label="Validator" + /> + } + label="Participant" + /> + + + + + + I accept the + terms and conditions + + + + + + + + ); +}; + +export default TermsAndConditionsCard; diff --git a/src/pages/ConnectWallet.tsx b/src/pages/ConnectWallet.tsx index 82ddfd1..58ccc7d 100644 --- a/src/pages/ConnectWallet.tsx +++ b/src/pages/ConnectWallet.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import { Button, Box, Container } from "@mui/material"; @@ -10,11 +10,16 @@ const ConnectWallet = () => { const navigate = useNavigate(); + const location = useLocation(); + const queryParams = new URLSearchParams(location.search); + const kycId = queryParams.get('kycId'); + useEffect(() => { + if (session) { - navigate("/user-verification"); + navigate(`/sign-with-nitro-key?kycId=${kycId}`); } - }, [session, navigate]); + }, [session, navigate, kycId]); const handler = async () => { await connect(); diff --git a/src/pages/SignWithCosmos.tsx b/src/pages/SignWithCosmos.tsx index ba59956..e141890 100644 --- a/src/pages/SignWithCosmos.tsx +++ b/src/pages/SignWithCosmos.tsx @@ -11,6 +11,7 @@ import { import { StargateClient } from "@cosmjs/stargate"; import { useWalletConnectContext } from "../context/WalletConnectContext"; +import TermsAndConditionsCard from "../components/TermsAndConditionsCard"; const SignWithCosmos = () => { const { session, signClient } = useWalletConnectContext(); @@ -24,6 +25,8 @@ const SignWithCosmos = () => { const [isLoading, setIsLoading] = useState(false); const [balance, setBalance] = useState(''); const [isRequesting, setIsRequesting] = useState(false); + const [isTncAccepted, setIsTncAccepted] = useState(false); + const [role, setRole] = useState('participant'); const navigate = useNavigate(); const innerMessage = location.state; @@ -41,10 +44,11 @@ const SignWithCosmos = () => { participant: cosmosAddress!, ethPayload: innerMessage, ethSignature: ethSignature!, - kycId: kycId + kycId, + role }, }; - }, [cosmosAddress, innerMessage, ethSignature, kycId]); + }, [cosmosAddress, innerMessage, ethSignature, kycId, role]); const handleTokenRequest = async () => { try { @@ -134,10 +138,12 @@ const SignWithCosmos = () => { sx={{ display: "flex", flexDirection: "column", - marginTop: "100px", + marginY: "100px", gap: "10px", }} > + Please accept terms and conditions to continue + setIsTncAccepted(true)} handleRoleChange={setRole}/> Send transaction to chain Cosmos Account: @@ -151,7 +157,7 @@ const SignWithCosmos = () => { Request tokens from Faucet @@ -182,7 +188,7 @@ const SignWithCosmos = () => { await sendTransaction(onboardParticipantMsg); }} loading={isLoading} - disabled={balance === '0'} + disabled={isTncAccepted ? (balance === '0') : !isTncAccepted} > Send transaction diff --git a/src/pages/SignWithNitroKey.tsx b/src/pages/SignWithNitroKey.tsx index 08bff6d..cc97a26 100644 --- a/src/pages/SignWithNitroKey.tsx +++ b/src/pages/SignWithNitroKey.tsx @@ -133,7 +133,7 @@ const SignWithNitroKey = () => { style={{ marginTop: "20px" }} loading={isLoading} > - Sign using Nitro key + Sign using Nitro key diff --git a/src/pages/UserVerification.tsx b/src/pages/UserVerification.tsx index 7baa173..f0710c6 100644 --- a/src/pages/UserVerification.tsx +++ b/src/pages/UserVerification.tsx @@ -22,7 +22,7 @@ const UserVerification = () => { useEffect(()=>{ if (applicationSubmitted && kycId !== '') { - navigate(`/sign-with-nitro-key?kycId=${kycId}`) + navigate(`/connect-wallet?kycId=${kycId}`) } }, [applicationSubmitted, kycId, navigate]); -- 2.45.2 From 5b6c334a66a91b2aeff9a0f05e412a2cb98e9309 Mon Sep 17 00:00:00 2001 From: Shreerang Kale Date: Fri, 26 Jul 2024 12:17:48 +0530 Subject: [PATCH 6/7] Add pop up for sign with cosmos terms and conditions --- src/components/Header.tsx | 3 +- src/components/TermsAndConditionsCard.tsx | 12 ++++++-- src/components/TermsAndConditionsDialog.tsx | 34 +++++++++++++++++++++ src/constants.ts | 1 + src/pages/SignWithCosmos.tsx | 5 +-- src/pages/TermsAndConditions.tsx | 29 ++++-------------- 6 files changed, 55 insertions(+), 29 deletions(-) create mode 100644 src/components/TermsAndConditionsDialog.tsx create mode 100644 src/constants.ts diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 86faaca..0b627a6 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { AppBar, Toolbar, Avatar, Box, IconButton } from '@mui/material'; import { Link, useLocation } from 'react-router-dom'; +import { AppBar, Toolbar, Avatar, Box, IconButton } from '@mui/material'; + const Header: React.FC = () => { const location = useLocation() diff --git a/src/components/TermsAndConditionsCard.tsx b/src/components/TermsAndConditionsCard.tsx index bcca621..ec547e6 100644 --- a/src/components/TermsAndConditionsCard.tsx +++ b/src/components/TermsAndConditionsCard.tsx @@ -1,15 +1,20 @@ import React, { useState } from 'react'; import { Typography, Button, Box, Paper, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, Link, Checkbox } from '@mui/material'; +import { Role } from '@cerc-io/registry-sdk/dist/proto/cerc/onboarding/v1/onboarding'; + +import TermsAndConditionsDialog from './TermsAndConditionsDialog'; const VALIDATOR_OPTION = "validator"; const PARTICIPANT_OPTION = "participant"; -const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: string) => void }) => { +const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: Role) => void }) => { const [selectedRole, setSelectedRole] = useState(PARTICIPANT_OPTION); const [checked, setChecked] = useState(false); const [isHidden, setIsHidden] = useState(false); + const [isDialogOpen, setisDialogOpen] = useState(false) + const handleCheckboxChange = (event: React.ChangeEvent) => { setChecked(event.target.checked); }; @@ -21,7 +26,7 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce const handleRadioChange = (event: React.ChangeEvent) => { setSelectedRole((event.target as HTMLInputElement).value); - handleRoleChange((event.target as HTMLInputElement).value); + handleRoleChange((event.target as HTMLInputElement).value === VALIDATOR_OPTION ? Role.ROLE_VALIDATOR : Role.ROLE_PARTICIPANT); }; return ( @@ -53,7 +58,7 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce color="primary" /> - I accept the + I accept the setisDialogOpen(true)} target="_blank" rel="noopener"> terms and conditions @@ -68,6 +73,7 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce Continue + setisDialogOpen(false)}/> ); }; diff --git a/src/components/TermsAndConditionsDialog.tsx b/src/components/TermsAndConditionsDialog.tsx new file mode 100644 index 0000000..74056e7 --- /dev/null +++ b/src/components/TermsAndConditionsDialog.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button, Typography } from '@mui/material'; + +import { TNC_CONTENT } from '../constants'; + +interface TermsDialogProps { + isValidator: boolean; + open: boolean; + onClose: () => void; +} + +const TermsAndConditionsDialog: React.FC = ({ isValidator, open, onClose }) => { + return ( + + Terms and Conditions + + + Onboard as a {isValidator ? "validator" : "participant"} + + + {TNC_CONTENT} + + + + + + + ); +}; + +export default TermsAndConditionsDialog; \ No newline at end of file diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 0000000..6844b6b --- /dev/null +++ b/src/constants.ts @@ -0,0 +1 @@ +export const TNC_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 \n 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. \n 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. \n 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. \n 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. \n 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. \n 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. \n 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. \n 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." diff --git a/src/pages/SignWithCosmos.tsx b/src/pages/SignWithCosmos.tsx index e141890..b70941b 100644 --- a/src/pages/SignWithCosmos.tsx +++ b/src/pages/SignWithCosmos.tsx @@ -8,6 +8,7 @@ import { MsgOnboardParticipantEncodeObject, typeUrlMsgOnboardParticipant, } from "@cerc-io/registry-sdk"; +import { Role } from "@cerc-io/registry-sdk/dist/proto/cerc/onboarding/v1/onboarding"; import { StargateClient } from "@cosmjs/stargate"; import { useWalletConnectContext } from "../context/WalletConnectContext"; @@ -26,7 +27,7 @@ const SignWithCosmos = () => { const [balance, setBalance] = useState(''); const [isRequesting, setIsRequesting] = useState(false); const [isTncAccepted, setIsTncAccepted] = useState(false); - const [role, setRole] = useState('participant'); + const [role, setRole] = useState(Role.ROLE_PARTICIPANT); const navigate = useNavigate(); const innerMessage = location.state; @@ -44,7 +45,7 @@ const SignWithCosmos = () => { participant: cosmosAddress!, ethPayload: innerMessage, ethSignature: ethSignature!, - kycId, + kycId: kycId!, role }, }; diff --git a/src/pages/TermsAndConditions.tsx b/src/pages/TermsAndConditions.tsx index 7c2a51e..73f63bb 100644 --- a/src/pages/TermsAndConditions.tsx +++ b/src/pages/TermsAndConditions.tsx @@ -1,8 +1,11 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; + import { Container, Typography, Button, Box, Paper } from '@mui/material'; -const TermsAndConditions: React.FC = () => { +import { TNC_CONTENT } from '../constants'; + +const TermsAndConditions = () => { const navigate = useNavigate(); const handleAccept = () => { @@ -24,29 +27,9 @@ const TermsAndConditions: React.FC = () => { }} > - 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. - - - 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. - - - 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. - - - 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. - - - 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. - - - 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. - - - 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. - - - 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. + {TNC_CONTENT} +