feat: add dev mode flag (#246)

* feat: add dev mode flag

* docs: add REACT_APP_DEV_MODE fixme comment

* feat: also ignore chequebook status in dev mode

* fix: print undefined overlay as empty string (#248)

* docs: add dev mode to readme

* docs: revert autoformat

Co-authored-by: Attila Gazso <agazso@gmail.com>

README.md

@@ -85,6 +85,8 @@ npm start
 
 The Bee Dashboard runs in development mode on [http://localhost:3031/](http://localhost:3031/)
 
+> Setting `REACT_APP_DEV_MODE=1` environment variable loosens some checks. This makes it possible to develop Bee Dashboard without having connected peers and chequebook properly set up, effectively supporting the dev mode of Bee itself.
+
 ## Contribute
 
 There are some ways you can make this module better:

src/components/ExpandableListItemKey.tsx

@@ -65,6 +65,9 @@ export default function ExpandableListItemKey({ label, value }: Props): ReactEle
 
   const splitValues = split(value)
   const hasPrefix = isPrefixedHexString(value)
+  const spanText = `${hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]}[…]${
+    splitValues[splitValues.length - 1]
+  }`
 
   return (
     <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
@@ -77,9 +80,7 @@ export default function ExpandableListItemKey({ label, value }: Props): ReactEle
                 <span className={classes.copyValue}>
                   <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
                     <CopyToClipboard text={value}>
-                      <span onClick={tooltipClickHandler}>{`${
-                        hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]
-                      }[…]${splitValues[splitValues.length - 1]}`}</span>
+                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
                     </CopyToClipboard>
                   </Tooltip>
                 </span>

src/providers/Bee.tsx

@@ -1,19 +1,18 @@
-import type { ChequebookBalance, Balance, Settlements } from '../types'
-import { createContext, ReactChild, ReactElement, useEffect, useState, useContext } from 'react'
-import { Token } from '../models/Token'
-import semver from 'semver'
-import { engines } from '../../package.json'
-import { Context as SettingsContext } from './Settings'
-
 import type {
-  NodeAddresses,
   ChequebookAddressResponse,
-  LastChequesResponse,
   Health,
+  LastChequesResponse,
+  NodeAddresses,
   Peer,
   Topology,
 } from '@ethersphere/bee-js'
+import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
+import semver from 'semver'
+import { engines } from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
+import { Token } from '../models/Token'
+import type { Balance, ChequebookBalance, Settlements } from '../types'
+import { Context as SettingsContext } from './Settings'
 
 interface Status {
   all: boolean
@@ -113,11 +112,13 @@ function getStatus(
     blockchainConnection: Boolean(nodeAddresses?.ethereum),
     debugApiConnection: Boolean(debugApiHealth?.status === 'ok'),
     apiConnection: apiHealth,
-    topology: Boolean(topology?.connected && topology?.connected > 0),
+    // FIXME: `REACT_APP_DEV_MODE` is a temporary workaround to be able to develop with only one node
+    topology: Boolean(topology?.connected && topology?.connected > 0) || Boolean(process.env.REACT_APP_DEV_MODE),
     chequebook:
-      Boolean(chequebookAddress?.chequebookAddress) &&
-      chequebookBalance !== null &&
-      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0),
+      (Boolean(chequebookAddress?.chequebookAddress) &&
+        chequebookBalance !== null &&
+        chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)) ||
+      Boolean(process.env.REACT_APP_DEV_MODE),
   }
 
   return { ...status, all: !error && Object.values(status).every(v => v) }