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>
This commit is contained in:
Andrew LeTourneau
committed by
GitHub
GitHub
parent
0cab024b69
commit
325a59098e
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'}} /> :
|
||||
|
||||
Reference in New Issue
Block a user