fix: change status page depending on desktop mode (#573)

* fix: change status page depending on desktop mode

* refactor: check desktop reachability periodically

src/hooks/apiHooks.tsx

@@ -11,6 +11,7 @@ export interface LatestBeeReleaseHook {
 }
 
 export interface BeeDesktopHook {
+  reachable: boolean
   error: Error | null
   isLoading: boolean
   beeDesktopVersion: string
@@ -22,11 +23,34 @@ export interface NewDesktopVersionHook {
 }
 
 export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
+  const [reachable, setReachable] = useState(false)
   const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
   const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
   const [isLoading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error | null>(null)
 
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      return
+    }
+
+    function runReachabilityCheck() {
+      axios
+        .get(`${desktopUrl}/info`)
+        .then(() => {
+          setReachable(true)
+        })
+        .catch(() => {
+          setReachable(false)
+        })
+    }
+
+    runReachabilityCheck()
+    const interval = setInterval(runReachabilityCheck, 10_000)
+
+    return () => clearInterval(interval)
+  }, [desktopUrl, isBeeDesktop])
+
   useEffect(() => {
     if (!isBeeDesktop) {
       setLoading(false)
@@ -48,7 +72,7 @@ export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesk
     }
   }, [desktopUrl, isBeeDesktop])
 
-  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
+  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
 }
 
 async function checkNewVersion(desktopUrl: string): Promise<string> {

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -11,8 +11,9 @@ import { CheckState, Context } from '../../../providers/Bee'
 const ChequebookDeployFund = (): ReactElement | null => {
   const { status, isLoading, chequebookAddress } = useContext(Context)
   const { checkState, isEnabled } = status.chequebook
+  const { checkState: debugApiCheckState } = status.debugApiConnection
 
-  if (!isEnabled) return null
+  if (!isEnabled || debugApiCheckState === CheckState.ERROR) return null
 
   let text: ReactNode
 

src/pages/status/SetupSteps/DebugConnectionCheck.tsx

@@ -11,7 +11,7 @@ import { Context as SettingsContext } from '../../../providers/Settings'
 
 export default function NodeConnectionCheck(): ReactElement | null {
   const { status, isLoading } = useContext(Context)
-  const { setDebugApiUrl, apiDebugUrl } = useContext(SettingsContext)
+  const { setDebugApiUrl, apiDebugUrl, isDesktop } = useContext(SettingsContext)
   const { checkState, isEnabled } = status.debugApiConnection
 
   if (!isEnabled) return null
@@ -26,12 +26,12 @@ export default function NodeConnectionCheck(): ReactElement | null {
     >
       <ExpandableListItemNote>
         {checkState === CheckState.OK
-          ? 'The connection to the Bee nodes debug API has been successful'
+          ? 'The connection to the Bee node debug API has been successful'
-          : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
+          : 'Could not connect to your Bee node debug API.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
 
-      {checkState === CheckState.ERROR && (
+      {checkState === CheckState.ERROR && !isDesktop && (
         <ExpandableList level={1} label="Troubleshoot">
           <ExpandableListItem
             label={

src/pages/status/SetupSteps/DesktopConnectionCheck.tsx

@@ -0,0 +1,32 @@
+import { ReactElement, useContext } from 'react'
+
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { useBeeDesktop } from '../../../hooks/apiHooks'
+import { CheckState } from '../../../providers/Bee'
+import { Context as SettingsContext } from '../../../providers/Settings'
+
+export default function DesktopConnectionCheck(): ReactElement | null {
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { reachable } = useBeeDesktop(isDesktop, desktopUrl)
+
+  return (
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon checkState={reachable ? CheckState.OK : CheckState.ERROR} isLoading={false} /> Connection to Swarm
+          Desktop
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {reachable
+          ? 'The connection to the Swarm Desktop API has been successful'
+          : 'Could not connect to the Swarm Desktop API'}
+      </ExpandableListItemNote>
+      <ExpandableListItem label="Swarm Desktop API" value={desktopUrl} />
+    </ExpandableList>
+  )
+}

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

@@ -10,7 +10,7 @@ import StatusIcon from '../../../components/StatusIcon'
 import { CheckState, Context } from '../../../providers/Bee'
 
 export default function NodeConnectionCheck(): ReactElement | null {
-  const { setApiUrl, apiUrl } = useContext(SettingsContext)
+  const { setApiUrl, apiUrl, isDesktop } = useContext(SettingsContext)
   const { status, isLoading } = useContext(Context)
   const { isEnabled, checkState } = status.apiConnection
 
@@ -26,11 +26,11 @@ export default function NodeConnectionCheck(): ReactElement | null {
     >
       <ExpandableListItemNote>
         {checkState === CheckState.OK
-          ? 'The connection to the Bee nodes API has been successful'
+          ? 'The connection to the Bee node API has been successful'
-          : 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
+          : 'Could not connect to your Bee node API.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
-      {checkState === CheckState.ERROR && (
+      {checkState === CheckState.ERROR && !isDesktop && (
         <ExpandableList level={1} label="Troubleshoot">
           <ExpandableListItem
             label={

src/pages/status/SetupSteps/PeerConnection.tsx

@@ -8,8 +8,9 @@ import { CheckState, Context } from '../../../providers/Bee'
 export default function PeerConnection(): ReactElement | null {
   const { status, isLoading, topology } = useContext(Context)
   const { isEnabled, checkState } = status.topology
+  const { checkState: debugApiCheckState } = status.debugApiConnection
 
-  if (!isEnabled) return null
+  if (!isEnabled || debugApiCheckState === CheckState.ERROR) return null
 
   let text: ReactNode
   switch (checkState) {

src/pages/status/index.tsx

@@ -1,6 +1,8 @@
-import type { ReactElement } from 'react'
+import { Context } from '../../providers/Settings'
+import { ReactElement, useContext } from 'react'
 
 import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
+import DesktopConnection from './SetupSteps/DesktopConnectionCheck'
 import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
 import VersionCheck from './SetupSteps/VersionCheck'
 import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
@@ -8,13 +10,16 @@ import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
 import PeerConnection from './SetupSteps/PeerConnection'
 
 export default function NodeSetupWorkflow(): ReactElement {
+  const { isDesktop } = useContext(Context)
+
   return (
     <div>
+      {isDesktop && <DesktopConnection />}
+      <NodeConnectionCheck />
       <DebugConnectionCheck />
-      <VersionCheck />
+      {!isDesktop && <VersionCheck />}
       <EthereumConnectionCheck />
       <ChequebookDeployFund />
-      <NodeConnectionCheck />
       <PeerConnection />
     </div>
   )