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

* fix: change status page depending on desktop mode

* refactor: check desktop reachability periodically

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'
-          : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
+          ? 'The connection to the Bee node debug API has been successful'
+          : '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'
-          : 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
+          ? 'The connection to the Bee node API has been successful'
+          : '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>
   )