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>
-                            <span>Ethereum Address</span>
-                        </Typography>
+                        <Typography variant="subtitle1" gutterBottom>Ethereum Address</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>
-                            <span>Chequebook Contract Address</span>
-                        </Typography>
+                        <Typography variant="subtitle1" gutterBottom>Chequebook Contract Address</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>