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 (
Blocks (best height): - {bestBlockHeight} + {formattedBestBlockHeight}
Transactions: - {ptransactions} + {formattedTransactions}
Hash rate: - {hashRate} + {formattedHashRate}
LATEST BLOCK {renderCount} SECONDS AGO
+UPDATED {renderCount} SECONDS AGO
+ {formattedBestBlockHeight} TRANSACTIONS - {ptransactions} -UPDATED {renderCount} SECONDS AGO
+ {formattedTransactions} HASH RATE - {hashRate} -UPDATED {renderCount} SECONDS AGO
+ {formattedHashRate}