diff --git a/src/newUi.scss b/src/newUi.scss index 9d23b76c..f6a77cfc 100644 --- a/src/newUi.scss +++ b/src/newUi.scss @@ -1469,6 +1469,18 @@ nav { padding: 4px 12px; border-radius: 4px; } + + span.synced-at { + border: 0; + background-color: inherit; + margin: auto 0; + font-family: 'San Francisco Pro'; + font-size: 10px; + font-weight: 500; + line-height: 18px; + letter-spacing: 0.03em; + text-align: left; + } } .real-time-info-container { @@ -1504,17 +1516,6 @@ nav { text-align: left; color: var(--bold-text-color); } - - p { - margin: 0; - font-family: 'San Francisco Pro'; - font-size: 10px; - font-weight: 500; - line-height: 18px; - letter-spacing: 0.03em; - text-align: left; - color: #57606a; - } } .statistics-data-title { diff --git a/src/screens/Dashboard.js b/src/screens/Dashboard.js index 7f3ef841..19f7fa66 100644 --- a/src/screens/Dashboard.js +++ b/src/screens/Dashboard.js @@ -5,8 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, { useEffect, useState } from 'react'; -import { get } from 'lodash'; +import React, { useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import ReactLoading from 'react-loading'; import { numberUtils } from '@hathor/wallet-lib'; @@ -14,31 +13,41 @@ import colors from '../index.scss'; import { useNewUiEnabled } from '../hooks'; import helpers from '../utils/helpers'; import TimeSeriesDashboard from './TimeSeriesDashboard'; -import blockApi from '../api/blockApi'; import useTimelapseCounter from '../hooks/useTimelapseCounter'; function Dashboard() { const newUiEnabled = useNewUiEnabled(); const [timestamp, setTimestamp] = useState(null); - - useEffect(() => { - const fetchInitialTimestamp = async () => { - const blockApiResponse = await blockApi.getBestChainHeight(); - const blockApiResponseData = get(blockApiResponse, 'data.hits[0]', {}); - const apiTimestamp = blockApiResponseData.timestamp; - - if (apiTimestamp) { - setTimestamp(new Date(apiTimestamp).getTime()); - } + /** + * @property {number} transactions + * @property {number} bestBlockHeight + * @property {number} hashRate + * @property {number} lastTimestamp + */ + const { transactions, bestBlockHeight, hashRate, bestTimestamp } = useSelector(state => { + return { + transactions: state.data?.transactions, + bestBlockHeight: state.data?.best_block_height, + hashRate: state.data?.hash_rate, + bestTimestamp: state.data?.time, }; + }); + const lastBlockHeight = useRef(bestBlockHeight); + const renderCount = useTimelapseCounter(timestamp); - fetchInitialTimestamp(); - }, []); + // Calculating the timestamp data + useEffect(() => { + // Do not recalculate if the exhibited data has not changed + if (bestBlockHeight === lastBlockHeight.current) { + return; + } - const renderCount = useTimelapseCounter(timestamp); + // Setting the timestamp of when this screen was last updated with a block height + lastBlockHeight.current = bestBlockHeight; + setTimestamp(new Date(bestTimestamp * 1000)); + }, [bestBlockHeight, bestTimestamp]); - const { data } = useSelector(state => ({ data: state.data })); - if (data === null) { + if (!bestBlockHeight) { return (
@@ -46,32 +55,29 @@ function Dashboard() { ); } - const { transactions } = data; - const height = data.best_block_height; + const hashRateValue = parseFloat(hashRate.toFixed(2)); + const prettified = helpers.divideValueIntoPrefix(hashRateValue); + const prettyValue = prettified.value; + const prefix = helpers.getUnitPrefix(prettified.divisions); + const formattedHashRate = `${prettyValue} ${prefix}h/s`; - const hashRateValue = parseFloat(data.hash_rate.toFixed(2)); - const prettyfied = helpers.divideValueIntoPrefix(hashRateValue); - const prettyValue = prettyfied.value; - const prefix = helpers.getUnitPrefix(prettyfied.divisions); - const hashRate = `${prettyValue} ${prefix}h/s`; - - const bestBlockHeight = numberUtils.prettyValue(height, 0); - const ptransactions = numberUtils.prettyValue(transactions, 0); + const formattedBestBlockHeight = numberUtils.prettyValue(bestBlockHeight, 0); + const formattedTransactions = numberUtils.prettyValue(transactions, 0); const renderUi = () => (

Real time

Blocks (best height): - {bestBlockHeight} + {formattedBestBlockHeight}

Transactions: - {ptransactions} + {formattedTransactions}

Hash rate: - {hashRate} + {formattedHashRate}

@@ -82,22 +88,22 @@ function Dashboard() {

Statistics

Real time + +

LATEST BLOCK {renderCount} SECONDS AGO

+
BLOCKS - {bestBlockHeight} -

UPDATED {renderCount} SECONDS AGO

+ {formattedBestBlockHeight}
TRANSACTIONS - {ptransactions} -

UPDATED {renderCount} SECONDS AGO

+ {formattedTransactions}
HASH RATE - {hashRate} -

UPDATED {renderCount} SECONDS AGO

+ {formattedHashRate}