refactor: replaced topology axios call with bee-js

src/components/StatCard.tsx

@@ -17,31 +17,35 @@ const useStyles = makeStyles({
   });
 
 interface IProps {
-    label: string,
-    statistic: string,
-    loading?: boolean,
+    label: string
+    statistic?: string
+    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 ? 
-                <div>
+            {loading && (
+                <>
                     <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