Refresh Witnesses page design

Small update to the witnesses page to add more information:

Added ability to highlight a specific witness on the page by using the query string highlight. If the requested witness is in the Top100, it will scroll down and highlight the witness:

If the requested witness is low ranking, it will scroll down to the input box and pre-populate with the witness username:

Demo site: https://wallet.hivean.com/~witnesses?highlight=quochuy

src/app/components/pages/Witnesses.jsx

 import React from 'react';
 import Moment from 'moment';
+import { api } from '@steemit/steem-js';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -8,12 +9,14 @@ import links from 'app/utils/Links';
 import Icon from 'app/components/elements/Icon';
 import * as transactionActions from 'app/redux/TransactionReducer';
 import Userpic from 'app/components/elements/Userpic';
+import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper';
+import { formatLargeNumber } from 'app/utils/ParsersAndFormatters';
 import ByteBuffer from 'bytebuffer';
 import { is, Set, List } from 'immutable';
 import * as globalActions from 'app/redux/GlobalReducer';
-import { vestsToHpf, numberWithCommas } from 'app/utils/StateFunctions';
-import { FormattedHTMLMessage } from 'app/Translator';
+import { vestsToHpf } from 'app/utils/StateFunctions';
 import tt from 'counterpart';
+import _ from 'lodash';
 
 const Long = ByteBuffer.Long;
 const { string, func, object } = PropTypes;
@@ -23,6 +26,7 @@ const DISABLED_SIGNING_KEY = 'STM1111111111111111111111111111111114T1Anm';
 function _blockGap(head_block, last_block) {
     if (!last_block || last_block < 1) return 'forever';
     const secs = (head_block - last_block) * 3;
+    if (secs < 60) return 'just now';
     if (secs < 120) return 'recently';
     const mins = Math.floor(secs / 60);
     if (mins < 120) return mins + ' mins ago';
@@ -47,7 +51,12 @@ class Witnesses extends React.Component {
 
     constructor() {
         super();
-        this.state = { customUsername: '', proxy: '', proxyFailed: false };
+        this.state = {
+            customUsername: '',
+            proxy: '',
+            proxyFailed: false,
+            witnessAccounts: {},
+        };
         this.accountWitnessVote = (accountName, approve, e) => {
             e.preventDefault();
             const { username, accountWitnessVote } = this.props;
@@ -70,16 +79,20 @@ class Witnesses extends React.Component {
     }
 
     componentDidMount() {
+        this.loadWitnessAccounts();
+
         if (typeof document !== 'undefined') {
             setTimeout(() => {
                 const highlightedWitnessElement = document.querySelector(
                     '.Witnesses__highlight'
                 );
-                highlightedWitnessElement.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'center',
-                    inline: 'center',
-                });
+                if (highlightedWitnessElement) {
+                    highlightedWitnessElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center',
+                        inline: 'center',
+                    });
+                }
             }, 1000);
         }
     }
@@ -93,10 +106,51 @@ class Witnesses extends React.Component {
             np.username !== this.props.username ||
             ns.customUsername !== this.state.customUsername ||
             ns.proxy !== this.state.proxy ||
-            ns.proxyFailed !== this.state.proxyFailed
+            ns.proxyFailed !== this.state.proxyFailed ||
+            ns.witnessAccounts !== this.state.witnessAccounts
         );
     }
 
