Files
bee-dashboard/src/pages/status/SetupSteps/EthereumConnectionCheck.tsx
T
Andrew LeTourneau 325a59098e 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>
2021-03-29 10:23:12 +02:00

38 lines
1.9 KiB
TypeScript

import React from 'react';
import { Typography } from '@material-ui/core/';
import { CheckCircle, Warning } from '@material-ui/icons/';
import EthereumAddress from '../../../components/EthereumAddress';
export default function EthereumConnectionCheck(props: any) {
return (
<div>
<p>Connect to the ethereum blockchain.</p>
<div style={{ marginBottom:'10px' }}>
{props.nodeAddresses?.ethereum ?
<div>
<CheckCircle style={{color:'#32c48d', marginRight: '7px', height: '18px'}} />
<span>Your connected to the Ethereum network</span>
</div>
:
props.loadingNodeAddresses ?
null
:
<div>
<Warning style={{color:'#ff9800', marginRight: '7px', height: '18px'}} />
<span>Your not connected to the Ethereum network. </span>
<p>Your Bee node must have access to the Ethereum blockchain, so that it can interact and deploy your chequebook contract. You can run <a href='https://github.com/goerli/testnet' rel='noreferrer' target='_blank'>your own Goerli node</a>, or use a provider such as <a href='https://rpc.slock.it/goerli' rel='noreferrer' target='_blank'>rpc.slock.it/goerli</a> or <a href='https://infura.io/' rel='noreferrer' target='_blank'>Infura</a>.
By default, Bee expects a local Goerli node at http://localhost:8545. To use a provider instead, simply change your <strong>--swap-endpoint</strong> in your configuration file.
</p>
</div>
}
</div>
<Typography variant="subtitle1" gutterBottom>Node Address</Typography>
<EthereumAddress
address={props.nodeAddresses?.ethereum}
network={'goerli'}
/>
</div>
)
}