Merge pull request #1092 from edenia/feat/empty-state-1066

Feat/empty state 1066

hapi/src/services/eosio.service.js

@@ -233,15 +233,15 @@ const getChains = async producerUrl => {
 }
 
 const getProducerHealthStatus = bpJson => {
+  if (!bpJson || !Object.keys(bpJson).length) return []
+
   const healthStatus = []
 
   healthStatus.push({
     name: 'bpJson',
-    valid: !!bpJson && !!Object.keys(bpJson).length
+    valid: true
   })
 
-  if (!healthStatus[0].valid) return healthStatus
-
   healthStatus.push({
     name: 'organization_name',
     valid: !!bpJson.org?.candidate_name

hapi/src/services/producer.service.js

@@ -9,7 +9,7 @@ const statsService = require('./stats.service')
 const updateBPJSONs = async (producers = []) => {
   const upsertMutation = `
     mutation ($producers: [producer_insert_input!]!) {
-      insert_producer(objects: $producers, on_conflict: {constraint: producer_owner_key, update_columns: [ bp_json ]}) {
+      insert_producer(objects: $producers, on_conflict: {constraint: producer_owner_key, update_columns: [ bp_json, health_status ]}) {
         affected_rows,
       }
     }
@@ -21,7 +21,7 @@ const updateBPJSONs = async (producers = []) => {
 const updateProducers = async (producers = []) => {
   const upsertMutation = `
     mutation ($producers: [producer_insert_input!]!) {
-      insert_producer(objects: $producers, on_conflict: {constraint: producer_owner_key, update_columns: [ producer_key, unpaid_blocks,last_claim_time, url, location, producer_authority, is_active, total_votes, total_votes_percent, total_votes_eos, vote_rewards,block_rewards, total_rewards, health_status, endpoints, rank]}) {
+      insert_producer(objects: $producers, on_conflict: {constraint: producer_owner_key, update_columns: [ producer_key, unpaid_blocks,last_claim_time, url, location, producer_authority, is_active, total_votes, total_votes_percent, total_votes_eos, vote_rewards,block_rewards, total_rewards, endpoints, rank]}) {
         affected_rows,
         returning {
           id,

webapp/src/components/InformationCard/EmptyState.js

@@ -0,0 +1,30 @@
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+
+const EmptyState = ({ classes, t }) => {
+  return (
+    <div className={`${classes.centerWrapper} ${classes.borderLine}`}>
+      <div className={classes.emptyState}>
+        <div class={classes.horizontalLine}></div>
+        <img
+          className={classes.imgError}
+          src="/empty-states/Error.webp"
+          loading="lazy"
+          alt=""
+        />
+        <span>{t('emptyState')}</span>
+      </div>
+    </div>
+  )
+}
+
+EmptyState.propTypes = {
+  classes: PropTypes.object,
+  t: PropTypes.func,
+}
+
+EmptyState.defaultProps = {
+  classes: {},
+}
+
+export default memo(EmptyState)

webapp/src/components/InformationCard/index.js

@@ -19,6 +19,7 @@ import { eosConfig } from '../../config'
 import ProducerHealthIndicators from '../ProducerHealthIndicators'
 import NodesCard from '../NodeCard/NodesCard'
 
+import EmptyState from './EmptyState'
 import ProducerInformation from './ProducerInformation'
 import Nodes from './Nodes'
 import Social from './Social'
@@ -59,6 +60,9 @@ const InformationCard = ({ producer, rank, type }) => {
   }
 
   const BlockProducerInfo = () => {
+    if (producerOrg.healthStatus?.length <= 1)
+      return <EmptyState classes={classes} t={t}/>
+
     return (
       <div className="bodyWrapper">
         <div className={clsx(classes.info, classes[type])}>
@@ -136,7 +140,7 @@ const InformationCard = ({ producer, rank, type }) => {
     // eslint-disable-next-line
   }, [producer])
 
-  if(!producerOrg || !Object.keys(producerOrg)?.length) return <></>
+  if (!producerOrg || !Object.keys(producerOrg)?.length) return <></>
 
   return (
     <Card className={classes.root}>

webapp/src/components/InformationCard/styles.js

@@ -34,7 +34,7 @@ export default (theme) => ({
       flexDirection: 'row',
       '& .bodyWrapper': {
         flexDirection: 'row',
-        justifyContent: 'space-evenly',
+        justifyContent: 'space-between',
         width: '100%',
       },
       '& .MuiTypography-overline': {
@@ -75,8 +75,8 @@ export default (theme) => ({
     },
     [theme.breakpoints.up('lg')]: {
       padding: theme.spacing(0, 6),
-      width: 300,
-      maxWidth: 300,
+      width: 250,
+      minWidth: 250,
       justifyContent: 'center',
     },
   },
@@ -323,4 +323,45 @@ export default (theme) => ({
       marginLeft: theme.spacing(1),
     },
   },
+  centerWrapper: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  emptyState: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    '& span': {
+      width: '16em',
+      height: '45px',
+      fontSize: '1.2em',
+      fontWeight: 'bold',
+      fontStretch: 'normal',
+      fontStyle: 'normal',
+      lineHeight: '1.12',
+      letterSpacing: '-0.22px',
+      textAlign: 'center',
+      color: '#3d3d3dde',
+    },
+  },
+  horizontalLine: {
+    [theme.breakpoints.down('lg')]: {
+      width: '270px',
+      height: '1px',
+      margin: '15.2px 32px 40px 33px',
+      backgroundColor: '#e0e0e0',
+    },
+  },
+  imgError: {
+    [theme.breakpoints.down('lg')]: {
+      width: '200px',
+      height: '120px',
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '260px',
+      height: '160px',
+    },
+    objectFit: 'contain',
+  },
 })

webapp/src/language/en.json

@@ -251,7 +251,8 @@
     "noData": "No Data",
     "peer_keys": "Peer Key",
     "account_key": "Account Key",
-    "hs_bpJson": "BP Json"
+    "hs_bpJson": "BP Json",
+    "emptyState": "This block producer does not provide any information."
   },
   "nodeCardComponent": {
     "features": "Features",

webapp/src/language/es.json

@@ -257,7 +257,8 @@
     "noData": "No hay Datos",
     "peer_keys": "Peer",
     "account_key": "Cuenta",
-    "hs_bpJson": "BP Json"
+    "hs_bpJson": "BP Json",
+    "emptyState": "Este productor de bloques no proporciona ninguna información."
   },
   "nodeCardComponent": {
     "features": "Características",

webapp/src/routes/BlockProducers/styles.js

@@ -9,7 +9,6 @@ export default (theme) => ({
     display: 'flex',
     [theme.breakpoints.up('sm')]: {
       justifyContent: 'center',
-      flex: 'content',
     },
     [theme.breakpoints.down('sm')]: {
       flex: 'auto',