Add EpochSettings card to explorer

Author: Alenar

mithril-explorer/components/EpochSettings/index.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import {Card, ListGroup} from "react-bootstrap";
+import RawJsonButton from "../RawJsonButton";
+
+export default function EpochSettings(props) {
+  const [epochSettings, setEpochSettings] = useState({});
+
+  useEffect(() => {
+    if (!props.autoUpdate) {
+      return;
+    }
+
+    let fetchEpochSettings = () => {
+      fetch(`${props.aggregator}/epoch-settings`)
+        .then(response => response.status === 200 ? response.json() : {})
+        .then(data => setEpochSettings(data))
+        .catch(error => {
+          setEpochSettings({});
+          console.error("Fetch epoch-settings error:", error);
+        });
+    };
+
+    // Fetch it once without waiting
+    fetchEpochSettings();
+
+    const interval = setInterval(fetchEpochSettings, props.updateInterval);
+    return () => clearInterval(interval);
+  }, [props.aggregator, props.updateInterval, props.autoUpdate]);
+  
+  return (
+    <div>
+      <h2>
+        Epoch Settings
+        <RawJsonButton href={`${props.aggregator}/epoch-settings`} variant="outline-light" size="sm" />
+      </h2>
+
+      <Card>
+        <Card.Body>
+          <Card.Title>Current Epoch</Card.Title>
+          <ListGroup variant="flush">
+            <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>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+}

mithril-explorer/pages/index.js

@@ -3,11 +3,12 @@ import PendingCertificate from '../components/PendingCertificate';
 import SnapshotsList from '../components/SnapshotsList';
 import Head from "next/head";
 import Image from "next/image";
-import { Form, Stack, Button, Row, Col, InputGroup } from "react-bootstrap";
+import {Form, Stack, Button, Row, Col, InputGroup, Container} from "react-bootstrap";
 import styles from "../styles/Home.module.css";
 import AggregatorSetter from "../components/AggregatorSetter";
 import available_aggregators from "../aggregators-list";
 import {useRouter} from "next/router";
+import EpochSettings from "../components/EpochSettings";
 
 function IntervalSetter(props) {
   function handleChange(event) {
@@ -89,7 +90,14 @@ export default function Explorer() {
                   onStartStopPress={handleStartStopButtonPress} />
               </Row>
             </Form>
-            <PendingCertificate aggregator={aggregator} updateInterval={interval} autoUpdate={autoUpdate} />
+            <Row>
+              <Col>
+                <EpochSettings aggregator={aggregator} updateInterval={interval} autoUpdate={autoUpdate} />
+              </Col>
+              <Col xs={8}>
+                <PendingCertificate aggregator={aggregator} updateInterval={interval} autoUpdate={autoUpdate} />
+              </Col>
+            </Row>
             <SnapshotsList aggregator={aggregator} updateInterval={interval} autoUpdate={autoUpdate} />
           </Stack>
         </main>