WIP

explorer-nextjs/src/app/api/index.tsx

@@ -16,7 +16,7 @@ import {
   CURRENT_EPOCH_REWARDS,
   DATA_OBSERVATORY_BALANCES_URL,
   DATA_OBSERVATORY_NODES_URL,
-  HARBOURMASTER_API_MIXNODES_STATS,
+  NS_API_MIXNODES_STATS,
   NYM_ACCOUNT_ADDRESS,
   NYM_NODES,
   NYM_PRICES_API,
@@ -176,7 +176,7 @@ export const fetchOriginalStake = async (address: string): Promise<number> => {
 };
 
 export const fetchNoise = async (): Promise<IPacketsAndStakingData[]> => {
-  const response = await fetch(HARBOURMASTER_API_MIXNODES_STATS, {
+  const response = await fetch(NS_API_MIXNODES_STATS, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json; charset=utf-8",

explorer-nextjs/src/app/api/urls.ts

@@ -2,6 +2,8 @@ export const NYM_NODES =
   "https://explorer.nymtech.net/api/v1/tmp/unstable/nym-nodes";
 export const HARBOURMASTER_API_MIXNODES_STATS =
   "https://harbourmaster.nymtech.net/v2/mixnodes/stats";
+export const NS_API_MIXNODES_STATS =
+  "https://mainnet-node-status-api.nymtech.cc/v2/mixnodes/stats";
 export const CURRENT_EPOCH =
   "https://validator.nymtech.net/api/v1/epoch/current";
 export const CURRENT_EPOCH_REWARDS =

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

@@ -40,11 +40,44 @@ export const NoiseCard = () => {
   const todaysData = data[data.length - 1];
   const yesterdaysData = data[data.length - 2];
 
+  const filterData = (
+    data: IPacketsAndStakingData[],
+    cutoffDateStr = "2025-02-11",
+  ): IPacketsAndStakingData[] => {
+    const cutoffDate = new Date(cutoffDateStr);
+
+    return data.filter((entry) => new Date(entry.date_utc) >= cutoffDate);
+  };
+
+  console.log("filterData :>> ", filterData(data));
+
   const noiseLast24H =
     todaysData.total_packets_sent + todaysData.total_packets_received;
   const noisePrevious24H =
     yesterdaysData.total_packets_sent + yesterdaysData.total_packets_received;
 
+  const formatNoiseVolume = (packets: number): string => {
+    if (packets < 0) {
+      throw new Error("Packets cannot be negative");
+    }
+
+    const BYTES_PER_PACKET = 2048;
+    const totalBytes = packets * BYTES_PER_PACKET;
+    const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+
+    let size = totalBytes;
+    let unitIndex = 0;
+
+    // Convert to the most appropriate unit
+    for (; size >= 1024 && unitIndex < units.length - 1; unitIndex++) {
+      size /= 1024;
+    }
+
+    return `${size.toFixed(2)} ${units[unitIndex]}`;
+  };
+
+  const formatedNoiseVolume = formatNoiseVolume(noiseLast24H);
+
   const calculatePercentageChange = (last24H: number, previous24H: number) => {
     if (previous24H === 0) {
       return previous24H;
@@ -59,23 +92,28 @@ export const NoiseCard = () => {
 
   const noiseLast24HFormatted = formatBigNum(noiseLast24H)?.toString() || "";
 
-  const noiseLineGraphData = data.map((item: IPacketsAndStakingData) => {
-    return {
-      date_utc: item.date_utc,
-      numericData: item.total_packets_sent + item.total_packets_received,
-    };
-  });
+  const noiseLineGraphData = filterData(data).map(
+    (item: IPacketsAndStakingData) => {
+      return {
+        date_utc: item.date_utc,
+        numericData: item.total_packets_sent + item.total_packets_received,
+      };
+    },
+  );
 
   return (
     <ExplorerCard label="Noise generated last 24h" sx={{ height: "100%" }}>
-      <Stack>
+      <Box display={"flex"} gap={2} flexDirection={{ xs: "column", sm: "row" }}>
         <Typography
-          variant="h3"
+          variant="h4"
           sx={{ color: "pine.950", wordWrap: "break-word", maxWidth: "95%" }}
         >
           {noiseLast24HFormatted}
         </Typography>
-      </Stack>
+        <Typography variant="h4" sx={{ color: "#8482FD" }}>
+          ({formatedNoiseVolume})
+        </Typography>
+      </Box>
       <UpDownPriceIndicator
         percentage={Math.abs(percentage) || 0}
         numberWentUp={percentage > 0}

explorer-nextjs/src/components/nodeTable/NodeTable.tsx

@@ -206,7 +206,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         Header: <ColumnHeading>Qlt of Service</ColumnHeading>,
         Cell: ({ row }) => (
           <Typography variant="body4">
-            {row.original.qualityOfService}%
+            {row.original.qualityOfService.toFixed()}%
           </Typography>
         ),
       },

explorer-nextjs/src/components/nymNodePageComponents/NodeRewardsCard.tsx

@@ -61,10 +61,11 @@ export const NodeRewardsCard = ({ id }: INodeRewardsCardProps) => {
 
   // Extract reward details
   const rewardDetails: RewardingDetails = nodeInfo.rewarding_details;
+  console.log("rewardDetails :>> ", rewardDetails);
 
   // Calculated data
   const operatorRewards = Number(rewardDetails.operator) / 1_000_000;
-  const operatorRewardsFormated = `${operatorRewards} NYM`;
+  const operatorRewardsFormated = `${operatorRewards.toFixed(2)} NYM`;
 
   const profitMarginPercent =
     Number(rewardDetails.cost_params.profit_margin_percent) * 100;