woggioni-opencode-agent/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/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'}} /> :