Use a shared components for ProtocolParameters in explorer

Author: Alenar

mithril-explorer/components/CertificateModal/index.js

@@ -3,6 +3,7 @@ import {Badge, Button, Col, Container, ListGroup, Modal, Row, Table} from "react
 import {useSelector} from "react-redux";
 import RawJsonButton from "../RawJsonButton";
 import VerifiedBadge from '../VerifiedBadge';
+import ProtocolParameters from "../ProtocolParameters";
 
 export default function CertificateModal(props) {
   const [certificate, setCertificate] = useState({});
@@ -57,11 +58,7 @@ export default function CertificateModal(props) {
                   <ListGroup.Item>Immutable File Number: {certificate.beacon.immutable_file_number}</ListGroup.Item>
                 </ListGroup>
                 <h4>Protocol Parameters</h4>
-                <ListGroup horizontal>
-                  <ListGroup.Item>K: {certificate.metadata.parameters.k}</ListGroup.Item>
-                  <ListGroup.Item>M: {certificate.metadata.parameters.m}</ListGroup.Item>
-                  <ListGroup.Item>Phi: {certificate.metadata.parameters.phi_f}</ListGroup.Item>
-                </ListGroup>
+                <ProtocolParameters protocolParameters={certificate.metadata.parameters}/>
               </Col>
               <Col xl={8}>
                 <h4>Signers</h4>

mithril-explorer/components/EpochSettings/index.js

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {Card, ListGroup} from "react-bootstrap";
 import RawJsonButton from "../RawJsonButton";
 import {useSelector} from "react-redux";
+import ProtocolParameters from "../ProtocolParameters";
 
 export default function EpochSettings(props) {
   const [epochSettings, setEpochSettings] = useState({});
@@ -45,11 +46,7 @@ export default function EpochSettings(props) {
             <ListGroup.Item>{epochSettings.epoch}</ListGroup.Item>
           </ListGroup>
           <Card.Title>Protocol Parameters</Card.Title>
-          <ListGroup horizontal>
-            <ListGroup.Item>K: {epochSettings.protocol?.k}</ListGroup.Item>
-            <ListGroup.Item>M: {epochSettings.protocol?.m}</ListGroup.Item>
-            <ListGroup.Item>Phi: {epochSettings.protocol?.phi_f}</ListGroup.Item>
-          </ListGroup>
+          <ProtocolParameters protocolParameters={epochSettings.protocol}/>
         </Card.Body>
       </Card>
     </div>

mithril-explorer/components/PendingCertificate/index.js

@@ -3,6 +3,7 @@ import {Card, CardGroup, ListGroup} from "react-bootstrap";
 import RawJsonButton from "../RawJsonButton";
 import VerifiedBadge from '../VerifiedBadge';
 import {useSelector} from "react-redux";
+import ProtocolParameters from "../ProtocolParameters";
 
 export default function PendingCertificate(props) {
   const [pendingCertificate, setPendingCertificate] = useState({});
@@ -58,11 +59,7 @@ export default function PendingCertificate(props) {
                   Number: {pendingCertificate.beacon.immutable_file_number}</ListGroup.Item>
               </ListGroup>
               <Card.Title>Protocol Parameters</Card.Title>
-              <ListGroup horizontal>
-                <ListGroup.Item>K: {pendingCertificate.protocol.k}</ListGroup.Item>
-                <ListGroup.Item>M: {pendingCertificate.protocol.m}</ListGroup.Item>
-                <ListGroup.Item>Phi: {pendingCertificate.protocol.phi_f}</ListGroup.Item>
-              </ListGroup>
+              <ProtocolParameters protocolParameters={pendingCertificate.protocol}/>
             </Card.Body>
           </Card>
           <Card>

mithril-explorer/components/ProtocolParameters.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {ListGroup} from "react-bootstrap";
+
+export default function ProtocolParameters({protocolParameters}) {
+  return (
+    <ListGroup horizontal>
+      <ListGroup.Item>k: {protocolParameters?.k}</ListGroup.Item>
+      <ListGroup.Item>m: {protocolParameters?.m}</ListGroup.Item>
+      <ListGroup.Item>f: {protocolParameters?.phi_f}</ListGroup.Item>
+    </ListGroup>
+  );
+}