wip

explorer-nextjs/src/app/page.tsx

@@ -190,7 +190,13 @@ export default function Home() {
               <Typography variant="h1" textTransform={"uppercase"} mb={5}>
                 Mixnet in your hands
               </Typography>
-              <Grid container rowSpacing={3} columnSpacing={2} mb={2}>
+              <Grid
+                container
+                rowSpacing={3}
+                columnSpacing={2}
+                mb={2}
+                alignItems="stretch"
+              >
                 <Grid size={{ xs: 12, md: 3 }}>
                   {explorerData && <NoiseCard explorerData={explorerData} />}
                 </Grid>
@@ -204,7 +210,7 @@ export default function Home() {
                     )}
                   </Grid>
                 </Grid>
-                <Grid size={{ xs: 12, md: 3 }}>
+                <Grid size={{ xs: 12, md: 3 }} height={"100%"}>
                   {explorerData && (
                     <NetworkStakeCard explorerData={explorerData} />
                   )}

explorer-nextjs/src/components/Cards/ExplorerCard.tsx

@@ -2,6 +2,12 @@ import { Card, CardContent, CardHeader, type SxProps } from "@mui/material";
 
 const cardStyles = {
   p: 3,
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  alignItems: "stretch",
+  flexGrow: 1,
 };
 
 const cardTitleStyles: SxProps = {
@@ -10,7 +16,7 @@ const cardTitleStyles: SxProps = {
   letterSpacing: 0.7,
 };
 const cardSubtitleStyles: SxProps = {
-  variant: "h2",
+  variant: "h3",
   mt: 3,
   color: "pine.400",
 };

explorer-nextjs/src/components/landingPageComponents/NetworkStakeCard.tsx

@@ -1,9 +1,10 @@
 "use client";
 import type { ExplorerData, IPacketsAndStakingData } from "@/app/api";
-import { formatBigNum } from "@/app/utils/formatBigNumbers";
+import { Box, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
-import { MonoCard } from "../cards/MonoCard";
-import type { ILineChartData } from "../lineChart";
+import ExplorerCard from "../Cards/ExplorerCard";
+import ExplorerListItem from "../List/ListItem";
+import { type ILineChartData, LineChart } from "../lineChart";
 
 interface INetworkStakeCardProps {
   explorerData: ExplorerData | null;
@@ -45,5 +46,31 @@ export const NetworkStakeCard = (props: INetworkStakeCardProps) => {
     title: `${currentStake} NYM` || "",
     graph: stakeLineGraphData,
   };
-  return <MonoCard {...stakeCard} />;
+  const subtitle = `${currentStake} NYM` || "";
+  return (
+    <div>
+      <ExplorerCard title="Current network stake">
+        <ExplorerListItem
+          value={
+            <Box mt={3} width={"100%"} height={"100%"}>
+              <Typography
+                variant="h3"
+                sx={{ color: "pine.400", wordWrap: "break-word" }}
+                maxWidth={"95%"}
+              >
+                {subtitle}
+              </Typography>
+              {stakeLineGraphData && (
+                <LineChart
+                  data={stakeLineGraphData.data}
+                  color={stakeLineGraphData.color}
+                  label={stakeLineGraphData.label}
+                />
+              )}
+            </Box>
+          }
+        />
+      </ExplorerCard>
+    </div>
+  );
 };