Added new page with node redistribution statistics

src/components/Redistribution.tsx

@@ -0,0 +1,71 @@
+import { RedistributionState, BZZ, DAI } from '@ethersphere/bee-js'
+import { useContext, useEffect, useState } from 'react'
+import { Context } from '../providers/Settings'
+import ExpandableListItem from './ExpandableListItem'
+
+export function Redistribution() {
+  const { beeApi } = useContext(Context)
+  const [redistributionState, setRedistributionState] = useState<RedistributionState | null>(null)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!beeApi) {
+        return
+      }
+
+      beeApi.getRedistributionState().then(setRedistributionState).catch(console.error) // eslint-disable-line
+    }, 3_000)
+
+    return () => clearInterval(interval)
+  })
+
+  const formatDurationSeconds = (s?: number) => {
+    if (s === null || s === undefined) {
+      return '-'
+    } else {
+      return `${s} s`
+    }
+  }
+
+  const formatBzzAmount = (amount?: BZZ) => {
+    if (amount === null || amount === undefined) {
+      return '-'
+    } else {
+      return `${amount.toSignificantDigits(4)} xBZZ`
+    }
+  }
+
+  const formatDaiAmount = (amount?: DAI) => {
+    if (amount === null || amount === undefined) {
+      return '-'
+    } else {
+      return `${amount.toSignificantDigits(4)} xDAI`
+    }
+  }
+
+  return (
+    <>
+      <ExpandableListItem
+        label="Has sufficient funds"
+        value={redistributionState?.hasSufficientFunds?.toString() ?? '-'}
+      />
+      <ExpandableListItem label="Fully synced" value={redistributionState?.isFullySynced?.toString() ?? '-'} />
+      <ExpandableListItem label="Frozen" value={redistributionState?.isFrozen?.toString() ?? '-'} />
+      <ExpandableListItem label="Phase" value={redistributionState?.phase ?? '-'} />
+      <ExpandableListItem label="Round" value={redistributionState?.round?.toString() ?? '-'} />
+      <ExpandableListItem
+        label="Last selected round"
+        value={redistributionState?.lastSelectedRound.toString() ?? '-'}
+      />
+      <ExpandableListItem label="Last played round" value={redistributionState?.lastPlayedRound.toString() ?? '-'} />
+      <ExpandableListItem label="Last round won" value={redistributionState?.lastWonRound.toString() ?? '-'} />
+      <ExpandableListItem label="Last frozen round" value={redistributionState?.lastFrozenRound.toString() ?? '-'} />
+      <ExpandableListItem
+        label="Last sample duration"
+        value={formatDurationSeconds(redistributionState?.lastSampleDurationSeconds)}
+      />
+      <ExpandableListItem label="Reward" value={formatBzzAmount(redistributionState?.reward)} />
+      <ExpandableListItem label="Fees" value={formatDaiAmount(redistributionState?.fees)} />
+    </>
+  )
+}

src/components/SideBar.tsx

@@ -8,6 +8,7 @@ import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
 import DocsIcon from 'remixicon-react/BookOpenLineIcon'
 import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
 import GithubIcon from 'remixicon-react/GithubFillIcon'
+import ExchangeDollarLineIcon from 'remixicon-react/ExchangeDollarLineIcon'
 import HomeIcon from 'remixicon-react/Home3LineIcon'
 import SettingsIcon from 'remixicon-react/Settings2LineIcon'
 import AccountIcon from 'remixicon-react/Wallet3LineIcon'
@@ -95,6 +96,11 @@ export default function SideBar(): ReactElement {
       icon: AccountIcon,
       pathMatcherSubstring: '/account/',
     },
