Chore: Polish Slot Page

client/src/app/components/nova/PageDataRow.tsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import classNames from "classnames";
 import TruncatedId from "../stardust/TruncatedId";
+import { BaseTokenResponse } from "@iota/sdk-wasm-nova/web";
+import { formatAmount } from "~/helpers/stardust/valueFormatHelper";
 
 export interface IPageDataRow {
     label: string;
@@ -11,18 +13,29 @@ export interface IPageDataRow {
         link?: string;
         showCopyButton?: boolean;
     };
+    tokenInfo?: BaseTokenResponse;
 }
-const PageDataRow = ({ label, value, truncatedId, highlight }: IPageDataRow): React.JSX.Element => {
+const PageDataRow = ({ label, value, truncatedId, highlight, tokenInfo }: IPageDataRow): React.JSX.Element => {
+    const [isFormatBalance, setIsFormatBalance] = useState(true);
+
+    const renderValue = () => {
+        if (truncatedId) {
+            return <TruncatedId id={truncatedId.id} link={truncatedId.link} showCopyButton={truncatedId.showCopyButton} />;
+        } else if (tokenInfo && value) {
+            return (
+                <span onClick={() => setIsFormatBalance(!isFormatBalance)} className="pointer margin-r-5">
+                    {formatAmount(value ?? 0, tokenInfo, isFormatBalance)}
+                </span>
+            );
+        } else {
+            return value;
+        }
+    };
+
     return (
         <div className="section--data">
             <div className="label">{label}</div>
-            <div className={classNames("value code", { highlight })}>
-                {truncatedId ? (
-                    <TruncatedId id={truncatedId.id} link={truncatedId.link} showCopyButton={truncatedId.showCopyButton} />
-                ) : (
-                    value
-                )}
-            </div>
+            <div className={classNames("value code", { highlight })}>{renderValue()}</div>
         </div>
     );
 };

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

@@ -12,6 +12,10 @@ import { SLOT_STATUS_TO_PILL_STATUS } from "~/app/lib/constants/slot.constants";
 import SlotBlocksSection from "~/app/components/nova/slot/blocks/SlotBlocksSection";
 import { useSlotManaBurned } from "~/helpers/nova/hooks/useSlotManaBurned";
 import "./SlotPage.scss";
+import { useSlotStats } from "~/helpers/nova/hooks/useSlotStats";
+import { useNovaTimeConvert } from "~/helpers/nova/hooks/useNovaTimeConvert";
+import moment from "moment";
+import { useNetworkInfoNova } from "~/helpers/nova/networkInfo";
 
 export default function SlotPage({
     match: {
@@ -21,13 +25,18 @@ export default function SlotPage({
     network: string;
     slotIndex: string;
 }>): React.JSX.Element {
+    const { manaInfo } = useNetworkInfoNova((s) => s.networkInfo);
     const { latestSlotCommitments = [] } = useSlotsFeed();
+    const { slotIndexToUnixTimeRange } = useNovaTimeConvert();
     const { slotCommitment: slotCommitmentDetails, slotCommitmentId } = useSlotDetails(network, slotIndex);
     const { slotManaBurned } = useSlotManaBurned(slotIndex);
+    const [slotStats] = useSlotStats(slotIndex);
 
     const parsedSlotIndex = parseSlotIndexFromParams(slotIndex);
     const slotStatus = getSlotStatusFromLatestSlotCommitments(parsedSlotIndex, latestSlotCommitments);
     const slotFromSlotCommitments = latestSlotCommitments.find((slot) => slot.slotCommitment.slot === parsedSlotIndex);
+    const slotTimeRange = parsedSlotIndex && slotIndexToUnixTimeRange ? slotIndexToUnixTimeRange(parsedSlotIndex) : null;
+    const slotTimestamp = getSlotTimestamp(slotTimeRange);
 
     const dataRows: IPageDataRow[] = [
         {
@@ -38,14 +47,18 @@ export default function SlotPage({
             label: "Commitment Id",
             value: slotCommitmentId ?? "-",
         },
+        { label: "Timestamp", value: slotTimestamp ?? "-" },
         {
             label: "RMC",
             value:
                 slotFromSlotCommitments?.slotCommitment?.referenceManaCost?.toString() ??
                 slotCommitmentDetails?.referenceManaCost?.toString() ??
                 "-",
+            tokenInfo: manaInfo,
         },
-        { label: "Mana burned", value: slotManaBurned?.manaBurned ?? "-" },
+        { label: "Mana burned", value: slotManaBurned?.manaBurned ?? "-", tokenInfo: manaInfo },
+        { label: "Blocks", value: slotStats?.blockCount ?? "0" },
+        { label: "Transactions", value: slotStats?.perPayloadType?.transaction ?? "0" },
     ];
 
     return (
@@ -81,4 +94,15 @@ export default function SlotPage({
             </div>
         </section>
     );
+
+    function getSlotTimestamp(slotTimeRange: { from: number; to: number } | null): string {
+        if (!slotTimeRange) {
+            return "-";
+        }
+
+        const remainingTime = slotTimeRange.to - moment().unix();
+        const slotTimestamp = remainingTime <= 0 ? moment.unix(slotTimeRange.to).format("DD MMM YYYY HH:mm:ss") : remainingTime + "s";
+
+        return slotTimestamp;
+    }
 }

client/src/helpers/nova/hooks/useGenerateSlotsTable.ts

@@ -3,7 +3,7 @@ import type { ITableRow } from "~/app/components/Table";
 import { TableCellType, type TTableData } from "~/app/components/nova/TableCell";
 import { SlotStatus } from "~app/lib/enums";
 import { SlotTableHeadings } from "~/app/lib/ui/enums";
-import { Utils } from "@iota/sdk-wasm-nova/web";
+import { BaseTokenResponse, Utils } from "@iota/sdk-wasm-nova/web";
 import useSlotsFeed from "./useSlotsFeed";
 import { useNovaTimeConvert } from "./useNovaTimeConvert";
 import { useNetworkInfoNova } from "../networkInfo";
@@ -93,6 +93,7 @@ function getSlotCommitmentTableRow(
     slotIndex: number,
     commitmentWrapper: ISlotCommitmentWrapper | null,
     slotTimeRange: SlotTimeRange,
+    tokenInfo: BaseTokenResponse,
 ): ITableRow<TTableData> {
     const data: TTableData[] = [];
 
@@ -120,8 +121,10 @@ function getSlotCommitmentTableRow(
                 break;
             case SlotTableHeadings.ReferenceManaCost:
                 tableData = {
-                    type: TableCellType.Text,
+                    type: TableCellType.Formatted,
                     data: referenceManaCost,
+                    tokenInfo,
+                    isFormatted: true,
                 };
                 break;
             case SlotTableHeadings.Blocks:
@@ -170,7 +173,7 @@ function getSlotCommitmentTableRow(
 }
 
 export function useGenerateSlotsTable(): ITableRow<TTableData>[] {
-    const { name: network } = useNetworkInfoNova((s) => s.networkInfo);
+    const { name: network, manaInfo } = useNetworkInfoNova((s) => s.networkInfo);
     const { slotIndexToUnixTimeRange } = useNovaTimeConvert();
     const { currentSlotIndex, currentSlotTimeRange, latestSlotCommitments, latestSlotIndexes } = useSlotsFeed();
 
@@ -185,7 +188,7 @@ export function useGenerateSlotsTable(): ITableRow<TTableData>[] {
         latestSlotIndexes?.map((slotIndex) => {
             const commitmentWrapper = latestSlotCommitments?.find((commitment) => commitment.slotCommitment.slot === slotIndex) ?? null;
             const slotTimeRange = slotIndexToUnixTimeRange?.(slotIndex) ?? null;
-            const row = getSlotCommitmentTableRow(network, slotIndex, commitmentWrapper, slotTimeRange);
+            const row = getSlotCommitmentTableRow(network, slotIndex, commitmentWrapper, slotTimeRange, manaInfo);
             rows.push(row);
         });
     }