76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
import { Button } from '@material-ui/core'
|
|
import { ReactElement, useContext } from 'react'
|
|
import { ChainSync } from '../../components/ChainSync'
|
|
import ExpandableListItem from '../../components/ExpandableListItem'
|
|
import Map from '../../components/Map'
|
|
import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'
|
|
import { useBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks'
|
|
import { Context as BeeContext } from '../../providers/Bee'
|
|
import { Context as SettingsContext } from '../../providers/Settings'
|
|
import { chainIdToName } from '../../utils/chain'
|
|
import { ChequebookInfoCard } from './ChequebookInfoCard'
|
|
import NodeInfoCard from './NodeInfoCard'
|
|
import { WalletInfoCard } from './WalletInfoCard'
|
|
|
|
export default function Status(): ReactElement {
|
|
const { beeVersion, status, topology, nodeInfo, nodeStatus, walletBalance } = useContext(BeeContext)
|
|
const { isDesktop, desktopUrl } = useContext(SettingsContext)
|
|
const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
|
|
const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'stretch',
|
|
alignContent: 'stretch',
|
|
gap: '8px',
|
|
}}
|
|
>
|
|
<NodeInfoCard />
|
|
<WalletInfoCard />
|
|
<ChequebookInfoCard />
|
|
</div>
|
|
<div style={{ height: '16px' }} />
|
|
<Map error={status.topology.checkState !== 'OK'} />
|
|
<div style={{ height: '2px' }} />
|
|
<ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
|
|
<ExpandableListItem label="Population" value={topology?.population ?? '-'} />
|
|
<ExpandableListItem label="Pullsync rate" value={nodeStatus?.pullsyncRate} />
|
|
<ExpandableListItem label="Depth" value={topology?.depth ?? '-'} />
|
|
<ExpandableListItem label="Neighborhood size" value={nodeStatus?.neighborhoodSize} />
|
|
<ExpandableListItem label="Node is reachable" value={nodeStatus?.isReachable?.toString()} />
|
|
<ChainSync />
|
|
|
|
<div style={{ height: '16px' }} />
|
|
{isDesktop && (
|
|
<ExpandableListItem
|
|
label="Desktop version"
|
|
value={
|
|
<div>
|
|
{`${beeDesktopVersion} `}
|
|
<Button
|
|
size="small"
|
|
variant="outlined"
|
|
href={BEE_DESKTOP_LATEST_RELEASE_PAGE}
|
|
target="_blank"
|
|
disabled={newBeeDesktopVersion === ''}
|
|
style={{ height: '26px' }}
|
|
>
|
|
{newBeeDesktopVersion === '' ? 'latest' : 'update'}
|
|
</Button>
|
|
</div>
|
|
}
|
|
/>
|
|
)}
|
|
<ExpandableListItem label="Bee version" value={beeVersion} />
|
|
<ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
|
|
{walletBalance !== null && (
|
|
<ExpandableListItem label="Blockchain network" value={chainIdToName(walletBalance.chainID)} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|