Use PDF for showing terms and conditions #12

Merged
nabarun merged 2 commits from deep-stack/testnet-onboarding-app:iv-react-pdf into main 2024-08-08 09:39:27 +00:00
5 changed files with 76 additions and 62 deletions
Showing only changes of commit 2f3a5fb19e - Show all commits

View File

@ -9,7 +9,7 @@ export enum Role {
Participant = 'participant' Participant = 'participant'
} }
const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: Role) => void }) => { const SelectRoleCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: Role) => void }) => {
const [selectedRole, setSelectedRole] = useState<Role>(Role.Participant); const [selectedRole, setSelectedRole] = useState<Role>(Role.Participant);
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const [isHidden, setIsHidden] = useState(false); const [isHidden, setIsHidden] = useState(false);
@ -75,9 +75,9 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce
Continue Continue
</Button> </Button>
</Box> </Box>
<TermsAndConditionsDialog isValidator = { selectedRole === Role.Validator } open={isDialogOpen} onClose={() => setisDialogOpen(false)}/> <TermsAndConditionsDialog open={isDialogOpen} onClose={() => setisDialogOpen(false)}/>
</Paper> </Paper>
); );
}; };
export default TermsAndConditionsCard; export default SelectRoleCard;

View File

@ -0,0 +1,53 @@
import React, { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import { Typography } from '@mui/material';
// https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#import-worker-recommended
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url,
).toString();
const TermsAndConditionsBox = ({height}: {height: string}) => {
const [numPages, setNumPages] = useState<number>();
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
setNumPages(numPages);
}
return (
<>
<Typography variant='h4' textAlign="center" gutterBottom>
Terms and Conditions
</Typography>
<div
style={{
height: height,
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
}}
>
<Document file='/TermsAndConditions.pdf' onLoadSuccess={onDocumentLoadSuccess}>
{Array.apply(null, Array(numPages))
.map((x, i) => i + 1)
.map((page) => {
return (
<Page
key={page}
pageNumber={page}
renderTextLayer={false}
renderAnnotationLayer={false}
width={1070}
/>
);
})}
</Document>
</div>
</>
);
};
export default TermsAndConditionsBox;

View File

@ -1,22 +1,25 @@
import React from 'react'; import React from 'react';
import { Dialog, DialogContent, DialogTitle } from '@mui/material'; import { Button, Dialog, DialogActions, DialogContent } from '@mui/material';
import TermsAndConditions from '../pages/TermsAndConditions'; import TermsAndConditionsBox from './TermsAndConditionsBox';
interface TermsDialogProps { interface TermsDialogProps {
isValidator: boolean;
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
} }
const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ isValidator, open, onClose }) => { const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ open, onClose }) => {
return ( return (
<Dialog open={open} onClose={onClose} maxWidth="lg"> <Dialog open={open} onClose={onClose} maxWidth="lg">
<DialogTitle>Onboard as a {isValidator ? "validator" : "participant"}</DialogTitle>
<DialogContent> <DialogContent>
<TermsAndConditions title='dialog' onClose={onClose}/> <TermsAndConditionsBox height='75vh' />
</DialogContent> </DialogContent>
<DialogActions>
<Button onClick={onClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog> </Dialog>
); );
}; };

View File

@ -11,7 +11,7 @@ import {
import { StargateClient } from "@cosmjs/stargate"; import { StargateClient } from "@cosmjs/stargate";
import { useWalletConnectContext } from "../context/WalletConnectContext"; import { useWalletConnectContext } from "../context/WalletConnectContext";
import TermsAndConditionsCard, {Role} from "../components/TermsAndConditionsCard"; import SelectRoleCard, {Role} from "../components/SelectRoleCard";
const SignWithCosmos = () => { const SignWithCosmos = () => {
const { session, signClient } = useWalletConnectContext(); const { session, signClient } = useWalletConnectContext();
@ -152,7 +152,7 @@ const SignWithCosmos = () => {
}} }}
> >
<Typography variant="h5" display={`${isTncAccepted ? "none" : "block"}`}>Please accept terms and conditions to continue</Typography> <Typography variant="h5" display={`${isTncAccepted ? "none" : "block"}`}>Please accept terms and conditions to continue</Typography>
<TermsAndConditionsCard handleAccept={() => setIsTncAccepted(true)} handleRoleChange={setRole}/> <SelectRoleCard handleAccept={() => setIsTncAccepted(true)} handleRoleChange={setRole}/>
<Typography variant="h5">Send transaction to chain</Typography> <Typography variant="h5">Send transaction to chain</Typography>
<Typography>Cosmos Account:</Typography> <Typography>Cosmos Account:</Typography>
<Card className='mt-1 mb-1'> <Card className='mt-1 mb-1'>

View File

@ -1,67 +1,25 @@
import React, { useState } from 'react'; import React from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Document, Page, pdfjs } from 'react-pdf';
import { Container, Typography, Button, Box, Paper } from '@mui/material'; import { Container, Button, Box, Paper } from '@mui/material';
pdfjs.GlobalWorkerOptions.workerSrc = new URL( import TermsAndConditionsBox from '../components/TermsAndConditionsBox';
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url,
).toString();
const TermsAndConditions = ({title, onClose} : {title?: string, onClose?: () => void }) => { const TermsAndConditions = () => {
const [numPages, setNumPages] = useState<number>();
const navigate = useNavigate(); const navigate = useNavigate();
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
setNumPages(numPages);
}
const handleAccept = () => { const handleAccept = () => {
navigate('/connect-wallet'); navigate('/connect-wallet');
}; };
return ( return (
<Container maxWidth="lg"> <Container maxWidth="lg">
<Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', height: '74vh', display: 'flex', flexDirection: 'column' }}> <Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', height: '83vh', display: 'flex', flexDirection: 'column' }}>
<Typography variant="h4" gutterBottom> <TermsAndConditionsBox height='80vh' />
Terms and Conditions
</Typography>
<div
style={{
height: '80vh',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
}}
>
<Document file='/TermsAndConditions.pdf' onLoadSuccess={onDocumentLoadSuccess}>
{Array.apply(null, Array(numPages))
.map((x, i) => i + 1)
.map((page) => {
return (
<Page
key={page}
pageNumber={page}
renderTextLayer={false}
renderAnnotationLayer={false}
width={1070}
/>
);
})}
</Document>
</div>
<Box mt={2} display="flex" justifyContent="center"> <Box mt={2} display="flex" justifyContent="center">
{title === 'dialog' ? ( <Button variant="contained" color="primary" onClick={handleAccept}>
<Button onClick={onClose} color="primary"> Accept
Close </Button>
</Button>
) : (
<Button variant="contained" color="primary" onClick={handleAccept}>
Accept
</Button>
)}
</Box> </Box>
</Paper> </Paper>
</Container> </Container>