From 325a59098e2b41ef7e3c2bbd02e3424c67c14dc7 Mon Sep 17 00:00:00 2001 From: Andrew LeTourneau Date: Mon, 29 Mar 2021 03:23:12 -0500 Subject: [PATCH] fix: Setting explicit Typography components to fix invalid DOM (#25) * fix: Setting explicit Typography components to fix invalid DOM Typography, by default, uses

as it's underlying component. When used to embed other components it resulted in a DOM errors like: "

cannot appear as descendant of

"... and more. fix: Linting * chore: apply suggestions from code review Co-authored-by: Vojtech Simetka --- src/components/CodeBlockTabs.tsx | 2 +- src/components/EthereumAddress.tsx | 2 +- src/components/EthereumAddressCard.tsx | 11 +++-------- src/components/NavBar.tsx | 2 +- src/components/SideBar.tsx | 6 ++---- src/components/TroubleshootConnectionCard.tsx | 4 ++-- src/hooks/apiHooks.tsx | 4 ++-- src/pages/accounting/AccountCard.tsx | 2 +- src/pages/accounting/index.tsx | 2 +- src/pages/status/NodeSetupWorkflow.tsx | 4 ++-- src/pages/status/SetupSteps/ChequebookDeployFund.tsx | 8 +++----- .../status/SetupSteps/EthereumConnectionCheck.tsx | 8 +++----- src/pages/status/SetupSteps/NodeConnectionCheck.tsx | 10 +++++----- src/pages/status/SetupSteps/PeerConnection.tsx | 8 ++++---- src/pages/status/StatusCard.tsx | 12 ++++++------ 15 files changed, 37 insertions(+), 48 deletions(-) diff --git a/src/components/CodeBlockTabs.tsx b/src/components/CodeBlockTabs.tsx index 32a91b3..cd19d5c 100644 --- a/src/components/CodeBlockTabs.tsx +++ b/src/components/CodeBlockTabs.tsx @@ -77,7 +77,7 @@ export default function CodeBlockTabs(props: IProps) { > {value === index && ( - {children} + {children} )} diff --git a/src/components/EthereumAddress.tsx b/src/components/EthereumAddress.tsx index 2b97dbe..e34a1ac 100644 --- a/src/components/EthereumAddress.tsx +++ b/src/components/EthereumAddress.tsx @@ -17,7 +17,7 @@ interface IProps { export default function EthereumAddress(props: IProps) { return ( - + {props.address ?

{props.hideBlockie ? diff --git a/src/components/EthereumAddressCard.tsx b/src/components/EthereumAddressCard.tsx index 8f4bd46..8151d6a 100644 --- a/src/components/EthereumAddressCard.tsx +++ b/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 (
@@ -59,9 +58,7 @@ function EthereumAddressCard(props: IProps) { :
- - Ethereum Address - + Ethereum Address - - Chequebook Contract Address - + Chequebook Contract Address
- Click to run status checks on your nodes connection or check out the Swarm Bee Docs + Click to run status checks on your nodes connection or check out the Swarm Bee Docs
-

Still not working? Drop us a message on the Ethereum Swarm Discord

+

Still not working? Drop us a message on the Ethereum Swarm Discord

 diff --git a/src/hooks/apiHooks.tsx b/src/hooks/apiHooks.tsx index 7369f7e..d5ec170 100644 --- a/src/hooks/apiHooks.tsx +++ b/src/hooks/apiHooks.tsx @@ -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 }; -} \ No newline at end of file +} diff --git a/src/pages/accounting/AccountCard.tsx b/src/pages/accounting/AccountCard.tsx index ff59b6c..5e33af2 100644 --- a/src/pages/accounting/AccountCard.tsx +++ b/src/pages/accounting/AccountCard.tsx @@ -88,7 +88,7 @@ function AccountCard(props: IProps) { Total Sent / Received - + {ConvertBalanceToBZZ(props.settlements.totalsent)} / {ConvertBalanceToBZZ(props.settlements.totalreceived)} props.settlements.totalreceived ? '#c9201f' : '#32c48d' }}>({ConvertBalanceToBZZ(props.settlements.totalsent - props.settlements.totalreceived)}) diff --git a/src/pages/accounting/index.tsx b/src/pages/accounting/index.tsx index 2a7b788..cd8ba2a 100644 --- a/src/pages/accounting/index.tsx +++ b/src/pages/accounting/index.tsx @@ -54,7 +54,7 @@ export default function Accounting(props: any) { > {value === index && ( - {children} + {children} )}
diff --git a/src/pages/status/NodeSetupWorkflow.tsx b/src/pages/status/NodeSetupWorkflow.tsx index eba3787..45d4fa3 100644 --- a/src/pages/status/NodeSetupWorkflow.tsx +++ b/src/pages/status/NodeSetupWorkflow.tsx @@ -142,7 +142,7 @@ export default function NodeSetupWorkflow(props: any) { - {getStepContent(index, props)} + {getStepContent(index, props)}
}
- - Chequebook Address - + Chequebook Address
) diff --git a/src/pages/status/SetupSteps/EthereumConnectionCheck.tsx b/src/pages/status/SetupSteps/EthereumConnectionCheck.tsx index 81f6f30..43026ea 100644 --- a/src/pages/status/SetupSteps/EthereumConnectionCheck.tsx +++ b/src/pages/status/SetupSteps/EthereumConnectionCheck.tsx @@ -27,12 +27,10 @@ export default function EthereumConnectionCheck(props: any) {
} - - Node Address - + Node Address ) diff --git a/src/pages/status/SetupSteps/NodeConnectionCheck.tsx b/src/pages/status/SetupSteps/NodeConnectionCheck.tsx index 6363fd1..be2370f 100644 --- a/src/pages/status/SetupSteps/NodeConnectionCheck.tsx +++ b/src/pages/status/SetupSteps/NodeConnectionCheck.tsx @@ -21,7 +21,7 @@ export default function NodeConnectionCheck(props: any) {
{ !props.nodeApiHealth ? - + We cannot connect to your nodes API at {props.apiHost}. Please check the following to troubleshoot your issue. Troubleshoot - +
  1. Check the status of your node by running the below command to see if your node is running.
    2. { props.nodeHealth?.status !== 'ok' ? - + We cannot connect to your nodes debug API at {props.debugApiHost}. Please check the following to troubleshoot your issue. Troubleshoot - +
    1. Check the status of your node by running the below command to see if your node is running.
    ) -} \ No newline at end of file +} diff --git a/src/pages/status/SetupSteps/PeerConnection.tsx b/src/pages/status/SetupSteps/PeerConnection.tsx index e70efe9..7fb71d1 100644 --- a/src/pages/status/SetupSteps/PeerConnection.tsx +++ b/src/pages/status/SetupSteps/PeerConnection.tsx @@ -24,18 +24,18 @@ export default function PeerConnection(props: any) {
- + Connected Peers - + { props.nodeTopology.connected }
- + Discovered Nodes - + { props.nodeTopology.population }
diff --git a/src/pages/status/StatusCard.tsx b/src/pages/status/StatusCard.tsx index 64d2e78..1ca6250 100644 --- a/src/pages/status/StatusCard.tsx +++ b/src/pages/status/StatusCard.tsx @@ -105,7 +105,7 @@ function StatusCard(props: IProps) {
- + AGENT: Bee {props.nodeReadiness?.version ? ` v${props.nodeReadiness.version}` : '-'} @@ -123,20 +123,20 @@ function StatusCard(props: IProps) { update } - + PUBLIC KEY: { props.nodeAddresses.public_key ? props.nodeAddresses.public_key : '-' } - + PSS PUBLIC KEY: { props.nodeAddresses.pss_public_key ? props.nodeAddresses.pss_public_key : '-' } - - + + OVERLAY ADDRESS (PEER ID): { props.nodeAddresses.overlay ? props.nodeAddresses.overlay : '-' } - setUnderlayAddresessVisible(!underlayAddressesVisible)}> + setUnderlayAddresessVisible(!underlayAddressesVisible)}>