Skip to content

Commit e064336

Browse files
AlenarAlenar
authored
Merge pull request #928 from input-output-hk/djo/927/explorer/add_stake_distribution
Add mithril stake distribution artifacts list to explorer
2 parents f08a53c + 2677cbd commit e064336

File tree

8 files changed

+151
-17
lines changed

8 files changed

+151
-17
lines changed

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, {useEffect, useState} from 'react';
2+
import {Badge, Button, Card, Col, Container, ListGroup, Row, Stack} from "react-bootstrap";
3+
import CertificateModal from '../../CertificateModal';
4+
import RawJsonButton from "../../RawJsonButton";
5+
import {useSelector} from "react-redux";
6+
7+
export default function MithrilStakeDistributionsList(props) {
8+
const [mithrilStakeDistributions, setMithrilStakeDistributions] = useState([]);
9+
const [selectedCertificateHash, setSelectedCertificateHash] = useState(undefined);
10+
const aggregator = useSelector((state) => state.settings.selectedAggregator);
11+
const autoUpdate = useSelector((state) => state.settings.autoUpdate);
12+
const updateInterval = useSelector((state) => state.settings.updateInterval);
13+
14+
useEffect(() => {
15+
if (!autoUpdate) {
16+
return;
17+
}
18+
19+
let fetchMithrilStakeDistribution = () => {
20+
fetch(`${aggregator}/artifact/mithril-stake-distributions`)
21+
.then(response => response.json())
22+
.then(data => setMithrilStakeDistributions(data))
23+
.catch(error => {
24+
setMithrilStakeDistributions([]);
25+
console.error("Fetch mithrilStakeDistributions error:", error);
26+
});
27+
};
28+
29+
// Fetch them once without waiting
30+
fetchMithrilStakeDistribution();
31+
32+
const interval = setInterval(fetchMithrilStakeDistribution, updateInterval);
33+
return () => clearInterval(interval);
34+
}, [aggregator, updateInterval, autoUpdate]);
35+
36+
function handleCertificateHashChange(hash) {
37+
setSelectedCertificateHash(hash);
38+
}
39+
40+
function showCertificate(hash) {
41+
setSelectedCertificateHash(hash);
42+
}
43+
44+
return (
45+
<>
46+
<CertificateModal
47+
aggregator={aggregator}
48+
hash={selectedCertificateHash}
49+
onHashChange={handleCertificateHashChange}/>
50+
51+
<div className={props.className}>
52+
<h2>Mithril Stake Distribution <RawJsonButton href={`${aggregator}/artifact/mithril-stake-distributions`} variant="outline-light" size="sm"/></h2>
53+
{Object.entries(mithrilStakeDistributions).length === 0
54+
? <p>No snapshot available</p>
55+
:
56+
<Container fluid>
57+
<Row xs={1} md={2} lg={3} xl={4}>
58+
{mithrilStakeDistributions.map((mithrilStakeDistribution, index) =>
59+
<Col key={mithrilStakeDistribution.hash} className="mb-2">
60+
<Card border={index === 0 ? "primary" : ""}>
61+
<Card.Body>
62+
<Card.Title>{mithrilStakeDistribution.hash}</Card.Title>
63+
<ListGroup variant="flush" className="data-list-group">
64+
<ListGroup.Item>Epoch: {mithrilStakeDistribution.epoch}</ListGroup.Item>
65+
<ListGroup.Item>Certificate hash: <br/>
66+
{mithrilStakeDistribution.certificate_hash}{' '}
67+
<Button size="sm" onClick={() => showCertificate(mithrilStakeDistribution.certificate_hash)}>Show</Button>
68+
</ListGroup.Item>
69+
</ListGroup>
70+
</Card.Body>
71+
<Card.Footer>
72+
<Stack direction="horizontal" gap={1}>
73+
{index === 0 &&
74+
<><Badge bg="primary">Latest</Badge>{' '}</>
75+
}
76+
77+
<RawJsonButton href={`${aggregator}/artifact/mithril-stake-distribution/${mithrilStakeDistribution.hash}`} size="sm"
78+
className="ms-auto"/>
79+
</Stack>
80+
</Card.Footer>
81+
</Card>
82+
</Col>
83+
)}
84+
</Row>
85+
</Container>
86+
}
87+
</div>
88+
</>
89+
);
90+
}

‎mithril-explorer/components/SnapshotsList/index.js‎ renamed to ‎mithril-explorer/components/Artifacts/SnapshotsList/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useEffect, useState} from 'react';
22
import {Badge, Button, Card, Col, Container, ListGroup, Row, Stack} from "react-bootstrap";
3-
import CertificateModal from '../CertificateModal';
4-
import RawJsonButton from "../RawJsonButton";
3+
import CertificateModal from '../../CertificateModal';
4+
import RawJsonButton from "../../RawJsonButton";
55
import {useSelector} from "react-redux";
66

