refactor: replaced topology axios call with bee-js

src/components/StatCard.tsx

@@ -17,31 +17,35 @@ const useStyles = makeStyles({
   });
 
 interface IProps {
-    label: string,
+    label: string
-    statistic: string,
+    statistic?: string
-    loading?: boolean,
+    loading?: boolean
 }
 
-export default function StatCard(props: IProps) {
+export default function StatCard({loading, label, statistic}: IProps) {
     const classes = useStyles();
 
+
     return (
         <Card className={classes.root}>
             <CardContent>
-            {props.loading ? 
+            {loading && (
-                <div>
+                <>
                     <Skeleton width={180} height={25} animation="wave" />
                     <Skeleton width={180} height={35} animation="wave" />
-                </div>
+                </>
-                :
+              )
-                <div>
+            }
+            {!loading && (
+                <>
                   <Typography className={classes.title} color="textSecondary" gutterBottom>
-                    {props.label}
+                    {label}
                   </Typography>
                   <Typography variant="h5" component="h2">
-                    {props.statistic}
+                    {statistic}
                   </Typography>
-                </div>
+                </>
+              )
             }
             </CardContent>
         </Card>

src/components/TopologyStats.tsx

@@ -0,0 +1,39 @@
+import type { Topology } from '@ethersphere/bee-js';
+import { Grid } from '@material-ui/core/';
+import StatCard from './StatCard';
+
+interface Props {
+    isLoading: boolean
+    topology: Topology | null
+    error: Error | null // FIXME: should display error
+}
+
+const TopologyStats = ({isLoading, topology, error}: Props) => (
+    <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={topology?.connected.toString()}
+                loading={isLoading}
+                />
+            </Grid>
+            <Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
+                <StatCard
+                label='Population'
+                statistic={topology?.population.toString()}
+                loading={isLoading}
+                />
+            </Grid>
+            <Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
+                <StatCard
+                label='Depth'
+                statistic={topology?.depth.toString()}
+                loading={isLoading}
+                />
+            </Grid>
+        </Grid> 
+    </Grid>
+)
+
+export default TopologyStats

src/hooks/apiHooks.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
 import type { NodeAddresses, ChequebookAddressResponse, ChequebookBalanceResponse, BalanceResponse, 
-    LastChequesResponse, AllSettlements, LastCashoutActionResponse, Health, Peer } from '@ethersphere/bee-js'
+    LastChequesResponse, AllSettlements, LastCashoutActionResponse, Health, Peer, Topology } from '@ethersphere/bee-js'
 
 import { beeDebugApi, beeApi } from '../services/bee';
 
@@ -72,15 +72,15 @@ export const useApiNodeAddresses = () => {
 }
 
 export const useApiNodeTopology = () => {
-    const [nodeTopology, setNodeTopology] = useState({ baseAddr: '', bins: [""], connected: 0, depth: 0, nnLowWatermark: 0, population: 0, timestamp: ''})
+    const [topology, setNodeTopology] = useState<Topology | null>(null)
-    const [isLoadingNodeTopology, setLoading] = useState<boolean>(false)
+    const [isLoading, setLoading] = useState<boolean>(false)
     const [error, setError] = useState<Error | null>(null)
 
     useEffect(() => { 
         setLoading(true)
         beeDebugApi.connectivity.topology()
         .then(res => {
-            setNodeTopology(res.data)
+            setNodeTopology(res)
         })
         .catch(error => {
             setError(error)
@@ -90,7 +90,7 @@ export const useApiNodeTopology = () => {
         })
     }, [])
 
-    return { nodeTopology, isLoadingNodeTopology, error } ;
+    return { topology, isLoading, error } ;
 }
 
 export const useApiChequebookAddress = () => {

src/pages/peers/index.tsx

@@ -1,15 +1,12 @@
-import React from 'react'
+import { Container, CircularProgress } from '@material-ui/core/';
-
-import { Grid, Container, CircularProgress } from '@material-ui/core/';
-
-import StatCard from '../../components/StatCard';
 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 }}>
+            <TopologyStats {...topology} />
-                <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>
             <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 

src/services/bee.tsx

@@ -62,14 +62,8 @@ export const beeDebugApi = {
         listPeers() {
             return beeJSDebugClient().getPeers()
         },
-        blockListedPeers() {
-            return beeDebugApiClient().get(`/blocklist`)
-        },
-        removePeer(peerId: string) {
-            return beeDebugApiClient().delete(`/peers/${peerId}`)
-        },
         topology() {
-            return beeDebugApiClient().get(`/topology`)
+            return beeJSDebugClient().getTopology()
         },
         ping(peerId: string) {
             return beeDebugApiClient().post(`/pingpong/${peerId}`)