Merge pull request #11 from Alethio/validators

Validators
Alethio · Jun 6, 2019 · cb41864 · cb41864
2 parents 0a5a9eb + ad1dc10
commit cb41864
Show file tree

Hide file tree

Showing 12 changed files with 7,556 additions and 12,230 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,12 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.2.0] - 2019-06-06
+- Show validators for POA networks (clique and ibft2)
+- Add NETWORK_ALGO config (values: ethash, clique, ibft2)
+- Add tooltip on isValidator/isMining to show the node address
+- Fix logos
+
 ## [1.1.6] - 2019-02-18
 - Show correct min/max values for the big charts
 - Added config AVG_GAS_PRICE_ENABLED

diff --git a/app/components/EthstatsLogo/index.js b/app/components/EthstatsLogo/index.js
@@ -1,18 +1,25 @@
 import React from 'react';
 import Container from './Container';
-import { EXPLORER_URL } from 'config';
-import Icon from 'components/Icon';
-import IconConainer from './IconContainer';
 
 class EthstatsLogo extends React.Component {
 
   render() {
     return (
       <Container>
-        <a href={EXPLORER_URL}
-           target="_blank"
-           rel="noopener noreferrer">
-          <IconConainer><Icon name="aleth_icon"></Icon></IconConainer>
+        <a href="/" rel="noopener noreferrer">
+          <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <g id="Stats" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+              <g id="StatsView" transform="translate(-12.000000, -109.000000)">
+                <g id="topBar" transform="translate(0.000000, 97.000000)">
+                  <g id="Group-5" transform="translate(12.000000, 12.000000)">
+                    <path d="M16,0 L16,0 C24.836556,-1.623249e-15 32,7.163444 32,16 L32,16 C32,24.836556 24.836556,32 16,32 L16,32 C7.163444,32 1.082166e-15,24.836556 0,16 L0,16 C-1.082166e-15,7.163444 7.163444,1.623249e-15 16,0 Z" id="Rectangle" fill="#FFFFFF"></path>
+                    <path d="M22.39984,12.80008 C20.63248,12.80008 19.20016,14.2324 19.20016,16.00024 C19.20016,17.76712 20.63248,19.19992 22.39984,19.19992 C24.16768,19.19992 25.6,17.76712 25.6,16.00024 C25.6,14.2324 24.16768,12.80008 22.39984,12.80008" id="Fill-1" fill="#0F1927"></path>
+                    <path d="M16,19.20016 C14.23264,19.20016 12.79984,17.76736 12.79984,16 C12.79984,14.23264 14.23264,12.80032 16,12.80032 C17.76736,12.80032 19.20016,11.36752 19.20016,9.60016 C19.20016,7.8328 17.76736,6.4 16,6.4 C14.23264,6.4 12.79984,7.8328 12.79984,9.60016 C12.79984,11.36752 11.36752,12.80032 9.60016,12.80032 C7.83232,12.80032 6.4,14.23264 6.4,16 C6.4,17.76736 7.83232,19.20016 9.60016,19.20016 C11.36752,19.20016 12.79984,20.63248 12.79984,22.39984 C12.79984,24.16768 14.23264,25.6 16,25.6 C17.76736,25.6 19.20016,24.16768 19.20016,22.39984 C19.20016,20.63248 17.76736,19.20016 16,19.20016" id="Fill-3" fill="#2774FE"></path>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </svg>
         </a>
       </Container>
     );

diff --git a/app/components/NetStats/Footer/index.js b/app/components/NetStats/Footer/index.js
@@ -1,14 +1,15 @@
 import React from 'react';
 import { PRIVACY_POLICY } from 'config';
 import Container from './Container';
-import IconContainer from './IconContainer';
 import FlexRow from './FlexRow';
 import AlethioLink from './AlethioLink';
 import Text from './Text';
 import GuideTourStart from 'components/NetStats/GuideTour/GuideTourStart';
 import ReportIssue from 'components/NetStats/ReportIssue';
 import PrivacyPolicy from 'components/NetStats/PrivacyPolicy';
 import PropTypes from 'prop-types';
+import Icon from 'components/Icon';
+import IconConainer from './IconContainer';
 
 class Footer extends React.Component {
   static propTypes = {
@@ -26,21 +27,7 @@ class Footer extends React.Component {
           {PRIVACY_POLICY && <PrivacyPolicy/> }
         </FlexRow>
         <FlexRow>
-          <IconContainer className="explorer">
-            <svg width="20px" height="20px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
-              <g id="Stats" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-                <g id="StatsView" transform="translate(-12.000000, -109.000000)">
-                  <g id="topBar" transform="translate(0.000000, 97.000000)">
-                    <g id="Group-5" transform="translate(12.000000, 12.000000)">
-                      <path d="M16,0 L16,0 C24.836556,-1.623249e-15 32,7.163444 32,16 L32,16 C32,24.836556 24.836556,32 16,32 L16,32 C7.163444,32 1.082166e-15,24.836556 0,16 L0,16 C-1.082166e-15,7.163444 7.163444,1.623249e-15 16,0 Z" id="Rectangle" fill="#FFFFFF"></path>
-                      <path d="M22.39984,12.80008 C20.63248,12.80008 19.20016,14.2324 19.20016,16.00024 C19.20016,17.76712 20.63248,19.19992 22.39984,19.19992 C24.16768,19.19992 25.6,17.76712 25.6,16.00024 C25.6,14.2324 24.16768,12.80008 22.39984,12.80008" id="Fill-1" fill="#0F1927"></path>
-                      <path d="M16,19.20016 C14.23264,19.20016 12.79984,17.76736 12.79984,16 C12.79984,14.23264 14.23264,12.80032 16,12.80032 C17.76736,12.80032 19.20016,11.36752 19.20016,9.60016 C19.20016,7.8328 17.76736,6.4 16,6.4 C14.23264,6.4 12.79984,7.8328 12.79984,9.60016 C12.79984,11.36752 11.36752,12.80032 9.60016,12.80032 C7.83232,12.80032 6.4,14.23264 6.4,16 C6.4,17.76736 7.83232,19.20016 9.60016,19.20016 C11.36752,19.20016 12.79984,20.63248 12.79984,22.39984 C12.79984,24.16768 14.23264,25.6 16,25.6 C17.76736,25.6 19.20016,24.16768 19.20016,22.39984 C19.20016,20.63248 17.76736,19.20016 16,19.20016" id="Fill-3" fill="#2774FE"></path>
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </svg>
-          </IconContainer>
+          <IconConainer><Icon name="aleth_icon"></Icon></IconConainer>
           <Text>&nbsp;&nbsp;&nbsp;powered by </Text>
           <AlethioLink href="https://company.aleth.io" target="_blank" rel="noopener noreferrer">
             <Text>&nbsp;Aleth.io</Text>

diff --git a/app/components/NetStats/HistoricalNodeItem/index.js b/app/components/NetStats/HistoricalNodeItem/index.js
@@ -9,7 +9,7 @@ import FlexBox from 'components/NetStats/NodeItem/FlexBox';
 import JustFlex from 'components/NetStats/NodeItem/JustFlex';
 import PaddedProp from 'components/NetStats/NodeItem/PaddedProp';
 import NodePropagationChart from 'components/NetStats/NodePropagationChart';
-
+import { NETWORK_ALGO } from 'config';
 
 class HistoricalNodeItem extends React.Component {
   static propTypes = {
@@ -181,6 +181,7 @@ class HistoricalNodeItem extends React.Component {
       peers = 'N/A',
       latency,
       uptime,
+      isValidator = 'N/A',
       mining = 'N/A',
       propAvg = 'N/A',
       lastBlock = 'N/A',
@@ -201,6 +202,7 @@ class HistoricalNodeItem extends React.Component {
       uptime = nodeData['ethstats:nodeData']['ethstats:onlineTimePercent']
         ? parseFloat(nodeData['ethstats:nodeData']['ethstats:onlineTimePercent'].toFixed(2), 10) + '%'
         : 'N/A';
+      isValidator = nodeData['ethstats:nodeData']['ethstats:nodeIsValidator'] ? 'Yes' : 'No';
       if (nodeData['ethstats:nodeStatistics']) {
         peers = nodeData['ethstats:nodeStatistics']['ethstats:numberOfPeers'];
         mining = nodeData['ethstats:nodeStatistics']['ethstats:isMining'] ? 'Yes' : 'No';
@@ -244,7 +246,11 @@ class HistoricalNodeItem extends React.Component {
             </ReactTooltip>
           </Detail>
           <Detail width="65px" color={colors.latencyColor}>{latency}</Detail>
-          <Detail width="70px" color={colors.nameColor}>{mining}</Detail>
+          <Detail width="70px" color={colors.nameColor} data-tip data-for={`viewNodeCoinbase-${shortNodeName}`}>{((['clique', 'ibft2'].includes(NETWORK_ALGO)) ? isValidator : mining)}
+            <ReactTooltip id={`viewNodeCoinbase-${shortNodeName}`} place="bottom" className="tooltip-custom">
+              <span>Address: {nodeData['ethstats:nodeData']['ethstats:coinbase'] ? nodeData['ethstats:nodeData']['ethstats:coinbase'] : 'N/A' }</span>
+            </ReactTooltip>
+          </Detail>
           <Detail width="50px" color={colors.nameColor}>{peers}</Detail>
           <Detail width="160px" color={colors.blockColor}>{lastBlock}<span className="space"/>{lastBlockHash}</Detail>
           <Detail width="75px" color={colors.nameColor}>{lastBlockTxCount}</Detail>

diff --git a/app/components/NetStats/HistoricalNodesList/index.js b/app/components/NetStats/HistoricalNodesList/index.js
@@ -7,6 +7,7 @@ import Header from 'components/NetStats/NodesList/Header';
 import HeaderContent from 'components/NetStats/NodesList/HeaderContent';
 import HeaderItem from 'components/NetStats/NodesList/HeaderItem';
 import SortIconContainer from 'components/NetStats/NodesList/SortIconContainer';
+import { NETWORK_ALGO } from 'config';
 
 export default class HistoricalNodesList extends React.Component {
   constructor(props) {
@@ -32,8 +33,8 @@ export default class HistoricalNodesList extends React.Component {
         ascendingOrder: true,
         extraProps: {},
       }, {
-        id: 'isMining',
-        name: 'Is mining',
+        id: ((['clique', 'ibft2'].includes(NETWORK_ALGO)) ? 'isValidator' : 'isMining'),
+        name: ((['clique', 'ibft2'].includes(NETWORK_ALGO)) ? 'Is validator' : 'Is mining'),
         width: 70,
         extraProps: {},
         ascendingOrder: true,

diff --git a/app/components/NetStats/NodeItem/index.js b/app/components/NetStats/NodeItem/index.js
@@ -14,6 +14,7 @@ import PaddedProp from './PaddedProp';
 import { getNodeName as getNodeNameAction } from 'actions/nodeHistory';
 import { showNodeHistoryModal as showNodeHistoryModalAction } from 'actions/global';
 import nodeDataSelector from 'selector/nodeData';
+import { NETWORK_ALGO } from 'config';
 
 class NodeItem extends React.Component {
   static propTypes = {
@@ -141,6 +142,7 @@ class NodeItem extends React.Component {
       peers = 'N/A',
       latency,
       uptime,
+      isValidator = 'N/A',
       mining = 'N/A',
       propAvg = 'N/A',
       lastBlock = 'N/A',
@@ -160,6 +162,7 @@ class NodeItem extends React.Component {
       uptime = data['ethstats:nodeData']['ethstats:onlineTimePercent']
         ? parseFloat(data['ethstats:nodeData']['ethstats:onlineTimePercent'].toFixed(2), 10) + '%'
         : 'N/A';
+      isValidator = data['ethstats:nodeData']['ethstats:nodeIsValidator'] ? 'Yes' : 'No';
       if (data['ethstats:nodeStatistics']) {
         peers = data['ethstats:nodeStatistics']['ethstats:numberOfPeers'];
         mining = data['ethstats:nodeStatistics']['ethstats:isMining'] ? 'Yes' : 'No';
@@ -224,7 +227,11 @@ class NodeItem extends React.Component {
             </ReactTooltip>
           </Detail>
           <Detail width="65px" color={colors.latencyColor} data-tip data-for={`viewDetails-${shortNodeName}`}>{latency}</Detail>
-          <Detail width="70px" color={colors.nameColor} data-tip data-for={`viewDetails-${shortNodeName}`}>{mining}</Detail>
+          <Detail width="70px" color={colors.nameColor} data-tip data-for={`viewNodeCoinbase-${shortNodeName}`}>{((['clique', 'ibft2'].includes(NETWORK_ALGO)) ? isValidator : mining)}
+            <ReactTooltip id={`viewNodeCoinbase-${shortNodeName}`} place="bottom" className="tooltip-custom">
+              <span>Address: {data['ethstats:nodeData']['ethstats:coinbase'] ? data['ethstats:nodeData']['ethstats:coinbase'] : 'N/A' }</span>
+            </ReactTooltip>
+          </Detail>
           <Detail width="50px" color={colors.nameColor} data-tip data-for={`viewDetails-${shortNodeName}`}>{peers}</Detail>
           <Detail width="160px" color={colors.blockColor} data-tip data-for={`viewDetails-${shortNodeName}`}>{lastBlock}<span className="space"/>{lastBlockHash}</Detail>
           <Detail width="75px" color={colors.nameColor} data-tip data-for={`viewDetails-${shortNodeName}`}>{lastBlockTxCount}</Detail>

diff --git a/app/components/NetStats/NodeModal/Header/index.js b/app/components/NetStats/NodeModal/Header/index.js
@@ -11,6 +11,7 @@ import Title from './Title';
 import Value from './Value';
 import CloseIcon from '../CloseIcon';
 import FlexRow from '../FlexRow';
+import { NETWORK_ALGO } from 'config';
 
 class Header extends React.Component {
   componentDidMount() {
@@ -126,6 +127,7 @@ class Header extends React.Component {
     let colors = '';
     let type = 'N/A';
     let latency = 'N/A';
+    let isValidator = 'N/A';
     let mining = 'N/A';
     let peers = 'N/A';
     let currentBlock = 0;
@@ -145,6 +147,7 @@ class Header extends React.Component {
           type = 'N/A';
         }
         latency = realtimeData['ethstats:nodeData']['ethstats:wsLatency'] + ' ms';
+        isValidator = realtimeData['ethstats:nodeData']['ethstats:nodeIsValidator'] ? 'Yes' : 'No';
         if (realtimeData['ethstats:nodeData']['ethstats:onlineTimePercent']) {
           uptime = realtimeData['ethstats:nodeData']['ethstats:onlineTimePercent'].toFixed(2) + '%';
         }
@@ -193,8 +196,8 @@ class Header extends React.Component {
             <Value color={colors.latencyColor}>{latency}</Value>
           </FlexItem>
           <FlexItem>
-            <Title>Is mining</Title>
-            <Value color={colors.nameColor}>{mining}</Value>
+            <Title>{((['clique', 'ibft2'].includes(NETWORK_ALGO)) ? 'Is validator' : 'Is mining')}</Title>
+            <Value color={colors.nameColor}>{((['clique', 'ibft2'].includes(NETWORK_ALGO)) ? isValidator : mining)}</Value>
           </FlexItem>
           <FlexItem>
             <Title>Peers</Title>

diff --git a/app/components/NetStats/NodesList/index.js b/app/components/NetStats/NodesList/index.js
@@ -6,6 +6,7 @@ import HeaderContent from './HeaderContent';
 import HeaderItem from './HeaderItem';
 import Icon from 'components/Icon';
 import SortIconContainer from './SortIconContainer';
+import { NETWORK_ALGO } from 'config';
 
 export default class NodesList extends React.Component {
   constructor(props) {
@@ -31,8 +32,8 @@ export default class NodesList extends React.Component {
         ascendingOrder: true,
         extraProps: {},
       }, {
-        id: 'isMining',
-        name: 'Is mining',
+        id: ((['clique', 'ibft2'].includes(NETWORK_ALGO)) ? 'isValidator' : 'isMining'),
+        name: ((['clique', 'ibft2'].includes(NETWORK_ALGO)) ? 'Is validator' : 'Is mining'),
         width: 70,
         extraProps: {},
         ascendingOrder: true,

diff --git a/config.js.example b/config.js.example
@@ -6,5 +6,6 @@ const config = {
   DS_NAMESPACE: 'ethstats/',
   EXPLORER_URL: '',
   PRIVACY_POLICY: false,
-  AVG_GAS_PRICE_ENABLED: true
+  AVG_GAS_PRICE_ENABLED: true,
+  NETWORK_ALGO: 'ethash'
 };