77
/*
@@ -32,6 +32,8 @@ export default function SnapshotsList(props) {
3232
}
3333

3434
let fetchSnapshots = () => {
35+
// todo: update this to the new route (`${aggregator}/artifact/snapshots`) when all of our aggregators are updated
36+
// also update both <RawJsonButton> href below.
3537
fetch(`${aggregator}/snapshots`)
3638
.then(response => response.json())
3739
.then(data => setSnapshots(data))

‎mithril-explorer/components/PendingCertificate/index.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, {useEffect, useState} from 'react';
22
import {Card, CardGroup, ListGroup} from "react-bootstrap";
3+
import {useSelector} from "react-redux";
34
import RawJsonButton from "../RawJsonButton";
5+
import SignedEntityType from "../SignedEntityType";
46
import VerifiedBadge from '../VerifiedBadge';
5-
import {useSelector} from "react-redux";
6-
import ProtocolParameters from "../ProtocolParameters";
77

88
export default function PendingCertificate(props) {
99
const [pendingCertificate, setPendingCertificate] = useState({});
@@ -55,11 +55,9 @@ export default function PendingCertificate(props) {
5555
<ListGroup className="margin-bottom--md" variant="flush">
5656
<ListGroup.Item>Network: {pendingCertificate.beacon.network}</ListGroup.Item>
5757
<ListGroup.Item>Epoch: {pendingCertificate.beacon.epoch}</ListGroup.Item>
58-
<ListGroup.Item>Immutable File
59-
Number: {pendingCertificate.beacon.immutable_file_number}</ListGroup.Item>
6058
</ListGroup>
61-
<Card.Title>Protocol Parameters</Card.Title>
62-
<ProtocolParameters protocolParameters={pendingCertificate.protocol}/>
59+
<Card.Title>Entity Type</Card.Title>
60+
<SignedEntityType signedEntityType={pendingCertificate.entity_type}/>
6361
</Card.Body>
6462
</Card>
6563
<Card>

‎mithril-explorer/components/RawJsonButton.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function RawJsonButton(props) {
55
return (
66
<OverlayTrigger overlay={<Tooltip>Raw JSON</Tooltip>}>
77
<Button variant="outline-secondary" target="_blank" {...props}>
8-
<i class="bi bi-filetype-json" style={{color: 'black'}}></i>
8+
<i className="bi bi-filetype-json" style={{color: 'black'}}></i>
99
</Button>
1010
</OverlayTrigger>
1111
);

‎mithril-explorer/components/SignedEntityType.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, {useEffect, useState} from 'react';
2+
import {ListGroup} from "react-bootstrap";
3+
4+
export default function SignedEntityType({signedEntityType}) {
5+
const [entityName, setEntityName] = useState("");
6+
const [beacon, setBeacon] = useState({});
7+
8+
useEffect(() => {
9+
let type_name = Object.keys(signedEntityType).at(0);
10+
setEntityName(type_name);
11+
12+
if (type_name === "MithrilStakeDistribution" || type_name === "CardanoStakeDistribution") {
13+
setBeacon({
14+
epoch: signedEntityType[type_name]
15+
})
16+
} else {
17+
setBeacon(signedEntityType[type_name] ?? {});
18+
}
19+
}, [signedEntityType]);
20+
21+
return (
22+
<ListGroup>
23+
<ListGroup.Item>
24+
<h6>{entityName}</h6>
25+
</ListGroup.Item>
26+
<ListGroup.Item>
27+
<ListGroup horizontal="xxl">
28+
{Object.entries(beacon).map(([key, value]) =>
29+
<ListGroup.Item key={key}>{key}: {value}</ListGroup.Item>
30+
)}
31+
</ListGroup>
32+
</ListGroup.Item>
33+
</ListGroup>
34+
);
35+
}

‎mithril-explorer/next.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
3+
output: "export",
34
basePath: "/explorer",
45
reactStrictMode: true,
56
swcMinify: true,

‎mithril-explorer/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "mithril-explorer",
3-
"version": "0.1.8",
3+
"version": "0.2.0",
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
7-
"build": "next build && next export",
7+
"build": "next build",
88
"start": "next start",
99
"lint": "next lint",
1010
"test": "jest --watch",

‎mithril-explorer/pages/index.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React, {useEffect} from 'react';
2-
import PendingCertificate from '../components/PendingCertificate';
3-
import SnapshotsList from '../components/SnapshotsList';
2+
import {useRouter} from "next/router";
3+
import {useSelector} from "react-redux";
44
import Head from "next/head";
55
import Image from "next/image";
6-
import {Col, Form, Row, Stack} from "react-bootstrap";
6+
import {Col, Form, Row, Stack, Tab, Tabs} from "react-bootstrap";
77
import styles from "../styles/Home.module.css";
88
import AggregatorSetter from "../components/AggregatorSetter";
9-
import {useRouter} from "next/router";
109
import EpochSettings from "../components/EpochSettings";
11-
import {useSelector} from "react-redux";
1210
import IntervalSetter from "../components/IntervalSetter";
11+
import PendingCertificate from '../components/PendingCertificate';
12+
import SnapshotsList from '../components/Artifacts/SnapshotsList';
13+
import MithrilStakeDistributionsList from "../components/Artifacts/MithrilStakeDistributionsList";
1314

1415
export default function Explorer() {
1516
const router = useRouter();
@@ -46,7 +47,14 @@ export default function Explorer() {
4647
<PendingCertificate/>
4748
</Col>
4849
</Row>
49-
<SnapshotsList/>
50+
<Tabs defaultActiveKey="snapshots">
51+
<Tab title="Snapshots" eventKey="snapshots">
52+
<SnapshotsList/>
53+
</Tab>
54+
<Tab title="Mithril Stake Distribution" eventKey="mithrilStakeDistribution">
55+
<MithrilStakeDistributionsList/>
56+
</Tab>
57+
</Tabs>
5058
</Stack>
5159
</main>
5260
</div>

0 commit comments

Comments
 (0)