feat(webapp): add empty state when the bpjson is empty

edenia · Dec 7, 2022 · 7852d84 · 7852d84
1 parent c1a1097
commit 7852d84
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 3 deletions.
diff --git a/webapp/public/empty-states/Error.webp b/webapp/public/empty-states/Error.webp
diff --git a/webapp/src/components/InformationCard/index.js b/webapp/src/components/InformationCard/index.js
@@ -59,6 +59,21 @@ const InformationCard = ({ producer, rank, type }) => {
   }
 
   const BlockProducerInfo = () => {
+    if (producerOrg.healthStatus?.length <= 1) {
+      return (
+        <div className={`bodyWrapper ${classes.borderLine}`}>
+          <div className={classes.emptyState}>
+            <img
+              className={classes.imgError}
+              src="/empty-states/Error.webp"
+              alt=""
+            />
+            <span>{t('emptyState')}</span>
+          </div>
+        </div>
+      )
+    }
+
     return (
       <div className="bodyWrapper">
         <div className={clsx(classes.info, classes[type])}>
@@ -136,7 +151,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}>

diff --git a/webapp/src/components/InformationCard/styles.js b/webapp/src/components/InformationCard/styles.js
@@ -323,4 +323,25 @@ export default (theme) => ({
       marginLeft: theme.spacing(1),
     },
   },
+  emptyState: {
+    display: 'flex',
+    flexDirection: 'column',
+    '& span': {
+      width: '298px',
+      height: '45px',
+      fontSize: '20px',
+      fontWeight: 'bold',
+      fontStretch: 'normal',
+      fontStyle: 'normal',
+      lineHeight: '1.12',
+      letterSpacing: '-0.22px',
+      textAlign: 'center',
+      color: '#3d3d3dde'
+    }
+  },
+  imgError: {
+    width: '257.5px',
+    height: '160px',
+    objectFit: 'contain',
+  },
 })
diff --git a/webapp/src/language/en.json b/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",

diff --git a/webapp/src/language/es.json b/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",