fix: Setting explicit Typography components to fix invalid DOM (#25)

* fix: Setting explicit Typography components to fix invalid DOM

Typography, by default, uses <p> as it's underlying component. When used
to embed other components it resulted in a DOM errors like: "<p> cannot appear
as descendant of <p>"... and more.

fix: Linting

* chore: apply suggestions from code review

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -35,12 +35,10 @@ export default function ChequebookDeployFund(props: any) {
                 </div>
             } 
             </div>
-            <Typography variant="subtitle1" gutterBottom>
-            <span>Chequebook Address</span>
-            </Typography>
+            <Typography variant="subtitle1" gutterBottom>Chequebook Address</Typography>
             <EthereumAddress
-            address={props.chequebookAddress?.chequebookaddress}
-            network={'goerli'}
+              address={props.chequebookAddress?.chequebookaddress}
+              network={'goerli'}
             />
             </div>
     )

src/pages/status/SetupSteps/EthereumConnectionCheck.tsx

@@ -27,12 +27,10 @@ export default function EthereumConnectionCheck(props: any) {
                 </div>
             }
             </div>
-            <Typography variant="subtitle1" gutterBottom>
-            <span>Node Address</span>
-            </Typography>
+            <Typography variant="subtitle1" gutterBottom>Node Address</Typography>
             <EthereumAddress
-            address={props.nodeAddresses?.ethereum}
-            network={'goerli'}
+              address={props.nodeAddresses?.ethereum}
+              network={'goerli'}
             />
             </div>
     )

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

@@ -21,7 +21,7 @@ export default function NodeConnectionCheck(props: any) {
           </div>
           <div>
           { !props.nodeApiHealth ? 
-            <Typography variant="body2" gutterBottom style={{margin: '15px'}}>
+            <Typography component="div" variant="body2" gutterBottom style={{margin: '15px'}}>
               We cannot connect to your nodes API at <a href='#'>{props.apiHost}</a>. Please check the following to troubleshoot your issue.
               <Accordion style={{marginTop:'20px'}}>
                   <AccordionSummary
@@ -32,7 +32,7 @@ export default function NodeConnectionCheck(props: any) {
                     <Typography>Troubleshoot</Typography>
                   </AccordionSummary>
                   <AccordionDetails>
-                    <Typography>
+                    <Typography component="div">
                       <ol>
                         <li>Check the status of your node by running the below command to see if your node is running.</li>
                         <CodeBlockTabs
@@ -72,7 +72,7 @@ export default function NodeConnectionCheck(props: any) {
             </div>
             <div>
             { props.nodeHealth?.status !== 'ok' ? 
-              <Typography variant="body2" gutterBottom style={{margin: '15px'}}>
+              <Typography component="div" variant="body2" gutterBottom style={{margin: '15px'}}>
                 We cannot connect to your nodes debug API at <a href='#'>{props.debugApiHost}</a>. Please check the following to troubleshoot your issue.
                 <Accordion style={{marginTop:'20px'}}>
                   <AccordionSummary
@@ -83,7 +83,7 @@ export default function NodeConnectionCheck(props: any) {
                     <Typography>Troubleshoot</Typography>
                   </AccordionSummary>
                   <AccordionDetails>
-                    <Typography>
+                    <Typography component="div">
                     <ol>
                       <li>Check the status of your node by running the below command to see if your node is running.</li>
                       <CodeBlockTabs
@@ -123,4 +123,4 @@ export default function NodeConnectionCheck(props: any) {
           </div>
     </div>
     )
-}
+}

src/pages/status/SetupSteps/PeerConnection.tsx

@@ -24,18 +24,18 @@ export default function PeerConnection(props: any) {
             </div>
             <div style={{display:'flex'}}>
                 <div style={{marginRight:'30px'}}>
-                <Typography variant="subtitle1" gutterBottom color="textSecondary">
+                <Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
                 <span>Connected Peers</span>
                 </Typography>
-                <Typography variant="h5" component="h2">
+                <Typography component="h2" variant="h5">
                 { props.nodeTopology.connected }
                 </Typography>
                 </div>
                 <div>
-                <Typography variant="subtitle1" gutterBottom color="textSecondary">
+                <Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
                 <span>Discovered Nodes</span>
                 </Typography>
-                <Typography variant="h5" component="h2">
+                <Typography component="h2" variant="h5">
                 { props.nodeTopology.population }
                 </Typography>
                 </div>