feat: status page redesign (#214)
* feat: initial rewrite without status indicators * feat: status icon as a component and add to the node setup * feat: added input list item component * feat: improved the topology status info * fix: disabled state of the buttons * chore: removed unused components * chore: remove debug console log * fix: deposit modal helper text
This commit is contained in:
Vojtech Simetka
GitHub
@@ -1,35 +1,48 @@
|
||||
import { Typography } from '@material-ui/core/'
|
||||
import EthereumAddress from '../../../components/EthereumAddress'
|
||||
import { useContext } from 'react'
|
||||
import DepositModal from '../../../containers/DepositModal'
|
||||
import type { ReactElement } from 'react'
|
||||
import ExpandableList from '../../../components/ExpandableList'
|
||||
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
|
||||
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
|
||||
import StatusIcon from '../../../components/StatusIcon'
|
||||
import { Context } from '../../../providers/Bee'
|
||||
|
||||
interface Props extends StatusHookCommon {
|
||||
chequebookAddress?: string
|
||||
}
|
||||
const ChequebookDeployFund = (): ReactElement | null => {
|
||||
const { status, isLoading, chequebookAddress } = useContext(Context)
|
||||
const isOk = status.chequebook
|
||||
|
||||
const ChequebookDeployFund = ({ chequebookAddress, isOk }: Props): ReactElement | null => {
|
||||
return (
|
||||
<div>
|
||||
<p style={{ marginBottom: '20px', display: 'flex' }}>{chequebookAddress && <DepositModal />}</p>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
{!isOk && (
|
||||
<div>
|
||||
<span>
|
||||
Your chequebook is either not deployed or funded. To run the node you will need xDAI and xBZZ on the xDai
|
||||
network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it
|
||||
to the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
|
||||
transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
|
||||
network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
|
||||
<a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
|
||||
</span>
|
||||
</div>
|
||||
<ExpandableList
|
||||
label={
|
||||
<>
|
||||
<StatusIcon isOk={isOk} isLoading={isLoading} /> Chequebook Deployment & Funding
|
||||
</>
|
||||
}
|
||||
>
|
||||
<ExpandableListItemNote>
|
||||
{isOk ? (
|
||||
'Your chequebook is deployed and funded'
|
||||
) : (
|
||||
<>
|
||||
Your chequebook is either not deployed or funded. To run the node you will need xDAI and xBZZ on the xDai
|
||||
network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to
|
||||
the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
|
||||
transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
|
||||
network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
|
||||
<a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Chequebook Address
|
||||
</Typography>
|
||||
<EthereumAddress address={chequebookAddress} />
|
||||
</div>
|
||||
</ExpandableListItemNote>
|
||||
{chequebookAddress && (
|
||||
<>
|
||||
<ExpandableListItemKey label="Chequebook Address" value={chequebookAddress.chequebookAddress} />
|
||||
<ExpandableListItemActions>
|
||||
<DepositModal />
|
||||
</ExpandableListItemActions>
|
||||
</>
|
||||
)}
|
||||
</ExpandableList>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,99 +1,87 @@
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/'
|
||||
import MuiAlert from '@material-ui/lab/Alert'
|
||||
import { ExpandMoreSharp } from '@material-ui/icons/'
|
||||
|
||||
import ConnectToHost from '../../../components/ConnectToHost'
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs'
|
||||
import ExpandableList from '../../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../../components/ExpandableListItem'
|
||||
import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
|
||||
import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
|
||||
import StatusIcon from '../../../components/StatusIcon'
|
||||
import { Context as SettingsContext } from '../../../providers/Settings'
|
||||
import { Context } from '../../../providers/Bee'
|
||||
|
||||
type Props = StatusHookCommon
|
||||
|
||||
export default function NodeConnectionCheck({ isOk }: Props): ReactElement | null {
|
||||
export default function NodeConnectionCheck(): ReactElement | null {
|
||||
const { status, isLoading } = useContext(Context)
|
||||
const { setDebugApiUrl, apiDebugUrl } = useContext(SettingsContext)
|
||||
|
||||
const changeDebugApiUrl = (
|
||||
<div style={{ display: 'flex', marginTop: '25px', marginBottom: '25px' }}>
|
||||
<span style={{ marginRight: '15px' }}>
|
||||
Debug API (<Typography variant="button">{apiDebugUrl}</Typography>)
|
||||
</span>
|
||||
<ConnectToHost
|
||||
setHost={(host: string) => {
|
||||
console.log(host) // eslint-disable-line
|
||||
setDebugApiUrl(host)
|
||||
}}
|
||||
defaultHost={apiDebugUrl}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (isOk) {
|
||||
return changeDebugApiUrl
|
||||
}
|
||||
const isOk = status.debugApiConnection
|
||||
|
||||
return (
|
||||
<div>
|
||||
{changeDebugApiUrl}
|
||||
<ExpandableList
|
||||
label={
|
||||
<>
|
||||
<StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee Debug API
|
||||
</>
|
||||
}
|
||||
>
|
||||
<ExpandableListItemNote>
|
||||
{isOk
|
||||
? 'The connection to the Bee nodes deug API has been successful'
|
||||
: 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
|
||||
</ExpandableListItemNote>
|
||||
<ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
|
||||
|
||||
<div>
|
||||
<Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
|
||||
We cannot connect to your nodes debug API at <Typography variant="button">{apiDebugUrl}</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 list`} />
|
||||
<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`}
|
||||
/>
|
||||
<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 list \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 (you can also use the
|
||||
wildcard <code>{"cors-allowed-origins: ['*']"}</code>). 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 /usr/local/etc/swarm-bee/bee.yaml \nbrew services restart swarm-bee`}
|
||||
/>
|
||||
</ol>
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
{!isOk && (
|
||||
<ExpandableList level={1} label="Troubleshoot">
|
||||
<ExpandableListItem
|
||||
label={
|
||||
<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 list`} />
|
||||
<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`}
|
||||
/>
|
||||
<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 list \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 (you can also use the
|
||||
wildcard <code>{"cors-allowed-origins: ['*']"}</code>). 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 /usr/local/etc/swarm-bee/bee.yaml \nbrew services restart swarm-bee`}
|
||||
/>
|
||||
</ol>
|
||||
}
|
||||
/>
|
||||
</ExpandableList>
|
||||
)}
|
||||
</ExpandableList>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,34 +1,42 @@
|
||||
import type { ReactElement } from 'react'
|
||||
import { Typography } from '@material-ui/core/'
|
||||
import EthereumAddress from '../../../components/EthereumAddress'
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import ExpandableList from '../../../components/ExpandableList'
|
||||
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
|
||||
import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
|
||||
import StatusIcon from '../../../components/StatusIcon'
|
||||
import { Context } from '../../../providers/Bee'
|
||||
|
||||
type Props = StatusEthereumConnectionHook
|
||||
|
||||
export default function EthereumConnectionCheck({ isOk, nodeAddresses }: Props): ReactElement | null {
|
||||
if (isOk) {
|
||||
return (
|
||||
<div>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Node Address
|
||||
</Typography>
|
||||
<EthereumAddress address={nodeAddresses?.ethereum} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default function EthereumConnectionCheck(): ReactElement | null {
|
||||
const { status, isLoading, nodeAddresses } = useContext(Context)
|
||||
const isOk = status.blockchainConnection
|
||||
|
||||
return (
|
||||
<p>
|
||||
Your Bee node must have access to the xDai blockchain, so that it can interact and deploy your chequebook
|
||||
contract. You can run{' '}
|
||||
<a href="https://www.xdaichain.com/" rel="noreferrer" target="_blank">
|
||||
your own xDai node
|
||||
</a>
|
||||
, or use a provider instead - we recommend{' '}
|
||||
<a href="https://getblock.io/" rel="noreferrer" target="_blank">
|
||||
Getblock
|
||||
</a>
|
||||
. By default, Bee expects a local node at http://localhost:8545. To use a provider instead, simply change the{' '}
|
||||
<strong>swap-endpoint</strong> in your configuration file.
|
||||
</p>
|
||||
<ExpandableList
|
||||
label={
|
||||
<>
|
||||
<StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Blockchain
|
||||
</>
|
||||
}
|
||||
>
|
||||
<ExpandableListItemNote>
|
||||
{isOk ? (
|
||||
'Your node is connected to the xDai blockchain'
|
||||
) : (
|
||||
<>
|
||||
Your Bee node must have access to the xDai blockchain, so that it can interact and deploy your chequebook
|
||||
contract. You can run{' '}
|
||||
<a href="https://www.xdaichain.com/" rel="noreferrer" target="_blank">
|
||||
your own xDai node
|
||||
</a>
|
||||
, or use a provider instead - we recommend{' '}
|
||||
<a href="https://getblock.io/" rel="noreferrer" target="_blank">
|
||||
Getblock
|
||||
</a>
|
||||
. By default, Bee expects a local node at http://localhost:8545. To use a provider instead, simply change
|
||||
the <strong>swap-endpoint</strong> in your configuration file.
|
||||
</>
|
||||
)}
|
||||
</ExpandableListItemNote>
|
||||
{nodeAddresses?.ethereum && <ExpandableListItemKey label="Ethereum Address" value={nodeAddresses?.ethereum} />}
|
||||
</ExpandableList>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,61 +1,61 @@
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/'
|
||||
import { ExpandMoreSharp } from '@material-ui/icons/'
|
||||
|
||||
import ConnectToHost from '../../../components/ConnectToHost'
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs'
|
||||
import { Context as SettingsContext } from '../../../providers/Settings'
|
||||
import ExpandableList from '../../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../../components/ExpandableListItem'
|
||||
import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
|
||||
import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
|
||||
import StatusIcon from '../../../components/StatusIcon'
|
||||
import { Context } from '../../../providers/Bee'
|
||||
|
||||
type Props = StatusHookCommon
|
||||
|
||||
export default function NodeConnectionCheck({ isOk }: Props): ReactElement | null {
|
||||
export default function NodeConnectionCheck(): ReactElement | null {
|
||||
const { setApiUrl, apiUrl } = useContext(SettingsContext)
|
||||
const { status, isLoading } = useContext(Context)
|
||||
const isOk = status.apiConnection
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', marginBottom: '25px' }}>
|
||||
<span style={{ marginRight: '15px' }}>
|
||||
Node API (<Typography variant="button">{apiUrl}</Typography>)
|
||||
</span>
|
||||
<ConnectToHost setHost={setApiUrl} defaultHost={apiUrl} />
|
||||
</div>
|
||||
<div>
|
||||
{!isOk && (
|
||||
<Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
|
||||
We cannot connect to your nodes API at <Typography variant="button">{apiUrl}</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 list`} />
|
||||
<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 list \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
|
||||
/>
|
||||
</ol>
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ExpandableList
|
||||
label={
|
||||
<>
|
||||
<StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee API
|
||||
</>
|
||||
}
|
||||
>
|
||||
<ExpandableListItemNote>
|
||||
{isOk
|
||||
? 'The connection to the Bee nodes API has been successful'
|
||||
: 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
|
||||
</ExpandableListItemNote>
|
||||
<ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
|
||||
{!isOk && (
|
||||
<ExpandableList level={1} label="Troubleshoot">
|
||||
<ExpandableListItem
|
||||
label={
|
||||
<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 list`} />
|
||||
<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 list \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
|
||||
/>
|
||||
</ol>
|
||||
}
|
||||
/>
|
||||
</ExpandableList>
|
||||
)}
|
||||
</ExpandableList>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,43 +1,29 @@
|
||||
import type { ReactElement } from 'react'
|
||||
import { Typography } from '@material-ui/core/'
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import ExpandableList from '../../../components/ExpandableList'
|
||||
import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
|
||||
import TopologyStats from '../../../components/TopologyStats'
|
||||
import StatusIcon from '../../../components/StatusIcon'
|
||||
import { Context } from '../../../providers/Bee'
|
||||
|
||||
type Props = StatusTopologyHook
|
||||
|
||||
export default function PeerConnection({ isOk, topology }: Props): ReactElement | null {
|
||||
const peers = (
|
||||
<div style={{ display: 'flex', marginTop: '15px' }}>
|
||||
<div style={{ marginRight: '30px' }}>
|
||||
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
|
||||
<span>Connected Peers</span>
|
||||
</Typography>
|
||||
<Typography component="h2" variant="h5">
|
||||
{topology?.connected ? topology.connected : '-'}
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
|
||||
<span>Discovered Nodes</span>
|
||||
</Typography>
|
||||
<Typography component="h2" variant="h5">
|
||||
{topology?.population ? topology.population : '-'}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (isOk) {
|
||||
return (
|
||||
<>
|
||||
<span>You are connected to peers!</span>
|
||||
{peers}
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default function PeerConnection(): ReactElement | null {
|
||||
const { status, isLoading, topology } = useContext(Context)
|
||||
const isOk = status.topology
|
||||
|
||||
return (
|
||||
<>
|
||||
<span>Your node is not connected to any peers</span>
|
||||
{peers}
|
||||
</>
|
||||
<ExpandableList
|
||||
label={
|
||||
<>
|
||||
<StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Peers
|
||||
</>
|
||||
}
|
||||
>
|
||||
<ExpandableListItemNote>
|
||||
{isOk
|
||||
? 'You are connected to other Bee nodes'
|
||||
: 'Your node is not connected to any peers. Please wait a bit if you just started the node, otherwise review your configuration file.'}
|
||||
</ExpandableListItemNote>
|
||||
|
||||
<TopologyStats topology={topology} />
|
||||
</ExpandableList>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,60 +1,47 @@
|
||||
import type { ReactElement } from 'react'
|
||||
import { Typography } from '@material-ui/core/'
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import CodeBlockTabs from '../../../components/CodeBlockTabs'
|
||||
import ExpandableList from '../../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../../components/ExpandableListItem'
|
||||
import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
|
||||
import StatusIcon from '../../../components/StatusIcon'
|
||||
import { Context } from '../../../providers/Bee'
|
||||
|
||||
type Props = StatusNodeVersionHook
|
||||
export default function VersionCheck(): ReactElement | null {
|
||||
const { status, isLoading, latestUserVersion, latestPublishedVersion, latestBeeVersionUrl } = useContext(Context)
|
||||
const isOk = status.version
|
||||
|
||||
export default function VersionCheck({ isOk, userVersion, latestVersion, latestUrl }: Props): ReactElement | null {
|
||||
const version = (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ marginRight: '30px' }}>
|
||||
<p>
|
||||
<span>User Version</span>
|
||||
</p>
|
||||
<Typography component="h5" variant="h5">
|
||||
<span>{userVersion}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span>Latest Version</span>
|
||||
</p>
|
||||
<Typography component="h5" variant="h5">
|
||||
<span>{latestVersion}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
// Running latest bee version
|
||||
if (isOk) {
|
||||
return (
|
||||
<>
|
||||
<span>You are running the latest version of Bee</span>
|
||||
{version}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// Old version or not connected to bee debug API
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
Your Bee version is out of date. Please update to the{' '}
|
||||
<a href={latestUrl} 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/${latestVersion}/bee_${latestVersion}_amd64.deb\nsudo dpkg -i bee_${latestVersion}_amd64.deb`}
|
||||
mac={`bee version\nbrew tap ethersphere/tap\nbrew install swarm-bee\nbrew services start swarm-bee`}
|
||||
/>
|
||||
{version}
|
||||
</>
|
||||
<ExpandableList
|
||||
label={
|
||||
<>
|
||||
<StatusIcon isOk={isOk} isLoading={isLoading} /> Bee Version
|
||||
</>
|
||||
}
|
||||
>
|
||||
<ExpandableListItemNote>
|
||||
{isOk ? (
|
||||
'You are running the latest version of Bee.'
|
||||
) : (
|
||||
<>
|
||||
Your Bee version is out of date. Please update to the{' '}
|
||||
<a href={latestBeeVersionUrl} rel="noreferrer" target="_blank">
|
||||
latest
|
||||
</a>{' '}
|
||||
before continuing. Rerun the installation script below to upgrade. For more information please see the{' '}
|
||||
<a href="https://docs.ethswarm.org/docs/installation/manual#upgrading-bee" rel="noreferrer" target="_blank">
|
||||
Docs
|
||||
</a>
|
||||
.
|
||||
<CodeBlockTabs
|
||||
showLineNumbers
|
||||
linux={`bee version\nwget https://github.com/ethersphere/bee/releases/download/${latestPublishedVersion}/bee_${latestPublishedVersion}_amd64.deb\nsudo dpkg -i bee_${latestPublishedVersion}_amd64.deb`}
|
||||
mac={`bee version\nbrew tap ethersphere/tap\nbrew install swarm-bee\nbrew services start swarm-bee`}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</ExpandableListItemNote>
|
||||
<ExpandableListItem label="Your Version" value={latestUserVersion || '-'} />
|
||||
<ExpandableListItem label="Latest Version" value={latestPublishedVersion || '-'} />
|
||||
</ExpandableList>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user