Fix forging details in the delegates page - Closes #3440

i18n/locales/en/common.json

@@ -316,7 +316,6 @@
   "Peers": "Peers",
   "Pending": "Pending",
   "Pending...": "Pending...",
-  "Percentage of successfully forged blocks in relation to all blocks (forged and missed).": "Percentage of successfully forged blocks in relation to all blocks (forged and missed).",
   "Perfect! Almost done": "Perfect! Almost done",
   "Performance": "Performance",
   "Personalize each transaction with a custom message. Look up its value in a fiat currency of your choice.": "Personalize each transaction with a custom message. Look up its value in a fiat currency of your choice.",

src/app/type.css

@@ -149,6 +149,16 @@ small {
   text-align: center;
 }
 
+:global .text-left {
+  text-align: left;
+  justify-content: flex-start;
+}
+
+:global .text-right {
+  text-align: right;
+  justify-content: flex-end;
+}
+
 input,
 textarea,
 select {

src/components/screens/monitor/delegates/delegates.css

@@ -227,7 +227,7 @@
     background-color: var(--color-yellow-transparent);
   }
 
-  &.non-eligible {
+  &.nonEligible {
     color: var(--color-blue-gray);
     background-color: var(--color-blue-manatee-transparent);
   }

src/components/screens/monitor/delegates/delegates.js

@@ -1,17 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { withTranslation } from 'react-i18next';
 
 import { Input } from '@toolbox/inputs';
 import Box from '@toolbox/box';
 import BoxHeader from '@toolbox/box/header';
 import BoxContent from '@toolbox/box/content';
 import BoxTabs from '@toolbox/tabs';
+import { ROUND_LENGTH } from '@constants';
 import styles from './delegates.css';
-import Overview from './overview';
+import DelegatesOverview from './overview/delegatesOverview';
+import ForgingDetails from './overview/forgingDetails';
 import LatestVotes from './latestVotes';
 import DelegatesTable from './delegatesTable';
-import ForgingDetails from './forgingDetails';
 
 // eslint-disable-next-line max-statements
 const DelegatesMonitor = ({
@@ -25,25 +24,15 @@ const DelegatesMonitor = ({
   standByDelegates,
   networkStatus,
   applyFilters,
-  delegates,
   filters,
+  blocks,
   votes,
   t,
 }) => {
   const [activeTab, setActiveTab] = useState('active');
-  const { forgingTimes, total } = useSelector(state => state.blocks);
-  const delegatesWithForgingTimes = {
-    ...delegates,
-    data: delegates.data.map(
-      data => ({ ...data, forgingTime: forgingTimes[data.publicKey] }),
-    ),
-  };
-  const watchedDelegatesWithForgingTimes = {
-    ...watchedDelegates,
-    data: watchedDelegates.data.map(
-      data => ({ ...data, forgingTime: forgingTimes[data.publicKey] }),
-    ),
-  };
+  const { total, forgers, latestBlocks } = blocks;
+  const delegatesWithForgingTimes = { data: forgers };
+  const forgedInRound = latestBlocks.length ? latestBlocks[0].height % ROUND_LENGTH : 0;
 
   useEffect(() => {
     const addressList = votes.data && votes.data.reduce((acc, data) => {
@@ -109,7 +98,7 @@ const DelegatesMonitor = ({
 
   return (
     <div>
-      <Overview
+      <DelegatesOverview
         delegatesCount={delegatesCount}
         transactionsCount={transactionsCount}
         registrations={registrations}
@@ -119,9 +108,11 @@ const DelegatesMonitor = ({
       />
       <ForgingDetails
         t={t}
-        chartDelegatesForging={forgingTimes}
+        forgers={forgers}
+        forgedInRound={forgedInRound}
+        startTime={latestBlocks[forgedInRound]?.timestamp}
       />
-      <Box main isLoading={delegates.isLoading || standByDelegates.isLoading || votes.isLoading}>
+      <Box main isLoading={standByDelegates.isLoading || votes.isLoading}>
         <BoxHeader className="delegates-table">
           {tabs.tabs.length === 1
             ? <h2>{tabs.tabs[0].name}</h2>
@@ -145,7 +136,7 @@ const DelegatesMonitor = ({
                   setActiveTab={setActiveTab}
                   delegates={delegatesWithForgingTimes}
                   watchList={watchList}
-                  watchedDelegates={watchedDelegatesWithForgingTimes}
+                  watchedDelegates={watchedDelegates}
                   standByDelegates={standByDelegates}
                   sanctionedDelegates={sanctionedDelegates}
                   filters={filters}
@@ -160,4 +151,4 @@ const DelegatesMonitor = ({
   );
 };
 
-export default withTranslation()(DelegatesMonitor);
+export default DelegatesMonitor;

src/components/screens/monitor/delegates/delegates.test.js

@@ -46,16 +46,12 @@ describe('Delegates monitor page', () => {
     });
   };
 
+  const { blocks } = store.getState();
+
   beforeEach(() => {
     props = {
       t: key => key,
-      delegates: {
-        isLoading: true,
-        data: activeDelegates,
-        loadData: jest.fn(),
-        clearData: jest.fn(),
-        urlSearchParams: {},
-      },
+      blocks,
       standByDelegates: {
         isLoading: true,
         data: [],
@@ -145,6 +141,6 @@ describe('Delegates monitor page', () => {
 
   it('renders the forging status', () => {
     wrapper = setup(props);
-    expect(wrapper.find('a.delegate-row')).toHaveLength(delegatesList.length + 1);
+    expect(wrapper.find('a.delegate-row')).toHaveLength(blocks.forgers.length);
   });
 });

src/components/screens/monitor/delegates/delegatesTable/dataColumns.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
+
+import { formatAmountBasedOnLocale } from '@utils/formattedNumber';
+import { fromRawLsk } from '@utils/lsk';
+import { truncateAddress } from '@utils/account';
+import Tooltip from '@toolbox/tooltip/tooltip';
+import Icon from '@toolbox/icon';
+import AccountVisual from '@toolbox/accountVisual';
+import {
+  getStatusClass,
+  getDelegateWeightClass,
+  getRoundStateClass,
+  getForgingTimeClass,
+} from './tableHeader';
+import styles from '../delegates.css';
+
+const roundStatus = {
+  forging: 'Forging',
+  awaitingSlot: 'Awaiting slot',
+  missedBlock: 'Missed block',
+};
+
+const icons = {
+  forging: 'delegateForged',
+  awaitingSlot: 'delegateAwaiting',
+  missedBlock: 'delegateMissed',
+};
+
+const delegateStatus = {
+  active: 'Active',
+  standby: 'Standby',
+  banned: 'Banned',
+  punished: 'Punished',
+  nonEligible: 'Non-eligible to forge',
+};
+
+export const DelegateWeight = ({ value, activeTab }) => {
+  const formatted = formatAmountBasedOnLocale({
+    value: fromRawLsk(value),
+    format: '0a',
+  });
+
+  return (
+    <span className={getDelegateWeightClass(activeTab)}>
+      <span>{formatted}</span>
+    </span>
+  );
+};
+
+export const DelegateDetails = ({
+  t, watched = false, data, activeTab, removeFromWatchList, addToWatchList,
+}) => {
+  const showEyeIcon = activeTab === 'active' || activeTab === 'standby' || activeTab === 'watched';
+  return (
+    <span className={grid['col-xs-5']}>
+      <div className={styles.delegateColumn}>
+        <Tooltip
+          tooltipClassName={styles.tooltipContainer}
+          className={styles.eyeIconTooltip}
+          position="bottom right"
+          size="s"
+          content={(
+            <span
+              className={`
+                ${styles.eyeIcon} ${!showEyeIcon ? 'hidden' : ''} ${watched && showEyeIcon ? styles.watchedDelegate : ''}
+              `}
+              onClick={watched ? removeFromWatchList : addToWatchList}
+            >
+              <Icon name={watched ? 'eyeActive' : 'eyeInactive'} />
+            </span>
+          )}
+        >
+          <p className={styles.watchedTooltip}>
+            {watched ? t('Remove from watched') : t('Add to watched')}
+          </p>
+        </Tooltip>
+
+        <div className={`${styles.delegateDetails}`}>
+          <AccountVisual address={data.address} />
+          <div>
+            <p className={styles.delegateName}>
+              {data.username}
+            </p>
+            <p className={styles.delegateAddress}>{truncateAddress(data.address)}</p>
+          </div>
+        </div>
+      </div>
+    </span>
+  );
+};
+
+export const RoundStatus = ({
+  activeTab, data, t, time,
+}) => (
+  <span className={`${getRoundStateClass(activeTab)} ${styles.noEllipsis} ${styles.statusIconsContainer}`}>
+    <Tooltip
+      title={t(roundStatus[data.status])}
+      position="left"
+      size="maxContent"
+      content={(
+        <Icon
+          className={styles.statusIcon}
+          name={icons[data.status]}
+        />
+      )}
+      footer={(
+        <p>{data.status === 'missedBlock' ? '-' : time}</p>
+      )}
+    >
+      <p className={styles.statusToolip}>
+        {data.lastBlock && `Last block forged ${data.lastBlock}`}
+      </p>
+    </Tooltip>
+    {data.isBanned && (
+      <Tooltip
+        position="left"
+        size="maxContent"
+        content={<Icon className={styles.statusIcon} name="delegateWarning" />}
+        footer={(
+          <p>{time}</p>
+        )}
+      >
+        <p>
+          {t('This delegate will be punished in upcoming rounds')}
+        </p>
+      </Tooltip>
+    )}
+  </span>
+);
+
+export const DelegateStatus = ({ activeTab, data }) => {
+  const status = data.totalVotesReceived < 1e11 ? 'nonEligible' : data.status;
+  return (
+    <span className={getStatusClass(activeTab)}>
+      <span className={`${styles.delegateStatus} ${styles[status]}`}>{delegateStatus[status]}</span>
+    </span>
+  );
+};
+
+export const ForgingTime = ({ activeTab, time, status }) => (
+  <span className={getForgingTimeClass(activeTab)}>
+    {status === 'missedBlock' ? '-' : time}
+  </span>
+);