From 3d5dd6785e6f7424b64ac93433c903c2d29de480 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Mon, 30 Oct 2023 17:07:20 -0600 Subject: [PATCH 01/14] feat(webapp): undiscoverable bps redesign --- .../src/components/NonCompliantCard/index.js | 163 ++++++------------ .../src/components/NonCompliantCard/styles.js | 59 +------ .../ProducersTable/UndiscoverableBPsTable.js | 60 +++++++ .../src/components/ProducersTable/styles.js | 8 +- webapp/src/routes/NonCompliantBPs/index.js | 15 +- webapp/src/routes/NonCompliantBPs/styles.js | 5 +- 6 files changed, 129 insertions(+), 181 deletions(-) create mode 100644 webapp/src/components/ProducersTable/UndiscoverableBPsTable.js diff --git a/webapp/src/components/NonCompliantCard/index.js b/webapp/src/components/NonCompliantCard/index.js index c156d637..8f92a99f 100644 --- a/webapp/src/components/NonCompliantCard/index.js +++ b/webapp/src/components/NonCompliantCard/index.js @@ -2,8 +2,8 @@ import React, { memo } from 'react' import { makeStyles } from '@mui/styles' import { useTranslation } from 'react-i18next' -import { Link as RouterLink } from 'react-router-dom' -import Link from '@mui/material/Link' +import LanguageIcon from '@mui/icons-material/Language' +import TableCell from '@mui/material/TableCell' import Typography from '@mui/material/Typography' import moment from 'moment' @@ -18,121 +18,72 @@ import styles from './styles' const useStyles = makeStyles(styles) -const NonCompliantCard = ({ producer, stats }) => { +const NonCompliantCard = ({ producer, tokenPrice }) => { const classes = useStyles() const { t } = useTranslation('producerCardComponent') const { healthLights } = generalConfig - const getHealthStatus = healthCheck => { + const getHealthStatus = (healthCheck) => { return healthCheck.valid ? healthLights.greenLight : healthLights.redLight } - const RowInfo = ({ title, value }) => { - return ( -
- - {title}: - - {value} -
- ) - } - return ( <> -
- - {producer.owner} - - {t('noInfo')} - - {t('bpJsonGenerator')} - -
-
- - {t('info')} - -
- - {t('website')}: - - {isValidUrl(producer.url) ? ( - <> - -
- - - -
- - ) : ( - {t('invalidUrl')} - )} -
- {isValidUrl(producer.url) && ( -
- - {t('bpJson')}: - - + + {producer.owner} + + + {isValidUrl(producer.url) ? ( +
+ + + +
+ ) : ( + {t('invalidUrl')} + )} + + + {isValidUrl(producer.bp_json_url) && ( + )} - - -
-
- - {t('dailyRewards')} - - - - - {t('yearlyRewards')} - - - -
+ + + {`${formatWithThousandSeparator( + producer.total_votes_eos, + 0, + )}`} + + + {`${moment(producer.last_claim_time).format( + 'll', + )}`} + + + {`$${formatWithThousandSeparator( + producer.total_rewards * tokenPrice, + 0, + )}`} + {`${formatWithThousandSeparator( + producer.total_rewards, + 0, + )} ${eosConfig.tokenSymbol}`} + + + {`$${formatWithThousandSeparator( + producer.total_rewards * 365 * tokenPrice, + 0, + )}`} + {`${formatWithThousandSeparator( + producer.total_rewards * 365, + 0, + )} ${eosConfig.tokenSymbol}`} + ) } diff --git a/webapp/src/components/NonCompliantCard/styles.js b/webapp/src/components/NonCompliantCard/styles.js index c44f680e..b43ffaeb 100644 --- a/webapp/src/components/NonCompliantCard/styles.js +++ b/webapp/src/components/NonCompliantCard/styles.js @@ -1,59 +1,8 @@ export default (theme) => ({ - flex: { + websiteContainer: { display: 'flex', - flexWrap: 'wrap', - '& .MuiTypography-body1': { - margin: theme.spacing(1), - }, - }, - title: { - fontWeight: 'bold !important', - fontSize: '12px !important', - textTransform: 'uppercase', - }, - bold: { - fontWeight: '600 !important', - }, - text: { - width: '60px', - }, - account: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - alignSelf: 'center', - [theme.breakpoints.down('sm')]: { - borderBottom: `1px solid ${theme.palette.neutral.main}`, - paddingBottom: theme.spacing(4), - }, - }, - content: { - width: '250px', - height: 'auto', - margin: '0px', - flexGrow: '1', - [theme.breakpoints.down('lg')]: { - width: '150px', - }, - [theme.breakpoints.down('sm')]: { - width: '100%', - }, - }, - borderLine: { - [theme.breakpoints.up('sm')]: { - marginTop: theme.spacing(3), - marginBottom: theme.spacing(3), - borderLeft: `1px solid ${theme.palette.neutral.main}`, - padding: theme.spacing(0, 3, 0), - }, - [theme.breakpoints.down('sm')]: { - marginLeft: theme.spacing(3), - }, - }, - lightIcon: { - '& svg': { - marginLeft: theme.spacing(2), - }, + flexWrap: 'nowrap', + justifyContent: 'space-between', + minWidth: '80px', }, }) diff --git a/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js b/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js new file mode 100644 index 00000000..fff2e287 --- /dev/null +++ b/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js @@ -0,0 +1,60 @@ +/* eslint camelcase: 0 */ +import React from 'react' +import PropTypes from 'prop-types' +import { makeStyles } from '@mui/styles' +import { useTranslation } from 'react-i18next' +import Table from '@mui/material/Table' +import TableBody from '@mui/material/TableBody' +import TableCell from '@mui/material/TableCell' +import TableContainer from '@mui/material/TableContainer' +import TableHead from '@mui/material/TableHead' +import TableRow from '@mui/material/TableRow' +import Typography from '@mui/material/Typography' + +import NonCompliantCard from '../../components/NonCompliantCard' + +import styles from './styles' + +const useStyles = makeStyles(styles) + +const UndiscoverableBPsTable = ({ producers, tokenPrice }) => { + const classes = useStyles() + const { t } = useTranslation('producerCardComponent') + const columnsNames = ['producerName','website','bpJson','votes','lastClaimTime','dailyRewards','yearlyRewards'] + + return ( + + + + + {columnsNames.map((name) => ( + + {t(name)} + + ))} + + + + {producers.map((producer, index) => ( + + + + ))} + +
+ + ) +} + +UndiscoverableBPsTable.propTypes = { + producers: PropTypes.array, +} + +UndiscoverableBPsTable.defaultProps = { + producers: [], +} + +export default UndiscoverableBPsTable diff --git a/webapp/src/components/ProducersTable/styles.js b/webapp/src/components/ProducersTable/styles.js index 41dd51f1..4998e472 100644 --- a/webapp/src/components/ProducersTable/styles.js +++ b/webapp/src/components/ProducersTable/styles.js @@ -20,6 +20,9 @@ export default (theme) => ({ backgroundColor: `${theme.palette.neutral.lighter}`, cursor: 'pointer', }, + '& a': { + margin: 0, + }, }, tableHead: { borderBottom: `2px solid ${theme.palette.primary.main} !important`, @@ -44,11 +47,6 @@ export default (theme) => ({ textOverflow: 'ellipsis', width: '140px', }, - [theme.breakpoints.down('md')]: { - '& > a': { - margin: 0, - }, - }, }, countryContainer: { [theme.breakpoints.down('md')]: { diff --git a/webapp/src/routes/NonCompliantBPs/index.js b/webapp/src/routes/NonCompliantBPs/index.js index 72711967..0c98554a 100644 --- a/webapp/src/routes/NonCompliantBPs/index.js +++ b/webapp/src/routes/NonCompliantBPs/index.js @@ -6,7 +6,7 @@ import LinearProgress from '@mui/material/LinearProgress' import useNonCompliantState from '../../hooks/customHooks/useNonCompliantState' import NoResults from '../../components/NoResults' -import NonCompliantCard from '../../components/NonCompliantCard' +import UndiscoverableBPsTable from '../../components/ProducersTable/UndiscoverableBPsTable' import styles from './styles' import RewardsStats from './RewardsStats' @@ -28,16 +28,9 @@ const NonCompliantBPs = () => {
-
- {items.map((producer, index) => ( - - - - ))} -
+ + + ) : ( diff --git a/webapp/src/routes/NonCompliantBPs/styles.js b/webapp/src/routes/NonCompliantBPs/styles.js index 5f6343dc..abe3f945 100644 --- a/webapp/src/routes/NonCompliantBPs/styles.js +++ b/webapp/src/routes/NonCompliantBPs/styles.js @@ -9,12 +9,9 @@ export default (theme) => ({ display: 'flex', flexFlow: 'row nowrap', gap: theme.spacing(6), - margin: `${theme.spacing(6)} 24px ${theme.spacing(4)}`, + margin: theme.spacing(6, 0, 4), paddingBottom: theme.spacing(4), borderBottom: `1px solid ${theme.palette.neutral.light}`, - [theme.breakpoints.down('lg')]: { - margin: theme.spacing(6, 0, 4), - }, [theme.breakpoints.down('sm')]: { flexFlow: 'row wrap', gap: theme.spacing(2), From 0d6675ee55167d558624d1e1bb9a2d60ee331664 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Tue, 31 Oct 2023 09:33:10 -0600 Subject: [PATCH 02/14] chore(webapp): remove unneeded styles and add rank to undiscoverable table --- .../src/components/NonCompliantCard/index.js | 9 ++++-- .../src/components/NonCompliantCard/styles.js | 3 +- .../ProducersTable/UndiscoverableBPsTable.js | 11 ++++++- .../routes/NonCompliantBPs/RewardsStats.js | 4 +-- webapp/src/routes/NonCompliantBPs/index.js | 9 +----- webapp/src/routes/NonCompliantBPs/styles.js | 30 ------------------- 6 files changed, 22 insertions(+), 44 deletions(-) diff --git a/webapp/src/components/NonCompliantCard/index.js b/webapp/src/components/NonCompliantCard/index.js index 8f92a99f..9c731232 100644 --- a/webapp/src/components/NonCompliantCard/index.js +++ b/webapp/src/components/NonCompliantCard/index.js @@ -30,7 +30,12 @@ const NonCompliantCard = ({ producer, tokenPrice }) => { return ( <> - {producer.owner} + {`${producer.rank}`} + + + + {producer.owner} + {isValidUrl(producer.url) ? ( @@ -49,7 +54,7 @@ const NonCompliantCard = ({ producer, tokenPrice }) => { )} - {isValidUrl(producer.bp_json_url) && ( + {isValidUrl(producer.url) && ( )} diff --git a/webapp/src/components/NonCompliantCard/styles.js b/webapp/src/components/NonCompliantCard/styles.js index b43ffaeb..ae95f7e0 100644 --- a/webapp/src/components/NonCompliantCard/styles.js +++ b/webapp/src/components/NonCompliantCard/styles.js @@ -1,8 +1,9 @@ export default (theme) => ({ websiteContainer: { display: 'flex', + gap: theme.spacing(4), flexWrap: 'nowrap', - justifyContent: 'space-between', + justifyContent: 'space-around', minWidth: '80px', }, }) diff --git a/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js b/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js index fff2e287..0a72745f 100644 --- a/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js +++ b/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js @@ -20,7 +20,16 @@ const useStyles = makeStyles(styles) const UndiscoverableBPsTable = ({ producers, tokenPrice }) => { const classes = useStyles() const { t } = useTranslation('producerCardComponent') - const columnsNames = ['producerName','website','bpJson','votes','lastClaimTime','dailyRewards','yearlyRewards'] + const columnsNames = [ + 'rank', + 'producerName', + 'website', + 'bpJson', + 'votes', + 'lastClaimTime', + 'dailyRewards', + 'yearlyRewards', + ] return ( diff --git a/webapp/src/routes/NonCompliantBPs/RewardsStats.js b/webapp/src/routes/NonCompliantBPs/RewardsStats.js index 38c3493e..07504298 100644 --- a/webapp/src/routes/NonCompliantBPs/RewardsStats.js +++ b/webapp/src/routes/NonCompliantBPs/RewardsStats.js @@ -17,7 +17,7 @@ const RewardsStats = ({ stats }) => { const { t } = useTranslation('rewardsDistributionRoute') return ( - <> +
@@ -62,7 +62,7 @@ const RewardsStats = ({ stats }) => {
- +
) } diff --git a/webapp/src/routes/NonCompliantBPs/index.js b/webapp/src/routes/NonCompliantBPs/index.js index 0c98554a..9918eeb9 100644 --- a/webapp/src/routes/NonCompliantBPs/index.js +++ b/webapp/src/routes/NonCompliantBPs/index.js @@ -1,6 +1,5 @@ /* eslint camelcase: 0 */ import React, { memo } from 'react' -import { makeStyles } from '@mui/styles' import Card from '@mui/material/Card' import LinearProgress from '@mui/material/LinearProgress' @@ -8,13 +7,9 @@ import useNonCompliantState from '../../hooks/customHooks/useNonCompliantState' import NoResults from '../../components/NoResults' import UndiscoverableBPsTable from '../../components/ProducersTable/UndiscoverableBPsTable' -import styles from './styles' import RewardsStats from './RewardsStats' -const useStyles = makeStyles(styles) - const NonCompliantBPs = () => { - const classes = useStyles() const [{ items, stats, loading }] = useNonCompliantState() return ( @@ -25,9 +20,7 @@ const NonCompliantBPs = () => { <> {!!items?.length && stats ? ( <> -
- -
+ diff --git a/webapp/src/routes/NonCompliantBPs/styles.js b/webapp/src/routes/NonCompliantBPs/styles.js index abe3f945..6c6d24a5 100644 --- a/webapp/src/routes/NonCompliantBPs/styles.js +++ b/webapp/src/routes/NonCompliantBPs/styles.js @@ -27,34 +27,4 @@ export default (theme) => ({ minHeight: '55px', } }, - bpsContainer: { - display: 'grid', - gap: theme.spacing(4, 6), - gridTemplateColumns: - 'repeat(auto-fit, minmax( min( calc( 50% - 100px ), 600px ), auto))', - margin: '0 24px', - [theme.breakpoints.down('lg')]: { - margin: '0', - gridTemplateColumns: 'repeat(auto-fit, minmax(500px, auto))', - }, - [theme.breakpoints.down('sm')]: { - gridTemplateColumns: 'repeat(auto-fit, minmax(200px, auto))', - }, - }, - card: { - display: 'flex', - flexFlow: 'row nowrap', - minHeight: '125px', - '& .MuiTypography-h6': { - display: 'flex', - }, - [theme.breakpoints.down('md')]: { - justifyContent: 'center', - }, - [theme.breakpoints.down('sm')]: { - flex: 'auto', - flexDirection: 'column', - padding: theme.spacing(3), - }, - }, }) From 1fead106b13146e08cb7ea8870ad1d7bdb306256 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Tue, 31 Oct 2023 10:16:20 -0600 Subject: [PATCH 03/14] refactor(webapp): add ProducersTable component and rename producers components --- .../src/components/NonCompliantCard/index.js | 18 ++--- .../MainSocialLinks.js | 0 .../ProducerRow.js | 0 .../ProducersTable.js} | 9 ++- .../ProducersList/UndiscoverableBPsTable.js | 41 +++++++++++ webapp/src/components/ProducersList/index.js | 28 ++++++++ .../styles.js | 0 .../ProducersTable/UndiscoverableBPsTable.js | 69 ------------------- webapp/src/routes/BlockProducers/index.js | 4 +- webapp/src/routes/NonCompliantBPs/index.js | 2 +- 10 files changed, 85 insertions(+), 86 deletions(-) rename webapp/src/components/{ProducersTable => ProducersList}/MainSocialLinks.js (100%) rename webapp/src/components/{ProducersTable => ProducersList}/ProducerRow.js (100%) rename webapp/src/components/{ProducersTable/index.js => ProducersList/ProducersTable.js} (87%) create mode 100644 webapp/src/components/ProducersList/UndiscoverableBPsTable.js create mode 100644 webapp/src/components/ProducersList/index.js rename webapp/src/components/{ProducersTable => ProducersList}/styles.js (100%) delete mode 100644 webapp/src/components/ProducersTable/UndiscoverableBPsTable.js diff --git a/webapp/src/components/NonCompliantCard/index.js b/webapp/src/components/NonCompliantCard/index.js index 9c731232..4a6cc5dd 100644 --- a/webapp/src/components/NonCompliantCard/index.js +++ b/webapp/src/components/NonCompliantCard/index.js @@ -23,7 +23,7 @@ const NonCompliantCard = ({ producer, tokenPrice }) => { const { t } = useTranslation('producerCardComponent') const { healthLights } = generalConfig - const getHealthStatus = (healthCheck) => { + const getHealthStatus = healthCheck => { return healthCheck.valid ? healthLights.greenLight : healthLights.redLight } @@ -70,24 +70,24 @@ const NonCompliantCard = ({ producer, tokenPrice }) => { )}`} - {`$${formatWithThousandSeparator( - producer.total_rewards * tokenPrice, - 0, - )}`} {`${formatWithThousandSeparator( producer.total_rewards, 0, )} ${eosConfig.tokenSymbol}`} - - {`$${formatWithThousandSeparator( - producer.total_rewards * 365 * tokenPrice, + producer.total_rewards * tokenPrice, 0, - )}`} + )} USD`} + + {`${formatWithThousandSeparator( producer.total_rewards * 365, 0, )} ${eosConfig.tokenSymbol}`} + {`$${formatWithThousandSeparator( + producer.total_rewards * 365 * tokenPrice, + 0, + )} USD`} ) diff --git a/webapp/src/components/ProducersTable/MainSocialLinks.js b/webapp/src/components/ProducersList/MainSocialLinks.js similarity index 100% rename from webapp/src/components/ProducersTable/MainSocialLinks.js rename to webapp/src/components/ProducersList/MainSocialLinks.js diff --git a/webapp/src/components/ProducersTable/ProducerRow.js b/webapp/src/components/ProducersList/ProducerRow.js similarity index 100% rename from webapp/src/components/ProducersTable/ProducerRow.js rename to webapp/src/components/ProducersList/ProducerRow.js diff --git a/webapp/src/components/ProducersTable/index.js b/webapp/src/components/ProducersList/ProducersTable.js similarity index 87% rename from webapp/src/components/ProducersTable/index.js rename to webapp/src/components/ProducersList/ProducersTable.js index 0cf19eb2..b85ceb6d 100644 --- a/webapp/src/components/ProducersTable/index.js +++ b/webapp/src/components/ProducersList/ProducersTable.js @@ -15,11 +15,10 @@ import Typography from '@mui/material/Typography' import { eosConfig } from '../../config' import styles from './styles' -import ProducerRow from './ProducerRow' const useStyles = makeStyles(styles) -const ProducersTable = ({ producers }) => { +const ProducersTable = ({ columnsNames, producers, RowComponent, RowProps }) => { const classes = useStyles() const navigate = useNavigate() const { t } = useTranslation('producerCardComponent') @@ -35,7 +34,7 @@ const ProducersTable = ({ producers }) => { - {eosConfig.producerColumns.map((name) => ( + {columnsNames.map((name) => ( {t(name)} @@ -43,7 +42,7 @@ const ProducersTable = ({ producers }) => { - {producers.map((producer, index) => ( + {producers.map((producer, index) => ( { handleClickRow(producer) @@ -51,7 +50,7 @@ const ProducersTable = ({ producers }) => { className={classes.tableRow} key={`bp-${producer?.owner}-${index}`} > - + ))} diff --git a/webapp/src/components/ProducersList/UndiscoverableBPsTable.js b/webapp/src/components/ProducersList/UndiscoverableBPsTable.js new file mode 100644 index 00000000..6de441b0 --- /dev/null +++ b/webapp/src/components/ProducersList/UndiscoverableBPsTable.js @@ -0,0 +1,41 @@ +/* eslint camelcase: 0 */ +import React from 'react' +import PropTypes from 'prop-types' + +import NonCompliantCard from '../../components/NonCompliantCard' + +import ProducersTable from './ProducersTable' + +const UndiscoverableBPsTable = ({ producers, tokenPrice }) => { + const columnsNames = [ + 'rank', + 'producerName', + 'website', + 'bpJson', + 'votes', + 'lastClaimTime', + 'dailyRewards', + 'yearlyRewards', + ] + + return ( + + ) +} + +UndiscoverableBPsTable.propTypes = { + producers: PropTypes.array, + tokenPrice: PropTypes.number, +} + +UndiscoverableBPsTable.defaultProps = { + producers: [], + tokenPrice: NaN, +} + +export default UndiscoverableBPsTable diff --git a/webapp/src/components/ProducersList/index.js b/webapp/src/components/ProducersList/index.js new file mode 100644 index 00000000..5ddc5c4a --- /dev/null +++ b/webapp/src/components/ProducersList/index.js @@ -0,0 +1,28 @@ +/* eslint camelcase: 0 */ +import React from 'react' +import PropTypes from 'prop-types' + +import { eosConfig } from '../../config' + +import ProducerRow from './ProducerRow' +import ProducersTable from './ProducersTable' + +const ProducersList = ({ producers }) => { + return ( + + ) +} + +ProducersList.propTypes = { + producers: PropTypes.array, +} + +ProducersList.defaultProps = { + producers: [], +} + +export default ProducersList diff --git a/webapp/src/components/ProducersTable/styles.js b/webapp/src/components/ProducersList/styles.js similarity index 100% rename from webapp/src/components/ProducersTable/styles.js rename to webapp/src/components/ProducersList/styles.js diff --git a/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js b/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js deleted file mode 100644 index 0a72745f..00000000 --- a/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js +++ /dev/null @@ -1,69 +0,0 @@ -/* eslint camelcase: 0 */ -import React from 'react' -import PropTypes from 'prop-types' -import { makeStyles } from '@mui/styles' -import { useTranslation } from 'react-i18next' -import Table from '@mui/material/Table' -import TableBody from '@mui/material/TableBody' -import TableCell from '@mui/material/TableCell' -import TableContainer from '@mui/material/TableContainer' -import TableHead from '@mui/material/TableHead' -import TableRow from '@mui/material/TableRow' -import Typography from '@mui/material/Typography' - -import NonCompliantCard from '../../components/NonCompliantCard' - -import styles from './styles' - -const useStyles = makeStyles(styles) - -const UndiscoverableBPsTable = ({ producers, tokenPrice }) => { - const classes = useStyles() - const { t } = useTranslation('producerCardComponent') - const columnsNames = [ - 'rank', - 'producerName', - 'website', - 'bpJson', - 'votes', - 'lastClaimTime', - 'dailyRewards', - 'yearlyRewards', - ] - - return ( - -
- - - {columnsNames.map((name) => ( - - {t(name)} - - ))} - - - - {producers.map((producer, index) => ( - - - - ))} - -
- - ) -} - -UndiscoverableBPsTable.propTypes = { - producers: PropTypes.array, -} - -UndiscoverableBPsTable.defaultProps = { - producers: [], -} - -export default UndiscoverableBPsTable diff --git a/webapp/src/routes/BlockProducers/index.js b/webapp/src/routes/BlockProducers/index.js index 7b5a6d2d..80a201ea 100644 --- a/webapp/src/routes/BlockProducers/index.js +++ b/webapp/src/routes/BlockProducers/index.js @@ -13,7 +13,7 @@ import SearchBar from '../../components/SearchBar' import useBlockProducerState from '../../hooks/customHooks/useBlockProducerState' import NoResults from '../../components/NoResults' import ProducersUpdateLog from '../../components/ProducersUpdateLog' -import ProducersTable from '../../components/ProducersTable' +import ProducersList from '../../components/ProducersList' import styles from './styles' @@ -80,7 +80,7 @@ const Producers = () => { ) : !!items?.length ? ( <> - + Date: Tue, 31 Oct 2023 10:38:50 -0600 Subject: [PATCH 04/14] chore(webapp): use a button to link to the undiscoverable bps page --- webapp/src/components/EmptyState/index.js | 26 ++++++++++++---------- webapp/src/components/EmptyState/styles.js | 2 +- webapp/src/routes/ProducerProfile/index.js | 2 +- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/webapp/src/components/EmptyState/index.js b/webapp/src/components/EmptyState/index.js index e933505e..0f22a430 100644 --- a/webapp/src/components/EmptyState/index.js +++ b/webapp/src/components/EmptyState/index.js @@ -1,14 +1,14 @@ import React from 'react' -import { Link as RouterLink } from 'react-router-dom' +import { Link } from 'react-router-dom' import { makeStyles } from '@mui/styles' import { useTranslation } from 'react-i18next' -import Link from '@mui/material/Link' +import Button from '@mui/material/Button' import styles from './styles' const useStyles = makeStyles(styles) -const EmptyState = () => { +const EmptyState = ({ isNonCompliant }) => { const classes = useStyles() const { t } = useTranslation('producerCardComponent') @@ -21,15 +21,17 @@ const EmptyState = () => { alt="" /> {t('emptyState')} - - {t('viewList')} - + {isNonCompliant && ( + + )}
) } diff --git a/webapp/src/components/EmptyState/styles.js b/webapp/src/components/EmptyState/styles.js index 7c4a1d31..891d2c1e 100644 --- a/webapp/src/components/EmptyState/styles.js +++ b/webapp/src/components/EmptyState/styles.js @@ -26,7 +26,7 @@ export default (theme) => ({ color: theme.palette.error.light }, '& span': { - marginTop: theme.spacing(1), + margin: theme.spacing(1, 4, 0), }, }, imgError: { diff --git a/webapp/src/routes/ProducerProfile/index.js b/webapp/src/routes/ProducerProfile/index.js index 5d9c1445..b0b78f0c 100644 --- a/webapp/src/routes/ProducerProfile/index.js +++ b/webapp/src/routes/ProducerProfile/index.js @@ -69,7 +69,7 @@ const ProducerProfile = () => { {producer?.hasEmptyBPJson && ( }> - + 0}/> )} From 985b719592202ea49b5836509824a1955e84cfba Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Tue, 31 Oct 2023 12:03:54 -0600 Subject: [PATCH 05/14] feat(webapp): add link to BP.json Generator --- .../src/components/NonCompliantCard/index.js | 42 ++++++++++--------- webapp/src/language/en.json | 1 - webapp/src/language/es.json | 1 - webapp/src/routes/BPJson/useBPJsonState.js | 17 +------- .../routes/NonCompliantBPs/RewardsStats.js | 16 +++++++ 5 files changed, 39 insertions(+), 38 deletions(-) diff --git a/webapp/src/components/NonCompliantCard/index.js b/webapp/src/components/NonCompliantCard/index.js index 4a6cc5dd..24cacace 100644 --- a/webapp/src/components/NonCompliantCard/index.js +++ b/webapp/src/components/NonCompliantCard/index.js @@ -37,27 +37,29 @@ const NonCompliantCard = ({ producer, tokenPrice }) => { {producer.owner} - - {isValidUrl(producer.url) ? ( -
- - - - -
- ) : ( + {isValidUrl(producer.url) ? ( + <> + +
+ + + + +
+ + + + + + ) : ( + {t('invalidUrl')} - )} - - - {isValidUrl(producer.url) && ( - - )} - + + )} {`${formatWithThousandSeparator( producer.total_votes_eos, diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json index e05dff78..4c228971 100644 --- a/webapp/src/language/en.json +++ b/webapp/src/language/en.json @@ -364,7 +364,6 @@ "average": "average rating", "ratings": "ratings", "lastClaimTime": "Last Claimed Time", - "noInfo": "No info provided", "dailyRewards": "Daily Rewards", "yearlyRewards": "Yearly Rewards", "invalidUrl": "Invalid URL", diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json index df2e2d02..fa3e9f60 100644 --- a/webapp/src/language/es.json +++ b/webapp/src/language/es.json @@ -365,7 +365,6 @@ "average": "calificación promedio", "ratings": "calificaciones", "lastClaimTime": "Último reclamo", - "noInfo": "No provee información", "dailyRewards": "Recompensas diarias", "yearlyRewards": "Recompensas anuales", "invalidUrl": "URL inválida", diff --git a/webapp/src/routes/BPJson/useBPJsonState.js b/webapp/src/routes/BPJson/useBPJsonState.js index b63314c3..0600eb60 100644 --- a/webapp/src/routes/BPJson/useBPJsonState.js +++ b/webapp/src/routes/BPJson/useBPJsonState.js @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react' -import { useLocation } from 'react-router-dom' import EosApi from 'eosjs-api' import axios from 'axios' import { useTranslation } from 'react-i18next' @@ -78,7 +77,7 @@ const getBpJSONChain = async (producer) => { } const useBPJsonState = () => { - const emptyBPJson = { + const initData = { account_name: '', org: { candidate_name: '', @@ -119,24 +118,10 @@ const useBPJsonState = () => { const [{ ual }] = useSharedState() const { t } = useTranslation('bpJsonRoute') - const location = useLocation() const [producer, setProducer] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [inconsistencyMessage, setInconsistencyMessage] = useState(null) - const [initData, setInitData] = useState(emptyBPJson) - - useEffect(() => { - setInitData((prev) => ({ - ...prev, - org: { - ...prev.org, - candidate_name: location.state?.owner || '', - website: location.state?.url, - }, - })) - window.history.replaceState({}, document.title) - }, [location, setInitData]) const handleOnSubmit = async (payload) => { if (!ual.activeUser || !payload) return diff --git a/webapp/src/routes/NonCompliantBPs/RewardsStats.js b/webapp/src/routes/NonCompliantBPs/RewardsStats.js index 07504298..31c9b039 100644 --- a/webapp/src/routes/NonCompliantBPs/RewardsStats.js +++ b/webapp/src/routes/NonCompliantBPs/RewardsStats.js @@ -1,7 +1,9 @@ /* eslint camelcase: 0 */ import React, { memo } from 'react' +import { Link } from 'react-router-dom' import { makeStyles } from '@mui/styles' import { useTranslation } from 'react-i18next' +import Button from '@mui/material/Button' import Typography from '@mui/material/Typography' import { eosConfig } from '../../config' @@ -62,6 +64,20 @@ const RewardsStats = ({ stats }) => { + +
+ +
+ ) } From 058b4188ebceb90f8a68f868bc591126b33a4f65 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Tue, 31 Oct 2023 16:24:53 -0600 Subject: [PATCH 06/14] chore(webapp): resize rank number, bp logo and adjust spacing --- webapp/src/components/NonCompliantCard/index.js | 2 +- webapp/src/components/NonCompliantCard/styles.js | 15 ++++++++++++--- webapp/src/components/ProducerName/styles.js | 4 ++-- .../src/components/ProducersList/ProducerRow.js | 2 +- webapp/src/components/ProducersList/styles.js | 2 +- 5 files changed, 17 insertions(+), 8 deletions(-) diff --git a/webapp/src/components/NonCompliantCard/index.js b/webapp/src/components/NonCompliantCard/index.js index 24cacace..e49bcca1 100644 --- a/webapp/src/components/NonCompliantCard/index.js +++ b/webapp/src/components/NonCompliantCard/index.js @@ -30,7 +30,7 @@ const NonCompliantCard = ({ producer, tokenPrice }) => { return ( <> - {`${producer.rank}`} + {`${producer.rank}`} diff --git a/webapp/src/components/NonCompliantCard/styles.js b/webapp/src/components/NonCompliantCard/styles.js index ae95f7e0..675fb7ed 100644 --- a/webapp/src/components/NonCompliantCard/styles.js +++ b/webapp/src/components/NonCompliantCard/styles.js @@ -1,9 +1,18 @@ export default (theme) => ({ websiteContainer: { display: 'flex', - gap: theme.spacing(4), + gap: theme.spacing(1), flexWrap: 'nowrap', - justifyContent: 'space-around', - minWidth: '80px', + justifyContent: 'center', + alignItems: 'center', + '& div > svg':{ + marginTop: theme.spacing(1), + }, + [theme.breakpoints.down('md')]:{ + gap: theme.spacing(2), + }, + [theme.breakpoints.down('sm')]:{ + gap: theme.spacing(8), + }, }, }) diff --git a/webapp/src/components/ProducerName/styles.js b/webapp/src/components/ProducerName/styles.js index c2095e2c..9dcf88b7 100644 --- a/webapp/src/components/ProducerName/styles.js +++ b/webapp/src/components/ProducerName/styles.js @@ -44,8 +44,8 @@ export default (theme) => ({ }, }, smallAvatar: { - width: '56px', - height: '56px', + width: '40px', + height: '40px', }, bigAvatar: { width: '104px', diff --git a/webapp/src/components/ProducersList/ProducerRow.js b/webapp/src/components/ProducersList/ProducerRow.js index 2a2cc961..4b1dd8c1 100644 --- a/webapp/src/components/ProducersList/ProducerRow.js +++ b/webapp/src/components/ProducersList/ProducerRow.js @@ -120,7 +120,7 @@ const ProducerRow = ({ producer, index }) => { {producer?.rank && eosConfig.producerColumns?.includes('rank') && ( {`${producer?.rank}`} diff --git a/webapp/src/components/ProducersList/styles.js b/webapp/src/components/ProducersList/styles.js index 4998e472..5c10c09c 100644 --- a/webapp/src/components/ProducersList/styles.js +++ b/webapp/src/components/ProducersList/styles.js @@ -14,7 +14,7 @@ export default (theme) => ({ }, tableRow: { '& .MuiTableCell-root': { - padding: `${theme.spacing(1, 2)} !important`, + padding: `${theme.spacing(2)} !important`, }, '&:hover': { backgroundColor: `${theme.palette.neutral.lighter}`, From d2dffc126a1ddbfaa9e26b457cd69cfad6e09d79 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Tue, 31 Oct 2023 16:39:39 -0600 Subject: [PATCH 07/14] feat(webapp): add text to the bp.json generator link --- webapp/src/language/en.json | 7 ++++++- webapp/src/language/es.json | 7 ++++++- webapp/src/routes/NonCompliantBPs/RewardsStats.js | 4 ++-- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json index 4c228971..53682df1 100644 --- a/webapp/src/language/en.json +++ b/webapp/src/language/en.json @@ -214,7 +214,12 @@ "rewards": "Rewards", "rewardsPercentage": "Percentage of rewards", "viewList": "View full list", - "paidProducersText": "Daily Rewards" + "paidProducersText": "Daily Rewards", + "publishBPDetails": "Publish BP Details", + "generateBPjson": "Generate a BP.json", + "tooltip": { + "generateBPjson": "BPs can easily create and update their bp.json for transparency." + } }, "nodesRoute": {}, "nodesDistributionRoute": {}, diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json index fa3e9f60..7c08551d 100644 --- a/webapp/src/language/es.json +++ b/webapp/src/language/es.json @@ -218,7 +218,12 @@ "rewards": "Recompensas", "rewardsPercentage": "Porcentaje de recompensas", "viewList": "Ver lista completa", - "paidProducersText": "Recompensas Diarias" + "paidProducersText": "Recompensas Diarias", + "publishBPDetails": "Publicar datos de BP", + "generateBPjson": "Generar un BP.json", + "tooltip": { + "generateBPjson": "BPs pueden fácilmente crear y actualizar sus bp.json para ser transparentes." + } }, "nodesRoute": {}, "nodesDistributionRoute": {}, diff --git a/webapp/src/routes/NonCompliantBPs/RewardsStats.js b/webapp/src/routes/NonCompliantBPs/RewardsStats.js index 31c9b039..97119474 100644 --- a/webapp/src/routes/NonCompliantBPs/RewardsStats.js +++ b/webapp/src/routes/NonCompliantBPs/RewardsStats.js @@ -64,7 +64,7 @@ const RewardsStats = ({ stats }) => { - +
From de1acab47fd8e221bfce38a85a8d9d802e157e96 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Tue, 31 Oct 2023 16:57:21 -0600 Subject: [PATCH 08/14] chore(webapp): remove transparency from tooltips --- webapp/src/theme/components.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/webapp/src/theme/components.js b/webapp/src/theme/components.js index 3eb9aa24..4967da2a 100644 --- a/webapp/src/theme/components.js +++ b/webapp/src/theme/components.js @@ -46,6 +46,13 @@ const components = { }, }, }, + MuiTooltip: { + styleOverrides: { + tooltip: { + backgroundColor: '#616161', + }, + }, + }, } export default components From a2deb744cf3b53f23f5fa7ab99508849559bae74 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Wed, 1 Nov 2023 10:01:48 -0600 Subject: [PATCH 09/14] refactor(webapp): format code and fix responsive design --- webapp/src/components/EmptyState/styles.js | 2 +- webapp/src/components/NonCompliantCard/styles.js | 6 +++--- webapp/src/components/ProducersList/ProducersTable.js | 11 ++++++++--- webapp/src/routes/NonCompliantBPs/RewardsStats.js | 2 +- webapp/src/routes/NonCompliantBPs/styles.js | 5 +++-- webapp/src/routes/ProducerProfile/index.js | 8 +++----- 6 files changed, 19 insertions(+), 15 deletions(-) diff --git a/webapp/src/components/EmptyState/styles.js b/webapp/src/components/EmptyState/styles.js index 891d2c1e..0cd34541 100644 --- a/webapp/src/components/EmptyState/styles.js +++ b/webapp/src/components/EmptyState/styles.js @@ -23,7 +23,7 @@ export default (theme) => ({ alignItems: 'center', justifyContent: 'center', '& svg': { - color: theme.palette.error.light + color: theme.palette.error.light, }, '& span': { margin: theme.spacing(1, 4, 0), diff --git a/webapp/src/components/NonCompliantCard/styles.js b/webapp/src/components/NonCompliantCard/styles.js index 675fb7ed..a7d652c2 100644 --- a/webapp/src/components/NonCompliantCard/styles.js +++ b/webapp/src/components/NonCompliantCard/styles.js @@ -5,13 +5,13 @@ export default (theme) => ({ flexWrap: 'nowrap', justifyContent: 'center', alignItems: 'center', - '& div > svg':{ + '& div > svg': { marginTop: theme.spacing(1), }, - [theme.breakpoints.down('md')]:{ + [theme.breakpoints.down('md')]: { gap: theme.spacing(2), }, - [theme.breakpoints.down('sm')]:{ + [theme.breakpoints.down('sm')]: { gap: theme.spacing(8), }, }, diff --git a/webapp/src/components/ProducersList/ProducersTable.js b/webapp/src/components/ProducersList/ProducersTable.js index b85ceb6d..359109b1 100644 --- a/webapp/src/components/ProducersList/ProducersTable.js +++ b/webapp/src/components/ProducersList/ProducersTable.js @@ -18,7 +18,12 @@ import styles from './styles' const useStyles = makeStyles(styles) -const ProducersTable = ({ columnsNames, producers, RowComponent, RowProps }) => { +const ProducersTable = ({ + columnsNames, + producers, + RowComponent, + RowProps, +}) => { const classes = useStyles() const navigate = useNavigate() const { t } = useTranslation('producerCardComponent') @@ -34,7 +39,7 @@ const ProducersTable = ({ columnsNames, producers, RowComponent, RowProps }) => - {columnsNames.map((name) => ( + {columnsNames.map(name => ( {t(name)} @@ -42,7 +47,7 @@ const ProducersTable = ({ columnsNames, producers, RowComponent, RowProps }) => - {producers.map((producer, index) => ( + {producers.map((producer, index) => ( { handleClickRow(producer) diff --git a/webapp/src/routes/NonCompliantBPs/RewardsStats.js b/webapp/src/routes/NonCompliantBPs/RewardsStats.js index 97119474..b256455b 100644 --- a/webapp/src/routes/NonCompliantBPs/RewardsStats.js +++ b/webapp/src/routes/NonCompliantBPs/RewardsStats.js @@ -67,7 +67,7 @@ const RewardsStats = ({ stats }) => {