diff --git a/.github/workflows/deploy-libre.yaml b/.github/workflows/deploy-libre.yaml index 9cdec90a..4ec53693 100644 --- a/.github/workflows/deploy-libre.yaml +++ b/.github/workflows/deploy-libre.yaml @@ -56,7 +56,7 @@ jobs: REACT_APP_SYNC_TOLERANCE_INTERVAL: 180000 REACT_APP_TOKEN_SYMBOL: 'LIBRE' REACT_APP_NETWORK_URL: '[{"label":"EOS","value":"https://eos.antelope.tools","mainnet":true,"pair":"eos","icon":"eos","order":1},{"label":"Proton","value":"https://proton.antelope.tools","mainnet":true,"pair":"proton","icon":"proton","order":2},{"label":"WAX","value":"https://wax.antelope.tools","mainnet":true,"pair":"wax","icon":"wax","order":3},{"label":"Telos","value":"https://telos.antelope.tools","mainnet":true,"pair":"telos","icon":"telos","order":4},{"label":"Libre","value":"https://libre.antelope.tools","mainnet":true,"pair":"libre","icon":"libre","order":5},{"label":"LACChain EOSIO","value":"https://lacchain.antelope.tools","mainnet":true,"pair":null,"icon":"lacchain","order":6},{"label":"Jungle4 Testnet","value":"https://jungle.antelope.tools","mainnet":false,"pair":"eos","icon":"jungle","order":1},{"label":"Proton Testnet","value":"https://proton-testnet.antelope.tools","mainnet":false,"pair":"proton","icon":"proton","order":2},{"label":"WAX Testnet","value":"https://wax-testnet.antelope.tools","mainnet":false,"pair":"wax","icon":"wax","order":3},{"label":"Telos Testnet","value":"https://telos-testnet.antelope.tools","mainnet":false,"pair":"telos","icon":"telos","order":4},{"label":"Libre Testnet","value":"https://libre-testnet.antelope.tools","mainnet":false,"pair":"libre","icon":"libre","order":5},{"label":"Ultra Testnet","value":"https://ultra-testnet.antelope.tools","mainnet":false,"pair":"ultra","icon":"ultra","order":6}]' - REACT_APP_DISABLED_MENU_ITEMS: '["/missed-blocks","/block-distribution"]' + REACT_APP_DISABLED_MENU_ITEMS: '["/missed-blocks","/block-distribution","/stress-test"]' REACT_APP_BLOCK_EXPLORER_URL: 'https://www.libreblocks.io/tx/(transaction)' REACT_APP_STATE_HISTORY_ENABLED=: 'false' REACT_APP_GOOGLE_ANALITIC_PAGE_ID: 'G-E6Y0EC9FT8' diff --git a/webapp/src/components/NodesSummary/index.js b/webapp/src/components/NodesSummary/index.js index fbc58ed7..497ad28a 100644 --- a/webapp/src/components/NodesSummary/index.js +++ b/webapp/src/components/NodesSummary/index.js @@ -1,8 +1,6 @@ /* eslint camelcase: 0 */ import React, { memo, useEffect, useState } from 'react' import PropTypes from 'prop-types' -import Card from '@mui/material/Card' -import CardContent from '@mui/material/CardContent' import Typography from '@mui/material/Typography' import LinearProgress from '@mui/material/LinearProgress' import { useQuery } from '@apollo/client' @@ -10,13 +8,14 @@ import { useTranslation } from 'react-i18next' import { NODES_SUMMARY_QUERY } from '../../gql' import { generalConfig } from '../../config' +import SimpleDataCard from '../SimpleDataCard' const NODES_ORDER = [ { boot: 2, observer: 4, validator: 1, - writer: 3 + writer: 3, }, { producer: 1, @@ -24,8 +23,8 @@ const NODES_ORDER = [ query: 3, seed: 4, 'query,seed': 5, - unknown: 10 - } + unknown: 10, + }, ] const BodyGraphValue = ({ loading, value }) => { @@ -40,15 +39,15 @@ const BodyGraphValue = ({ loading, value }) => { BodyGraphValue.propTypes = { loading: PropTypes.bool, - value: PropTypes.number + value: PropTypes.number, } BodyGraphValue.defaultProps = { value: 0, - loading: false + loading: false, } -const NodesSummary = ({ t, classes }) => { +const NodesSummary = ({ t }) => { const { data, loading } = useQuery(NODES_SUMMARY_QUERY) const { i18n } = useTranslation('translations') const [currentLanguaje, setCurrentLanguaje] = useState('') @@ -80,7 +79,7 @@ const NodesSummary = ({ t, classes }) => { return { value: nodes[type], type, - position: nodesOrderByNet[type] || 8 + position: nodesOrderByNet[type] || 8, } }) .sort((a, b) => a.position - b.position) @@ -94,28 +93,20 @@ const NodesSummary = ({ t, classes }) => { return ( <> -
- - - {`${t('total')} ${t('nodes')}`} - - - -
+ + {`${t('total')} ${t('nodes')}`} + + {nodes && nodes.map((node) => ( -
- - - - {currentLanguaje === 'es' ? t('nodes') : ''} {t(node.type)}{' '} - {currentLanguaje !== 'es' ? t('nodes') : ''} - - - - -
+ + + {currentLanguaje === 'es' ? t('nodes') : ''} {t(node.type)}{' '} + {currentLanguaje !== 'es' ? t('nodes') : ''} + + + ))} ) @@ -123,12 +114,10 @@ const NodesSummary = ({ t, classes }) => { NodesSummary.propTypes = { t: PropTypes.func, - classes: PropTypes.object } NodesSummary.defaultProps = { t: (text) => text, - classes: {} } export default memo(NodesSummary) diff --git a/webapp/src/components/ProducersSummary/index.js b/webapp/src/components/ProducersSummary/index.js index 8c7b55c5..c2976e17 100644 --- a/webapp/src/components/ProducersSummary/index.js +++ b/webapp/src/components/ProducersSummary/index.js @@ -1,13 +1,12 @@ /* eslint camelcase: 0 */ import React, { memo, useEffect, useState } from 'react' import PropTypes from 'prop-types' -import Card from '@mui/material/Card' -import CardContent from '@mui/material/CardContent' import Typography from '@mui/material/Typography' import LinearProgress from '@mui/material/LinearProgress' import { ENTITY_TYPE } from '../../utils/lacchain' import { eosConfig } from '../../config' +import SimpleDataCard from '../SimpleDataCard' const BodyGraphValue = ({ loading, value }) => { if (loading) return @@ -21,15 +20,15 @@ const BodyGraphValue = ({ loading, value }) => { BodyGraphValue.propTypes = { loading: PropTypes.bool, - value: PropTypes.number + value: PropTypes.number, } BodyGraphValue.defaultProps = { value: 0, - loading: false + loading: false, } -const ProducersSummary = ({ t, classes, data, loading, total }) => { +const ProducersSummary = ({ t, data, loading, total }) => { const [nodes, setNodes] = useState([]) useEffect(() => { @@ -46,7 +45,7 @@ const ProducersSummary = ({ t, classes, data, loading, total }) => { producers.push({ ...producer, - type: ENTITY_TYPE[producer.type] || 'N/A' + type: ENTITY_TYPE[producer.type] || 'N/A', }) } @@ -55,27 +54,16 @@ const ProducersSummary = ({ t, classes, data, loading, total }) => { return ( <> -
- - - {`${t('total')} ${t('producers')}`} - - - -
+ + {`${t('total')} ${t('producers')}`} + + {nodes.map((node, index) => ( -
- - - {`${t(node.type)} ${t('producers')}`} - - - -
+ + {`${t(node.type)} ${t('producers')}`} + + ))} ) @@ -83,18 +71,16 @@ const ProducersSummary = ({ t, classes, data, loading, total }) => { ProducersSummary.propTypes = { t: PropTypes.func, - classes: PropTypes.object, data: PropTypes.object, loading: PropTypes.bool, - total: PropTypes.number + total: PropTypes.number, } ProducersSummary.defaultProps = { t: (text) => text, - classes: {}, data: {}, loading: false, - total: 0 + total: 0, } export default memo(ProducersSummary) diff --git a/webapp/src/components/SimpleDataCard/index.js b/webapp/src/components/SimpleDataCard/index.js new file mode 100644 index 00000000..f7b92566 --- /dev/null +++ b/webapp/src/components/SimpleDataCard/index.js @@ -0,0 +1,32 @@ +import React from 'react' +import { makeStyles } from '@mui/styles' +import PropTypes from 'prop-types' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' + +import styles from './styles' + +const useStyles = makeStyles(styles) + +const SimpleDataCard = ({ header, children }) => { + const classes = useStyles() + + return ( +
+ + {children} + +
+ ) +} + +SimpleDataCard.propTypes = { + header: PropTypes.bool, + children: PropTypes.node, +} + +SimpleDataCard.defaultProps = { + header: false, +} + +export default SimpleDataCard diff --git a/webapp/src/components/SimpleDataCard/styles.js b/webapp/src/components/SimpleDataCard/styles.js new file mode 100644 index 00000000..f3211a2f --- /dev/null +++ b/webapp/src/components/SimpleDataCard/styles.js @@ -0,0 +1,36 @@ +export default (theme) => ({ + cards: { + textTransform: 'capitalize', + minHeight: '90px', + '& .MuiTypography-h6': { + display: 'flex', + justifyContent: 'center', + textAlign: 'center', + marginTop: theme.spacing(2), + }, + }, + cardShadow: { + boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important', + }, + cardHeader: { + flexGrow: '1', + flexBasis: 'calc(100%/5)', + [theme.breakpoints.down('md')]: { + marginBottom: '10px', + }, + '& .MuiPaper-root': { + height: '100%', + }, + }, + cardGrow: { + flexGrow: '1', + flexBasis: 'calc(100%/5)', + [theme.breakpoints.down('md')]: { + flexBasis: 'calc(100%/3)', + marginBottom: '10px', + }, + '& .MuiPaper-root': { + height: '100%', + }, + }, + }) diff --git a/webapp/src/components/TransactionsHistory/index.js b/webapp/src/components/TransactionsHistory/index.js index c536028a..55c877bb 100644 --- a/webapp/src/components/TransactionsHistory/index.js +++ b/webapp/src/components/TransactionsHistory/index.js @@ -1,16 +1,21 @@ /* eslint camelcase: 0 */ import React, { memo, useEffect, useState } from 'react' +import { makeStyles } from '@mui/styles' import PropTypes from 'prop-types' -import Card from '@mui/material/Card' -import CardContent from '@mui/material/CardContent' import Typography from '@mui/material/Typography' import LinearProgress from '@mui/material/LinearProgress' import LaunchIcon from '@mui/icons-material/Launch' import { useSubscription } from '@apollo/client' import { BLOCK_TRANSACTIONS_HISTORY } from '../../gql' +import { useSharedState } from '../../context/state.context' import { formatWithThousandSeparator, getBlockNumUrl } from '../../utils' import { generalConfig } from '../../config' +import SimpleDataCard from '../SimpleDataCard' + +import styles from './styles' + +const useStyles = makeStyles(styles) const BodyGraphValue = ({ loading, value, classes, href }) => { if (loading) return @@ -40,7 +45,9 @@ BodyGraphValue.defaultProps = { classes: {}, } -const TransactionsHistory = ({ t, classes, nodesChildren }) => { +const TransactionsHistory = ({ t, nodesChildren }) => { + const classes = useStyles() + const [{ info, tps }] = useSharedState() const { data, loading } = useSubscription(BLOCK_TRANSACTIONS_HISTORY) const [ blockWithHighestTransactionsCount, @@ -59,29 +66,11 @@ const TransactionsHistory = ({ t, classes, nodesChildren }) => { setBlockWithHighestTransactionsCount(blockWithHighestTransactionsCount) }, [data]) - if (!generalConfig.historyEnabled) - return ( - <> - {nodesChildren && nodesChildren} -
- - - {`${t('uniqueLocations')}`} - - - -
- - ) - return (
-
- - + {generalConfig.historyEnabled && ( + <> + {t('tpsAllTimeHigh')} { classes={classes} href={getBlockNumUrl(blockWithHighestTransactionsCount.block_num)} /> - - -
-
- - + + {t('networkUtilizationAllTimeHigh')} { href={getBlockNumUrl(blockWithHighestTransactionsCount.block_num)} loading={loading} /> - - -
-
- - + + {`${t('transactions')} ${t('lastHour')}`} { )} loading={loading} /> - - -
-
- - + + {`${t('transactions')} ${t('lastDay')}`} { )} loading={loading} /> - - -
-
- - + + {`${t('transactions')} ${t( 'dailyAverage', )}`} @@ -147,12 +120,8 @@ const TransactionsHistory = ({ t, classes, nodesChildren }) => { )} loading={loading} /> - - -
-
- - + + {`${t('transactions')} ${t('lastWeek')}`} { )} loading={loading} /> - - -
- {nodesChildren && nodesChildren} -
- - + + + )} + {nodesChildren && ( + <> + {nodesChildren} + {`${t('uniqueLocations')}`} - - -
+ + + )} + + {t('cpuUsage')} + + {`${formatWithThousandSeparator(tps[0]?.cpu, 2)} %`} + + + + + {t('netUsage')} + + {`${formatWithThousandSeparator(tps[0]?.net, 3)} %`} + + + + + {t('cpuLimitPerBlock')} + + {`${(info.block_cpu_limit * 0.001).toFixed(0)} ms`} + + + + {t('netLimitPerBlock')} + + {`${formatWithThousandSeparator(info.block_net_limit / 1024, 0)} KB`} + + + + {t('chainCpuLimit')} + + {`${(info.virtual_block_cpu_limit * 0.001).toFixed(0)} ms`} + + + + {t('chainNetLimit')} + + {`${formatWithThousandSeparator( + info.virtual_block_net_limit / 1024, + 0, + )} KB`} + +
) } TransactionsHistory.propTypes = { t: PropTypes.func, - classes: PropTypes.object, nodesChildren: PropTypes.node, } TransactionsHistory.defaultProps = { t: (text) => text, - classes: {}, } export default memo(TransactionsHistory) diff --git a/webapp/src/components/TransactionsHistory/styles.js b/webapp/src/components/TransactionsHistory/styles.js new file mode 100644 index 00000000..67153c56 --- /dev/null +++ b/webapp/src/components/TransactionsHistory/styles.js @@ -0,0 +1,18 @@ +export default (theme) => ({ + svgLink: { + fontSize: 18, + marginLeft: theme.spacing(2), + }, + lowercase: { + textTransform: 'lowercase !important', + }, + wrapper: { + display: 'flex', + gap: '10px', + flexWrap: 'wrap', + marginTop: theme.spacing(2), + [theme.breakpoints.down('md')]: { + width: '100%', + }, + }, + }) diff --git a/webapp/src/components/TransactionsLineChart/index.js b/webapp/src/components/TransactionsLineChart/index.js index e9d3dda5..59190e44 100644 --- a/webapp/src/components/TransactionsLineChart/index.js +++ b/webapp/src/components/TransactionsLineChart/index.js @@ -3,7 +3,7 @@ import HighchartsReact from 'highcharts-react-official' import PropTypes from 'prop-types' import Highcharts from 'highcharts' -const TransactionsLineChart = ({ data, xAxisProps, title, yAxisProps }) => { +const TransactionsLineChart = ({ data, xAxisProps, title, yAxisProps, zoomEnabled }) => { const options = { time: { timezoneOffset: new Date().getTimezoneOffset(), @@ -14,12 +14,16 @@ const TransactionsLineChart = ({ data, xAxisProps, title, yAxisProps }) => { chart: { animation: false, type: 'spline', + zoomType: zoomEnabled ? 'x' : '' }, credits: { enabled: false, }, xAxis: xAxisProps, yAxis: yAxisProps, + tooltip: { + pointFormat: '{series.name}: {point.y}
Net usage:{point.net} %
CPU usage:{point.cpu} %', + }, } return ( @@ -40,6 +44,7 @@ TransactionsLineChart.propTypes = { xAxisProps: PropTypes.object, yAxisProps: PropTypes.object, title: PropTypes.string, + zoomEnabled: PropTypes.bool, } TransactionsLineChart.defaultProps = { @@ -47,6 +52,7 @@ TransactionsLineChart.defaultProps = { xAxisProps: { xAxisVisible: false }, yAxisProps: {}, title: '', + zoomEnabled: false, } export default TransactionsLineChart diff --git a/webapp/src/context/state.context.js b/webapp/src/context/state.context.js index 53da0425..fad4fa7a 100644 --- a/webapp/src/context/state.context.js +++ b/webapp/src/context/state.context.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback } from 'react' +import React, { useEffect, useCallback } from 'react' import useLightUAL from '../hooks/useUAL' import { ualConfig } from '../config' @@ -43,7 +43,8 @@ const sharedStateReducer = (state, action) => { } case 'pushTPB': { - if (state.tpb[0].blocks[0] === action.payload.blocks[0]) return { ...state } + if (state.tpb[0].blocks[0] === action.payload.blocks[0]) + return { ...state } const tpb = JSON.parse(JSON.stringify(state.tpb)) @@ -149,7 +150,6 @@ export const SharedStateProvider = ({ ...props }) => { export const useSharedState = () => { const context = React.useContext(SharedStateContext) - const [intervalNumber, setIntervalNumber] = useState(null) if (!context) { throw new Error(`useSharedState must be used within a SharedStateContext`) @@ -159,6 +159,7 @@ export const useSharedState = () => { const waitTrackingInterval = 30000 let infoInterval let scheduleInterval + let global const update = (payload) => dispatch({ type: 'update', payload }) const login = (type) => { @@ -181,11 +182,36 @@ export const useSharedState = () => { }) } - const getUsage = block => { + const getGlobalConfig = async () => { + if (!global) { + try { + const { rows } = await eosApi.getTableRows({ + code: 'eosio', + scope: 'eosio', + table: 'global', + json: true, + lower_bound: null, + }) + + global = { + maxBlockCPU: rows[0]?.max_block_cpu_usage, + maxBlockNET: rows[0]?.max_block_net_usage, + } + } catch (error) {} + } + + return global + } + + const getUsage = async block => { + const globalConfig = await getGlobalConfig() + return block?.transactions?.reduce( (total, current) => { - total.cpu += current.cpu_usage_us - total.net += current.net_usage_words + total.cpu += + (current.cpu_usage_us / globalConfig.maxBlockCPU) * 100 || 0 + total.net += + (current.net_usage_words / globalConfig.maxBlockNET) * 100 || 0 return total }, { net: 0, cpu: 0 }, @@ -193,31 +219,30 @@ export const useSharedState = () => { } const getBlock = useCallback( - async (block) => { + async blockNum => { try { - const data = await eosApi.getBlock(block) + const block = await eosApi.getBlock(blockNum) + const blockUsage = await getUsage(block) + const payload = { + blocks: [blockNum], + transactions: block.transactions.length, + ...blockUsage, + } dispatch({ type: 'pushTPB', - payload: { - blocks: [block], - transactions: data.transactions.length, - ...getUsage(data), - }, + payload, }) dispatch({ type: 'pushTPS', - payload: { - blocks: [block], - transactions: data.transactions.length, - ...getUsage(data), - }, + payload, }) } catch (error) { console.error(error?.message || error) } }, + // eslint-disable-next-line [dispatch], ) @@ -270,18 +295,15 @@ export const useSharedState = () => { } } - if (infoInterval) return - infoInterval = setInterval(handle, interval * 1000) - setIntervalNumber(infoInterval) } - const stopTrackingInfo = useCallback(() => { - if (!intervalNumber) return + const stopTrackingInfo = () => { + if (!infoInterval) return - clearInterval(intervalNumber) - setIntervalNumber(null) - }, [intervalNumber]) + clearInterval(infoInterval) + infoInterval = null + } const stopTrackingProducerSchedule = () => { if (!scheduleInterval) return diff --git a/webapp/src/routes/Home/BlockProducerInfo.js b/webapp/src/routes/Home/BlockProducerInfo.js index 5b1cb33e..70fdba1a 100644 --- a/webapp/src/routes/Home/BlockProducerInfo.js +++ b/webapp/src/routes/Home/BlockProducerInfo.js @@ -3,11 +3,10 @@ import React, { lazy, useEffect, useState } from 'react' import { useQuery } from '@apollo/client' import PropTypes from 'prop-types' -import eosApi from '../../utils/eosapi' import { formatWithThousandSeparator } from '../../utils' import { PRODUCERS_QUERY, PRODUCERS_SUMMARY_QUERY } from '../../gql' import { useSharedState } from '../../context/state.context' -import { eosConfig, generalConfig } from '../../config' +import { eosConfig } from '../../config' const Card = lazy(() => import('@mui/material/Card')) const CardContent = lazy(() => import('@mui/material/CardContent')) @@ -20,37 +19,16 @@ const TransactionsHistory = lazy(() => const TransactionInfo = lazy(() => import('./TransactionInfo')) const NodesSummary = lazy(() => import('../../components/NodesSummary')) const ProducersSummary = lazy(() => import('../../components/ProducersSummary')) +const SimpleDataCard = lazy(() => import('../../components/SimpleDataCard')) const BlockProducerInfo = ({ t, classes }) => { const { data: { loading, producers } = {} } = useQuery(PRODUCERS_QUERY) const { data: producersSummary, loading: producersLoading } = useQuery( PRODUCERS_SUMMARY_QUERY, ) - const [{ schedule: scheduleInfo, info, tps }] = useSharedState() + const [{ schedule: scheduleInfo, info }] = useSharedState() const [total, setTotal] = useState(0) const [schedule, setSchedule] = useState({ producers: [] }) - const [globalConfig, setGlobalConfig] = useState() - - useEffect(() => { - const getTable = async () => { - try { - const { rows } = await eosApi.getTableRows({ - code: 'eosio', - scope: 'eosio', - table: 'global', - json: true, - lower_bound: null, - }) - - setGlobalConfig({ - maxBlockCPU: rows[0]?.max_block_cpu_usage, - maxBlockNET: rows[0]?.max_block_net_usage, - }) - } catch (error) {} - } - - getTable() - }, []) useEffect(() => { const newProducers = scheduleInfo.producers.map((item) => { @@ -106,50 +84,30 @@ const BlockProducerInfo = ({ t, classes }) => { return ( <>
-
- - - {t('currentProducer')} - - {info.head_block_producer} - - - -
-
- - - {t('scheduleVersion')} - - {schedule?.version} - - - -
-
- - - {t('headBlock')} - - {formatWithThousandSeparator(info.head_block_num)} - - - -
-
- - - {t('lastBlock')} - - {formatWithThousandSeparator(info.last_irreversible_block_num)} - - - -
+ + {t('currentProducer')} + + {info.head_block_producer} + + + + {t('scheduleVersion')} + + {schedule?.version} + + + + {t('headBlock')} + + {formatWithThousandSeparator(info.head_block_num)} + + + + {t('lastBlock')} + + {formatWithThousandSeparator(info.last_irreversible_block_num)} + +
@@ -163,15 +121,11 @@ const BlockProducerInfo = ({ t, classes }) => {
- +
{loading && } -
+ <> { <> - - - } - /> - {globalConfig && ( -
- - - {t('cpuUsage')} - - {`${formatWithThousandSeparator( - (tps[0]?.cpu / globalConfig.maxBlockCPU) * 100 || 0, - 2, - )} %`} - - - -
- )} - {globalConfig && ( -
- - - {t('netUsage')} + + + {t('timeToFinality')} - {`${formatWithThousandSeparator( - (tps[0]?.net / globalConfig.maxBlockNET) * 100 || 0, - 2, - )} %`} + {schedule.producers + ? `${ + (Math.ceil((schedule.producers.length / 3) * 2) + 1) * 6 + } s` + : '0 s'} - - -
- )} -
- - - {t('cpuLimitPerBlock')} - - {`${(info.block_cpu_limit * 0.001).toFixed(0)} ms`} - - - -
-
- - - {t('netLimitPerBlock')} - - {`${formatWithThousandSeparator( - info.block_net_limit / 1024, - 0, - )} KB`} - - - -
-
- - - {t('chainCpuLimit')} - - {`${(info.virtual_block_cpu_limit * 0.001).toFixed(0)} ms`} - - - -
-
- - - {t('chainNetLimit')} - - {`${formatWithThousandSeparator( - info.virtual_block_net_limit / 1024, - 0, - )} KB`} - - - -
-
- - - {t('timeToFinality')} - - {schedule.producers - ? `${ - (Math.ceil((schedule.producers.length / 3) * 2) + 1) * 6 - } s` - : '0 s'} - - - -
-
+ + + } + /> + ) } diff --git a/webapp/src/routes/Home/TransactionInfo.js b/webapp/src/routes/Home/TransactionInfo.js index 8a390239..f5660492 100644 --- a/webapp/src/routes/Home/TransactionInfo.js +++ b/webapp/src/routes/Home/TransactionInfo.js @@ -16,9 +16,10 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow' import LinearProgress from '@mui/material/LinearProgress' import { TRANSACTION_QUERY } from '../../gql' -import { rangeOptions } from '../../utils' +import { formatWithThousandSeparator, rangeOptions } from '../../utils' import TransactionsLineChart from '../../components/TransactionsLineChart' import { useSharedState } from '../../context/state.context' +import { generalConfig } from '../../config' import EqualIcon from './EqualIcon' import styles from './styles' @@ -31,7 +32,6 @@ const TransactionInfo = ({ t, startTrackingInfo, stopTrackingInfo, - historyEnabled, }) => { const classes = useStyles() const theme = useTheme() @@ -62,8 +62,8 @@ const TransactionInfo = ({ for (let index = 0; index < tpb.length; index++) { trxPerBlock.push({ name: `Block: ${tpb[index].blocks.join()}`, - cpu: tpb[index].cpu, - net: tpb[index].net, + cpu: formatWithThousandSeparator(tpb[index].cpu,2), + net: formatWithThousandSeparator(tpb[index].net,3), y: tpb[index].transactions, x: index > 0 ? index / 2 : index, }) @@ -72,8 +72,8 @@ const TransactionInfo = ({ for (let index = 0; index < tps.length; index++) { trxPerSecond.push({ name: `Blocks: ${tps[index].blocks.join(', ')}`, - cpu: tpb[index].cpu, - net: tps[index].net, + cpu: formatWithThousandSeparator(tps[index].cpu,2), + net: formatWithThousandSeparator(tps[index].net,3), y: tps[index].transactions, x: index, }) @@ -153,7 +153,7 @@ const TransactionInfo = ({
- {historyEnabled && ( + {generalConfig.historyEnabled && ( <> {t('timeFrame')}