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/components/CodeBlockTabs.tsx

@@ -77,7 +77,7 @@ export default function CodeBlockTabs(props: IProps) {
           >
             {value === index && (
               <Box style={{ marginTop: '-12px' }}>
-                <Typography>{children}</Typography>
+                <Typography component="div">{children}</Typography>
               </Box>
             )}
           </div>

src/components/EthereumAddress.tsx

@@ -17,7 +17,7 @@ interface IProps {
 
 export default function EthereumAddress(props: IProps) {
     return (
-        <Typography component="p" variant="subtitle1">
+        <Typography component="div" variant="subtitle1">
             {props.address ? 
             <div style={{display:'flex'}}>
                 {props.hideBlockie ?

src/components/EthereumAddressCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Theme, createStyles, makeStyles, useTheme } from '@material-ui/core/styles';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import { Card, CardContent, Typography } from '@material-ui/core/';
 
 import EthereumAddress from '../components/EthereumAddress';
@@ -46,7 +46,6 @@ interface IProps{
 
 function EthereumAddressCard(props: IProps) {
     const classes = useStyles();
-    const theme = useTheme();
 
     return (
         <div>
@@ -59,9 +58,7 @@ function EthereumAddressCard(props: IProps) {
                 :
                 <div className={classes.details}>
                     <CardContent className={classes.content}>
-                        <Typography variant="subtitle1" gutterBottom>
+                        <Typography variant="subtitle1" gutterBottom>Ethereum Address</Typography>
-                            <span>Ethereum Address</span>
-                        </Typography>
                         <EthereumAddress
                         address={props.nodeAddresses?.ethereum}
                         network={'goerli'}
@@ -76,9 +73,7 @@ function EthereumAddressCard(props: IProps) {
                 :
                 <div className={classes.details}>
                     <CardContent className={classes.content}>
-                        <Typography variant="subtitle1" gutterBottom>
+                        <Typography variant="subtitle1" gutterBottom>Chequebook Contract Address</Typography>
-                            <span>Chequebook Contract Address</span>
-                        </Typography>
                         <EthereumAddress
                         address={props.chequebookAddress?.chequebookaddress}
                         network={'goerli'}

src/components/NavBar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
-import { AppBar, Toolbar, Chip, IconButton } from '@material-ui/core/';
+import { Toolbar, Chip, IconButton } from '@material-ui/core/';
 
 import { Sun, Moon } from 'react-feather';
 

src/components/SideBar.tsx

@@ -2,13 +2,11 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
-import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink, ListItemSecondaryAction } from '@material-ui/core';
+import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink } from '@material-ui/core';
 import { OpenInNewSharp } from '@material-ui/icons';
-import { Activity, FileText, DollarSign, Share2, Settings, AlignJustify } from 'react-feather';
+import { Activity, FileText, DollarSign, Share2, Settings } from 'react-feather';
 
-import SwarmLogo from '../assets/swarm-logo-2.svg';
 import SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
-import SwarmLogoWhite from '../assets/swarm-logo-2-white.png';
 
 const drawerWidth = 240;
 

src/components/TroubleshootConnectionCard.tsx

@@ -26,11 +26,11 @@ export default function TroubleshootConnectionCard() {
                     Looks like your node is not connected
                 </Typography>
                 <div style={{marginBottom:'20px', textAlign:'center'}}>
-                <strong><Link to='/' >Click to run status checks</Link> on your nodes connection or check out the <a href={process.env.REACT_APP_BEE_DOCS_HOST} target='_blank' >Swarm Bee Docs</a></strong>
+                <strong><Link to='/' >Click to run status checks</Link> on your nodes connection or check out the <a href={process.env.REACT_APP_BEE_DOCS_HOST} target='_blank' rel="noreferrer">Swarm Bee Docs</a></strong>
                 </div>
             
                 <div style={{marginBottom:'20px', textAlign:'center'}}>
-                  <p style={{marginTop:'50px'}}>Still not working? Drop us a message on the Ethereum Swarm <a href={process.env.REACT_APP_BEE_DISCORD_HOST} target='_blank' >Discord</a></p>
+                  <p style={{marginTop:'50px'}}>Still not working? Drop us a message on the Ethereum Swarm <a href={process.env.REACT_APP_BEE_DISCORD_HOST} target='_blank' rel="noreferrer">Discord</a></p>
                 </div>
                 
             </CardContent>

src/hooks/apiHooks.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 
 import type { NodeAddresses, ChequebookAddressResponse, ChequebookBalanceResponse, BalanceResponse, 
     LastChequesResponse, AllSettlements, LastCashoutActionResponse } from '@ethersphere/bee-js'
@@ -331,4 +331,4 @@ export const useApiPeerLastCashout = (peerId: string) => {
     }, [])
 
     return { peerCashout, isLoadingPeerCashout, error };
-}
+}

src/pages/accounting/AccountCard.tsx

@@ -88,7 +88,7 @@ function AccountCard(props: IProps) {
                                 <Typography component="h2" variant="h6" color="primary" gutterBottom>
                                 Total Sent / Received
                                 </Typography>
-                                <Typography component="p" variant="h5" >
+                                <Typography component="div" variant="h5" >
                                  <span style={{marginRight:'7px'}}>{ConvertBalanceToBZZ(props.settlements.totalsent)} / {ConvertBalanceToBZZ(props.settlements.totalreceived)}</span>
                                  <span style={{ color: props.settlements.totalsent > props.settlements.totalreceived ? '#c9201f' : '#32c48d' }}>({ConvertBalanceToBZZ(props.settlements.totalsent - props.settlements.totalreceived)})</span>
                                 </Typography>

src/pages/accounting/index.tsx

@@ -54,7 +54,7 @@ export default function Accounting(props: any) {
           >
             {value === index && (
               <Box style={{ marginTop: '20px' }}>
-                <Typography>{children}</Typography>
+                <Typography component="div">{children}</Typography>
               </Box>
             )}
           </div>

src/pages/status/NodeSetupWorkflow.tsx

@@ -142,7 +142,7 @@ export default function NodeSetupWorkflow(props: any) {
               </StepButton>
             </StepLabel>
             <StepContent>
-              <Typography>{getStepContent(index, props)}</Typography>
+              <Typography component="div">{getStepContent(index, props)}</Typography>
               <div className={classes.actionsContainer}>
                 <div>
                   <Button
@@ -182,4 +182,4 @@ export default function NodeSetupWorkflow(props: any) {
       ) : null}
     </div>
   );
-}
+}

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

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

src/pages/status/StatusCard.tsx

@@ -105,7 +105,7 @@ function StatusCard(props: IProps) {
                         </span>
                     </div>
                     <div>
-                        <Typography variant="subtitle2" gutterBottom>
+                        <Typography component="div" variant="subtitle2" gutterBottom>
                             <span>AGENT: </span>
                             <a href='https://github.com/ethersphere/bee' rel='noreferrer' target='_blank'>Bee</a>
                             <span>{props.nodeReadiness?.version ? ` v${props.nodeReadiness.version}` : '-'}</span>
@@ -123,20 +123,20 @@ function StatusCard(props: IProps) {
                                 <a href='#'>update</a>
                             }
                         </Typography>
-                        <Typography variant="subtitle2" gutterBottom>
+                        <Typography component="div" variant="subtitle2" gutterBottom>
                             <span>PUBLIC KEY: </span>
                             <span>{ props.nodeAddresses.public_key ? props.nodeAddresses.public_key : '-' }</span>
                         </Typography>
-                        <Typography variant="subtitle2" gutterBottom>
+                        <Typography component="div" variant="subtitle2" gutterBottom>
                             <span>PSS PUBLIC KEY: </span>
                             <span>{ props.nodeAddresses.pss_public_key ? props.nodeAddresses.pss_public_key : '-' }</span>
                         </Typography>
-                        <Typography variant="subtitle2" gutterBottom>
+                        <Typography component="div" variant="subtitle2" gutterBottom>
-                                <Typography style={{marginTop:'20px'}}>
+                                <Typography component="div" style={{marginTop:'20px'}}>
                                     <span>OVERLAY ADDRESS (PEER ID): </span>
                                     <span>{ props.nodeAddresses.overlay ? props.nodeAddresses.overlay : '-' }</span>
                                 </Typography>
-                                <Typography onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
+                                <Typography component="div" onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
                                     <Button color="primary" style={{padding: 0, marginTop:'6px'}}>
                                         { underlayAddressesVisible ? 
                                         <ArrowDropUp style={{fontSize:'12px'}} /> :