Merge pull request #3401 from cardano-foundation/fix/add-block-producer

Fix/add block producer

src/commons/resources/index.ts

@@ -195,6 +195,8 @@ import OutputIcon from "./icons/outputIcon.svg?react";
 import CubeIconComponent from "./icons/blockIcon.svg?react";
 import TxConfirm from "./icons/txConfirm.svg?react";
 import SlotIcon from "./icons/slot.svg?react";
+import KingIcon from "./icons/king-icon.svg?react";
+import TooltipIcon from "./icons/tooltip-icon.svg?react";
 import TxInputIcon from "./icons/txInput.svg?react";
 import TxOutputIcon from "./icons/txOutput.svg?react";
 import VerifiedIcon from "./icons/verified.svg?react";
@@ -376,6 +378,8 @@ export {
   PolygonDarkIcon,
   PolygonDarkRedIcon,
   CubeIconComponent,
+  KingIcon,
+  TooltipIcon,
   SlotIcon,
   TimeIconComponent,
   TimelineIconComponent,

src/components/BlockDetail/BlockOverview/index.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 
 import {
   TimeIconComponent,
@@ -9,14 +10,18 @@ import {
   ExchageAltIcon,
   OutputIcon,
   CubeIconComponent,
-  SlotIcon
+  SlotIcon,
+  KingIcon,
+  TooltipIcon
 } from "src/commons/resources";
 import { formatADAFull, formatDateTimeLocal, formatNameBlockNo } from "src/commons/utils/helper";
 import { MAX_SLOT_EPOCH } from "src/commons/utils/constants";
 import ADAicon from "src/components/commons/ADAIcon";
 import DetailHeader from "src/components/commons/DetailHeader";
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip";
+import DynamicEllipsisText from "src/components/DynamicEllipsisText";
+import { details } from "src/commons/routers";
 
 import { TitleCard, WrapConfirmation } from "./styles";
 
@@ -29,7 +34,7 @@ interface BlockOverviewProps {
 const BlockOverview: React.FC<BlockOverviewProps> = ({ data, loading, lastUpdated }) => {
   const { t } = useTranslation();
   const { currentEpoch } = useSelector(({ system }: RootState) => system);
-
+  // eslint-disable-next-line no-console
   const listOverview = [
     {
       icon: TimeIconComponent,
@@ -112,6 +117,35 @@ const BlockOverview: React.FC<BlockOverviewProps> = ({ data, loading, lastUpdate
         </Box>
       ),
       value: `${data?.epochSlotNo || ""} - ${data?.slotNo || ""}`
+    },
+    {
+      icon: KingIcon,
+      title: (
+        <Box display={"flex"} alignItems={"center"}>
+          <Box display={"flex"} alignItems="center">
+            <TitleCard mr={1}>{t("glossary.blockproducer")} </TitleCard>
+          </Box>
+          <CustomTooltip title="Block minted by">
+            <span>
+              <TooltipIcon />
+            </span>
+          </CustomTooltip>
+        </Box>
+      ),
+      value: (
+        <Box
+          component={data?.poolView ? Link : Box}
+          color={({ palette }) => `${palette.primary.main}!important`}
+          to={details.delegation(data?.poolView)}
+        >
+          {data?.poolName ? (
+            data.poolName
+          ) : (
+            <DynamicEllipsisText value={data?.poolView || ""} isTooltip={!!data?.poolView} />
+          )}{" "}
+          {data?.poolTicker && `- ${data.poolTicker}`}
+        </Box>
+      )
     }
   ];
   return (

src/locales/en/translation.json

@@ -206,6 +206,7 @@
   "glossary.comfirmations": "Confirmations",
   "glossary.comfirmation": "Confirmation",
   "glossary.transactionfees": "Transaction Fees",
+  "glossary.blockproducer": "Block Producer",
   "glossary.totalOutputInAda": "Total output in ADA",
   "head.page.blockDetails": "Block details",
   "glossary.outputInAda": "Output in ADA",

src/pages/BlockDetail/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { Box, CircularProgress } from "@mui/material";
 import { useLocation, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
 
@@ -26,10 +27,16 @@ const BlockDetail = () => {
     document.title = `Block ${blockId} | Cardano Blockchain Explorer`;
   }, [blockId]);
 
+  if (loading) {
+    return (
+      <Box>
+        <CircularProgress />
+      </Box>
+    );
+  }
   if (!initialized) {
     return null;
   }
-
   if ((initialized && !data) || error) return <NoRecord />;
 
   return (

src/types/block.d.ts

@@ -10,6 +10,9 @@ interface Block {
   totalOutput: number;
   txCount: number;
   maxEpochSlot: number;
+  poolName: string;
+  poolTicker: string;
+  poolView: string;
 }
 
 type BlockDetail = Block & {