diff --git a/src/pages/account/feeds/AccountFeeds.tsx b/src/pages/account/feeds/AccountFeeds.tsx index a53410c..22cc6c4 100644 --- a/src/pages/account/feeds/AccountFeeds.tsx +++ b/src/pages/account/feeds/AccountFeeds.tsx @@ -19,9 +19,12 @@ import { ExportFeedDialog } from '../../feeds/ExportFeedDialog' import { ImportFeedDialog } from '../../feeds/ImportFeedDialog' import { AccountNavigation } from '../AccountNavigation' import { Header } from '../Header' +import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard' +import { CheckState, Context as BeeContext } from '../../../providers/Bee' export function AccountFeeds(): ReactElement { const { identities, setIdentities } = useContext(IdentityContext) + const { status } = useContext(BeeContext) const navigate = useNavigate() @@ -62,6 +65,8 @@ export function AccountFeeds(): ReactElement { setShowDelete(true) } + if (status.all === CheckState.ERROR) return + return ( <>
diff --git a/src/pages/files/UploadLander.tsx b/src/pages/files/UploadLander.tsx index cc2f9ae..dcf4473 100644 --- a/src/pages/files/UploadLander.tsx +++ b/src/pages/files/UploadLander.tsx @@ -1,7 +1,7 @@ import { ReactElement, useContext } from 'react' import { History } from '../../components/History' import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard' -import { Context as BeeContext } from '../../providers/Bee' +import { CheckState, Context as BeeContext } from '../../providers/Bee' import { defaultUploadOrigin } from '../../providers/File' import { HISTORY_KEYS } from '../../utils/local-storage' import { FileNavigation } from './FileNavigation' @@ -10,7 +10,7 @@ import { UploadArea } from './UploadArea' export function UploadLander(): ReactElement { const { status } = useContext(BeeContext) - if (!status.all) return + if (status.all === CheckState.ERROR) return return ( <> diff --git a/src/pages/info/NodeInfoCard.tsx b/src/pages/info/NodeInfoCard.tsx new file mode 100644 index 0000000..cdb8ee2 --- /dev/null +++ b/src/pages/info/NodeInfoCard.tsx @@ -0,0 +1,48 @@ +import { ReactElement, useContext } from 'react' +import Search from 'remixicon-react/SearchLineIcon' +import Globe from 'remixicon-react/GlobalLineIcon' +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 { ROUTES } from '../../routes' + +export default function NodeInfoCard(): ReactElement { + const { status } = useContext(BeeContext) + const navigate = useNavigate() + + if (status.all === CheckState.ERROR) { + return ( + navigate(ROUTES.STATUS) }} + icon={} + title="Your node is not connected…" + subtitle="You are not connected to Swarm." + status="error" + /> + ) + } + + if (status.all === CheckState.WARNING) { + return ( + navigate(ROUTES.STATUS) }} + icon={} + title="Your node is running…" + subtitle="Connection to Swarm might not be optimal." + status="error" + /> + ) + } + + return ( + navigate(ROUTES.DOWNLOAD) }} + icon={} + title="Your node is connected." + subtitle="You are connected to Swarm." + status="ok" + /> + ) +} diff --git a/src/pages/info/index.tsx b/src/pages/info/index.tsx index 9dc94a8..ecaa0bd 100644 --- a/src/pages/info/index.tsx +++ b/src/pages/info/index.tsx @@ -2,9 +2,6 @@ import { ReactElement, useContext } from 'react' import { Button } from '@material-ui/core' import Wallet from 'remixicon-react/Wallet3LineIcon' import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon' -import Search from 'remixicon-react/SearchLineIcon' -import Globe from 'remixicon-react/GlobalLineIcon' -import Settings from 'remixicon-react/Settings2LineIcon' import Upload from 'remixicon-react/UploadLineIcon' import { Context as BeeContext } from '../../providers/Bee' @@ -15,6 +12,7 @@ import { useNavigate } from 'react-router' import { ROUTES } from '../../routes' import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks' import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop' +import NodeInfoCard from './NodeInfoCard' export default function Status(): ReactElement { const { @@ -34,23 +32,7 @@ export default function Status(): ReactElement { return (
- {status.all === 'OK' ? ( - navigate(ROUTES.DOWNLOAD) }} - icon={} - title="Your node is connected." - subtitle="You are connected to Swarm." - status="ok" - /> - ) : ( - navigate(ROUTES.STATUS) }} - icon={} - title="Your node is not connected…" - subtitle="You are not connected to Swarm." - status="error" - /> - )} +
{nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (