diff --git a/client/src/app/lib/enums/index.ts b/client/src/app/lib/enums/index.ts new file mode 100644 index 000000000..48c1345db --- /dev/null +++ b/client/src/app/lib/enums/index.ts @@ -0,0 +1 @@ +export * from "./slot-status.enum"; diff --git a/client/src/app/lib/enums/slot-status.enum.ts b/client/src/app/lib/enums/slot-status.enum.ts new file mode 100644 index 000000000..4c0ad4592 --- /dev/null +++ b/client/src/app/lib/enums/slot-status.enum.ts @@ -0,0 +1,5 @@ +export enum SlotStatus { + Pending = "pending", + Confirmed = "confirmed", + Finalized = "finalized", +} diff --git a/client/src/app/routes/nova/SlotPage.tsx b/client/src/app/routes/nova/SlotPage.tsx index 56d538e1e..1c645322c 100644 --- a/client/src/app/routes/nova/SlotPage.tsx +++ b/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.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({

Slot

+ {parsedSlotIndex ? (