Add sign entity type to PendingCert in explorer

Author: Alenar

mithril-explorer/components/PendingCertificate/index.js

@@ -1,9 +1,9 @@
 import React, {useEffect, useState} from 'react';
 import {Card, CardGroup, ListGroup} from "react-bootstrap";
+import {useSelector} from "react-redux";
 import RawJsonButton from "../RawJsonButton";
+import SignedEntityType from "../SignedEntityType";
 import VerifiedBadge from '../VerifiedBadge';
-import {useSelector} from "react-redux";
-import ProtocolParameters from "../ProtocolParameters";
 
 export default function PendingCertificate(props) {
   const [pendingCertificate, setPendingCertificate] = useState({});
@@ -55,11 +55,9 @@ export default function PendingCertificate(props) {
               <ListGroup className="margin-bottom--md" variant="flush">
                 <ListGroup.Item>Network: {pendingCertificate.beacon.network}</ListGroup.Item>
                 <ListGroup.Item>Epoch: {pendingCertificate.beacon.epoch}</ListGroup.Item>
-                <ListGroup.Item>Immutable File
-                  Number: {pendingCertificate.beacon.immutable_file_number}</ListGroup.Item>
               </ListGroup>
-              <Card.Title>Protocol Parameters</Card.Title>
-              <ProtocolParameters protocolParameters={pendingCertificate.protocol}/>
+              <Card.Title>Entity Type</Card.Title>
+              <SignedEntityType signedEntityType={pendingCertificate.entity_type}/>
             </Card.Body>
           </Card>
           <Card>

mithril-explorer/components/SignedEntityType.js

@@ -0,0 +1,35 @@
+import React, {useEffect, useState} from 'react';
+import {ListGroup} from "react-bootstrap";
+
+export default function SignedEntityType({signedEntityType}) {
+  const [entityName, setEntityName] = useState("");
+  const [beacon, setBeacon] = useState({});
+  
+  useEffect(() => {
+    let type_name = Object.keys(signedEntityType).at(0);
+    setEntityName(type_name);
+
+    if (type_name === "MithrilStakeDistribution" || type_name === "CardanoStakeDistribution") {
+      setBeacon({
+        epoch: signedEntityType[type_name]
+      })
+    } else {
+      setBeacon(signedEntityType[type_name] ?? {});
+    }
+  }, [signedEntityType]);
+  
+  return (
+    <ListGroup>
+      <ListGroup.Item>
+        <h6>{entityName}</h6>
+      </ListGroup.Item>
+      <ListGroup.Item>
+        <ListGroup horizontal="xxl">
+          {Object.entries(beacon).map(([key, value]) =>
+            <ListGroup.Item key={key}>{key}: {value}</ListGroup.Item>
+          )}
+        </ListGroup>
+      </ListGroup.Item>
+    </ListGroup>
+  );
+}