feat: reviewed and simplified the node status check (#63)

* refactor: status page nested ternary logic

* refactor: move the fetch latest bee release to a hook

* refactor: solved node status rerendering, improved performance and clarity

* refactor: step components now use unified hooks interface

* style: removed component margins, layout should be handled by pages

src/hooks/status.ts

@@ -0,0 +1,73 @@
+import {
+  useApiChequebookAddress,
+  useApiChequebookBalance,
+  useApiHealth,
+  useApiNodeAddresses,
+  useApiNodeTopology,
+  useDebugApiHealth,
+  useLatestBeeRelease,
+} from './apiHooks'
+
+export const useStatusNodeVersion = (): StatusNodeVersionHook => {
+  const { latestBeeRelease, isLoadingLatestBeeRelease } = useLatestBeeRelease()
+  const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
+
+  return {
+    isLoading: isLoadingNodeHealth || isLoadingLatestBeeRelease,
+    isOk: Boolean(latestBeeRelease && latestBeeRelease.name === `v${nodeHealth?.version?.split('-')[0]}`),
+    userVersion: nodeHealth?.version?.split('-')[0] || '-',
+    latestVersion: latestBeeRelease?.name.substring(1) || '-',
+    latestUrl: latestBeeRelease?.html_url || 'https://github.com/ethersphere/bee/releases/latest',
+  }
+}
+
+export const useStatusEthereumConnection = (): StatusEthereumConnectionHook => {
+  const { isLoadingNodeAddresses, nodeAddresses } = useApiNodeAddresses()
+
+  return {
+    isLoading: isLoadingNodeAddresses,
+    isOk: Boolean(nodeAddresses?.ethereum),
+    nodeAddresses,
+  }
+}
+
+export const useStatusDebugConnection = (): StatusHookCommon => {
+  const { isLoadingNodeHealth, nodeHealth } = useDebugApiHealth()
+
+  return {
+    isLoading: isLoadingNodeHealth,
+    isOk: Boolean(nodeHealth?.status === 'ok'),
+  }
+}
+
+export const useStatusConnection = (): StatusHookCommon => {
+  const { isLoadingHealth, health } = useApiHealth()
+
+  return {
+    isLoading: isLoadingHealth,
+    isOk: health,
+  }
+}
+
+export const useStatusTopology = (): StatusTopologyHook => {
+  const { topology, isLoading } = useApiNodeTopology()
+
+  return {
+    isLoading,
+    isOk: Boolean(topology?.connected && topology?.connected > 0),
+    topology,
+  }
+}
+
+export const useStatusChequebook = (): StatusChequebookHook => {
+  const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
+  const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
+
+  return {
+    isLoading: isLoadingChequebookAddress || isLoadingChequebookBalance,
+    isOk:
+      Boolean(chequebookAddress?.chequebookaddress) && chequebookBalance !== null && chequebookBalance.totalBalance > 0,
+    chequebookBalance,
+    chequebookAddress,
+  }
+}