miners: Show current total

frontend/pages/miners.tsx

@@ -63,11 +63,27 @@ const SignallingCell = styled.td`
   text-align: center;
 `;
 
+const Totals = styled.div`
+  font-size: 24px;
+  color: #ff9b20;
+  text-shadow: #000 2px 2px 0px;
+  max-width: 600px;
+  margin: auto;
+  text-align: center;
+  > span {
+    padding-left: 15px;
+  }
+  margin-bottom: 20px;
+`;
+
 export default function Miners() {
   const blocks = useStoreState((store) => store.blocks);
   const forkName = config.fork.name;
   const { currentNumberOfBlocks } = computeStats(blocks);
   const miners = useMemo(() => computeMiners(blocks), [blocks]);
+  const totalSignalling = miners
+    .filter(([_, m]) => m.signals)
+    .reduce((sum, [_, m]) => sum + m.numBlocks / currentNumberOfBlocks, 0);
 
   return (
     <Container>
@@ -77,6 +93,9 @@ export default function Miners() {
       <Content>
         <SiteTitle />
         <SiteMenu />
+        <Totals>
+          Current total: {(totalSignalling * 100).toFixed(2)}% <>✅</>
+        </Totals>
         <Table>
           <TableHead>
             <TableRow>

txt/index.ts

@@ -24,6 +24,10 @@ export function homeTXT() {
   const miners = computeMiners(blocks);
   const forkName = config.fork.name;
 
+  const totalSignalling = miners
+    .filter(([_, m]) => m.signals)
+    .reduce((sum, [_, m]) => sum + m.numBlocks / currentNumberOfBlocks, 0);
+
   let blocksTable = "";
   blocksTable += `${blocks[0].height}`;
   for (let i = 0; i < blocks.length; i++) {
@@ -89,6 +93,8 @@ ${blocksTable}
 
 Miners
 
+Current total: ${(totalSignalling * 100).toFixed(2)}% ✅
+
 ${miners
   .map(
     ([_, miner]) =>