fix: MET-1630 display absolute slot

cardano-foundation · Oct 4, 2023 · bc5a7e2 · bc5a7e2
1 parent 89bf4df
commit bc5a7e2
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 38 deletions.
diff --git a/src/components/TransactionDetail/TransactionMetadata/TransactionMetadata.test.tsx b/src/components/TransactionDetail/TransactionMetadata/TransactionMetadata.test.tsx
@@ -13,7 +13,8 @@ const mockTransaction = {
     confirmation: 10,
     fee: 100,
     totalOutput: 1000,
-    maxEpochSlot: 1000
+    maxEpochSlot: 1000,
+    slotNo: 1000
   },
   summary: {
     stakeAddress: [

diff --git a/src/components/TransactionDetail/TransactionOverview/TransactionOverview.test.tsx b/src/components/TransactionDetail/TransactionOverview/TransactionOverview.test.tsx
@@ -17,7 +17,8 @@ const mockTransaction = {
     confirmation: 10,
     fee: 100,
     totalOutput: 1000,
-    maxEpochSlot: 1000
+    maxEpochSlot: 1000,
+    slotNo: 1000
   },
   summary: {
     stakeAddress: [

diff --git a/src/components/TransactionDetail/TransactionOverview/index.tsx b/src/components/TransactionDetail/TransactionOverview/index.tsx
@@ -25,7 +25,7 @@ import DropdownDetail from "src/components/commons/DropdownDetail";
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import ADAicon from "src/components/commons/ADAIcon";
 
-import { MaxSlot, StyledLink, TitleCard } from "./styles";
+import { StyledLink, TitleCard } from "./styles";
 
 interface Props {
   data: Transaction | null;
@@ -231,15 +231,11 @@ const TransactionOverview: React.FC<Props> = ({ data, loading }) => {
       title: (
         <Box display={"flex"} alignItems="center">
           <TitleCard height={24} mr={1}>
-            {t("common.slot")}
+            {`${t("common.slot")} - ${t("glossary.absoluteSlot")}`}
           </TitleCard>
         </Box>
       ),
-      value: (
-        <>
-          {data?.tx?.epochSlot || 0}/<MaxSlot>{MAX_SLOT_EPOCH}</MaxSlot>
-        </>
-      )
+      value: `${data?.tx?.epochSlot} - ${data?.tx?.slotNo || 0}`
     }
   ];
   return (

diff --git a/src/components/TransactionLists/index.tsx b/src/components/TransactionLists/index.tsx
@@ -79,24 +79,31 @@ const TransactionList: React.FC<TransactionListProps> = ({
       render: (r) => {
         const { blockName, tooltip } = formatNameBlockNo(r.blockNo, r.epochNo) || getShortHash(r.blockHash);
         return (
-          <Box>
-            <Box>
-              <StyledLink to={details.block(r.blockNo || r.blockHash)}>
-                <CustomTooltip title={tooltip}>
-                  <span>{blockName}</span>
-                </CustomTooltip>
-              </StyledLink>
-            </Box>
-            <Box mt={1}>
-              <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>/
-              <Box color={({ palette }) => palette.secondary.light} component={"span"}>
-                {r.epochSlotNo}
-              </Box>
-            </Box>
-          </Box>
+          <StyledLink to={details.block(r.blockNo || r.blockHash)}>
+            <CustomTooltip title={tooltip}>
+              <span>{blockName}</span>
+            </CustomTooltip>
+          </StyledLink>
         );
       }
     },
+    {
+      title: t("glossary.epoch"),
+      key: "epochNo",
+      minWidth: 60,
+      render: (r) => <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>
+    },
+    {
+      title: t("glossary.slot"),
+      key: "epochSlotNo",
+      minWidth: 60,
+      render: (r) => r.epochSlotNo
+    },
+    {
+      title: t("glossary.absoluteSlot"),
+      key: "slot",
+      minWidth: 60
+    },
     {
       title: t("common.fees"),
       key: "fee",

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -104,6 +104,7 @@
   "page.dashboard": "Dashboard",
   "glossary.blockchain": "Blockchain",
   "glossary.epochs": "Epochs",
+  "glossary.absoluteSlot": "Absolute Slot",
   "glossary.blocks": "Blocks",
   "glossary.transactions": "Transactions",
   "glossary.nativeTokens": "Native Tokens",

diff --git a/src/pages/BlockList/index.tsx b/src/pages/BlockList/index.tsx
@@ -2,7 +2,6 @@ import { useSelector } from "react-redux";
 import { useEffect, useState, useRef } from "react";
 import { stringify } from "qs";
 import { useHistory, useLocation } from "react-router-dom";
-import { Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
 import { Column } from "src/types/table";
@@ -65,25 +64,28 @@ const BlockList = () => {
     {
       title: <Capitalize>{t("glossary.blockID")}</Capitalize>,
       key: "blockId",
-      minWidth: "150px",
+      minWidth: "50px",
       render: (r) => (
         <CustomTooltip title={r.hash}>
           <StyledLink to={details.block(r.blockNo || r.hash)}>{getShortHash(`${r.hash}`)}</StyledLink>
         </CustomTooltip>
       )
     },
     {
-      title: <Capitalize>{t("glossary.EpochSlot")}</Capitalize>,
-      key: "epoch",
-      minWidth: "150px",
-      render: (r) => (
-        <>
-          <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>/
-          <Box component={"span"} color={({ palette }) => palette.secondary.light}>
-            {r.epochSlotNo}
-          </Box>
-        </>
-      )
+      title: <Capitalize>{t("glossary.epoch")}</Capitalize>,
+      key: "epochNo",
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>
+    },
+    {
+      title: <Capitalize>{t("glossary.slot")}</Capitalize>,
+      key: "epochSlotNo",
+      minWidth: "100px"
+    },
+    {
+      title: <Capitalize>{t("glossary.absoluteSlot")}</Capitalize>,
+      key: "slotNo",
+      minWidth: "100px"
     },
     {
       title: <Capitalize>{t("createdAt")}</Capitalize>,

diff --git a/src/pages/TransactionDetail/TransactionDetail.test.tsx b/src/pages/TransactionDetail/TransactionDetail.test.tsx
@@ -18,7 +18,8 @@ const transaction = {
     confirmation: 10,
     fee: 100,
     totalOutput: 1000,
-    maxEpochSlot: 1000
+    maxEpochSlot: 1000,
+    slotNo: 1000
   },
   summary: {
     stakeAddress: [

diff --git a/src/types/transactions.d.ts b/src/types/transactions.d.ts
@@ -163,6 +163,7 @@ interface Transaction {
     fee: number;
     totalOutput: number;
     maxEpochSlot: number;
+    slotNo: number;
   };
   summary: {
     stakeAddress: {