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';
@@ -7,11 +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 { vestsToHpf } from 'app/utils/StateFunctions';
 import tt from 'counterpart';
+import _ from 'lodash';
 
 const Long = ByteBuffer.Long;
 const { string, func, object } = PropTypes;
@@ -21,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';
@@ -45,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;
@@ -68,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);
         }
     }
@@ -91,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: {
@@ -103,7 +159,7 @@ class Witnesses extends React.Component {
                 current_proxy,
                 head_block,
             },
-            state: { customUsername, proxy },
+            state: { customUsername, proxy, witnessAccounts },
             accountWitnessVote,
             accountWitnessProxy,
             onWitnessChange,
@@ -124,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>
@@ -151,9 +210,31 @@ 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}Z`).format(
+                'll'
+            );
+            const now = Moment();
+            const witnessAgeDays = now.diff(accountBirthday, 'days');
+            const witnessAgeWeeks = now.diff(accountBirthday, 'weeks');
+            const witnessAgeMonths = now.diff(accountBirthday, 'months');
+            const witnessAgeYears = now.diff(accountBirthday, 'years');
+
+            let witnessAge = `${witnessAgeDays} ${tt('g.days')}`;
+            if (witnessCreated === '1970-01-01T00:00:00') {
+                witnessAge = 'over 3 years';
+            } else if (witnessAgeYears > 0) {
+                witnessAge = `${witnessAgeYears} ${tt('g.years')}`;
+            } else if (witnessAgeMonths > 0) {
+                witnessAge = `${witnessAgeMonths} ${tt('g.months')}`;
+            } else if (witnessAgeWeeks > 0) {
+                witnessAge = `${witnessAgeWeeks} ${tt('g.weeks')}`;
+            }
+
             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;
@@ -237,40 +318,51 @@ 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'
                                         )} ${_blockGap(head_block, lastBlock)}`}
+                                    {!isDisabled && (
+                                        <div>
+                                            {tt('witnesses_jsx.witness_age')}:{' '}
+                                            {witnessAge}
+                                        </div>
+                                    )}
                                 </small>
                             </div>
-                            <div className="Witnesses__votes">
-                                <small>
-                                    {tt('witnesses_jsx.received_hp_votes', {
-                                        votehp: `${totalVotesHp} HP`,
-                                    })}
-                                </small>
-                            </div>
-                            <div className="witness__thread">
-                                <small>{witness_link}</small>
-                            </div>
+                            {!isDisabled && (
+                                <div className="witness__thread">
+                                    <small>{witness_link}</small>
+                                </div>
+                            )}
                         </div>
                     </td>
-                    <td className="Witnesses__votes">
+                    <td>
                         {`${totalVotesHp} HP`}
-                        <br />
-                        {requiredHpToRankUp}
+                        {!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>
             );
@@ -335,17 +427,19 @@ class Witnesses extends React.Component {
                     <div className="column">
                         <h2>{tt('witnesses_jsx.top_witnesses')}</h2>
                         {current_proxy && current_proxy.length ? null : (
-                            <p>
-                                <strong>
+                            <div>
+                                <p>
+                                    <strong>
+                                        {tt(
+                                            'witnesses_jsx.you_have_votes_remaining',
+                                            { count: witness_vote_count }
+                                        )}.
+                                    </strong>{' '}
                                     {tt(
-                                        'witnesses_jsx.you_have_votes_remaining',
-                                        { count: witness_vote_count }
+                                        'witnesses_jsx.you_can_vote_for_maximum_of_witnesses'
                                     )}.
-                                </strong>{' '}
-                                {tt(
-                                    'witnesses_jsx.you_can_vote_for_maximum_of_witnesses'
-                                )}.
-                            </p>
+                                </p>
+                            </div>
                         )}
                     </div>
                 </div>
@@ -360,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>