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
2021-03-29 03:23:12 -05:00
committed by GitHub
parent 0cab024b69
commit 325a59098e
15 changed files with 37 additions and 48 deletions
+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'}