Use PDF for showing terms and conditions #12
@ -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;
|
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 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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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'>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user