From 654c3c1f4462295a7db05b4758fffc57c5bfcc78 Mon Sep 17 00:00:00 2001 From: NGUYEN DINH Quoc-Huy <contact@quoc-huy.com> Date: Fri, 3 Apr 2020 09:41:24 +1100 Subject: [PATCH] - removed missed blocks - added price feed + age - format large numbers for votes HP --- src/app/components/pages/Witnesses.jsx | 71 +++++++++++-------------- src/app/components/pages/Witnesses.scss | 10 ---- src/app/locales/en.json | 5 -- src/app/utils/ParsersAndFormatters.js | 27 +++++++++- 4 files changed, 57 insertions(+), 56 deletions(-) diff --git a/src/app/components/pages/Witnesses.jsx b/src/app/components/pages/Witnesses.jsx index 036ef4a4..61a8f1ab 100644 --- a/src/app/components/pages/Witnesses.jsx +++ b/src/app/components/pages/Witnesses.jsx @@ -8,11 +8,12 @@ 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 tt from 'counterpart'; const Long = ByteBuffer.Long; @@ -23,6 +24,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'; @@ -75,11 +77,13 @@ class Witnesses extends React.Component { 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); } } @@ -131,17 +135,15 @@ class Witnesses extends React.Component { 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,7 +155,6 @@ 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 now = Moment(); @@ -175,6 +176,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 +261,17 @@ class Witnesses extends React.Component { </div> <div> <small> - {tt('witnesses_jsx.running_version')} v{ + 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 +284,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 +291,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 +377,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 +392,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> diff --git a/src/app/components/pages/Witnesses.scss b/src/app/components/pages/Witnesses.scss index 3620b292..5469dad3 100644 --- a/src/app/components/pages/Witnesses.scss +++ b/src/app/components/pages/Witnesses.scss @@ -50,16 +50,6 @@ @extend .link; @extend .link--primary; } - th.Witnesses__votes, td.Witnesses__votes { - @media only screen and (max-width: 779px) { - display: none; - } - } - div.Witnesses__votes { - @media only screen and (min-width: 780px) { - display: none; - } - } div.Witnesses__highlight form input.input-group-field { box-shadow: 0px 0px 3px 3px pink; } diff --git a/src/app/locales/en.json b/src/app/locales/en.json index 70e315ef..ede207bb 100644 --- a/src/app/locales/en.json +++ b/src/app/locales/en.json @@ -503,13 +503,8 @@ "witness_proxy_clear": "Clear proxy", "proxy_update_error": "Your proxy was not updated", "missed_blocks": "Missed blocks", - "last_block": "Last block", - "running_version": "Running version", - "received_hp_votes": "Received %(votehp)s worth of votes", "votes_received": "Votes received", "hp_required_to_rank_up": "Needs %(votehp)s to level up", - "missed_block_notes": - "<strong>Notes:</strong> missed blocks are collected since the first day of operation of each witness. Blocks can be missed for various reasons including technical issues, misconfiguration etc... They are sometimes unavoidable like in the case of an unexpected or urgent HardFork etc... and the higher your rank, the higher the chance it can happen. You should not make your witness vote decision on this total number of missed blocks alone.", "witness_age": "Witness age" }, "votesandcomments_jsx": { diff --git a/src/app/utils/ParsersAndFormatters.js b/src/app/utils/ParsersAndFormatters.js index fd5cdc7e..2525d909 100644 --- a/src/app/utils/ParsersAndFormatters.js +++ b/src/app/utils/ParsersAndFormatters.js @@ -77,7 +77,32 @@ export function countDecimals(amount) { const parts = amount.split('.'); return parts.length > 2 ? undefined - : parts.length === 1 ? 0 : parts[1].length; + : parts.length === 1 + ? 0 + : parts[1].length; +} + +export function formatLargeNumber(number, decimals) { + const symbols = [ + { value: 1, symbol: '' }, + { value: 1e3, symbol: 'k' }, + { value: 1e6, symbol: 'M' }, + { value: 1e9, symbol: 'G' }, + { value: 1e12, symbol: 'T' }, + { value: 1e15, symbol: 'P' }, + { value: 1e18, symbol: 'E' }, + ]; + + const regexp = /\.0+$|(\.[0-9]*[1-9])0+$/; + for (let i = symbols.length - 1; i > 0; i--) { + if (number >= symbols[i].value) { + return ( + (number / symbols[i].value) + .toFixed(decimals) + .replace(regexp, '$1') + symbols[i].symbol + ); + } + } } // this function searches for right translation of provided error (usually from back-end) -- GitLab