feat: add status to slot page (#1207)

* feat: add slot status to the slot page

* feat: add slot status correctly

---------

Co-authored-by: Branko Bosnic <[email protected]>

client/src/app/lib/constants/slot.constants.ts

@@ -0,0 +1,14 @@
+import { SlotCommitmentStatus } from "~/models/api/nova/ILatestSlotCommitmentsResponse";
+import { SlotStatus } from "../enums";
+import { PillStatus } from "../ui/enums";
+
+export const SLOT_COMMITMENT_STATUS_TO_SLOT_STATUS: Record<SlotCommitmentStatus, SlotStatus> = {
+    [SlotCommitmentStatus.Committed]: SlotStatus.Committed,
+    [SlotCommitmentStatus.Finalized]: SlotStatus.Finalized,
+};
+
+export const SLOT_STATUS_TO_PILL_STATUS: Record<SlotStatus, PillStatus> = {
+    [SlotStatus.Pending]: PillStatus.Pending,
+    [SlotStatus.Committed]: PillStatus.Success,
+    [SlotStatus.Finalized]: PillStatus.Success,
+};

client/src/app/lib/enums/index.ts

@@ -0,0 +1 @@
+export * from "./slot-status.enum";

client/src/app/lib/enums/slot-status.enum.ts

@@ -0,0 +1,5 @@
+export enum SlotStatus {
+    Pending = "pending",
+    Committed = "committed",
+    Finalized = "finalized",
+}

client/src/app/lib/utils/slot.utils.ts

@@ -0,0 +1,47 @@
+import { ISlotCommitmentWrapper, SlotCommitmentStatus } from "~/models/api/nova/ILatestSlotCommitmentsResponse";
+import { SlotStatus } from "../enums";
+import { SLOT_COMMITMENT_STATUS_TO_SLOT_STATUS } from "../constants/slot.constants";
+
+export function parseSlotIndexFromParams(slotIndex: string): number | undefined {
+    const slotIndexNum = parseInt(slotIndex, 10);
+    if (isNaN(slotIndexNum)) {
+        return;
+    }
+    return slotIndexNum;
+}
+
+export function getSlotStatusFromLatestSlotCommitments(
+    slotIndex: number | undefined,
+    latestSlotCommitments: ISlotCommitmentWrapper[],
+): SlotStatus {
+    let slotStatus: SlotStatus = SlotStatus.Pending;
+
+    if (slotIndex === undefined) {
+        return slotStatus;
+    }
+
+    const newestSlot = latestSlotCommitments[0];
+    const oldestSlot = latestSlotCommitments[latestSlotCommitments.length - 1];
+
+    if (!newestSlot || slotIndex > newestSlot.slotCommitment.slot) {
+        return slotStatus;
+    }
+
+    if (slotIndex < oldestSlot.slotCommitment.slot) {
+        // If searched slot is less than the oldest slot, infer status based on the oldest slot's status
+        return oldestSlot.status === SlotCommitmentStatus.Finalized ? SlotStatus.Finalized : SlotStatus.Committed;
+    }
+
+    for (const { slotCommitment, status } of latestSlotCommitments) {
+        if (slotCommitment.slot >= slotIndex) {
+            if (status === SlotCommitmentStatus.Finalized) {
+                slotStatus = SLOT_COMMITMENT_STATUS_TO_SLOT_STATUS[status];
+                break;
+            }
+        } else {
+            break;
+        }
+    }
+
+    return slotStatus;
+}

client/src/app/routes/nova/SlotPage.tsx

@@ -1,13 +1,17 @@
 import React from "react";
 import useSlotDetails from "~/helpers/nova/hooks/useSlotDetails";
+import useSlotsFeed from "~/helpers/nova/hooks/useSlotsFeed";
 import PageDataRow, { IPageDataRow } from "~/app/components/nova/PageDataRow";
 import Modal from "~/app/components/Modal";
 import mainHeaderMessage from "~assets/modals/nova/slot/main-header.json";
 import NotFound from "~/app/components/NotFound";
 import { RouteComponentProps } from "react-router-dom";
-import "./SlotPage.scss";
+import StatusPill from "~/app/components/nova/StatusPill";
+import { getSlotStatusFromLatestSlotCommitments, parseSlotIndexFromParams } from "~/app/lib/utils/slot.utils";
+import { SLOT_STATUS_TO_PILL_STATUS } from "~/app/lib/constants/slot.constants";
 import useSlotBlocks from "~/helpers/nova/hooks/useSlotBlocks";
 import SlotBlocksSection from "~/app/components/nova/slot/blocks/SlotBlocksSection";
+import "./SlotPage.scss";
 
 export default function SlotPage({
     match: {
@@ -17,9 +21,13 @@ export default function SlotPage({
     network: string;
     slotIndex: string;
 }>): React.JSX.Element {
-    const { slotCommitment } = useSlotDetails(network, slotIndex);
+    const { latestSlotCommitments = [] } = useSlotsFeed();
+    const { slotCommitment: slotCommitmentDetails } = useSlotDetails(network, slotIndex);
+
+    const parsedSlotIndex = parseSlotIndexFromParams(slotIndex);
+    const slotStatus = getSlotStatusFromLatestSlotCommitments(parsedSlotIndex, latestSlotCommitments);
+    const slotFromSlotCommitments = latestSlotCommitments.find((slot) => slot.slotCommitment.slot === parsedSlotIndex);
     const { blocks } = useSlotBlocks(network, slotIndex);
-    const parsedSlotIndex = parseSlotIndex(slotIndex);
 
     const dataRows: IPageDataRow[] = [
         {
@@ -28,18 +36,13 @@ export default function SlotPage({
         },
         {
             label: "RMC",
-            value: slotCommitment?.referenceManaCost?.toString() ?? "-",
+            value:
+                slotFromSlotCommitments?.slotCommitment?.referenceManaCost?.toString() ??
+                slotCommitmentDetails?.referenceManaCost?.toString() ??
+                "-",
         },
     ];
 
-    function parseSlotIndex(slotIndex: string): number | undefined {
-        const slotIndexNum = parseInt(slotIndex, 10);
-        if (isNaN(slotIndexNum)) {
-            return;
-        }
-        return slotIndexNum;
-    }
-
     return (
         <section className="slot-page">
             <div className="wrapper">
@@ -49,6 +52,7 @@ export default function SlotPage({
                             <h1>Slot</h1>
                             <Modal icon="info" data={mainHeaderMessage} />
                         </div>
+                        {parsedSlotIndex && <StatusPill label={slotStatus} status={SLOT_STATUS_TO_PILL_STATUS[slotStatus]} />}
                     </div>
                     {parsedSlotIndex ? (
                         <div className="section">