wip

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

@@ -1,7 +1,7 @@
 import { Card, CardContent, CardHeader, type SxProps } from "@mui/material";
 
 const cardStyles = {
-  p: 2,
+  p: 3,
 };
 
 const cardTitleStyles: SxProps = {
@@ -31,8 +31,9 @@ const ExplorerCard = ({
         titleTypographyProps={cardTitleStyles}
         subheader={subtitle}
         subheaderTypographyProps={cardSubtitleStyles}
+        sx={{ padding: 0 }}
       />
-      <CardContent>{children}</CardContent>
+      <CardContent sx={{ padding: 0 }}>{children}</CardContent>
     </Card>
   );
 };

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

@@ -1,4 +1,5 @@
 import type { ExplorerData } from "@/app/api";
+import { Box } from "@mui/material";
 import ExplorerCard from "../Cards/ExplorerCard";
 import ExplorerListItem from "../List/ListItem";
 import { DynamicProgressBar } from "../progressBars/DynamicProgressBar";
@@ -18,10 +19,14 @@ export const CurrentEpochCard = (props: ICurrentEpochCardProps) => {
     showEpoch: true,
   };
   return (
-    <div>
-      <ExplorerCard title="Current NGM epoch">
-        <ExplorerListItem value={<DynamicProgressBar {...progressBar} />} />
-      </ExplorerCard>
-    </div>
+    <ExplorerCard title="Current NGM epoch">
+      <ExplorerListItem
+        value={
+          <Box mt={3} width={"100%"}>
+            <DynamicProgressBar {...progressBar} />
+          </Box>
+        }
+      />
+    </ExplorerCard>
   );
 };

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

@@ -1,9 +1,14 @@
 "use client";
 import type { ExplorerData, IPacketsAndStakingData } from "@/app/api";
 import { formatBigNum } from "@/app/utils/formatBigNumbers";
+import { Box } from "@mui/material";
 import { useEffect, useState } from "react";
+import ExplorerCard from "../Cards/ExplorerCard";
+import ExplorerListItem from "../List/ListItem";
 import { MonoCard } from "../cards/MonoCard";
-import type { ILineChartData } from "../lineChart";
+import { type ILineChartData, LineChart } from "../lineChart";
+import { CardUpDownPriceLine } from "../prices/UpDownPriceLine";
+import { DynamicProgressBar } from "../progressBars/DynamicProgressBar";
 
 interface INoiseCardProps {
   explorerData: ExplorerData;
@@ -67,13 +72,28 @@ export const NoiseCard = (props: INoiseCardProps) => {
   }, [explorerData]);
 
   const noiseCard = {
-    overTitle: "Noise generated last 24h",
-    title: formatBigNum(noiseLast24H) || "",
-    upDownLine: {
-      percentage: Math.abs(percentage) || 0,
-      numberWentUp: percentage > 0,
-    },
-    graph: noiseLineGraphData,
+    percentage: Math.abs(percentage) || 0,
+    numberWentUp: percentage > 0,
   };
-  return <MonoCard {...noiseCard} />;
+  const graph = noiseLineGraphData;
+
+  const subtitle = formatBigNum(noiseLast24H)?.toString();
+  return (
+    <ExplorerCard title="Noise generated last 24h" subtitle={subtitle}>
+      <ExplorerListItem
+        value={
+          <Box width={"100%"}>
+            <CardUpDownPriceLine {...noiseCard} />
+            {noiseLineGraphData && (
+              <LineChart
+                data={noiseLineGraphData.data}
+                color={noiseLineGraphData.color}
+                label={noiseLineGraphData.label}
+              />
+            )}
+          </Box>
+        }
+      />
+    </ExplorerCard>
+  );
 };

explorer-nextjs/src/components/prices/UpDownPriceLine.tsx

@@ -0,0 +1,29 @@
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import { Box, Typography } from "@mui/material";
+import type { ReactElement } from "react";
+
+interface ICardUpDownPriceLineProps {
+  percentage: number;
+  numberWentUp: boolean;
+}
+export const CardUpDownPriceLine = (
+  props: ICardUpDownPriceLineProps,
+): ReactElement => {
+  const { percentage, numberWentUp } = props;
+  return (
+    <Box display={"flex"} alignItems={"center"}>
+      {numberWentUp ? (
+        <ArrowUpwardIcon sx={{ color: "#00CA33", fontSize: 13 }} />
+      ) : (
+        <ArrowDownwardIcon sx={{ color: "#DF1400", fontSize: 13 }} />
+      )}
+      <Typography
+        fontSize={13}
+        sx={{ color: numberWentUp ? "#00CA33" : "#DF1400" }}
+      >
+        {percentage}% (24H)
+      </Typography>
+    </Box>
+  );
+};