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

@@ -7,6 +7,7 @@ import DocsIcon from 'remixicon-react/BookOpenLineIcon'
 import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
 import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
 import GithubIcon from 'remixicon-react/GithubFillIcon'
+import ExchangeDollarLineIcon from 'remixicon-react/ExchangeDollarLineIcon'
 import HomeIcon from 'remixicon-react/Home3LineIcon'
 import MenuFoldIcon from 'remixicon-react/MenuFoldLineIcon'
 import MenuUnfoldIcon from 'remixicon-react/MenuUnfoldLineIcon'
@@ -147,6 +148,11 @@ export default function SideBar(): ReactElement {
       icon: AccountIcon,
       pathMatcherSubstring: '/account/',
     },
+    {
+      label: 'Redistribution',
+      path: ROUTES.REDISTRIBUTION,
+      icon: ExchangeDollarLineIcon,
+    },
     {
       label: 'Settings',
       path: ROUTES.SETTINGS,