Use PDF for showing terms and conditions #12
@ -9,7 +9,7 @@ export enum Role {
|
||||
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 [checked, setChecked] = useState(false);
|
||||
const [isHidden, setIsHidden] = useState(false);
|
||||
@ -75,9 +75,9 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce
|
||||
Continue
|
||||
</Button>
|
||||
</Box>
|
||||
<TermsAndConditionsDialog isValidator = { selectedRole === Role.Validator } open={isDialogOpen} onClose={() => setisDialogOpen(false)}/>
|
||||
<TermsAndConditionsDialog open={isDialogOpen} onClose={() => setisDialogOpen(false)}/>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export default TermsAndConditionsCard;
|
||||
export default SelectRoleCard;
|
53
src/components/TermsAndConditionsBox.tsx
Normal file
53
src/components/TermsAndConditionsBox.tsx
Normal 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;
|
@ -1,22 +1,25 @@
|
||||
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 {
|
||||
isValidator: boolean;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ isValidator, open, onClose }) => {
|
||||
const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ open, onClose }) => {
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="lg">
|
||||
<DialogTitle>Onboard as a {isValidator ? "validator" : "participant"}</DialogTitle>
|
||||
<DialogContent>
|
||||
<TermsAndConditions title='dialog' onClose={onClose}/>
|
||||
<TermsAndConditionsBox height='75vh' />
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} color="primary">
|
||||
Close
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
@ -11,7 +11,7 @@ import {
|
||||
import { StargateClient } from "@cosmjs/stargate";
|
||||
|
||||
import { useWalletConnectContext } from "../context/WalletConnectContext";
|
||||
import TermsAndConditionsCard, {Role} from "../components/TermsAndConditionsCard";
|
||||
import SelectRoleCard, {Role} from "../components/SelectRoleCard";
|
||||
|
||||
const SignWithCosmos = () => {
|
||||
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>
|
||||
<TermsAndConditionsCard handleAccept={() => setIsTncAccepted(true)} handleRoleChange={setRole}/>
|
||||
<SelectRoleCard handleAccept={() => setIsTncAccepted(true)} handleRoleChange={setRole}/>
|
||||
<Typography variant="h5">Send transaction to chain</Typography>
|
||||
<Typography>Cosmos Account:</Typography>
|
||||
<Card className='mt-1 mb-1'>
|
||||
|
@ -1,67 +1,25 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
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(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
import.meta.url,
|
||||
).toString();
|
||||
import TermsAndConditionsBox from '../components/TermsAndConditionsBox';
|
||||
|
||||
const TermsAndConditions = ({title, onClose} : {title?: string, onClose?: () => void }) => {
|
||||
const [numPages, setNumPages] = useState<number>();
|
||||
const TermsAndConditions = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
|
||||
setNumPages(numPages);
|
||||
}
|
||||
|
||||
const handleAccept = () => {
|
||||
navigate('/connect-wallet');
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg">
|
||||
<Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', height: '74vh', display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
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>
|
||||
<Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', height: '83vh', display: 'flex', flexDirection: 'column' }}>
|
||||
<TermsAndConditionsBox height='80vh' />
|
||||
<Box mt={2} display="flex" justifyContent="center">
|
||||
{title === 'dialog' ? (
|
||||
<Button onClick={onClose} color="primary">
|
||||
Close
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="contained" color="primary" onClick={handleAccept}>
|
||||
Accept
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="contained" color="primary" onClick={handleAccept}>
|
||||
Accept
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
|
Loading…
Reference in New Issue
Block a user