Merge pull request #2061 from input-output-hk/djo/2025/remove_pending_cert_from_explorer

Remove pending certificate from explorer

Author: Alenar

mithril-explorer/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-explorer",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "private": true,
   "scripts": {
     "dev": "next dev",

mithril-explorer/package.json

@@ -17,7 +17,6 @@ import {
 } from "chart.js";
 import initMithrilClient from "@mithril-dev/mithril-client-wasm";
 import EpochSettings from "#/EpochSettings";
-import PendingCertificate from "#/PendingCertificate";
 import CardanoDbSnapshotsList from "#/Artifacts/CardanoDbSnapshotsList";
 import CardanoStakeDistributionsList from "#/Artifacts/CardanoStakeDistributionsList";
 import CardanoTransactionsSnapshotsList from "#/Artifacts/CardanoTransactionsSnapshotsList";
@@ -116,14 +115,9 @@ export default function Explorer() {
           <IntervalSetter />
         </Row>
       </Form>
-      <Row className="row-gap-3">
-        <Col xs={12} sm={4} lg={3} xl={2}>
-          <EpochSettings />
-        </Col>
-        <Col xs={12} sm={8} lg={9} xl={10}>
-          <PendingCertificate />
-        </Col>
-      </Row>
+      <Stack direction="horizontal">
+        <EpochSettings />
+      </Stack>
       <Tabs activeKey={currentTab} onSelect={(key) => setCurrentTab(key)}>
         <Tab title="Cardano Db" eventKey={signedEntityType.CardanoImmutableFilesFull}>
           <CardanoDbSnapshotsList />

mithril-explorer/src/app/page.js

@@ -18,10 +18,6 @@ export default function CardanoDbSnapshotsList(props) {
   const updateInterval = useSelector((state) => state.settings.updateInterval);
 
   useEffect(() => {
-    if (!autoUpdate) {
-      return;
-    }
-
     let fetchSnapshots = () => {
       fetch(artifactsEndpoint)
         .then((response) => response.json())
@@ -35,8 +31,10 @@ export default function CardanoDbSnapshotsList(props) {
     // Fetch them once without waiting
     fetchSnapshots();
 
-    const interval = setInterval(fetchSnapshots, updateInterval);
-    return () => clearInterval(interval);
+    if (autoUpdate) {
+      const interval = setInterval(fetchSnapshots, updateInterval);
+      return () => clearInterval(interval);
+    }
   }, [artifactsEndpoint, updateInterval, autoUpdate]);
 
   function handleCertificateHashChange(hash) {

mithril-explorer/src/components/Artifacts/CardanoDbSnapshotsList/index.js

@@ -17,10 +17,6 @@ export default function CardanoStakeDistributionsList(props) {
   const updateInterval = useSelector((state) => state.settings.updateInterval);
 
   useEffect(() => {
-    if (!autoUpdate) {
-      return;
-    }
-
     let fetchCardanoStakeDistribution = () => {
       fetch(artifactsEndpoint)
         .then((response) => response.json())
@@ -34,8 +30,10 @@ export default function CardanoStakeDistributionsList(props) {
     // Fetch them once without waiting
     fetchCardanoStakeDistribution();
 
-    const interval = setInterval(fetchCardanoStakeDistribution, updateInterval);
-    return () => clearInterval(interval);
+    if (autoUpdate) {
+      const interval = setInterval(fetchCardanoStakeDistribution, updateInterval);
+      return () => clearInterval(interval);
+    }
   }, [artifactsEndpoint, updateInterval, autoUpdate]);
 
   function handleCertificateHashChange(hash) {

mithril-explorer/src/components/Artifacts/CardanoStakeDistributionsList/index.js

@@ -25,10 +25,6 @@ export default function CardanoTransactionsSnapshotsList(props) {
   );
 
   useEffect(() => {
-    if (!autoUpdate) {
-      return;
-    }
-
     let fetchSnapshots = () => {
       fetch(artifactsEndpoint)
         .then((response) => response.json())
@@ -42,8 +38,10 @@ export default function CardanoTransactionsSnapshotsList(props) {
     // Fetch them once without waiting
     fetchSnapshots();
 
-    const interval = setInterval(fetchSnapshots, updateInterval);
-    return () => clearInterval(interval);
+    if (autoUpdate) {
+      const interval = setInterval(fetchSnapshots, updateInterval);
+      return () => clearInterval(interval);
+    }
   }, [artifactsEndpoint, updateInterval, autoUpdate]);
 
   function handleCertificateHashChange(hash) {

mithril-explorer/src/components/Artifacts/CardanoTransactionsSnapshotsList/index.js

@@ -16,10 +16,6 @@ export default function CertificatesList(props) {
   const updateInterval = useSelector((state) => state.settings.updateInterval);
 
   useEffect(() => {
-    if (!autoUpdate) {
-      return;
-    }
-
     let fetchCertificates = () => {
       fetch(certificatesEndpoint)
         .then((response) => response.json())
@@ -33,8 +29,10 @@ export default function CertificatesList(props) {
     // Fetch them once without waiting
     fetchCertificates();
 
-    const interval = setInterval(fetchCertificates, updateInterval);
-    return () => clearInterval(interval);
+    if (autoUpdate) {
+      const interval = setInterval(fetchCertificates, updateInterval);
+      return () => clearInterval(interval);
+    }
   }, [certificatesEndpoint, updateInterval, autoUpdate]);
 
   function handleCertificateHashChange(hash) {

mithril-explorer/src/components/Artifacts/CertificatesList/index.js

@@ -17,10 +17,6 @@ export default function MithrilStakeDistributionsList(props) {
   const updateInterval = useSelector((state) => state.settings.updateInterval);
 
   useEffect(() => {
-    if (!autoUpdate) {
-      return;
-    }
-
     let fetchMithrilStakeDistribution = () => {
       fetch(artifactsEndpoint)
         .then((response) => response.json())
@@ -34,8 +30,10 @@ export default function MithrilStakeDistributionsList(props) {
     // Fetch them once without waiting
     fetchMithrilStakeDistribution();
 
-    const interval = setInterval(fetchMithrilStakeDistribution, updateInterval);
-    return () => clearInterval(interval);
+    if (autoUpdate) {
+      const interval = setInterval(fetchMithrilStakeDistribution, updateInterval);
+      return () => clearInterval(interval);
+    }
   }, [artifactsEndpoint, updateInterval, autoUpdate]);
 
   function handleCertificateHashChange(hash) {

mithril-explorer/src/components/Artifacts/MithrilStakeDistributionsList/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Card, ButtonGroup, DropdownButton } from "react-bootstrap";
+import { Card, Row, Col, Stack, Container } from "react-bootstrap";
 import { useSelector } from "react-redux";
 import LinkButton from "#/LinkButton";
 import RawJsonButton from "#/RawJsonButton";
@@ -19,10 +19,6 @@ export default function EpochSettings() {
   const [inOutRegistrationsPageUrl, setInOutRegistrationsPageUrl] = useState(undefined);
 
   useEffect(() => {
-    if (!autoUpdate) {
-      return;
-    }
-
     let fetchEpochSettings = () => {
       fetch(epochSettingsEndpoint)
         .then((response) => (response.status === 200 ? response.json() : {}))
@@ -36,8 +32,10 @@ export default function EpochSettings() {
     // Fetch it once without waiting
     fetchEpochSettings();
 
-    const interval = setInterval(fetchEpochSettings, updateInterval);
-    return () => clearInterval(interval);
+    if (autoUpdate) {
+      const interval = setInterval(fetchEpochSettings, updateInterval);
+      return () => clearInterval(interval);
+    }
   }, [epochSettingsEndpoint, updateInterval, autoUpdate]);
 
   useEffect(() => {
@@ -66,25 +64,40 @@ export default function EpochSettings() {
 
       <Card>
         <Card.Body>
-          <Card.Title>Current Epoch</Card.Title>
-          <div className="mb-2 ps-3">{epochSettings.epoch}</div>
-          <Card.Title>Protocol Parameters</Card.Title>
-          <ProtocolParameters className="mb-2" protocolParameters={epochSettings.protocol} />
-          <Card.Title>Next Protocol Parameters</Card.Title>
-          <ProtocolParameters protocolParameters={epochSettings.next_protocol} />
+          <Container>
+            <Row>
+              <Col xs={12} md="auto">
+                <h5>Current Epoch</h5>
+                <div className="mb-2 ps-3">{epochSettings.epoch}</div>
+              </Col>
+              <Col xs={12} md="auto">
+                <h5>Registration Protocol Parameters</h5>
+                <ProtocolParameters
+                  protocolParameters={
+                    epochSettings.signer_registration_protocol ?? epochSettings.next_protocol
+                  }
+                />
+              </Col>
+            </Row>
+          </Container>
         </Card.Body>
-        {registrationPageUrl && inOutRegistrationsPageUrl && (
-          <Card.Footer className="text-center">
-            <ButtonGroup>
-              <LinkButton href={registrationPageUrl}>Registered Signers</LinkButton>
-              <DropdownButton as={ButtonGroup}>
-                <LinkButton href={inOutRegistrationsPageUrl} variant="light">
-                  In/Out Registrations
-                </LinkButton>
-              </DropdownButton>
-            </ButtonGroup>
-          </Card.Footer>
-        )}
+        <Card.Footer>
+          <Stack
+            direction="horizontal"
+            gap={1}
+            className="justify-content-md-end align-items-stretch justify-content-sm-center">
+            <LinkButton
+              href={registrationPageUrl ?? "#"}
+              disabled={registrationPageUrl === undefined}>
+              <i className="bi bi-pen"></i> Registered Signers
+            </LinkButton>
+            <LinkButton
+              href={inOutRegistrationsPageUrl ?? "#"}
+              disabled={inOutRegistrationsPageUrl === undefined}>
+              <i className="bi bi-arrow-left-right translate-middle-y"></i> In/Out Registrations
+            </LinkButton>
+          </Stack>
+        </Card.Footer>
       </Card>
     </div>
   );