+    async loadWitnessAccounts() {
+        const witnessAccounts = this.state.witnessAccounts;
+        const { witnesses } = this.props;
+        const witnessOwners = [[]];
+        let chunksCount = 0;
+
+        witnesses.map(item => {
+            if (witnessOwners[chunksCount].length >= 20) {
+                chunksCount += 1;
+                witnessOwners[chunksCount] = [];
+            }
+            witnessOwners[chunksCount].push(item.get('owner'));
+            return true;
+        });
+
+        for (let oi = 0; oi < witnessOwners.length; oi += 1) {
+            const owners = witnessOwners[oi];
+            const res = await api.getAccountsAsync(owners);
+            if (!(res && res.length > 0)) {
+                console.error(tt('g.account_not_found'));
+                return false;
+            }
+
+            for (let ri = 0; ri < res.length; ri += 1) {
+                const witnessAccount = res[ri];
+                let jsonMetadata = { witness_description: '' };
+                if (
+                    witnessAccount.hasOwnProperty('json_metadata') &&
+                    witnessAccount.json_metadata
+                ) {
+                    jsonMetadata = JSON.parse(witnessAccount.json_metadata);
+                }
+                witnessAccounts[witnessAccount.name] = jsonMetadata;
+            }
+        }
+
+        this.setState({ witnessAccounts: { ...witnessAccounts } });
+        return true;
+    }
+
     render() {
         const {
             props: {
@@ -105,7 +159,7 @@ class Witnesses extends React.Component {
                 current_proxy,
                 head_block,
             },
-            state: { customUsername, proxy },
+            state: { customUsername, proxy, witnessAccounts },
             accountWitnessVote,
             accountWitnessProxy,
             onWitnessChange,
@@ -126,22 +180,25 @@ class Witnesses extends React.Component {
             if (owner === witnessToHighlight) {
                 foundWitnessToHighlight = true;
             }
+            const witnessDescription = _.get(
+                witnessAccounts[owner],
+                'profile.witness_description',
+                null
+            );
             const totalVotesVests = item.get('votes');
             const totalVotesHpf = vestsToHpf(
                 this.props.state,
                 `${totalVotesVests / 1000000} VESTS`
             );
-            const totalVotesHp = numberWithCommas(totalVotesHpf.toFixed(3));
+            const totalVotesHp = formatLargeNumber(totalVotesHpf, 0);
 
             let requiredHpToRankUp = '';
             if (previousTotalVoteHpf !== 0) {
                 requiredHpToRankUp = (
                     <small>
                         {tt('witnesses_jsx.hp_required_to_rank_up', {
-                            votehp: numberWithCommas(
-                                (previousTotalVoteHpf - totalVotesHpf).toFixed(
-                                    3
-                                )
+                            votehp: formatLargeNumber(
+                                previousTotalVoteHpf - totalVotesHpf
                             ),
                         })}
                     </small>
@@ -153,9 +210,10 @@ class Witnesses extends React.Component {
             const thread = item.get('url').replace('steemit.com', 'hive.blog');
             const myVote = witness_votes ? witness_votes.has(owner) : null;
             const signingKey = item.get('signing_key');
-            const missedBlocks = item.get('total_missed');
             const witnessCreated = item.get('created');
-            const accountBirthday = Moment.utc(witnessCreated).format('ll');
+            const accountBirthday = Moment.utc(`${witnessCreated}Z`).format(
+                'll'
+            );
             const now = Moment();
             const witnessAgeDays = now.diff(accountBirthday, 'days');
             const witnessAgeWeeks = now.diff(accountBirthday, 'weeks');
@@ -175,6 +233,8 @@ class Witnesses extends React.Component {
 
             const lastBlock = item.get('last_confirmed_block_num');
             const runningVersion = item.get('running_version');
+            const sbdExchangeRate = item.get('sbd_exchange_rate');
+            const sbdExchangeUpdateDate = item.get('last_sbd_exchange_update');
             const noBlock7days = (head_block - lastBlock) * 3 > 604800;
             const isDisabled =
                 signingKey == DISABLED_SIGNING_KEY || noBlock7days;
@@ -258,9 +318,22 @@ class Witnesses extends React.Component {
                             </div>
                             <div>
                                 <small>
-                                    {tt('witnesses_jsx.running_version')} v{
+                                    {witnessDescription && (
+                                        <div className="Witnesses__description">
+                                            {witnessDescription}
+                                        </div>
+                                    )}
+                                    Produced block{' '}
+                                    <Link
+                                        to={`https://hiveblocks.com/b/${lastBlock}`}
+                                        target="_blank"
+                                    >
+                                        #{lastBlock}
+                                    </Link>{' '}
+                                    {_blockGap(head_block, lastBlock)} on v{
                                         runningVersion
                                     }
+                                    <br />
                                     {isDisabled &&
                                         `, ${tt(
                                             'witnesses_jsx.disabled'
@@ -273,13 +346,6 @@ class Witnesses extends React.Component {
                                     )}
                                 </small>
                             </div>
-                            <div className="Witnesses__votes">
-                                <small>
-                                    {tt('witnesses_jsx.received_hp_votes', {
-                                        votehp: `${totalVotesHp} HP`,
-                                    })}
-                                </small>
-                            </div>
                             {!isDisabled && (
                                 <div className="witness__thread">
                                     <small>{witness_link}</small>
@@ -287,18 +353,16 @@ class Witnesses extends React.Component {
                             )}
                         </div>
                     </td>
-                    <td className="Witnesses__votes">
+                    <td>
                         {`${totalVotesHp} HP`}
                         {!isDisabled && <div>{requiredHpToRankUp}</div>}
                     </td>
-                    <td>{missedBlocks} blocks</td>
                     <td>
-                        <Link
-                            to={`https://hiveblocks.com/b/${lastBlock}`}
-                            target="_blank"
-                        >
-                            #{lastBlock} <Icon name="extlink" />
-                        </Link>
+                        ${parseFloat(sbdExchangeRate.get('base'))}
+                        <br />
+                        <small>
+                            <TimeAgoWrapper date={sbdExchangeUpdateDate} />
+                        </small>
                     </td>
                 </tr>
             );
@@ -375,12 +439,6 @@ class Witnesses extends React.Component {
                                         'witnesses_jsx.you_can_vote_for_maximum_of_witnesses'
                                     )}.
                                 </p>
-                                <p>
-                                    <FormattedHTMLMessage
-                                        className="secondary"
-                                        id="witnesses_jsx.missed_block_notes"
-                                    />
-                                </p>
                             </div>
                         )}
                     </div>
@@ -396,12 +454,7 @@ class Witnesses extends React.Component {
                                         <th className="Witnesses__votes">
                                             {tt('witnesses_jsx.votes_received')}
                                         </th>
-                                        <th>
-                                            {tt('witnesses_jsx.missed_blocks')}
-                                        </th>
-                                        <th>
-                                            {tt('witnesses_jsx.last_block')}
-                                        </th>
+                                        <th>Price feed</th>
                                     </tr>
                                 </thead>
                                 <tbody>{witnesses.toArray()}</tbody>