Refactor TOS components

src/components/SelectRoleCard.tsx

@@ -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;

src/components/TermsAndConditionsBox.tsx

@@ -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;

src/components/TermsAndConditionsDialog.tsx

@@ -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>
   );
 };

src/pages/SignWithCosmos.tsx

@@ -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'>

src/pages/TermsAndConditions.tsx

@@ -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>
-          )}
         </Box>
       </Paper>
     </Container>