diff --git a/webapp/src/components/TransactionsHistory.js b/webapp/src/components/TransactionsHistory.js index 71f02ede..f55f98b0 100644 --- a/webapp/src/components/TransactionsHistory.js +++ b/webapp/src/components/TransactionsHistory.js @@ -2,6 +2,7 @@ import React, { memo } from 'react' import PropTypes from 'prop-types' import Card from '@material-ui/core/Card' +import Grid from '@material-ui/core/Grid' import CardContent from '@material-ui/core/CardContent' import Typography from '@material-ui/core/Typography' import LinearProgress from '@material-ui/core/LinearProgress' @@ -10,58 +11,73 @@ import { useSubscription } from '@apollo/react-hooks' import { BLOCK_TRANSACTIONS_HISTORY } from '../gql' import { formatWithThousandSeparator } from '../utils' +const BodyGraphValue = ({ loading, value }) => { + if (loading) return + + return ( + + {value} + + ) +} + +BodyGraphValue.propTypes = { + loading: PropTypes.bool, + value: PropTypes.number +} + +BodyGraphValue.defaultProps = { + value: 0, + loading: false +} + const TransactionsHistory = ({ t }) => { const { data, loading } = useSubscription(BLOCK_TRANSACTIONS_HISTORY) return ( - - - - {t('transactionsHistory')} - - {loading && } - {!loading && ( -
-
- - {t('lastHour')}: - -
-
- - {formatWithThousandSeparator( - data?.stats?.[0]?.transactions_in_last_hour || 0 - )} - -
-
- - {t('lastDay')}: - -
-
- - {formatWithThousandSeparator( - data?.stats?.[0]?.transactions_in_last_day || 0 - )} - -
-
- - {t('lastWeek')}: - -
-
- - {formatWithThousandSeparator( - data?.stats?.[0]?.transactions_in_last_week || 0 - )} - -
-
- )} - - + <> + + + + {`${t('transactions')} ${t('lastHour')}`} + + + + + + + + + {`${t('transactions')} ${t('lastDay')}`} + + + + + + + + + {`${t('transactions')} ${t('lastWeek')}`} + + + + + ) } diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json index b6850f4b..345a7922 100644 --- a/webapp/src/language/en.json +++ b/webapp/src/language/en.json @@ -29,7 +29,7 @@ "routes": { "/>sidebar": "Dashboard", "/>title": "EOSIO Dashboard", - "/>heading": "Welcome", + "/>heading": "Welcome to", "/node-performance>sidebar": "Node Performance ", "/node-performance>title": "Node Performance - Dashboard", "/node-performance>heading": "Node Performance ", @@ -74,7 +74,7 @@ "homeRoute": { "currentProducer": "Current Producer", "headBlock": "Head Block", - "lastBlock": "Last Irreversible Block", + "lastBlock": "Last Irreversible", "bpSchedule": "Block Producer Schedule", "transPerSecond": "Transactions Per Second", "transPerBlock": "Transactions Per Block", diff --git a/webapp/src/layouts/Dashboard.js b/webapp/src/layouts/Dashboard.js index cefa9a60..011f5d41 100644 --- a/webapp/src/layouts/Dashboard.js +++ b/webapp/src/layouts/Dashboard.js @@ -14,7 +14,7 @@ import Sidebar from '../components/Sidebar' import Header from '../components/Header' import Footer from '../components/Footer' import PageTitle from '../components/PageTitle' -import { eosConfig } from '../config' +import { eosConfig, generalConfig } from '../config' import styles from './styles' @@ -44,6 +44,7 @@ const Dashboard = ({ children, width, ual }) => { const classes = useStyles() const { t } = useTranslation('routes') const location = useLocation() + const date = new Date() const handleDrawerToggle = () => { setMobileOpen(!mobileOpen) @@ -72,7 +73,23 @@ const Dashboard = ({ children, width, ual }) => { - {t(`${location.pathname}>heading`)} + {`${t(`${location.pathname}>heading`)} ${generalConfig.title} `} + + {date.toLocaleDateString(undefined, { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' + })} + diff --git a/webapp/src/routes/Home.js b/webapp/src/routes/Home.js index d58efe10..57177ee0 100644 --- a/webapp/src/routes/Home.js +++ b/webapp/src/routes/Home.js @@ -1,6 +1,7 @@ /* eslint camelcase: 0 */ import React, { lazy, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' +import { makeStyles } from '@material-ui/styles' import { useQuery } from '@apollo/react-hooks' import { useTranslation } from 'react-i18next' @@ -10,6 +11,7 @@ import { NODES_QUERY } from '../gql' const Card = lazy(() => import('@material-ui/core/Card')) const CardContent = lazy(() => import('@material-ui/core/CardContent')) const Grid = lazy(() => import('@material-ui/core/Grid')) +const Box = lazy(() => import('@material-ui/core/Box')) const Typography = lazy(() => import('@material-ui/core/Typography')) const LinearProgress = lazy(() => import('@material-ui/core/LinearProgress')) const ProducersChart = lazy(() => import('../components/ProducersChart')) @@ -20,8 +22,52 @@ const TransactionsLineChart = lazy(() => import('../components/TransactionsLineChart') ) +const useStyles = makeStyles((theme) => ({ + leftColumn: { + alignContent: 'space-between', + paddingRight: 0, + '& .MuiCard-root': { + height: 125, + marginBottom: theme.spacing(2), + '& .MuiTypography-body1': { + marginBottom: theme.spacing(2) + } + }, + [theme.breakpoints.up('md')]: { + paddingRight: theme.spacing(2) + } + }, + rightColumn: { + paddingLeft: 0, + marginBottom: theme.spacing(2), + [theme.breakpoints.up('md')]: { + paddingLeft: theme.spacing(2) + } + }, + bottomRow: { + paddingTop: 0, + [theme.breakpoints.up('md')]: { + paddingTop: theme.spacing(1) + } + }, + boxIrreversible: { + display: 'flex', + alignItems: 'baseline', + paddingTop: theme.spacing(3), + '& .MuiTypography-body1': { + marginBottom: '0 !important', + letterSpacing: '0.09px', + color: 'rgba(0, 0, 0, 0.54)', + '& strong': { + color: '#212121' + } + } + } +})) + const Home = () => { const dispatch = useDispatch() + const classes = useStyles() const { data: { loading, producers } = {} } = useQuery(NODES_QUERY) const info = useSelector((state) => state.eos.info) const tps = useSelector((state) => state.eos.tps) @@ -94,23 +140,20 @@ const Home = () => { }, [dispatch]) return ( - - + + - - {t('currentProducer')} - + {t('currentProducer')} {info.head_block_producer} @@ -120,35 +163,27 @@ const Home = () => { - - {t('headBlock')} - + {t('headBlock')} {formatWithThousandSeparator(info.head_block_num)} + + + {`${t('lastBlock')}: `} + + {formatWithThousandSeparator( + info.last_irreversible_block_num + )} + + + - - - - - {t('lastBlock')} - - - {formatWithThousandSeparator( - info.last_irreversible_block_num - )} - - - - - - - + {loading && } - + @@ -162,7 +197,7 @@ const Home = () => { - + @@ -174,7 +209,7 @@ const Home = () => { - + ) }