+    {
+      label: 'Redistribution',
+      path: ROUTES.REDISTRIBUTION,
+      icon: ExchangeDollarLineIcon,
+    },
     {
       label: 'Settings',
       path: ROUTES.SETTINGS,

src/pages/info/index.tsx

@@ -13,7 +13,7 @@ import NodeInfoCard from './NodeInfoCard'
 import { WalletInfoCard } from './WalletInfoCard'
 
 export default function Status(): ReactElement {
-  const { beeVersion, status, topology, nodeInfo, walletBalance } = useContext(BeeContext)
+  const { beeVersion, status, topology, nodeInfo, nodeStatus, walletBalance } = useContext(BeeContext)
   const { isDesktop, desktopUrl } = useContext(SettingsContext)
   const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)
@@ -38,7 +38,10 @@ export default function Status(): ReactElement {
       <div style={{ height: '2px' }} />
       <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
       <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
+      <ExpandableListItem label="Pullsync rate" value={nodeStatus?.pullsyncRate} />
       <ExpandableListItem label="Depth" value={topology?.depth ?? '-'} />
+      <ExpandableListItem label="Neighborhood size" value={nodeStatus?.neighborhoodSize} />
+      <ExpandableListItem label="Node is reachable" value={nodeStatus?.isReachable?.toString()} />
       <ChainSync />
 
       <div style={{ height: '16px' }} />

src/pages/redistribution/index.tsx

@@ -0,0 +1,25 @@
+import CircularProgress from '@material-ui/core/CircularProgress'
+import { ReactElement, useContext } from 'react'
+import ExpandableList from '../../components/ExpandableList'
+import { Redistribution } from '../../components/Redistribution'
+import { Context as SettingsContext } from '../../providers/Settings'
+
+export default function RedistributionPage(): ReactElement {
+  const { isLoading } = useContext(SettingsContext)
+
+  if (isLoading) {
+    return (
+      <div style={{ textAlign: 'center', width: '100%' }}>
+        <CircularProgress />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <ExpandableList label="Redistribution" defaultOpen>
+        <Redistribution />
+      </ExpandableList>
+    </>
+  )
+}

src/providers/Bee.tsx

@@ -5,11 +5,13 @@ import {
   ChainState,
   ChequebookAddressResponse,
   ChequebookBalanceResponse,
+  DebugStatus,
   LastChequesResponse,
   NodeAddresses,
   NodeInfo,
   Peer,
   PeerBalance,
+  RedistributionState,
   Topology,
   WalletBalance,
 } from '@ethersphere/bee-js'
@@ -49,6 +51,7 @@ interface ContextInterface {
   apiHealth: boolean
   nodeAddresses: NodeAddresses | null
   nodeInfo: NodeInfo | null
+  nodeStatus: DebugStatus | null
   topology: Topology | null
   chequebookAddress: ChequebookAddressResponse | null
   peers: Peer[] | null
@@ -59,6 +62,7 @@ interface ContextInterface {
   settlements: AllSettlements | null
   chainState: ChainState | null
   walletBalance: WalletBalance | null
+  redistributionState: RedistributionState | null
   latestBeeRelease: LatestBeeRelease | null
   isLoading: boolean
   lastUpdate: number | null
@@ -79,6 +83,7 @@ const initialValues: ContextInterface = {
   apiHealth: false,
   nodeAddresses: null,
   nodeInfo: null,
+  nodeStatus: null,
   topology: null,
   chequebookAddress: null,
   stake: null,
@@ -89,6 +94,7 @@ const initialValues: ContextInterface = {
   settlements: null,
   chainState: null,
   walletBalance: null,
+  redistributionState: null,
   latestBeeRelease: null,
   isLoading: true,
   lastUpdate: null,
@@ -172,6 +178,7 @@ export function Provider({ children }: Props): ReactElement {
   const [apiHealth, setApiHealth] = useState<boolean>(false)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
   const [nodeInfo, setNodeInfo] = useState<NodeInfo | null>(null)
+  const [nodeStatus, setNodeStatus] = useState<DebugStatus | null>(null)
   const [topology, setNodeTopology] = useState<Topology | null>(null)
   const [chequebookAddress, setChequebookAddress] = useState<ChequebookAddressResponse | null>(null)
   const [peers, setPeers] = useState<Peer[] | null>(null)
@@ -182,6 +189,7 @@ export function Provider({ children }: Props): ReactElement {
   const [settlements, setSettlements] = useState<AllSettlements | null>(null)
   const [chainState, setChainState] = useState<ChainState | null>(null)
   const [walletBalance, setWalletBalance] = useState<WalletBalance | null>(null)
+  const [redistributionState, setRedistributionState] = useState<RedistributionState | null>(null)
   const [startedAt] = useState(Date.now())
 
   const { latestBeeRelease } = useLatestBeeRelease()
@@ -257,6 +265,12 @@ export function Provider({ children }: Props): ReactElement {
           .then(setNodeInfo)
           .catch(() => setNodeInfo(null)),
 
+        // NodeDebugInfo
+        beeApi
+          .getStatus({ timeout: TIMEOUT })
+          .then(setNodeStatus)
+          .catch(() => setNodeInfo(null)),
+
         // Network Topology
         beeApi
           .getTopology({ timeout: TIMEOUT })
@@ -304,6 +318,12 @@ export function Provider({ children }: Props): ReactElement {
           .then(stake => setStake(stake))
           .catch(() => setStake(null)),
 
+        // Redistribution stats
+        beeApi
+          .getRedistributionState({ timeout: TIMEOUT })
+          .then(setRedistributionState)
+          .catch(() => setRedistributionState(null)),
+
         // Peer balances
         beeApi
           .getAllBalances({ timeout: TIMEOUT })
@@ -362,6 +382,7 @@ export function Provider({ children }: Props): ReactElement {
         apiHealth,
         nodeAddresses,
         nodeInfo,
+        nodeStatus,
         topology,
         chequebookAddress,
         peers,
@@ -372,6 +393,7 @@ export function Provider({ children }: Props): ReactElement {
         settlements,
         chainState,
         walletBalance,
+        redistributionState,
         latestBeeRelease,
         isLoading,
         lastUpdate,

src/routes.tsx

@@ -25,6 +25,7 @@ import { BankCardTopUpIndex } from './pages/top-up/BankCardTopUpIndex'
 import { CryptoTopUpIndex } from './pages/top-up/CryptoTopUpIndex'
 import { GiftCardFund } from './pages/top-up/GiftCardFund'
 import { GiftCardTopUpIndex } from './pages/top-up/GiftCardTopUpIndex'
+import RedistributionPage from './pages/redistribution'
 import { Swap } from './pages/top-up/Swap'
 import { Context as SettingsContext } from './providers/Settings'
 import { FileManagerPage } from './pages/filemanager'
@@ -37,6 +38,7 @@ export enum ROUTES {
   UPLOAD_IN_PROGRESS = '/files/upload/workflow',
   DOWNLOAD = '/files/download',
   HASH = '/files/hash/:hash',
+  REDISTRIBUTION = '/redistribution',
   SETTINGS = '/settings',
   STATUS = '/status',
   TOP_UP = '/account/wallet/top-up',
@@ -82,6 +84,7 @@ const BaseRouter = (): ReactElement => {
       <Route path={ROUTES.SETTINGS} element={<Settings />} />
       <Route path={ROUTES.STATUS} element={<Status />} />
       <Route path={ROUTES.INFO} element={<Info />} />
+      <Route path={ROUTES.REDISTRIBUTION} element={<RedistributionPage />} />
       <Route path={ROUTES.TOP_UP} element={<TopUp />} />
       <Route path={ROUTES.TOP_UP_CRYPTO} element={<CryptoTopUpIndex />} />
       <Route path={ROUTES.TOP_UP_CRYPTO_SWAP} element={<Swap header="Top-up with cryptocurrencies" />} />