Add PoolTicker component and use it alongside party id

Author: Alenar

mithril-explorer/src/app/registrations/page.js

@@ -11,6 +11,7 @@ import LinkButton from "../../components/LinkButton";
 import Stake from "../../components/Stake";
 import RawJsonButton from "../../components/RawJsonButton";
 import VerifiedBadge from "../../components/VerifiedBadge";
+import PoolTicker from "../../components/PoolTicker";
 
 Chart.register(
   ArcElement,
@@ -244,6 +245,7 @@ export default function Registrations() {
                 <tr>
                   <th>#</th>
                   <th>Party id</th>
+                  <th>Pool Ticker</th>
                   <th style={{textAlign: "end"}}>Stake</th>
                 </tr>
                 </thead>
@@ -252,6 +254,7 @@ export default function Registrations() {
                   <tr key={signer.party_id}>
                     <td>{index}</td>
                     <td><VerifiedBadge tooltip="Verified Signer"/>{' '}{signer.party_id}</td>
+                    <td><PoolTicker aggregator={aggregator} partyId={signer.party_id}/></td>
                     <td style={{textAlign: "end"}}><Stake lovelace={signer.stake}/></td>
                   </tr>
                 )}

mithril-explorer/src/components/CertificateModal/index.js

@@ -3,13 +3,15 @@ import {Badge, Button, Col, Container, ListGroup, Modal, Row, Table} from "react
 import {useSelector} from "react-redux";
 import RawJsonButton from "../RawJsonButton";
 import Stake from "../Stake";
-import VerifiedBadge from '../VerifiedBadge';
 import ProtocolParameters from "../ProtocolParameters";
+import PoolTicker from "../PoolTicker";
+import VerifiedBadge from '../VerifiedBadge';
 import {selectedAggregator} from "../../store/settingsSlice";
 
 export default function CertificateModal(props) {
   const [certificate, setCertificate] = useState({});
   const certificateEndpoint = useSelector((state) => `${selectedAggregator(state)}/certificate/${props.hash}`);
+  const aggregator = useSelector(selectedAggregator);
 
   useEffect(() => {
     if (!props.hash) {
@@ -82,6 +84,7 @@ export default function CertificateModal(props) {
                         <tr>
                           <th></th>
                           <th>Party id</th>
+                          <th>Pool ticker</th>
                           <th style={{textAlign: "end"}}>Stake</th>
                         </tr>
                         </thead>
@@ -94,6 +97,7 @@ export default function CertificateModal(props) {
                               }
                             </td>
                             <td>{signer.party_id}</td>
+                            <td><PoolTicker aggregator={aggregator} partyId={signer.party_id} /></td>
                             <td style={{textAlign: "end"}}><Stake lovelace={signer.stake}/></td>
                           </tr>
                         )}

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

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {Card, CardGroup, ListGroup} from "react-bootstrap";
 import {useSelector} from "react-redux";
+import PoolTicker from "../PoolTicker";
 import RawJsonButton from "../RawJsonButton";
 import SignedEntityType from "../SignedEntityType";
 import VerifiedBadge from '../VerifiedBadge';
@@ -9,6 +10,7 @@ import {selectedAggregator} from "../../store/settingsSlice";
 export default function PendingCertificate(props) {
   const [pendingCertificate, setPendingCertificate] = useState({});
   const pendingCertificateEndpoint = useSelector((state) => `${selectedAggregator(state)}/certificate-pending`);
+  const aggregator = useSelector(selectedAggregator);
   const autoUpdate = useSelector((state) => state.settings.autoUpdate);
   const updateInterval = useSelector((state) => state.settings.updateInterval);
 
@@ -68,9 +70,10 @@ export default function PendingCertificate(props) {
                 ? <div>No Signers registered</div>
                 : <>
                   <ListGroup variant="flush">
-                    <ListGroup.Item><b>Party id</b></ListGroup.Item>
+                    <ListGroup.Item><b>Pools</b></ListGroup.Item>
                     {pendingCertificate.signers.map(signer =>
                       <ListGroup.Item key={signer.party_id}>
+                        <PoolTicker partyId={signer.party_id} aggregator={aggregator}/><br/>
                         {signer.party_id}
                         {signer.verification_key_signature &&
                           <div className="float-end">
@@ -91,9 +94,10 @@ export default function PendingCertificate(props) {
                 ? <div>No Signers registered for next epoch</div>
                 : <>
                   <ListGroup variant="flush">
-                    <ListGroup.Item><b>Party id</b></ListGroup.Item>
+                    <ListGroup.Item><b>Pools</b></ListGroup.Item>
                     {pendingCertificate.next_signers.map(signer =>
                       <ListGroup.Item key={signer.party_id}>
+                        <PoolTicker partyId={signer.party_id} aggregator={aggregator}/><br/>
                         {signer.party_id}
                         {signer.verification_key_signature &&
                           <div className="float-end">

mithril-explorer/src/components/PoolTicker.js

@@ -0,0 +1,10 @@
+import React from "react";
+import {useSelector} from "react-redux";
+import {getPool} from "../store/poolsSlice";
+
+export default function PoolTicker({aggregator, partyId, ...props}) {
+    const poolTicker = useSelector((state) => getPool(state, aggregator, partyId).pool_ticker);
+
+    return <>{poolTicker}</>;
+}
+

mithril-explorer/src/store/poolsSlice.js

@@ -27,4 +27,12 @@ export const updatePoolsForAggregator = createAsyncThunk('pools/updateForAggrega
         });
 });
 
+export const getPool = (state, aggregator, poolId) => {
+    const data = state.pools[aggregator];
+    return {
+        network: data?.network,
+        ...data?.pools.find(pool => pool.party_id === poolId)
+    };
+};
+
 export default poolsSlice.reducer;