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>
|
||||
)
|
||||
}
|
||||
|
||||
+9
-140
@@ -1,7 +1,4 @@
|
||||
import { ReactElement, useState, useContext } 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, ExpandLessSharp, ExpandMoreSharp, Autorenew } from '@material-ui/icons/'
|
||||
import type { ReactElement } from 'react'
|
||||
|
||||
import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
|
||||
import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
|
||||
@@ -9,144 +6,16 @@ import VersionCheck from './SetupSteps/VersionCheck'
|
||||
import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
|
||||
import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
|
||||
import PeerConnection from './SetupSteps/PeerConnection'
|
||||
import { Context } from '../../providers/Bee'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
padding: theme.spacing(2),
|
||||
width: '100%',
|
||||
},
|
||||
button: {
|
||||
marginTop: theme.spacing(1),
|
||||
marginRight: theme.spacing(1),
|
||||
},
|
||||
actionsContainer: {
|
||||
margin: theme.spacing(2),
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
interface Step {
|
||||
label: string
|
||||
isOk: boolean
|
||||
component: ReactElement
|
||||
}
|
||||
|
||||
export default function NodeSetupWorkflow(): ReactElement {
|
||||
const classes = useStyles()
|
||||
const [activeStep, setActiveStep] = useState(-1)
|
||||
|
||||
const {
|
||||
status,
|
||||
isLoading,
|
||||
latestUserVersion,
|
||||
latestPublishedVersion,
|
||||
isLatestBeeVersion,
|
||||
latestBeeVersionUrl,
|
||||
topology,
|
||||
nodeAddresses,
|
||||
chequebookAddress,
|
||||
} = useContext(Context)
|
||||
|
||||
const steps: Step[] = [
|
||||
{
|
||||
label: 'Connected to Node DebugAPI',
|
||||
isOk: status.debugApiConnection,
|
||||
component: <DebugConnectionCheck isOk={status.debugApiConnection} />,
|
||||
},
|
||||
{
|
||||
label: 'Running latest Bee version',
|
||||
isOk: status.version,
|
||||
component: (
|
||||
<VersionCheck
|
||||
isOk={status.version}
|
||||
isLatestBeeVersion={isLatestBeeVersion}
|
||||
userVersion={latestUserVersion}
|
||||
latestVersion={latestPublishedVersion}
|
||||
latestUrl={latestBeeVersionUrl}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Connected to xDai Blockchain',
|
||||
isOk: status.blockchainConnection,
|
||||
component: <EthereumConnectionCheck isOk={status.blockchainConnection} nodeAddresses={nodeAddresses} />,
|
||||
},
|
||||
{
|
||||
label: 'Deployed and Funded Chequebook',
|
||||
isOk: status.chequebook,
|
||||
component: (
|
||||
<ChequebookDeployFund chequebookAddress={chequebookAddress?.chequebookAddress} isOk={status.chequebook} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Connected to Node API',
|
||||
isOk: status.apiConnection,
|
||||
component: <NodeConnectionCheck isOk={status.apiConnection} />,
|
||||
},
|
||||
{
|
||||
label: 'Connected to Peers',
|
||||
isOk: status.topology,
|
||||
component: <PeerConnection isOk={status.topology} topology={topology} />,
|
||||
},
|
||||
]
|
||||
|
||||
const handleNext = () => {
|
||||
setActiveStep(prevActiveStep => prevActiveStep + 1)
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
setActiveStep(prevActiveStep => prevActiveStep - 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Node Setup
|
||||
</Typography>
|
||||
<Stepper nonLinear activeStep={activeStep} orientation="vertical">
|
||||
{steps.map(({ label, isOk, component }, index) => (
|
||||
<Step key={label}>
|
||||
<StepLabel
|
||||
onClick={() => setActiveStep(index === activeStep ? steps.length : index)}
|
||||
StepIconComponent={() => {
|
||||
if (isLoading) return <Autorenew style={{ height: '25px', cursor: 'pointer' }} />
|
||||
|
||||
if (isOk) return <CheckCircle style={{ color: '#32c48d', height: '25px', cursor: 'pointer' }} />
|
||||
|
||||
return <Error style={{ color: '#c9201f', height: '25px', cursor: 'pointer' }} />
|
||||
}}
|
||||
>
|
||||
<StepButton
|
||||
disabled={isLoading}
|
||||
onClick={() => setActiveStep(index === activeStep ? steps.length : 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>
|
||||
<StepContent>
|
||||
<Typography component="div">{component}</Typography>
|
||||
<div className={classes.actionsContainer}>
|
||||
<div>
|
||||
<Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
|
||||
Back
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" onClick={handleNext} className={classes.button}>
|
||||
{index < steps.length - 1 ? 'Next' : 'Finish'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</StepContent>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Paper>
|
||||
<div>
|
||||
<DebugConnectionCheck />
|
||||
<VersionCheck />
|
||||
<EthereumConnectionCheck />
|
||||
<ChequebookDeployFund />
|
||||
<NodeConnectionCheck />
|
||||
<PeerConnection />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user