feat: add slot status to the slot page

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",
+    Confirmed = "confirmed",
+    Finalized = "finalized",
+}

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

@@ -1,11 +1,20 @@
 import React from "react";
-import useuseSlotDetails from "~/helpers/nova/hooks/useSlotDetails";
+import useSlotDetails from "~/helpers/nova/hooks/useSlotDetails";
 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 { PillStatus } from "~/app/lib/ui/enums";
+import StatusPill from "~/app/components/nova/StatusPill";
+import { SlotStatus } from "~/app/lib/enums";
+
+const SLOT_STATUS_TO_PILL_STATUS: Record<SlotStatus, PillStatus> = {
+    [SlotStatus.Pending]: PillStatus.Pending,
+    [SlotStatus.Confirmed]: PillStatus.Success,
+    [SlotStatus.Finalized]: PillStatus.Success,
+};
 
 export default function SlotPage({
     match: {
@@ -15,8 +24,7 @@ export default function SlotPage({
     network: string;
     slotIndex: string;
 }>): React.JSX.Element {
-    const { slotCommitment } = useuseSlotDetails(network, slotIndex);
-
+    const { slotCommitment } = useSlotDetails(network, slotIndex);
     const parsedSlotIndex = parseSlotIndex(slotIndex);
 
     const dataRows: IPageDataRow[] = [
@@ -30,6 +38,9 @@ export default function SlotPage({
         },
     ];
 
+    const slotStatus: SlotStatus = slotCommitment ? SlotStatus.Finalized : SlotStatus.Pending;
+    const slotStatusPill = SLOT_STATUS_TO_PILL_STATUS[slotStatus];
+
     function parseSlotIndex(slotIndex: string): number | undefined {
         const slotIndexNum = parseInt(slotIndex, 10);
         if (isNaN(slotIndexNum)) {
@@ -47,6 +58,7 @@ export default function SlotPage({
                             <h1>Slot</h1>
                             <Modal icon="info" data={mainHeaderMessage} />
                         </div>
+                        <StatusPill label={slotStatus} status={slotStatusPill} />
                     </div>
                     {parsedSlotIndex ? (
                         <div className="section">