fix: add troubleshooting checks (#435)

* fix: add troubleshooting checks

* feat: add node warning state

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 <TroubleshootConnectionCard />
+
   return (
     <>
       <Header />

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 <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   return (
     <>

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 (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Your node is not connected…"
+        subtitle="You are not connected to Swarm."
+        status="error"
+      />
+    )
+  }
+
+  if (status.all === CheckState.WARNING) {
+    return (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Your node is running…"
+        subtitle="Connection to Swarm might not be optimal."
+        status="error"
+      />
+    )
+  }
+
+  return (
+    <Card
+      buttonProps={{ iconType: Search, children: 'Access Content', onClick: () => navigate(ROUTES.DOWNLOAD) }}
+      icon={<Globe />}
+      title="Your node is connected."
+      subtitle="You are connected to Swarm."
+      status="ok"
+    />
+  )
+}

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 (
     <div>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
-        {status.all === 'OK' ? (
+        <NodeInfoCard />
-          <Card
-            buttonProps={{ iconType: Search, children: 'Access Content', onClick: () => navigate(ROUTES.DOWNLOAD) }}
-            icon={<Globe />}
-            title="Your node is connected."
-            subtitle="You are connected to Swarm."
-            status="ok"
-          />
-        ) : (
-          <Card
-            buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
-            icon={<Globe />}
-            title="Your node is not connected…"
-            subtitle="You are not connected to Swarm."
-            status="error"
-          />
-        )}
         <div style={{ width: '8px' }}></div>
         {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
           <Card