style: add eslint configuration and fixed linter issues (#35)
* style: add eslint configuration as per bee-js * chore: add `plugin:react/reocommended` in `.eslintrc` Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com> * chore: add `consistent` to `array-bracket-newline` as per review * style: after automatic fixes with `npm run lint` * style: fixed all linter errors * refactor: fixed all linter warnings * chore: added missing new line at end of `.prettierrc` file Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com>
This commit is contained in:
Vojtech Simetka
GitHub
@@ -1,15 +1,21 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
|
||||
import { Typography, Paper, Button, Step, StepLabel, StepContent, Stepper, StepButton } from '@material-ui/core/';
|
||||
import { CheckCircle, Error, Sync, ExpandLessSharp, ExpandMoreSharp } from '@material-ui/icons/';
|
||||
|
||||
import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck';
|
||||
import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck';
|
||||
import VersionCheck from './SetupSteps/VersionCheck';
|
||||
import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck';
|
||||
import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund';
|
||||
import PeerConnection from './SetupSteps/PeerConnection';
|
||||
import { ReactElement, useEffect, useState } from 'react'
|
||||
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
|
||||
import { Typography, Paper, Button, Step, StepLabel, StepContent, Stepper, StepButton } from '@material-ui/core/'
|
||||
import { CheckCircle, Error, Sync, ExpandLessSharp, ExpandMoreSharp } from '@material-ui/icons/'
|
||||
|
||||
import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
|
||||
import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
|
||||
import VersionCheck from './SetupSteps/VersionCheck'
|
||||
import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
|
||||
import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
|
||||
import PeerConnection from './SetupSteps/PeerConnection'
|
||||
import type {
|
||||
ChequebookAddressResponse,
|
||||
ChequebookBalanceResponse,
|
||||
Health,
|
||||
NodeAddresses,
|
||||
Topology,
|
||||
} from '@ethersphere/bee-js'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
@@ -27,50 +33,100 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
padding: theme.spacing(5),
|
||||
},
|
||||
}),
|
||||
);
|
||||
)
|
||||
|
||||
function getSteps() {
|
||||
return [
|
||||
'Debug Connection Check',
|
||||
'Version Check',
|
||||
'Version Check',
|
||||
'Connect to Ethereum Blockchain',
|
||||
'Deploy and Fund Chequebook',
|
||||
'Node Connection Check',
|
||||
'Node Connection Check',
|
||||
'Connect to Peers',
|
||||
];
|
||||
]
|
||||
}
|
||||
interface Props {
|
||||
nodeHealth: Health | null
|
||||
nodeApiHealth: boolean
|
||||
nodeAddresses: NodeAddresses | null
|
||||
chequebookAddress: ChequebookAddressResponse | null
|
||||
chequebookBalance: ChequebookBalanceResponse | null
|
||||
beeRelease: LatestBeeRelease | null
|
||||
nodeTopology: Topology | null
|
||||
isLoadingBeeRelease: boolean
|
||||
isLoadingNodeHealth: boolean
|
||||
isLoadingNodeAddresses: boolean
|
||||
isLoadingNodeTopology: boolean
|
||||
isLoadingHealth: boolean
|
||||
isLoadingChequebookAddress: boolean
|
||||
isLoadingChequebookBalance: boolean
|
||||
setStatusChecksVisible: (value: boolean) => void
|
||||
apiHost: string
|
||||
debugApiHost: string
|
||||
}
|
||||
|
||||
function getStepContent(step: number, props: any) {
|
||||
|
||||
function getStepContent(step: number, props: Props) {
|
||||
const {
|
||||
nodeHealth,
|
||||
debugApiHost,
|
||||
beeRelease,
|
||||
isLoadingBeeRelease,
|
||||
nodeAddresses,
|
||||
isLoadingNodeAddresses,
|
||||
isLoadingChequebookBalance,
|
||||
chequebookAddress,
|
||||
chequebookBalance,
|
||||
isLoadingChequebookAddress,
|
||||
nodeApiHealth,
|
||||
apiHost,
|
||||
isLoadingNodeTopology,
|
||||
nodeTopology,
|
||||
} = props
|
||||
switch (step) {
|
||||
case 0:
|
||||
return <DebugConnectionCheck {...props} />;
|
||||
return <DebugConnectionCheck nodeHealth={nodeHealth} debugApiHost={debugApiHost} />
|
||||
case 1:
|
||||
return <VersionCheck {...props} />;
|
||||
return <VersionCheck nodeHealth={nodeHealth} beeRelease={beeRelease} isLoadingBeeRelease={isLoadingBeeRelease} />
|
||||
case 2:
|
||||
return <EthereumConnectionCheck {...props} />;
|
||||
return <EthereumConnectionCheck nodeAddresses={nodeAddresses} isLoadingNodeAddresses={isLoadingNodeAddresses} />
|
||||
case 3:
|
||||
return <ChequebookDeployFund {...props} />;
|
||||
return (
|
||||
<ChequebookDeployFund
|
||||
chequebookAddress={chequebookAddress}
|
||||
chequebookBalance={chequebookBalance}
|
||||
isLoadingChequebookAddress={isLoadingChequebookAddress}
|
||||
isLoadingChequebookBalance={isLoadingChequebookBalance}
|
||||
/>
|
||||
)
|
||||
case 4:
|
||||
return <NodeConnectionCheck {...props} />;
|
||||
return <NodeConnectionCheck nodeApiHealth={nodeApiHealth} apiHost={apiHost} />
|
||||
default:
|
||||
return <PeerConnection {...props} />;
|
||||
return <PeerConnection nodeTopology={nodeTopology} isLoadingNodeTopology={isLoadingNodeTopology} />
|
||||
}
|
||||
}
|
||||
|
||||
export default function NodeSetupWorkflow(props: any) {
|
||||
const {nodeHealth, nodeApiHealth, nodeAddresses, chequebookAddress, chequebookBalance, beeRelease, nodeTopology, setStatusChecksVisible} = props
|
||||
const classes = useStyles();
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
const [completed, setCompleted] = useState<{ [k: number]: boolean }>({});
|
||||
const steps = getSteps();
|
||||
export default function NodeSetupWorkflow(props: Props): ReactElement {
|
||||
const {
|
||||
nodeHealth,
|
||||
nodeApiHealth,
|
||||
nodeAddresses,
|
||||
chequebookAddress,
|
||||
chequebookBalance,
|
||||
beeRelease,
|
||||
nodeTopology,
|
||||
setStatusChecksVisible,
|
||||
} = props
|
||||
const classes = useStyles()
|
||||
const [activeStep, setActiveStep] = useState(0)
|
||||
const [completed, setCompleted] = useState<{ [k: number]: boolean }>({})
|
||||
const steps = getSteps()
|
||||
|
||||
useEffect(() => {
|
||||
const handleComplete = (index: number) => {
|
||||
const newCompleted = completed;
|
||||
newCompleted[index] = true;
|
||||
setCompleted(newCompleted);
|
||||
};
|
||||
const newCompleted = completed
|
||||
newCompleted[index] = true
|
||||
setCompleted(newCompleted)
|
||||
}
|
||||
|
||||
const evaluateNodeStatus = () => {
|
||||
if (nodeHealth?.status === 'ok') {
|
||||
@@ -88,7 +144,7 @@ export default function NodeSetupWorkflow(props: any) {
|
||||
setActiveStep(3)
|
||||
}
|
||||
|
||||
if (chequebookAddress?.chequebookaddress && chequebookBalance.totalBalance > 0) {
|
||||
if (chequebookAddress?.chequebookaddress && chequebookBalance && chequebookBalance.totalBalance > 0) {
|
||||
handleComplete(3)
|
||||
setActiveStep(4)
|
||||
}
|
||||
@@ -104,45 +160,62 @@ export default function NodeSetupWorkflow(props: any) {
|
||||
}
|
||||
}
|
||||
evaluateNodeStatus()
|
||||
}, [nodeHealth, nodeApiHealth, nodeAddresses, chequebookAddress, beeRelease, chequebookBalance, nodeTopology, completed])
|
||||
}, [
|
||||
nodeHealth,
|
||||
nodeApiHealth,
|
||||
nodeAddresses,
|
||||
chequebookAddress,
|
||||
beeRelease,
|
||||
chequebookBalance,
|
||||
nodeTopology,
|
||||
completed,
|
||||
])
|
||||
|
||||
const handleNext = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
||||
};
|
||||
setActiveStep(prevActiveStep => prevActiveStep + 1)
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
||||
};
|
||||
setActiveStep(prevActiveStep => prevActiveStep - 1)
|
||||
}
|
||||
|
||||
const handleSetupComplete = () => {
|
||||
setStatusChecksVisible(false)
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Node Setup
|
||||
<span style={{marginLeft:'25px'}}>
|
||||
<Button variant='outlined' size='small' onClick={() => window.location.reload()}><Sync/><span style={{marginLeft:'7px'}}>Refresh Checks</span></Button>
|
||||
<span style={{ marginLeft: '25px' }}>
|
||||
<Button variant="outlined" size="small" onClick={() => window.location.reload()}>
|
||||
<Sync />
|
||||
<span style={{ marginLeft: '7px' }}>Refresh Checks</span>
|
||||
</Button>
|
||||
</span>
|
||||
</Typography>
|
||||
<Stepper nonLinear activeStep={activeStep} orientation="vertical">
|
||||
{steps.map((label, index) => (
|
||||
<Step key={label}>
|
||||
<StepLabel
|
||||
onClick={() => setActiveStep(index === activeStep ? 6 : index)}
|
||||
StepIconComponent={() => {
|
||||
if(completed[index])
|
||||
return <CheckCircle style={{color:'#32c48d', height: '25px', cursor:'pointer'}} />
|
||||
else {
|
||||
return <Error style={{color:'#c9201f', height: '25px', cursor:'pointer'}} />
|
||||
}
|
||||
}}
|
||||
<StepLabel
|
||||
onClick={() => setActiveStep(index === activeStep ? 6 : index)}
|
||||
StepIconComponent={() => {
|
||||
if (completed[index]) {
|
||||
return <CheckCircle style={{ color: '#32c48d', height: '25px', cursor: 'pointer' }} />
|
||||
} else {
|
||||
return <Error style={{ color: '#c9201f', height: '25px', cursor: 'pointer' }} />
|
||||
}
|
||||
}}
|
||||
>
|
||||
<StepButton onClick={() => setActiveStep(index === activeStep ? 6 : index)} style={{justifyContent:'space-between'}}>
|
||||
<div style={{display:'flex'}}>
|
||||
<div style={{marginTop:'5px'}}>{label}</div>
|
||||
<div style={{marginLeft:'12px'}}>{index === activeStep ? <ExpandLessSharp /> : <ExpandMoreSharp />}</div>
|
||||
<StepButton
|
||||
onClick={() => setActiveStep(index === activeStep ? 6 : index)}
|
||||
style={{ justifyContent: 'space-between' }}
|
||||
>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ marginTop: '5px' }}>{label}</div>
|
||||
<div style={{ marginLeft: '12px' }}>
|
||||
{index === activeStep ? <ExpandLessSharp /> : <ExpandMoreSharp />}
|
||||
</div>
|
||||
</div>
|
||||
</StepButton>
|
||||
</StepLabel>
|
||||
@@ -150,20 +223,11 @@ export default function NodeSetupWorkflow(props: any) {
|
||||
<Typography component="div">{getStepContent(index, props)}</Typography>
|
||||
<div className={classes.actionsContainer}>
|
||||
<div>
|
||||
<Button
|
||||
disabled={activeStep === 0}
|
||||
onClick={handleBack}
|
||||
className={classes.button}
|
||||
>
|
||||
<Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleNext}
|
||||
className={classes.button}
|
||||
>
|
||||
Next
|
||||
<Button variant="contained" color="primary" onClick={handleNext} className={classes.button}>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -174,10 +238,7 @@ export default function NodeSetupWorkflow(props: any) {
|
||||
{Object.values(completed).filter(value => value).length === 6 ? (
|
||||
<Paper square elevation={0} className={classes.resetContainer}>
|
||||
<Typography>Bee setup complete! Welcome to the swarm and the internet of decentralized storage</Typography>
|
||||
<Button
|
||||
onClick={handleBack}
|
||||
className={classes.button}
|
||||
>
|
||||
<Button onClick={handleBack} className={classes.button}>
|
||||
Back
|
||||
</Button>
|
||||
<Button onClick={handleSetupComplete} variant="contained" color="primary" className={classes.button}>
|
||||
@@ -186,5 +247,5 @@ export default function NodeSetupWorkflow(props: any) {
|
||||
</Paper>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,44 +1,57 @@
|
||||
import { Typography } from '@material-ui/core/';
|
||||
import { CheckCircle, Warning } from '@material-ui/icons/';
|
||||
import EthereumAddress from '../../../components/EthereumAddress';
|
||||
import DepositModal from '../../../components/DepositModal';
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs';
|
||||
import { Typography } from '@material-ui/core/'
|
||||
import { CheckCircle, Warning } from '@material-ui/icons/'
|
||||
import EthereumAddress from '../../../components/EthereumAddress'
|
||||
import DepositModal from '../../../components/DepositModal'
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs'
|
||||
import type { ChequebookAddressResponse, ChequebookBalanceResponse } from '@ethersphere/bee-js'
|
||||
import type { ReactElement } from 'react'
|
||||
|
||||
export default function ChequebookDeployFund(props: any) {
|
||||
return (
|
||||
<div>
|
||||
<p style={{marginBottom:'20px', display:'flex'}}>
|
||||
<span style={{ marginRight:'40px'}} >Deploy chequebook and fund with BZZ</span>
|
||||
{props.chequebookAddress?.chequebookaddress ?
|
||||
<DepositModal />
|
||||
: null }
|
||||
</p>
|
||||
<div style={{ marginBottom:'10px' }}>
|
||||
{props.chequebookAddress?.chequebookaddress && props.chequebookBalance && props.chequebookBalance?.totalBalance > 0 ?
|
||||
<div>
|
||||
<CheckCircle style={{color:'#32c48d', marginRight: '7px', height: '18px'}} />
|
||||
<span>Your chequebook is deployed and funded!</span>
|
||||
</div>
|
||||
:
|
||||
props.loadingChequebookAddress || props.isLoadingChequebookBalance ?
|
||||
null
|
||||
:
|
||||
<div>
|
||||
<Warning style={{color:'#ff9800', marginRight: '7px', height: '18px'}} />
|
||||
<span>Your chequebook is either not deployed or funded. Run the below commands to get your address and deposit ETH. Then visit the BZZaar here <Typography variant='button'>https://bzz.ethswarm.org/?transaction=buy&amount=10&slippage=30&receiver=[ENTER_ADDRESS_HERE]</Typography> to get BZZ</span>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`bee-get-addr`}
|
||||
mac={`bee-get-addr`}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<Typography variant="subtitle1" gutterBottom>Chequebook Address</Typography>
|
||||
<EthereumAddress
|
||||
address={props.chequebookAddress?.chequebookaddress}
|
||||
network={'goerli'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
interface Props {
|
||||
chequebookAddress: ChequebookAddressResponse | null
|
||||
chequebookBalance: ChequebookBalanceResponse | null
|
||||
isLoadingChequebookAddress: boolean
|
||||
isLoadingChequebookBalance: boolean
|
||||
}
|
||||
|
||||
const ChequebookDeployFund = (props: Props): ReactElement => (
|
||||
<div>
|
||||
<p style={{ marginBottom: '20px', display: 'flex' }}>
|
||||
<span style={{ marginRight: '40px' }}>Deploy chequebook and fund with BZZ</span>
|
||||
{props.chequebookAddress?.chequebookaddress ? <DepositModal /> : null}
|
||||
</p>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
{
|
||||
// FIXME: this should be broken up
|
||||
/* eslint-disable no-nested-ternary */
|
||||
props.chequebookAddress?.chequebookaddress &&
|
||||
props.chequebookBalance &&
|
||||
props.chequebookBalance?.totalBalance > 0 ? (
|
||||
<div>
|
||||
<CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
|
||||
<span>Your chequebook is deployed and funded!</span>
|
||||
</div>
|
||||
) : props.isLoadingChequebookAddress || props.isLoadingChequebookBalance ? null : (
|
||||
<div>
|
||||
<Warning style={{ color: '#ff9800', marginRight: '7px', height: '18px' }} />
|
||||
<span>
|
||||
Your chequebook is either not deployed or funded. Run the below commands to get your address and deposit
|
||||
ETH. Then visit the BZZaar here{' '}
|
||||
<Typography variant="button">
|
||||
https://bzz.ethswarm.org/?transaction=buy&amount=10&slippage=30&receiver=[ENTER_ADDRESS_HERE]
|
||||
</Typography>{' '}
|
||||
to get BZZ
|
||||
</span>
|
||||
<CodeBlockTabs showLineNumbers linux={`bee-get-addr`} mac={`bee-get-addr`} />
|
||||
</div>
|
||||
)
|
||||
/* eslint-enable no-nested-ternary */
|
||||
}
|
||||
</div>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Chequebook Address
|
||||
</Typography>
|
||||
<EthereumAddress address={props.chequebookAddress?.chequebookaddress} network={'goerli'} />
|
||||
</div>
|
||||
)
|
||||
|
||||
export default ChequebookDeployFund
|
||||
|
||||
@@ -1,76 +1,101 @@
|
||||
import React from 'react'
|
||||
import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/';
|
||||
import MuiAlert from '@material-ui/lab/Alert';
|
||||
import { CheckCircle, Error, ExpandMoreSharp } from '@material-ui/icons/';
|
||||
import type { ReactElement } from 'react'
|
||||
import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/'
|
||||
import MuiAlert from '@material-ui/lab/Alert'
|
||||
import { CheckCircle, Error, ExpandMoreSharp } from '@material-ui/icons/'
|
||||
|
||||
import ConnectToHost from '../../../components/ConnectToHost';
|
||||
import ConnectToHost from '../../../components/ConnectToHost'
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs'
|
||||
import type { Health } from '@ethersphere/bee-js'
|
||||
|
||||
export default function NodeConnectionCheck(props: any) {
|
||||
return (
|
||||
interface Props {
|
||||
nodeHealth: Health | null
|
||||
debugApiHost: string
|
||||
}
|
||||
|
||||
export default function NodeConnectionCheck(props: Props): ReactElement {
|
||||
return (
|
||||
<div>
|
||||
<p>Connect to Bee Node Debug API</p>
|
||||
<div>
|
||||
<div style={{ display: 'flex', marginBottom: '25px' }}>
|
||||
{props.nodeHealth?.status === 'ok' ? (
|
||||
<CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
|
||||
) : (
|
||||
<Error style={{ color: '#c9201f', marginRight: '7px', height: '18px' }} />
|
||||
)}
|
||||
<span style={{ marginRight: '15px' }}>
|
||||
Debug API (<Typography variant="button">{props.debugApiHost}</Typography>)
|
||||
</span>
|
||||
<ConnectToHost hostName={'debug_api_host'} defaultHost={props.debugApiHost} />
|
||||
</div>
|
||||
<div>
|
||||
<p>Connect to Bee Node Debug API</p>
|
||||
<div>
|
||||
<div style={{display:'flex', marginBottom: '25px'}}>
|
||||
{ props.nodeHealth?.status === 'ok' ?
|
||||
<CheckCircle style={{color:'#32c48d', marginRight: '7px', height: '18px'}} />
|
||||
:
|
||||
<Error style={{color:'#c9201f', marginRight: '7px', height: '18px'}} />
|
||||
}
|
||||
<span style={{marginRight:'15px'}}>Debug API (<Typography variant="button">{props.debugApiHost}</Typography>)</span>
|
||||
<ConnectToHost hostName={'debug_api_host'} defaultHost={props.debugApiHost} />
|
||||
</div>
|
||||
<div>
|
||||
{ props.nodeHealth?.status !== 'ok' ?
|
||||
<Typography component="div" variant="body2" gutterBottom style={{margin: '15px'}}>
|
||||
We cannot connect to your nodes debug API at <Typography variant="button">{props.debugApiHost}</Typography>. Please check the following to troubleshoot your issue.
|
||||
<Accordion style={{marginTop:'20px'}}>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreSharp />}
|
||||
aria-controls="panel1a-content"
|
||||
id="panel1a-header"
|
||||
>
|
||||
<Typography>Troubleshoot</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography component="div">
|
||||
{props.nodeHealth?.status !== 'ok' ? (
|
||||
<Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
|
||||
We cannot connect to your nodes debug API at{' '}
|
||||
<Typography variant="button">{props.debugApiHost}</Typography>. Please check the following to troubleshoot
|
||||
your issue.
|
||||
<Accordion style={{ marginTop: '20px' }}>
|
||||
<AccordionSummary expandIcon={<ExpandMoreSharp />} aria-controls="panel1a-content" id="panel1a-header">
|
||||
<Typography>Troubleshoot</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography component="div">
|
||||
<ol>
|
||||
<li>Check the status of your node by running the below command to see if your node is running.</li>
|
||||
<li>
|
||||
Check the status of your node by running the below command to see if your node is running.
|
||||
</li>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl status bee`}
|
||||
mac={`brew services status swarm-bee`}
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl status bee`}
|
||||
mac={`brew services status swarm-bee`}
|
||||
/>
|
||||
<li>If your node is running, check your firewall settings to make sure that port 1635 (or your custom specified port) is bound to localhost. If your node is not running try executing the below command to start your bee node</li>
|
||||
<MuiAlert style={{marginTop:'10px', marginBottom:'10px'}} elevation={6} variant="filled" severity="error">
|
||||
Your debug node API should never be completely open to the internet. If you want to connect remotely, make sure your firewall settings are set to only allow specific trusted IP addresses and block all other ports. A simple google search for "what is my ip" will show you your computers public IP address to allow.
|
||||
<li>
|
||||
If your node is running, check your firewall settings to make sure that port 1635 (or your
|
||||
custom specified port) is bound to localhost. If your node is not running try executing the
|
||||
below command to start your bee node
|
||||
</li>
|
||||
<MuiAlert
|
||||
style={{ marginTop: '10px', marginBottom: '10px' }}
|
||||
elevation={6}
|
||||
variant="filled"
|
||||
severity="error"
|
||||
>
|
||||
Your debug node API should never be completely open to the internet. If you want to connect
|
||||
remotely, make sure your firewall settings are set to only allow specific trusted IP addresses
|
||||
and block all other ports. A simple google search for "what is my ip" will show you
|
||||
your computers public IP address to allow.
|
||||
</MuiAlert>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl start bee`}
|
||||
mac={`brew services start swarm-bee`}
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl start bee`}
|
||||
mac={`brew services start swarm-bee`}
|
||||
/>
|
||||
<li>Run the commands to validate your node is running and see the log output.</li>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
|
||||
mac={`brew services status swarm-bee \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
|
||||
mac={`brew services status swarm-bee \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
|
||||
/>
|
||||
<li>Lastly, check your nodes configuration settings to validate the debug API is enabled and the Cross Origin Resource Sharing (CORS) setting is configured to allow your host. Config parameter <strong>debug-api-enable</strong> must be set to <strong>true</strong> and <strong>cors-allowed-origins</strong> must be set to your host domain or IP. If edits are made to the configuration run the restart command below for changes to take effect.</li>
|
||||
<li>
|
||||
Lastly, check your nodes configuration settings to validate the debug API is enabled and the
|
||||
Cross Origin Resource Sharing (CORS) setting is configured to allow your host. Config parameter{' '}
|
||||
<strong>debug-api-enable</strong> must be set to <strong>true</strong> and{' '}
|
||||
<strong>cors-allowed-origins</strong> must be set to your host domain or IP. If edits are made
|
||||
to the configuration run the restart command below for changes to take effect.
|
||||
</li>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`sudo vi /etc/bee/bee.yaml\nsudo systemctl restart bee`}
|
||||
mac={`sudo vi /etc/bee/bee.yaml \nbrew services restart swarm-bee`}
|
||||
showLineNumbers
|
||||
linux={`sudo vi /etc/bee/bee.yaml\nsudo systemctl restart bee`}
|
||||
mac={`sudo vi /etc/bee/bee.yaml \nbrew services restart swarm-bee`}
|
||||
/>
|
||||
</ol>
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</Typography>
|
||||
:
|
||||
null}
|
||||
</div>
|
||||
</div>
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</Typography>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,37 +1,56 @@
|
||||
import React from 'react';
|
||||
import { Typography } from '@material-ui/core/';
|
||||
import { CheckCircle, Warning } from '@material-ui/icons/';
|
||||
import EthereumAddress from '../../../components/EthereumAddress';
|
||||
import type { ReactElement } from 'react'
|
||||
import { Typography } from '@material-ui/core/'
|
||||
import { CheckCircle, Warning } from '@material-ui/icons/'
|
||||
import EthereumAddress from '../../../components/EthereumAddress'
|
||||
import type { NodeAddresses } from '@ethersphere/bee-js'
|
||||
|
||||
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>
|
||||
)
|
||||
interface Props {
|
||||
nodeAddresses: NodeAddresses | null
|
||||
isLoadingNodeAddresses: boolean
|
||||
}
|
||||
|
||||
export default function EthereumConnectionCheck(props: Props): ReactElement {
|
||||
return (
|
||||
<div>
|
||||
<p>Connect to the ethereum blockchain.</p>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
{
|
||||
// FIXME: this should be broken up
|
||||
/* eslint-disable no-nested-ternary */
|
||||
props.nodeAddresses?.ethereum ? (
|
||||
<div>
|
||||
<CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
|
||||
<span>Your connected to the Ethereum network</span>
|
||||
</div>
|
||||
) : props.isLoadingNodeAddresses ? 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>
|
||||
) /* eslint-enable no-nested-ternary */
|
||||
}
|
||||
</div>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Node Address
|
||||
</Typography>
|
||||
<EthereumAddress address={props.nodeAddresses?.ethereum} network={'goerli'} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,64 +1,71 @@
|
||||
import React from 'react'
|
||||
import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/';
|
||||
import { CheckCircle, Error, ExpandMoreSharp } from '@material-ui/icons/';
|
||||
import React, { ReactElement } from 'react'
|
||||
import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/'
|
||||
import { CheckCircle, Error, ExpandMoreSharp } from '@material-ui/icons/'
|
||||
|
||||
import ConnectToHost from '../../../components/ConnectToHost';
|
||||
import ConnectToHost from '../../../components/ConnectToHost'
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs'
|
||||
|
||||
export default function NodeConnectionCheck(props: any) {
|
||||
return (
|
||||
<div>
|
||||
<p>Connect to Bee Node API</p>
|
||||
<div style={{display:'flex', marginBottom: '25px'}}>
|
||||
{ props.nodeApiHealth ?
|
||||
<CheckCircle style={{color:'#32c48d', marginRight: '7px', height: '18px'}} />
|
||||
:
|
||||
<Error style={{color:'#c9201f', marginRight: '7px', height: '18px'}} />
|
||||
}
|
||||
<span style={{marginRight:'15px'}}>Node API (<Typography variant="button">{props.apiHost}</Typography>)</span>
|
||||
<ConnectToHost hostName='api_host' defaultHost={props.apiHost} />
|
||||
</div>
|
||||
<div>
|
||||
{ !props.nodeApiHealth ?
|
||||
<Typography component="div" variant="body2" gutterBottom style={{margin: '15px'}}>
|
||||
We cannot connect to your nodes API at <Typography variant="button">{props.apiHost}</Typography>. Please check the following to troubleshoot your issue.
|
||||
<Accordion style={{marginTop:'20px'}}>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreSharp />}
|
||||
aria-controls="panel1a-content"
|
||||
id="panel1a-header"
|
||||
>
|
||||
<Typography>Troubleshoot</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<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
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl status bee`}
|
||||
mac={`brew services status swarm-bee`}
|
||||
/>
|
||||
<li>If your node is running, check your firewall settings to make sure that port 1633 (or your custom specified port) is exposed to the internet. If your node is not running try executing the below command to start your bee node</li>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl start bee`}
|
||||
mac={`brew services start swarm-bee`}
|
||||
/>
|
||||
<li>Run the commands to validate your node is running and see the log output.</li>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
|
||||
mac={`brew services status swarm-bee \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
|
||||
/>
|
||||
</ol>
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</Typography>
|
||||
:
|
||||
null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
interface Props {
|
||||
nodeApiHealth: boolean
|
||||
apiHost: string
|
||||
}
|
||||
|
||||
export default function NodeConnectionCheck(props: Props): ReactElement {
|
||||
return (
|
||||
<div>
|
||||
<p>Connect to Bee Node API</p>
|
||||
<div style={{ display: 'flex', marginBottom: '25px' }}>
|
||||
{props.nodeApiHealth ? (
|
||||
<CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
|
||||
) : (
|
||||
<Error style={{ color: '#c9201f', marginRight: '7px', height: '18px' }} />
|
||||
)}
|
||||
<span style={{ marginRight: '15px' }}>
|
||||
Node API (<Typography variant="button">{props.apiHost}</Typography>)
|
||||
</span>
|
||||
<ConnectToHost hostName="api_host" defaultHost={props.apiHost} />
|
||||
</div>
|
||||
<div>
|
||||
{!props.nodeApiHealth ? (
|
||||
<Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
|
||||
We cannot connect to your nodes API at <Typography variant="button">{props.apiHost}</Typography>. Please
|
||||
check the following to troubleshoot your issue.
|
||||
<Accordion style={{ marginTop: '20px' }}>
|
||||
<AccordionSummary expandIcon={<ExpandMoreSharp />} aria-controls="panel1a-content" id="panel1a-header">
|
||||
<Typography>Troubleshoot</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<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
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl status bee`}
|
||||
mac={`brew services status swarm-bee`}
|
||||
/>
|
||||
<li>
|
||||
If your node is running, check your firewall settings to make sure that port 1633 (or your custom
|
||||
specified port) is exposed to the internet. If your node is not running try executing the below
|
||||
command to start your bee node
|
||||
</li>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl start bee`}
|
||||
mac={`brew services start swarm-bee`}
|
||||
/>
|
||||
<li>Run the commands to validate your node is running and see the log output.</li>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
|
||||
mac={`brew services status swarm-bee \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
|
||||
/>
|
||||
</ol>
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</Typography>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,45 +1,53 @@
|
||||
import React from 'react';
|
||||
import { Typography } from '@material-ui/core/';
|
||||
import { CheckCircle, Warning } from '@material-ui/icons/';
|
||||
import React, { ReactElement } from 'react'
|
||||
import { Typography } from '@material-ui/core/'
|
||||
import { CheckCircle, Warning } from '@material-ui/icons/'
|
||||
import { Topology } from '@ethersphere/bee-js'
|
||||
|
||||
export default function PeerConnection(props: any) {
|
||||
return (
|
||||
<div>
|
||||
<p>Connect to Peers</p>
|
||||
<div style={{ marginBottom:'10px' }}>
|
||||
{props.nodeTopology.connected && props.nodeTopology.connected > 0 ?
|
||||
<div>
|
||||
<CheckCircle style={{color:'#32c48d', marginRight: '7px', height: '18px'}} />
|
||||
<span>Your connected to {props.nodeTopology.connected} peers!</span>
|
||||
</div>
|
||||
:
|
||||
props.loadingNodeTopology ?
|
||||
null
|
||||
:
|
||||
<div>
|
||||
<Warning style={{color:'#ff9800', marginRight: '7px', height: '18px'}} />
|
||||
<span>Your node is not connected to any peers</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div style={{display:'flex'}}>
|
||||
<div style={{marginRight:'30px'}}>
|
||||
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
|
||||
<span>Connected Peers</span>
|
||||
</Typography>
|
||||
<Typography component="h2" variant="h5">
|
||||
{ props.nodeTopology.connected }
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
|
||||
<span>Discovered Nodes</span>
|
||||
</Typography>
|
||||
<Typography component="h2" variant="h5">
|
||||
{ props.nodeTopology.population }
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
interface Props {
|
||||
nodeTopology: Topology | null
|
||||
isLoadingNodeTopology: boolean
|
||||
}
|
||||
|
||||
export default function PeerConnection(props: Props): ReactElement {
|
||||
return (
|
||||
<div>
|
||||
<p>Connect to Peers</p>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
html_url
|
||||
{
|
||||
// FIXME: this should be broken up
|
||||
/* eslint-disable no-nested-ternary */
|
||||
props.nodeTopology?.connected && props.nodeTopology?.connected > 0 ? (
|
||||
<div>
|
||||
<CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
|
||||
<span>Your connected to {props.nodeTopology.connected} peers!</span>
|
||||
</div>
|
||||
) : props.isLoadingNodeTopology ? null : (
|
||||
<div>
|
||||
<Warning style={{ color: '#ff9800', marginRight: '7px', height: '18px' }} />
|
||||
<span>Your node is not connected to any peers</span>
|
||||
</div>
|
||||
) /* eslint-enable no-nested-ternary */
|
||||
}
|
||||
</div>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ marginRight: '30px' }}>
|
||||
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
|
||||
<span>Connected Peers</span>
|
||||
</Typography>
|
||||
<Typography component="h2" variant="h5">
|
||||
{props.nodeTopology?.connected}
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
|
||||
<span>Discovered Nodes</span>
|
||||
</Typography>
|
||||
<Typography component="h2" variant="h5">
|
||||
{props.nodeTopology?.population}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,45 +1,81 @@
|
||||
import React from 'react';
|
||||
import { Typography } from '@material-ui/core/';
|
||||
import { CheckCircle, Warning } from '@material-ui/icons/';
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs';
|
||||
import React, { ReactElement } from 'react'
|
||||
import { Typography } from '@material-ui/core/'
|
||||
import { CheckCircle, Warning } from '@material-ui/icons/'
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs'
|
||||
import { Health } from '@ethersphere/bee-js'
|
||||
|
||||
export default function VersionCheck(props: any) {
|
||||
return (
|
||||
<div>
|
||||
<p>Check to make sure the latest version of <a href='https://github.com/ethersphere/bee' rel='noreferrer' target='_blank'>Bee</a> is running</p>
|
||||
{props.beeRelease && props.beeRelease.name === `v${props.nodeReadiness?.version?.split('-')[0]}` ?
|
||||
<div>
|
||||
<CheckCircle style={{color:'#32c48d', marginRight: '7px', height: '18px'}} />
|
||||
<span>Your running the latest version of Bee</span>
|
||||
</div>
|
||||
:
|
||||
props.loadingBeeRelease ?
|
||||
null
|
||||
:
|
||||
<div>
|
||||
<Warning style={{color:'#ff9800', marginRight: '7px', height: '18px'}} />
|
||||
<span>Your Bee version is out of date. Please update to the <a href={props.beeRelease.html_url} rel='noreferrer' target='_blank'>latest</a> before continuing. Rerun the installation script below to upgrade. Reference the docs for help with updating. <a href='https://docs.ethswarm.org/docs/installation/manual#upgrading-bee' rel='noreferrer' target='_blank'>Docs</a></span>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`bee version\nwget https://github.com/ethersphere/bee/releases/download/${props.beeRelease.name}/bee_${props.nodeReadiness?.version?.split('-')[0]}_amd64.deb\nsudo dpkg -i bee_${props.nodeReadiness?.version?.split('-')[0]}_amd64.deb`}
|
||||
mac={`bee version\nbrew tap ethersphere/tap\nbrew install swarm-bee\nbrew services start swarm-bee`}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div style={{display:'flex'}}>
|
||||
<div style={{marginRight:'30px'}}>
|
||||
<p><span>Current Version</span></p>
|
||||
<Typography component="h5" variant="h5">
|
||||
<span>{props.nodeReadiness?.version ? ` v${props.nodeReadiness?.version?.split('-')[0]}` : '-'}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<p><span>Latest Version</span></p>
|
||||
<Typography component="h5" variant="h5">
|
||||
<span>{props.beeRelease && props.beeRelease.name ? props.beeRelease.name : '-'}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
interface Props {
|
||||
beeRelease: LatestBeeRelease | null
|
||||
isLoadingBeeRelease: boolean
|
||||
nodeHealth: Health | null
|
||||
}
|
||||
|
||||
export default function VersionCheck(props: Props): ReactElement {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
Check to make sure the latest version of{' '}
|
||||
<a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
|
||||
Bee
|
||||
</a>{' '}
|
||||
is running
|
||||
</p>
|
||||
{
|
||||
// FIXME: this should be broken up
|
||||
/* eslint-disable no-nested-ternary */
|
||||
props.beeRelease && props.beeRelease.name === `v${props.nodeHealth?.version?.split('-')[0]}` ? (
|
||||
<div>
|
||||
<CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
|
||||
<span>Your running the latest version of Bee</span>
|
||||
</div>
|
||||
) : props.isLoadingBeeRelease ? null : (
|
||||
<div>
|
||||
<Warning style={{ color: '#ff9800', marginRight: '7px', height: '18px' }} />
|
||||
<span>
|
||||
Your Bee version is out of date. Please update to the{' '}
|
||||
<a href={props.beeRelease?.html_url} rel="noreferrer" target="_blank">
|
||||
latest
|
||||
</a>{' '}
|
||||
before continuing. Rerun the installation script below to upgrade. Reference the docs for help with
|
||||
updating.{' '}
|
||||
<a
|
||||
href="https://docs.ethswarm.org/docs/installation/manual#upgrading-bee"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Docs
|
||||
</a>
|
||||
</span>
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`bee version\nwget https://github.com/ethersphere/bee/releases/download/${
|
||||
props.beeRelease?.name
|
||||
}/bee_${props.nodeHealth?.version?.split('-')[0]}_amd64.deb\nsudo dpkg -i bee_${
|
||||
props.nodeHealth?.version?.split('-')[0]
|
||||
}_amd64.deb`}
|
||||
mac={`bee version\nbrew tap ethersphere/tap\nbrew install swarm-bee\nbrew services start swarm-bee`}
|
||||
/>
|
||||
</div>
|
||||
) /* eslint-enable no-nested-ternary */
|
||||
}
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ marginRight: '30px' }}>
|
||||
<p>
|
||||
<span>Current Version</span>
|
||||
</p>
|
||||
<Typography component="h5" variant="h5">
|
||||
<span>{props.nodeHealth?.version ? ` v${props.nodeHealth?.version?.split('-')[0]}` : '-'}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span>Latest Version</span>
|
||||
</p>
|
||||
<Typography component="h5" variant="h5">
|
||||
<span>{props.beeRelease && props.beeRelease.name ? props.beeRelease.name : '-'}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
+126
-114
@@ -1,13 +1,13 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ReactElement, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
|
||||
import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/';
|
||||
import { CheckCircle, Error, ArrowRight, ArrowDropUp } from '@material-ui/icons/';
|
||||
import { Skeleton } from '@material-ui/lab';
|
||||
import type { Health, NodeAddresses, Topology } from '@ethersphere/bee-js';
|
||||
import { createStyles, makeStyles } from '@material-ui/core/styles'
|
||||
import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/'
|
||||
import { CheckCircle, Error, ArrowRight, ArrowDropUp } from '@material-ui/icons/'
|
||||
import { Skeleton } from '@material-ui/lab'
|
||||
import type { Health, NodeAddresses, Topology } from '@ethersphere/bee-js'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
root: {
|
||||
display: 'flex',
|
||||
@@ -22,120 +22,132 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
flex: '1 0 auto',
|
||||
},
|
||||
status: {
|
||||
color: '#2145a0',
|
||||
backgroundColor: '#e1effe',
|
||||
}
|
||||
color: '#2145a0',
|
||||
backgroundColor: '#e1effe',
|
||||
},
|
||||
}),
|
||||
);
|
||||
)
|
||||
|
||||
interface IProps{
|
||||
nodeHealth: Health,
|
||||
loadingNodeHealth: boolean,
|
||||
beeRelease: any,
|
||||
loadingBeeRelease: boolean,
|
||||
nodeAddresses: NodeAddresses,
|
||||
nodeTopology: Topology,
|
||||
loadingNodeTopology: boolean,
|
||||
setStatusChecksVisible: any,
|
||||
interface Props {
|
||||
nodeHealth: Health | null
|
||||
loadingNodeHealth: boolean
|
||||
beeRelease: LatestBeeRelease | null
|
||||
loadingBeeRelease: boolean
|
||||
nodeAddresses: NodeAddresses
|
||||
nodeTopology: Topology
|
||||
loadingNodeTopology: boolean
|
||||
setStatusChecksVisible: (value: boolean) => void
|
||||
}
|
||||
|
||||
function StatusCard(props: IProps) {
|
||||
const classes = useStyles();
|
||||
function StatusCard(props: Props): ReactElement {
|
||||
const classes = useStyles()
|
||||
|
||||
const [underlayAddressesVisible, setUnderlayAddresessVisible] = useState<Boolean>(false)
|
||||
const [underlayAddressesVisible, setUnderlayAddresessVisible] = useState<boolean>(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card className={classes.root}>
|
||||
{ !props.loadingNodeHealth && props.nodeHealth ?
|
||||
<div className={classes.details}>
|
||||
<CardContent className={classes.content}>
|
||||
<Typography component="h5" variant="h5" style={{display:'flex', justifyContent:'space-between'}}>
|
||||
{ props.nodeHealth.status === 'ok' ?
|
||||
<div>
|
||||
<CheckCircle style={{color:'#32c48d', marginRight: '7px'}} />
|
||||
<span>Connected to Bee Node</span>
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
<Error style={{color:'#c9201f', marginRight: '7px'}} />
|
||||
<span>Could not connect to Bee Node</span>
|
||||
</div>
|
||||
}
|
||||
<Button variant='outlined' color='primary' size='small' style={{marginLeft:'12px'}} onClick={() => props.setStatusChecksVisible(true)}>View Status Checks</Button>
|
||||
</Typography>
|
||||
<div style={{marginBottom: '20px' }}>
|
||||
<span style={{marginRight:'20px'}}>Discovered Nodes: { props.nodeTopology.population }</span>
|
||||
<span style={{marginRight:'20px'}}>
|
||||
<span>Connected Peers: </span>
|
||||
<Link to='/peers/'>
|
||||
{ props.nodeTopology.connected }
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
return (
|
||||
<div>
|
||||
<Card className={classes.root}>
|
||||
{!props.loadingNodeHealth && props.nodeHealth ? (
|
||||
<div className={classes.details}>
|
||||
<CardContent className={classes.content}>
|
||||
<Typography component="h5" variant="h5" style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
{props.nodeHealth.status === 'ok' ? (
|
||||
<div>
|
||||
<CheckCircle style={{ color: '#32c48d', marginRight: '7px' }} />
|
||||
<span>Connected to Bee Node</span>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Error style={{ color: '#c9201f', marginRight: '7px' }} />
|
||||
<span>Could not connect to Bee Node</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
size="small"
|
||||
style={{ marginLeft: '12px' }}
|
||||
onClick={() => props.setStatusChecksVisible(true)}
|
||||
>
|
||||
View Status Checks
|
||||
</Button>
|
||||
</Typography>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<span style={{ marginRight: '20px' }}>Discovered Nodes: {props.nodeTopology.population}</span>
|
||||
<span style={{ marginRight: '20px' }}>
|
||||
<span>Connected Peers: </span>
|
||||
<Link to="/peers/">{props.nodeTopology.connected}</Link>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<Typography component="div" variant="subtitle2" gutterBottom>
|
||||
<span>AGENT: </span>
|
||||
<a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
|
||||
Bee
|
||||
</a>
|
||||
<span>{props.nodeHealth?.version ? ` v${props.nodeHealth.version}` : '-'}</span>
|
||||
{
|
||||
// FIXME: this should be broken up
|
||||
/* eslint-disable no-nested-ternary */
|
||||
props.beeRelease && props.beeRelease.name === `v${props.nodeHealth?.version?.split('-')[0]}` ? (
|
||||
<Chip
|
||||
style={{ marginLeft: '7px', color: '#2145a0' }}
|
||||
size="small"
|
||||
label="latest"
|
||||
className={classes.status}
|
||||
/>
|
||||
) : props.loadingBeeRelease ? (
|
||||
''
|
||||
) : (
|
||||
<Typography variant="button">update</Typography>
|
||||
)
|
||||
/* eslint-enable no-nested-ternary */
|
||||
}
|
||||
</Typography>
|
||||
<Typography component="div" variant="subtitle2" gutterBottom>
|
||||
<span>PUBLIC KEY: </span>
|
||||
<span>{props.nodeAddresses.public_key ? props.nodeAddresses.public_key : '-'}</span>
|
||||
</Typography>
|
||||
<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 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 component="div" onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
|
||||
<Button color="primary" style={{ padding: 0, marginTop: '6px' }}>
|
||||
{underlayAddressesVisible ? (
|
||||
<ArrowDropUp style={{ fontSize: '12px' }} />
|
||||
) : (
|
||||
<ArrowRight style={{ fontSize: '12px' }} />
|
||||
)}
|
||||
<span>Underlay Addresses</span>
|
||||
</Button>
|
||||
</Typography>
|
||||
{underlayAddressesVisible ? (
|
||||
<div>
|
||||
<Typography component="div" variant="subtitle2" gutterBottom>
|
||||
<span>AGENT: </span>
|
||||
<a href='https://github.com/ethersphere/bee' rel='noreferrer' target='_blank'>Bee</a>
|
||||
<span>{props.nodeHealth?.version ? ` v${props.nodeHealth.version}` : '-'}</span>
|
||||
{props.beeRelease && props.beeRelease.name === `v${props.nodeHealth?.version?.split('-')[0]}` ?
|
||||
<Chip
|
||||
style={{ marginLeft: '7px', color: '#2145a0' }}
|
||||
size="small"
|
||||
label='latest'
|
||||
className={classes.status}
|
||||
/>
|
||||
:
|
||||
props.loadingBeeRelease ?
|
||||
''
|
||||
:
|
||||
<Typography variant="button">update</Typography>
|
||||
}
|
||||
</Typography>
|
||||
<Typography component="div" variant="subtitle2" gutterBottom>
|
||||
<span>PUBLIC KEY: </span>
|
||||
<span>{ props.nodeAddresses.public_key ? props.nodeAddresses.public_key : '-' }</span>
|
||||
</Typography>
|
||||
<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 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 component="div" onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
|
||||
<Button color="primary" style={{padding: 0, marginTop:'6px'}}>
|
||||
{ underlayAddressesVisible ?
|
||||
<ArrowDropUp style={{fontSize:'12px'}} /> :
|
||||
<ArrowRight style={{fontSize:'12px'}} />
|
||||
}
|
||||
<span>Underlay Addresses</span>
|
||||
</Button>
|
||||
</Typography>
|
||||
{underlayAddressesVisible ?
|
||||
<div>
|
||||
|
||||
{ props.nodeAddresses.underlay ?
|
||||
props.nodeAddresses.underlay.map(item => (<li>{item}</li>))
|
||||
: '-' }
|
||||
</div>
|
||||
: null}
|
||||
</Typography>
|
||||
{props.nodeAddresses.underlay
|
||||
? props.nodeAddresses.underlay.map(item => <li key={item}>{item}</li>)
|
||||
: '-'}
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
:
|
||||
<div style={{padding: '16px'}}>
|
||||
<Skeleton width={650} height={32} animation="wave" />
|
||||
<Skeleton width={650} height={24} animation="wave" />
|
||||
<Skeleton width={650} height={24} animation="wave" />
|
||||
</div>
|
||||
}
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
) : null}
|
||||
</Typography>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ padding: '16px' }}>
|
||||
<Skeleton width={650} height={32} animation="wave" />
|
||||
<Skeleton width={650} height={24} animation="wave" />
|
||||
<Skeleton width={650} height={24} animation="wave" />
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default StatusCard
|
||||
|
||||
+128
-120
@@ -1,135 +1,143 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios';
|
||||
import { Container, CircularProgress } from '@material-ui/core';
|
||||
import { useState, useEffect, ReactElement } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Container, CircularProgress } from '@material-ui/core'
|
||||
|
||||
import NodeSetupWorkflow from './NodeSetupWorkflow';
|
||||
import StatusCard from './StatusCard';
|
||||
import EthereumAddressCard from '../../components/EthereumAddressCard';
|
||||
import { useApiHealth, useDebugApiHealth, useApiNodeAddresses, useApiChequebookAddress, useApiNodeTopology, useApiChequebookBalance } from '../../hooks/apiHooks';
|
||||
import NodeSetupWorkflow from './NodeSetupWorkflow'
|
||||
import StatusCard from './StatusCard'
|
||||
import EthereumAddressCard from '../../components/EthereumAddressCard'
|
||||
import {
|
||||
useApiHealth,
|
||||
useDebugApiHealth,
|
||||
useApiNodeAddresses,
|
||||
useApiChequebookAddress,
|
||||
useApiNodeTopology,
|
||||
useApiChequebookBalance,
|
||||
} from '../../hooks/apiHooks'
|
||||
|
||||
export default function Status() {
|
||||
const [beeRelease, setBeeRelease] = useState({ name: ''});
|
||||
const [isLoadingBeeRelease, setIsLoadingBeeRelease] = useState<boolean>(false);
|
||||
export default function Status(): ReactElement {
|
||||
const [beeRelease, setBeeRelease] = useState<LatestBeeRelease | null>(null)
|
||||
const [isLoadingBeeRelease, setIsLoadingBeeRelease] = useState<boolean>(false)
|
||||
|
||||
const [apiHost, setApiHost] = useState('');
|
||||
const [debugApiHost, setDebugApiHost] = useState('');
|
||||
const [apiHost, setApiHost] = useState('')
|
||||
const [debugApiHost, setDebugApiHost] = useState('')
|
||||
|
||||
const [statusChecksVisible, setStatusChecksVisible] = useState<boolean>(false);
|
||||
const [statusChecksVisible, setStatusChecksVisible] = useState<boolean>(false)
|
||||
|
||||
const { health, isLoadingHealth } = useApiHealth()
|
||||
const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
|
||||
const { nodeAddresses, isLoadingNodeAddresses } = useApiNodeAddresses()
|
||||
const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
|
||||
const { topology: nodeTopology, isLoading: isLoadingNodeTopology } = useApiNodeTopology()
|
||||
const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
|
||||
const { health, isLoadingHealth } = useApiHealth()
|
||||
const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
|
||||
const { nodeAddresses, isLoadingNodeAddresses } = useApiNodeAddresses()
|
||||
const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
|
||||
const { topology: nodeTopology, isLoading: isLoadingNodeTopology } = useApiNodeTopology()
|
||||
const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
|
||||
|
||||
const fetchLatestBeeRelease = () => {
|
||||
setIsLoadingBeeRelease(true)
|
||||
axios
|
||||
.get(`${process.env.REACT_APP_BEE_GITHUB_REPO_URL}/releases/latest`)
|
||||
.then(res => {
|
||||
setBeeRelease(res.data)
|
||||
})
|
||||
.catch(() => {
|
||||
// FIXME: should do something about the error
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoadingBeeRelease(false)
|
||||
})
|
||||
}
|
||||
|
||||
const fetchLatestBeeRelease = async () => {
|
||||
setIsLoadingBeeRelease(true)
|
||||
axios.get(`${process.env.REACT_APP_BEE_GITHUB_REPO_URL}/releases/latest`)
|
||||
.then(res => {
|
||||
setBeeRelease(res.data)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoadingBeeRelease(false)
|
||||
})
|
||||
const fetchApiHost = () => {
|
||||
let apiHost
|
||||
|
||||
if (sessionStorage.getItem('api_host')) {
|
||||
apiHost = String(sessionStorage.getItem('api_host') || '')
|
||||
} else {
|
||||
apiHost = String(process.env.REACT_APP_BEE_HOST)
|
||||
}
|
||||
setApiHost(apiHost)
|
||||
}
|
||||
|
||||
const fetchApiHost = () => {
|
||||
let apiHost
|
||||
|
||||
if (sessionStorage.getItem('api_host')) {
|
||||
apiHost = String(sessionStorage.getItem('api_host') || '')
|
||||
} else {
|
||||
apiHost = String(process.env.REACT_APP_BEE_HOST)
|
||||
}
|
||||
setApiHost(apiHost)
|
||||
const fetchDebugApiHost = () => {
|
||||
let debugApiHost
|
||||
|
||||
if (sessionStorage.getItem('debug_api_host')) {
|
||||
debugApiHost = String(sessionStorage.getItem('debug_api_host') || '')
|
||||
} else {
|
||||
debugApiHost = String(process.env.REACT_APP_BEE_DEBUG_HOST)
|
||||
}
|
||||
setDebugApiHost(debugApiHost)
|
||||
}
|
||||
|
||||
const fetchDebugApiHost = () => {
|
||||
let debugApiHost
|
||||
|
||||
if (sessionStorage.getItem('debug_api_host')) {
|
||||
debugApiHost = String(sessionStorage.getItem('debug_api_host') || '')
|
||||
} else {
|
||||
debugApiHost = String(process.env.REACT_APP_BEE_DEBUG_HOST)
|
||||
}
|
||||
setDebugApiHost(debugApiHost)
|
||||
}
|
||||
useEffect(() => {
|
||||
fetchApiHost()
|
||||
fetchDebugApiHost()
|
||||
fetchLatestBeeRelease()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchApiHost()
|
||||
fetchDebugApiHost()
|
||||
fetchLatestBeeRelease()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
// FIXME: this should be broken up
|
||||
/* eslint-disable no-nested-ternary */
|
||||
return (
|
||||
<div>
|
||||
{nodeHealth?.status === 'ok' &&
|
||||
health &&
|
||||
beeRelease &&
|
||||
beeRelease.name === `v${nodeHealth?.version?.split('-')[0]}` &&
|
||||
nodeAddresses?.ethereum &&
|
||||
chequebookAddress?.chequebookaddress &&
|
||||
chequebookBalance &&
|
||||
chequebookBalance?.totalBalance > 0 &&
|
||||
nodeTopology?.connected &&
|
||||
nodeTopology?.connected > 0 &&
|
||||
!statusChecksVisible ? (
|
||||
<div>
|
||||
{nodeHealth?.status === 'ok' &&
|
||||
health &&
|
||||
beeRelease &&
|
||||
beeRelease.name === `v${nodeHealth?.version?.split('-')[0]}` &&
|
||||
nodeAddresses?.ethereum &&
|
||||
chequebookAddress?.chequebookaddress && chequebookBalance && chequebookBalance?.totalBalance > 0 &&
|
||||
nodeTopology?.connected && nodeTopology?.connected > 0 &&
|
||||
!statusChecksVisible ?
|
||||
<div>
|
||||
<StatusCard
|
||||
nodeHealth={nodeHealth}
|
||||
loadingNodeHealth={isLoadingNodeHealth}
|
||||
beeRelease={beeRelease}
|
||||
loadingBeeRelease={isLoadingBeeRelease}
|
||||
nodeAddresses={nodeAddresses}
|
||||
loadingNodeTopology={isLoadingNodeTopology}
|
||||
nodeTopology={nodeTopology}
|
||||
setStatusChecksVisible={setStatusChecksVisible}
|
||||
/>
|
||||
<EthereumAddressCard
|
||||
nodeAddresses={nodeAddresses}
|
||||
isLoadingNodeAddresses={isLoadingNodeAddresses}
|
||||
chequebookAddress={chequebookAddress}
|
||||
isLoadingChequebookAddress={isLoadingChequebookAddress}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
( isLoadingNodeHealth || isLoadingHealth || isLoadingChequebookAddress ||
|
||||
isLoadingNodeTopology || isLoadingBeeRelease || isLoadingNodeAddresses || isLoadingBeeRelease || isLoadingChequebookBalance
|
||||
)
|
||||
?
|
||||
<Container style={{textAlign:'center', padding:'50px'}}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
:
|
||||
<NodeSetupWorkflow
|
||||
beeRelease={beeRelease}
|
||||
isLoadingBeeRelease={isLoadingBeeRelease}
|
||||
|
||||
nodeHealth={nodeHealth}
|
||||
isLoadingNodeHealth={isLoadingNodeHealth}
|
||||
|
||||
nodeAddresses={nodeAddresses}
|
||||
isLoadingNodeAddresses={isLoadingNodeAddresses}
|
||||
|
||||
nodeTopology={nodeTopology}
|
||||
isLoadingNodeTopology={isLoadingNodeTopology}
|
||||
|
||||
nodeApiHealth={health}
|
||||
isLoadingHealth={isLoadingHealth}
|
||||
|
||||
chequebookAddress={chequebookAddress}
|
||||
isLoadingChequebookAddress={isLoadingChequebookAddress}
|
||||
|
||||
chequebookBalance={chequebookBalance}
|
||||
isLoadingChequebookBalance={isLoadingChequebookBalance}
|
||||
|
||||
apiHost={apiHost}
|
||||
debugApiHost={debugApiHost}
|
||||
setStatusChecksVisible={setStatusChecksVisible}
|
||||
/>
|
||||
}
|
||||
<StatusCard
|
||||
nodeHealth={nodeHealth}
|
||||
loadingNodeHealth={isLoadingNodeHealth}
|
||||
beeRelease={beeRelease}
|
||||
loadingBeeRelease={isLoadingBeeRelease}
|
||||
nodeAddresses={nodeAddresses}
|
||||
loadingNodeTopology={isLoadingNodeTopology}
|
||||
nodeTopology={nodeTopology}
|
||||
setStatusChecksVisible={setStatusChecksVisible}
|
||||
/>
|
||||
<EthereumAddressCard
|
||||
nodeAddresses={nodeAddresses}
|
||||
isLoadingNodeAddresses={isLoadingNodeAddresses}
|
||||
chequebookAddress={chequebookAddress}
|
||||
isLoadingChequebookAddress={isLoadingChequebookAddress}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
) : isLoadingNodeHealth ||
|
||||
isLoadingHealth ||
|
||||
isLoadingChequebookAddress ||
|
||||
isLoadingNodeTopology ||
|
||||
isLoadingBeeRelease ||
|
||||
isLoadingNodeAddresses ||
|
||||
isLoadingBeeRelease ||
|
||||
isLoadingChequebookBalance ? (
|
||||
<Container style={{ textAlign: 'center', padding: '50px' }}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
) : (
|
||||
<NodeSetupWorkflow
|
||||
beeRelease={beeRelease}
|
||||
isLoadingBeeRelease={isLoadingBeeRelease}
|
||||
nodeHealth={nodeHealth}
|
||||
isLoadingNodeHealth={isLoadingNodeHealth}
|
||||
nodeAddresses={nodeAddresses}
|
||||
isLoadingNodeAddresses={isLoadingNodeAddresses}
|
||||
nodeTopology={nodeTopology}
|
||||
isLoadingNodeTopology={isLoadingNodeTopology}
|
||||
nodeApiHealth={health}
|
||||
isLoadingHealth={isLoadingHealth}
|
||||
chequebookAddress={chequebookAddress}
|
||||
isLoadingChequebookAddress={isLoadingChequebookAddress}
|
||||
chequebookBalance={chequebookBalance}
|
||||
isLoadingChequebookBalance={isLoadingChequebookBalance}
|
||||
apiHost={apiHost}
|
||||
debugApiHost={debugApiHost}
|
||||
setStatusChecksVisible={setStatusChecksVisible}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user