woggioni/bee-dashboard
1
0
Fork 0
Code Actions Packages Releases Activity

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

Browse Source 
* 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>
This commit is contained in:
Andrew LeTourneau
2021-03-29 03:23:12 -05:00
committed by GitHub
parent 0cab024b69
commit 325a59098e
15 changed files with 37 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CodeBlockTabs.tsx
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+3 -8
View File
@@ -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 -1
View File
@@ -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 -4
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+3 -5
View File
@@ -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
+3 -5
View File
@@ -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
+5 -5
View File
@@ -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
+4 -4
View File
@@ -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
+6 -6
View File
@@ -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 style={{marginTop:'20px'}}>
<Typography component="div" variant="subtitle2" gutterBottom>
<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'}} /> :