Merge branch 'staging'

hasura/metadata/databases/default/tables/public_producers_list.yaml

@@ -1,3 +1,29 @@
 table:
   name: producers_list
   schema: public
+select_permissions:
+- permission:
+    allow_aggregations: true
+    columns:
+    - owner
+    - bpjson
+    - system
+    - candidate_name
+    - total_votes
+    - average
+    - transparency
+    - infrastructure
+    - trustiness
+    - community
+    - development
+    - ratings_cntr
+    - eden_average
+    - eden_transparency
+    - eden_infrastructure
+    - eden_trustiness
+    - eden_community
+    - eden_development
+    - eden_ratings_cntr
+    - general_info
+    filter: {}
+  role: anonymous

webapp/package.json

@@ -95,6 +95,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.13.8",
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-react": "^7.12.13",
+    "@welldone-software/why-did-you-render": "^6.2.1",
     "customize-cra": "^1.0.0",
     "env-cmd": "^10.1.0",
     "eslint": "^7.22.0",

webapp/src/components/Card/index.js

@@ -171,6 +171,7 @@ const CardData = ({
         {useRateButton && (
           <>
             <Button
+              className={classes.btn}
               aria-label='Add to comparison'
               onClick={toggleSelection(!isSelected, owner)}
               variant='outlined'
@@ -179,6 +180,7 @@ const CardData = ({
               {isSelected ? t('remove') : buttonLabel}
             </Button>
             <Button
+              className={classes.btn}
               component={forwardRef(function linkRef(props, ref) {
                 return (
                   <Link
@@ -199,6 +201,7 @@ const CardData = ({
         {!useRateButton && (
           <>
             <Button
+              className={classes.btn}
               variant='outlined'
               aria-label='Add to comparison'
               color={isSelected ? 'secondary' : 'primary'}

webapp/src/components/Card/styles.js

@@ -27,7 +27,7 @@ export default theme => ({
     background: theme.palette.surface.light
   },
   avatar: {
-    backgroundColor: theme.palette.surface.main
+    backgroundColor: `${theme.palette.surface.main} !important`
   },
   helpIcon: {
     width: '90%',
@@ -148,5 +148,8 @@ export default theme => ({
         width: '100% !important'
       }
     }
+  },
+  btn: {
+    height: 36
   }
 })

webapp/src/components/CompareTool/CompareGraphView.js

@@ -134,7 +134,7 @@ const CompareGraphView = ({
       <Box className={classes.wrapperDesktop}>
         <Box className={classes.bodyModalView}>
           <Box className={classes.chartWrapper}>
-            <PolarChart data={selected.map(bp => ({ data: bp?.data?.data }))} />
+            <PolarChart data={selected.map(bp => bp?.data)} />
           </Box>
           {isProxy && selected.length > 0 && (
             <Box className={classes.proxyVote}>

webapp/src/components/CompareTool/styles.js

@@ -265,7 +265,8 @@ export default theme => ({
   compareBodyListDesktop: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {
-      display: 'flex'
+      display: 'flex',
+      width: '60%'
     }
   },
   compareBodyListMobile: {
@@ -279,10 +280,14 @@ export default theme => ({
     textAlign: 'center'
   },
   bodyModalView: {
+    width: '100%',
     height: '100%',
     display: 'flex',
     justifyContent: 'flex-start',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    [theme.breakpoints.up('sm')]: {
+      width: '40%'
+    }
   },
   topModalView: {
     marginBottom: theme.spacing(2)
@@ -309,10 +314,10 @@ export default theme => ({
   chartWrapper: {
     width: '100%',
     '& .highcharts-container ': {
-      height: '300px !important',
+      height: '350px !important',
       width: '100% !important',
       '& > svg': {
-        marginTop: '-60px !important',
+        marginTop: '-40px !important',
         height: '400px !important',
         width: '100% !important'
       }

webapp/src/components/Sidebar/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { NavLink as RouterNavLink, useHistory } from 'react-router-dom'
+import { NavLink as RouterNavLink } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Drawer from '@mui/material/Drawer'
@@ -10,15 +10,16 @@ import MuiListItem from '@mui/material/ListItem'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import Typography from '@mui/material/Typography'
+import Avatar from '@mui/material/Avatar'
 import AccountIcon from '@mui/icons-material/AccountCircle'
 import { makeStyles } from '@mui/styles'
 import Scrollbar from 'react-perfect-scrollbar'
 import 'react-perfect-scrollbar/dist/css/styles.css'
 
 import { useSharedState } from '../../context/state.context'
+import LogIcon from '../../components/icon/logIcon'
 
 import styles from './styles'
-import eosrateImg from './eosrate256.png'
 
 const useStyles = makeStyles(styles)
 
@@ -81,30 +82,24 @@ ListItem.propTypes = {
 }
 
 const Sidebar = ({ routes, ...props }) => {
-  const history = useHistory()
+  const { t } = useTranslation('translations')
   const classes = useStyles()
   const [state] = useSharedState()
 
   return (
     <Drawer {...props}>
       <Box className={classes.brand}>
         {state.user ? (
-          <>
-            <AccountIcon className={classes.icon} />
-            <Typography className={classes.welcome}>Welcome</Typography>
-            <Typography className={classes.userName}>
-              {state.user?.accountName || ''}
-            </Typography>
-          </>
+          <AccountIcon className={classes.icon} />
         ) : (
-          <img
-            alt='eos rate'
-            src={eosrateImg}
-            onClick={() => history.push('/')}
-            width={256}
-            height={75}
-          />
+          <Avatar className={classes.icon}>
+            <LogIcon />
+          </Avatar>
         )}
+        <Typography className={classes.welcome}>{t('welcome')}</Typography>
+        <Typography className={classes.userName}>
+          {state.user?.accountName || t('loginToStart')}
+        </Typography>
       </Box>
       <Divider />
       <Scrollbar className={classes.scrollbar}>

webapp/src/components/Sidebar/styles.js

@@ -5,13 +5,7 @@ export default theme => ({
     justifyContent: 'center',
     flexDirection: 'column',
     height: 169,
-    '& img': {
-      height: 'fit-content',
-      width: '95%'
-    },
-    '& img:hover': {
-      cursor: 'pointer'
-    }
+    paddingTop: theme.spacing(5)
   },
   scrollbar: {
     backgroundColor: theme.palette.background.paper
@@ -79,7 +73,6 @@ export default theme => ({
     lineHeight: '23px',
     letterSpacing: '0.15px',
     color: 'rgba(0, 0, 0, 0.87)',
-    marginBottom: `${theme.spacing(1)} !important`,
     marginLeft: `${theme.spacing(2)} !important`
   },
   userName: {
@@ -93,6 +86,8 @@ export default theme => ({
   },
   icon: {
     fontSize: '48px !important',
+    width: '48px !important',
+    height: '48px !important',
     marginBottom: theme.spacing(2),
     marginLeft: theme.spacing(2)
   }

webapp/src/components/icon/logIcon.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const LogIcon = () => (
+  <svg width={24} height={36} fill='none'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M12 0a.669.669 0 0 1 .547.276l7.626 10.498a.694.694 0 0 1 .122.274l3.689 16.98a.555.555 0 0 1 .013.084.68.68 0 0 1-.311.636l-11.324 7.149A.665.665 0 0 1 12 36a.665.665 0 0 1-.362-.103L.315 28.749a.673.673 0 0 1-.299-.721l3.69-16.98a.68.68 0 0 1 .12-.274L11.454.276A.669.669 0 0 1 12 0zm-.676 2.741-6.22 8.56 1.543 4.88 4.677-8.316V2.74zM12 9.402l-4.799 8.532 3.024 9.567h3.55l3.024-9.567L12 9.402zm5.7 10.134L15.181 27.5h6.997l-4.48-7.965zm3.297 9.315h-6.242L13.2 33.774l7.798-4.923zM12 33.117l1.348-4.266h-2.696L12 33.117zm-3.182-5.616L6.3 19.536 1.82 27.5h6.998zm-6.545-3.545 3.473-6.174-1.263-3.997-2.21 10.171zm.73 4.895h6.242l1.556 4.923-7.799-4.923zm18.724-4.895-3.473-6.174 1.263-3.997 2.21 10.171zm-2.832-12.654-1.542 4.878-4.677-8.315V2.74l6.22 8.56z'
+      fill='#fff'
+    />
+  </svg>
+)
+
+export default LogIcon

webapp/src/context/models/producers.js

@@ -18,7 +18,7 @@ export const getProducers = async (limit, orderBy) => {
     fetchPolicy: 'network-only'
   })
 
-  if (!list.length) return []
+  if (!list.length) return { data: [], rows: 0 }
 
   const resultProducers = list.map(producer => {
     return getBpDataModeled({

webapp/src/context/state.context.js

@@ -209,11 +209,12 @@ export const useSharedState = () => {
     const filter = orderBy || state.sortBlockProducersBy.sort
     let blockProducers = bpList
 
-    if (!blockProducers)
+    if (!blockProducers) {
       blockProducers = await getProducers(limit, [
         { [filter]: 'desc_nulls_last' },
         { bpjson: 'desc' }
       ])
+    }
 
     const allBps = []
 
@@ -247,6 +248,12 @@ export const useSharedState = () => {
       blockProducer = await getProducer(item)
     }
 
+    if (!blockProducer) {
+      dispatch({ type: 'setProducer', blockProducer })
+
+      return
+    }
+
     const totalStats = getTotalStats({
       producerData: {
         ...blockProducer?.system?.parameters,

webapp/src/index.js

@@ -1,3 +1,5 @@
+import './wdyr'
+
 import React from 'react'
 import { render } from 'react-dom'
 import { UALProvider, withUAL } from '@eoscostarica/ual-reactjs-renderer'

webapp/src/language/en.json

@@ -37,7 +37,9 @@
 
     "loginUsername": "Username",
     "loginPassword": "Password",
-    "loginSignin": "Sign in",
+    "loginSignin": "Login",
+    "welcome": "Welcome",
+    "loginToStart": "Login to start rating.",
     "loginValidationUsername": "Username is required",
     "loginValidationPassword": "Password is required",
 

webapp/src/language/es.json

@@ -38,6 +38,8 @@
     "loginUsername": "Nombre de usuario",
     "loginPassword": "Contraseña",
     "loginSignin": "Ingresar",
+    "welcome": "Bienvenido",
+    "loginToStart": "Inicie sesión para comenzar a calificar.",
     "loginValidationUsername": "El nombre de usuario es requerido",
     "loginValidationPassword": "La contraseña es requerida",
 

webapp/src/language/ko.json

@@ -38,6 +38,8 @@
     "loginUsername": "사용자 이름",
     "loginPassword": "비밀번호",
     "loginSignin": "로그인",
+    "welcome": "환영하다",
+    "loginToStart": "평가를 시작하려면 로그인하세요.",
     "loginValidationUsername": "사용자이름이 필요합니다",
     "loginValidationPassword": "비밀번호가 필요합니다",
 

webapp/src/routes/BlockProducers/BlockProducerProfile.js

@@ -131,10 +131,10 @@ const BlockProducerProfile = () => {
   useEffect(() => {
     const getBpData = async () => {
       if (state.blockProducers.data.length) {
-        // TODO: do a double check if this is necessary
         const bp = state.blockProducers.data.find(
           ({ owner }) => owner === account
         )
+
         setProducer(bp, true)
         setProfileData(bp)
 
@@ -148,9 +148,7 @@ const BlockProducerProfile = () => {
   }, [account])
 
   useEffect(() => {
-    if (!state.blockProducer) {
-      return
-    }
+    if (!state.blockProducer) return
 
     setProfileData(state.blockProducer)
   }, [state.blockProducer])
@@ -307,7 +305,6 @@ const BlockProducerProfile = () => {
               <GeneralInformation
                 classes={classes}
                 producer={state.blockProducer}
-                // edenRate={edenRate}
               />
             </Grid>
             <Grid style={{ marginTop: '-20px' }} item xs={12}>
@@ -363,6 +360,8 @@ const BlockProducerProfile = () => {
   )
 }
 
+BlockProducerProfile.whyDidYouRender = true
+
 ProfileTitle.propTypes = {
   classes: PropTypes.object,
   hasInformation: PropTypes.bool,