refactor: replaced topology axios call with bee-js

src/pages/peers/index.tsx

@@ -1,15 +1,12 @@
-import React from 'react'
-
-import { Grid, Container, CircularProgress } from '@material-ui/core/';
-
-import StatCard from '../../components/StatCard';
+import { Container, CircularProgress } from '@material-ui/core/';
 import PeerTable from './PeerTable';
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard';
 
 import { useApiNodeTopology, useApiNodePeers, useDebugApiHealth } from '../../hooks/apiHooks';
+import TopologyStats from '../../components/TopologyStats';
 
 export default function Peers() {
-    const { nodeTopology, isLoadingNodeTopology } = useApiNodeTopology()
+    const topology = useApiNodeTopology()
     const debugHealth = useDebugApiHealth()
     const peers = useApiNodePeers()
 
@@ -27,31 +24,7 @@ export default function Peers() {
 
     return (
         <>
-            <Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
-                <Grid container spacing={3}>
-                    <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
-                        <StatCard
-                        label='Connected Peers'
-                        statistic={nodeTopology.connected.toString()}
-                        loading={isLoadingNodeTopology}
-                        />
-                    </Grid>
-                    <Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
-                        <StatCard
-                        label='Population'
-                        statistic={nodeTopology.population.toString()}
-                        loading={isLoadingNodeTopology}
-                        />
-                    </Grid>
-                    <Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
-                        <StatCard
-                        label='Depth'
-                        statistic={nodeTopology.depth.toString()}
-                        loading={isLoadingNodeTopology}
-                        />
-                    </Grid>
-                </Grid> 
-            </Grid>
+            <TopologyStats {...topology} />
             <PeerTable {...peers} />
         </>
     )

src/pages/status/NodeSetupWorkflow.tsx

@@ -98,7 +98,7 @@ export default function NodeSetupWorkflow(props: any) {
         setActiveStep(5)
       }
 
-      if (nodeTopology.connected && nodeTopology.connected > 0) {
+      if (nodeTopology?.connected && nodeTopology?.connected > 0) {
         handleComplete(5)
         setActiveStep(6)
       }

src/pages/status/StatusCard.tsx

@@ -5,7 +5,7 @@ import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/';
 import { CheckCircle, Error, ArrowRight, ArrowDropUp } from '@material-ui/icons/';
 import { Skeleton } from '@material-ui/lab';
-import { Health } from '@ethersphere/bee-js';
+import type { Health, NodeAddresses, Topology } from '@ethersphere/bee-js';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -28,32 +28,13 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-interface NodeAddresses {
-    overlay: string,
-    underlay: string[],
-    ethereum: string,
-    public_key: string, 
-    pss_public_key: string
-}
-
-interface NodeTopology {
-    baseAddr: string,
-    bins: string[],
-    connected: number,
-    depth: number, 
-    nnLowWatermark: number,
-    population: number,
-    timestamp: string,
-}
-
-
 interface IProps{
     nodeHealth: Health,
     loadingNodeHealth: boolean,
     beeRelease: any,
     loadingBeeRelease: boolean,
     nodeAddresses: NodeAddresses,
-    nodeTopology: NodeTopology,
+    nodeTopology: Topology,
     loadingNodeTopology: boolean,
     setStatusChecksVisible: any,
 }

src/pages/status/index.tsx

@@ -20,7 +20,7 @@ export default function Status() {
     const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
     const { nodeAddresses, isLoadingNodeAddresses } = useApiNodeAddresses()
     const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
-    const { nodeTopology, isLoadingNodeTopology } = useApiNodeTopology()
+    const { topology: nodeTopology, isLoading: isLoadingNodeTopology } = useApiNodeTopology()
     const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
 
 
@@ -74,7 +74,7 @@ export default function Status() {
             beeRelease.name === `v${nodeHealth?.version?.split('-')[0]}` &&
             nodeAddresses?.ethereum && 
             chequebookAddress?.chequebookaddress && chequebookBalance && chequebookBalance?.totalBalance > 0 &&
-            nodeTopology.connected && nodeTopology.connected > 0 &&
+            nodeTopology?.connected && nodeTopology?.connected > 0 &&
             !statusChecksVisible  ? 
                 <div>
                     <StatusCard