Add new tab Cardano Stake Distribution in the explorer

CHANGELOG.md

@@ -18,6 +18,7 @@ As a minor extension, we have adopted a slightly different versioning convention
   - Added support in the `mithril-client` library for retrieving `CardanoStakeDistribution` by epoch or by hash, and for listing all available `CardanoStakeDistribution`.
   - Implement `CardanoStakeDistribution` commands under the `--unstable` flag in the Mithril client CLI to list all available `CardanoStakeDistribution` and to download artifact by epoch or hash.
   - Implement `mithril-client` library functions related to `CardanoStakeDistribution` within the WASM library.
+  - Add new tab Cardano Stake Distribution in the explorer.
 
 - Crates versions:
 

mithril-explorer/package.json

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

mithril-explorer/src/app/page.js

@@ -19,6 +19,7 @@ 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";
 import CertificatesList from "#/Artifacts/CertificatesList";
 import MithrilStakeDistributionsList from "#/Artifacts/MithrilStakeDistributionsList";
@@ -50,6 +51,7 @@ export default function Explorer() {
   // Used to avoid infinite loop between the update of the url query and the navigation handling.
   const [isUpdatingAggregatorInUrl, setIsUpdatingAggregatorInUrl] = useState(false);
   const [enableCardanoTransactionTab, setEnableCardanoTransactionTab] = useState(false);
+  const [enableCardanoStakeDistributionTab, setEnableCardanoStakeDistributionTab] = useState(false);
   const [currentTab, setCurrentTab] = useState(defaultTab);
   const selectedAggregator = useSelector(currentlySelectedAggregator);
   const selectedAggregatorSignedEntities = useSelector((state) =>
@@ -60,6 +62,9 @@ export default function Explorer() {
     setEnableCardanoTransactionTab(
       selectedAggregatorSignedEntities.includes(signedEntityType.CardanoTransactions),
     );
+    setEnableCardanoStakeDistributionTab(
+      selectedAggregatorSignedEntities.includes(signedEntityType.CardanoStakeDistribution),
+    );
   }, [selectedAggregatorSignedEntities]);
 
   useEffect(() => {
@@ -128,6 +133,13 @@ export default function Explorer() {
             <CardanoTransactionsSnapshotsList />
           </Tab>
         )}
+        {enableCardanoStakeDistributionTab && (
+          <Tab
+            title="Cardano Stake Distribution"
+            eventKey={signedEntityType.CardanoStakeDistribution}>
+            <CardanoStakeDistributionsList />
+          </Tab>
+        )}
         <Tab
           title="Mithril Stake Distribution"
           eventKey={signedEntityType.MithrilStakeDistribution}>

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

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { Badge, Button, Card, Col, Container, ListGroup, Row, Stack } from "react-bootstrap";
+import CertificateModal from "#/CertificateModal";
+import RawJsonButton from "#/RawJsonButton";
+import LocalDateTime from "#/LocalDateTime";
+import { selectedAggregator } from "@/store/settingsSlice";
+
+export default function CardanoStakeDistributionsList(props) {
+  const [cardanoStakeDistributions, setCardanoStakeDistributions] = useState([]);
+  const [selectedCertificateHash, setSelectedCertificateHash] = useState(undefined);
+  const aggregator = useSelector(selectedAggregator);
+  const artifactsEndpoint = useSelector(
+    (state) => `${selectedAggregator(state)}/artifact/cardano-stake-distributions`,
+  );
+  const autoUpdate = useSelector((state) => state.settings.autoUpdate);
+  const updateInterval = useSelector((state) => state.settings.updateInterval);
+
+  useEffect(() => {
+    if (!autoUpdate) {
+      return;
+    }
+
+    let fetchCardanoStakeDistribution = () => {
+      fetch(artifactsEndpoint)
+        .then((response) => response.json())
+        .then((data) => setCardanoStakeDistributions(data))
+        .catch((error) => {
+          setCardanoStakeDistributions([]);
+          console.error("Fetch cardanoStakeDistributions error:", error);
+        });
+    };
+
+    // Fetch them once without waiting
+    fetchCardanoStakeDistribution();
+
+    const interval = setInterval(fetchCardanoStakeDistribution, updateInterval);
+    return () => clearInterval(interval);
+  }, [artifactsEndpoint, updateInterval, autoUpdate]);
+
+  function handleCertificateHashChange(hash) {
+    setSelectedCertificateHash(hash);
+  }
+
+  function showCertificate(hash) {
+    setSelectedCertificateHash(hash);
+  }
+
+  return (
+    <>
+      <CertificateModal
+        aggregator={aggregator}
+        hash={selectedCertificateHash}
+        onHashChange={handleCertificateHashChange}
+      />
+
+      <div className={props.className}>
+        <h2>
+          Cardano Stake Distribution{" "}
+          <RawJsonButton href={artifactsEndpoint} variant="outline-light" size="sm" />
+        </h2>
+        {Object.entries(cardanoStakeDistributions).length === 0 ? (
+          <p>No cardano stake distribution available</p>
+        ) : (
+          <Container fluid>
+            <Row xs={1} md={2} lg={3} xl={4}>
+              {cardanoStakeDistributions.map((cardanoStakeDistribution, index) => (
+                <Col key={cardanoStakeDistribution.hash} className="mb-2">
+                  <Card border={index === 0 ? "primary" : ""}>
+                    <Card.Body>
+                      <Card.Title>{cardanoStakeDistribution.hash}</Card.Title>
+                      <ListGroup variant="flush" className="data-list-group">
+                        <ListGroup.Item>Epoch: {cardanoStakeDistribution.epoch}</ListGroup.Item>
+                        {cardanoStakeDistribution.created_at && (
+                          <ListGroup.Item>
+                            Created:{" "}
+                            <LocalDateTime datetime={cardanoStakeDistribution.created_at} />
+                          </ListGroup.Item>
+                        )}
+                        <ListGroup.Item>
+                          Certificate hash: <br />
+                          {cardanoStakeDistribution.certificate_hash}{" "}
+                          <Button
+                            size="sm"
+                            onClick={() =>
+                              showCertificate(cardanoStakeDistribution.certificate_hash)
+                            }>
+                            Show
+                          </Button>
+                        </ListGroup.Item>
+                      </ListGroup>
+                    </Card.Body>
+                    <Card.Footer>
+                      <Stack direction="horizontal" gap={1}>
+                        {index === 0 && (
+                          <>
+                            <Badge bg="primary">Latest</Badge>{" "}
+                          </>
+                        )}
+
+                        <RawJsonButton
+                          href={`${aggregator}/artifact/cardano-stake-distribution/${cardanoStakeDistribution.hash}`}
+                          size="sm"
+                          className="ms-auto"
+                        />
+                      </Stack>
+                    </Card.Footer>
+                  </Card>
+                </Col>
+              ))}
+            </Row>
+          </Container>
+        )}
+      </div>
+    </>
+  );
+}