diff --git a/package-lock.json b/package-lock.json index 13c03c7..ac3e7f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.20.2", "license": "BSD-3-Clause", "dependencies": { - "@ethersphere/bee-js": "^5.0.0", + "@ethersphere/bee-js": "^5.1.0", "@ethersphere/manifest-js": "1.2.1", "@ethersphere/swarm-cid": "^0.1.0", "@material-ui/core": "4.12.3", @@ -2440,9 +2440,9 @@ } }, "node_modules/@ethersphere/bee-js": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-5.0.0.tgz", - "integrity": "sha512-Dr5Xon0UZvi37fvbyGj46kw3/0D8fydwfDtVtFHKi2p7mNEizG0uok2mXvwLZrMvUMOS8uXkFhbQjTFBjB+pWA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-5.1.0.tgz", + "integrity": "sha512-DJERG2F0Qjxsu3gZ9e7w2yc83/EdvN+gRIKczkNW0arpXn6IBphK21esGURqkhasmrbgPPZ1pA178BIAIb6/hg==", "dependencies": { "@ethersphere/swarm-cid": "^0.1.0", "@types/readable-stream": "^2.3.13", @@ -2460,9 +2460,9 @@ "ws": "^8.7.0" }, "engines": { - "bee": "1.7.0-bbf13011", - "beeApiVersion": "3.0.2", - "beeDebugApiVersion": "3.0.2", + "bee": "1.9.0-13a47043", + "beeApiVersion": "3.2.0", + "beeDebugApiVersion": "3.2.0", "node": ">=14.0.0", "npm": ">=6.0.0" } @@ -22383,9 +22383,9 @@ } }, "@ethersphere/bee-js": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-5.0.0.tgz", - "integrity": "sha512-Dr5Xon0UZvi37fvbyGj46kw3/0D8fydwfDtVtFHKi2p7mNEizG0uok2mXvwLZrMvUMOS8uXkFhbQjTFBjB+pWA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-5.1.0.tgz", + "integrity": "sha512-DJERG2F0Qjxsu3gZ9e7w2yc83/EdvN+gRIKczkNW0arpXn6IBphK21esGURqkhasmrbgPPZ1pA178BIAIb6/hg==", "requires": { "@ethersphere/swarm-cid": "^0.1.0", "@types/readable-stream": "^2.3.13", diff --git a/package.json b/package.json index 0b63cf7..1901764 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "url": "https://github.com/ethersphere/bee-dashboard.git" }, "dependencies": { - "@ethersphere/bee-js": "^5.0.0", + "@ethersphere/bee-js": "^5.1.0", "@ethersphere/manifest-js": "1.2.1", "@ethersphere/swarm-cid": "^0.1.0", "@material-ui/core": "4.12.3", diff --git a/src/components/Card.tsx b/src/components/Card.tsx index e18bf7e..ea48e79 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -2,6 +2,7 @@ import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core' import { ReactElement } from 'react' import Check from 'remixicon-react/CheckLineIcon' import AlertCircle from 'remixicon-react/ErrorWarningFillIcon' +import RefreshLine from 'remixicon-react/RefreshLineIcon' import { SwarmButton, SwarmButtonProps } from './SwarmButton' interface Props { @@ -9,7 +10,7 @@ interface Props { title: string subtitle: string buttonProps: SwarmButtonProps - status: 'ok' | 'error' + status: 'ok' | 'error' | 'loading' } const useStyles = (backgroundColor: string) => @@ -56,12 +57,22 @@ export default function Card({ buttonProps, icon, title, subtitle, status }: Pro const { className, ...rest } = buttonProps const classes = useStyles(backgroundColor)() + let statusIcon = null + + if (status === 'ok') { + statusIcon = + } else if (status === 'error') { + statusIcon = + } else if (status === 'loading') { + statusIcon = + } + return (
{icon} - {status === 'ok' ? : } + {statusIcon}
{title} diff --git a/src/pages/info/ChequebookInfoCard.tsx b/src/pages/info/ChequebookInfoCard.tsx new file mode 100644 index 0000000..a9006c2 --- /dev/null +++ b/src/pages/info/ChequebookInfoCard.tsx @@ -0,0 +1,48 @@ +import { useContext } from 'react' +import { useNavigate } from 'react-router' +import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon' +import Card from '../../components/Card' +import { Context as BeeContext } from '../../providers/Bee' +import { ROUTES } from '../../routes' + +export function ChequebookInfoCard() { + const { chequebookBalance } = useContext(BeeContext) + const navigate = useNavigate() + + if ( + chequebookBalance?.availableBalance !== undefined && + chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) + ) { + return ( + navigate(ROUTES.ACCOUNT_CHEQUEBOOK), + }} + icon={} + title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`} + subtitle="Current chequebook balance." + status="ok" + /> + ) + } + + return ( + navigate(ROUTES.ACCOUNT_CHEQUEBOOK), + }} + icon={} + title={ + chequebookBalance?.availableBalance + ? `${chequebookBalance.availableBalance.toSignificantDigits(4)} xBZZ` + : 'No available balance.' + } + subtitle="Chequebook not setup." + status="error" + /> + ) +} diff --git a/src/pages/info/NodeInfoCard.tsx b/src/pages/info/NodeInfoCard.tsx index cdb8ee2..f868f60 100644 --- a/src/pages/info/NodeInfoCard.tsx +++ b/src/pages/info/NodeInfoCard.tsx @@ -1,17 +1,29 @@ import { ReactElement, useContext } from 'react' -import Search from 'remixicon-react/SearchLineIcon' import Globe from 'remixicon-react/GlobalLineIcon' +import Search from 'remixicon-react/SearchLineIcon' import Settings from 'remixicon-react/Settings2LineIcon' -import { CheckState, Context as BeeContext } from '../../providers/Bee' -import Card from '../../components/Card' import { useNavigate } from 'react-router' +import Card from '../../components/Card' +import { CheckState, Context as BeeContext } from '../../providers/Bee' import { ROUTES } from '../../routes' export default function NodeInfoCard(): ReactElement { - const { status } = useContext(BeeContext) + const { debugApiHealth, debugApiReadiness, status } = useContext(BeeContext) const navigate = useNavigate() + if (debugApiHealth && !debugApiReadiness) { + return ( + navigate(ROUTES.STATUS) }} + icon={} + title="Starting up..." + subtitle="Your Bee node is currently launching." + status="loading" + /> + ) + } + if (status.all === CheckState.ERROR) { return ( navigate(ROUTES.ACCOUNT_WALLET), + }} + icon={} + title={balanceText} + subtitle="Current wallet balance." + status="ok" + /> + ) + } + + return ( + navigate(ROUTES.TOP_UP), + }} + icon={} + title="Your wallet is not setup." + subtitle="To share content on Swarm, please setup your wallet." + status="error" + /> + ) +} diff --git a/src/pages/info/index.tsx b/src/pages/info/index.tsx index 9648527..9c9d5eb 100644 --- a/src/pages/info/index.tsx +++ b/src/pages/info/index.tsx @@ -1,110 +1,41 @@ import { Button } from '@material-ui/core' import { ReactElement, useContext } from 'react' -import { useNavigate } from 'react-router' -import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon' -import Upload from 'remixicon-react/UploadLineIcon' -import Wallet from 'remixicon-react/Wallet3LineIcon' -import Card from '../../components/Card' 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 { Context as BalanceProvider } from '../../providers/WalletBalance' -import { ROUTES } from '../../routes' import { chainIdToName } from '../../utils/chain' +import { ChequebookInfoCard } from './ChequebookInfoCard' import NodeInfoCard from './NodeInfoCard' -import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants' +import { WalletInfoCard } from './WalletInfoCard' export default function Status(): ReactElement { const { + debugApiReadiness, status, latestUserVersion, isLatestBeeVersion, latestBeeVersionUrl, topology, nodeInfo, - chequebookBalance, chainId, } = useContext(BeeContext) const { isDesktop, desktopUrl } = useContext(SettingsContext) - const { balance, error } = useContext(BalanceProvider) const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl) const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false) - const navigate = useNavigate() - - let balanceText = 'Loading...' - - if (error) { - balanceText = 'Could not load...' - console.error(error) // eslint-disable-line - } else if (balance) { - balanceText = `${balance.bzz.toSignificantDigits(4)} xBZZ | ${balance.dai.toSignificantDigits(4)} xDAI` - } return (
-
- {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? ( - navigate(ROUTES.ACCOUNT_WALLET), - }} - icon={} - title={balanceText} - subtitle="Current wallet balance." - status="ok" - /> - ) : ( - navigate(ROUTES.TOP_UP), - }} - icon={} - title="Your wallet is not setup." - subtitle="To share content on Swarm, please setup your wallet." - status="error" - /> - )} - {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) && ( + {debugApiReadiness && ( <> -
- {chequebookBalance?.availableBalance !== undefined && - chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? ( - navigate(ROUTES.ACCOUNT_CHEQUEBOOK), - }} - icon={} - title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`} - subtitle="Current chequebook balance." - status="ok" - /> - ) : ( - navigate(ROUTES.ACCOUNT_CHEQUEBOOK), - }} - icon={} - title={ - chequebookBalance?.availableBalance - ? `${chequebookBalance.availableBalance.toSignificantDigits(4)} xBZZ` - : 'No available balance.' - } - subtitle="Chequebook not setup." - status="error" - /> - )} +
+ +
+ )}
diff --git a/src/providers/Bee.tsx b/src/providers/Bee.tsx index 1c86f66..0f7fd2a 100644 --- a/src/providers/Bee.tsx +++ b/src/providers/Bee.tsx @@ -52,6 +52,7 @@ interface ContextInterface { error: Error | null apiHealth: boolean debugApiHealth: Health | null + debugApiReadiness: boolean nodeAddresses: NodeAddresses | null nodeInfo: NodeInfo | null topology: Topology | null @@ -89,6 +90,7 @@ const initialValues: ContextInterface = { error: null, apiHealth: false, debugApiHealth: null, + debugApiReadiness: false, nodeAddresses: null, nodeInfo: null, topology: null, @@ -190,6 +192,7 @@ export function Provider({ children }: Props): ReactElement { const { beeApi, beeDebugApi } = useContext(SettingsContext) const [apiHealth, setApiHealth] = useState(false) const [debugApiHealth, setDebugApiHealth] = useState(null) + const [debugApiReadiness, setDebugApiReadiness] = useState(false) const [nodeAddresses, setNodeAddresses] = useState(null) const [nodeInfo, setNodeInfo] = useState(null) const [topology, setNodeTopology] = useState(null) @@ -299,6 +302,12 @@ export function Provider({ children }: Props): ReactElement { .then(setDebugApiHealth) .catch(() => setDebugApiHealth(null)), + // Debug API readiness + beeDebugApi + .getReadiness({ timeout: TIMEOUT }) + .then(setDebugApiReadiness) + .catch(() => setDebugApiReadiness(false)), + // Node Addresses beeDebugApi .getNodeAddresses({ timeout: TIMEOUT }) @@ -426,6 +435,7 @@ export function Provider({ children }: Props): ReactElement { error, apiHealth, debugApiHealth, + debugApiReadiness, nodeAddresses, nodeInfo, topology,