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/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -1,38 +1,22 @@
 import { Typography } from '@material-ui/core/'
-import { CheckCircle, Warning } from '@material-ui/icons/'
 import EthereumAddress from '../../../components/EthereumAddress'
 import DepositModal from '../../../components/DepositModal'
 import CodeBlockTabs from '../../../components/CodeBlockTabs'
-import type { ChequebookAddressResponse, ChequebookBalanceResponse } from '@ethersphere/bee-js'
 import type { ReactElement } from 'react'
 
-interface Props {
-  chequebookAddress: ChequebookAddressResponse | null
-  chequebookBalance: ChequebookBalanceResponse | null
-  isLoadingChequebookAddress: boolean
-  isLoadingChequebookBalance: boolean
-}
+type Props = StatusChequebookHook
 
-const ChequebookDeployFund = (props: Props): ReactElement => (
-  <div>
-    <p style={{ marginBottom: '20px', display: 'flex' }}>
-      <span style={{ marginRight: '40px' }}>Deploy chequebook and fund with BZZ</span>
-      {props.chequebookAddress?.chequebookaddress ? <DepositModal /> : null}
-    </p>
-    <div style={{ marginBottom: '10px' }}>
-      {
-        // FIXME: this should be broken up
-        /* eslint-disable no-nested-ternary */
-        props.chequebookAddress?.chequebookaddress &&
-        props.chequebookBalance &&
-        props.chequebookBalance?.totalBalance > 0 ? (
+const ChequebookDeployFund = ({ isLoading, chequebookAddress, chequebookBalance }: Props): ReactElement | null => {
+  if (isLoading) return null
+
+  return (
+    <div>
+      <p style={{ marginBottom: '20px', display: 'flex' }}>
+        {chequebookAddress?.chequebookaddress && <DepositModal />}
+      </p>
+      <div style={{ marginBottom: '10px' }}>
+        {!(chequebookAddress?.chequebookaddress && chequebookBalance && chequebookBalance?.totalBalance > 0) && (
           <div>
-            <CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
-            <span>Your chequebook is deployed and funded!</span>
-          </div>
-        ) : props.isLoadingChequebookAddress || props.isLoadingChequebookBalance ? null : (
-          <div>
-            <Warning style={{ color: '#ff9800', marginRight: '7px', height: '18px' }} />
             <span>
               Your chequebook is either not deployed or funded. Run the below commands to get your address and deposit
               ETH. Then visit the BZZaar here{' '}
@@ -43,15 +27,14 @@ const ChequebookDeployFund = (props: Props): ReactElement => (
             </span>
             <CodeBlockTabs showLineNumbers linux={`bee-get-addr`} mac={`bee-get-addr`} />
           </div>
-        )
-        /* eslint-enable no-nested-ternary */
-      }
+        )}
+      </div>
+      <Typography variant="subtitle1" gutterBottom>
+        Chequebook Address
+      </Typography>
+      <EthereumAddress address={chequebookAddress?.chequebookaddress} network={'goerli'} />
     </div>
-    <Typography variant="subtitle1" gutterBottom>
-      Chequebook Address
-    </Typography>
-    <EthereumAddress address={props.chequebookAddress?.chequebookaddress} network={'goerli'} />
-  </div>
-)
+  )
+}
 
 export default ChequebookDeployFund