Files
bee-dashboard/src/pages/info/index.tsx
T
Cafe137 02469046b0 fix: add loading state to info page (#584)
* fix: add loading state to info page

* refactor: use bee-js for readiness check
2022-11-14 14:22:49 +01:00

96 lines
3.3 KiB
TypeScript

import { Button } from '@material-ui/core'
import { ReactElement, useContext } from 'react'
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 {
debugApiReadiness,
status,
latestUserVersion,
isLatestBeeVersion,
latestBeeVersionUrl,
topology,
nodeInfo,
chainId,
} = 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' }}>
<NodeInfoCard />
{debugApiReadiness && (
<>
<div style={{ width: '8px' }}></div>
<WalletInfoCard />
<div style={{ width: '8px' }}></div>
<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 ?? '-'} />
<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={
<div>
<a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
Bee
</a>
{` ${latestUserVersion ?? '-'} `}
{latestUserVersion && !isDesktop && (
<Button
size="small"
variant="outlined"
href={latestBeeVersionUrl}
disabled={isLatestBeeVersion}
target="_blank"
style={{ height: '26px' }}
>
{isLatestBeeVersion ? 'latest' : 'update'}
</Button>
)}
</div>
}
/>
<ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
{chainId !== null && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
</div>
)
}