feat(webapp): add eos ratings on bp info card

edenia · Dec 20, 2022 · 3354df6 · 3354df6
1 parent 4a7e55a
commit 3354df6
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 11 deletions.
diff --git a/webapp/src/components/InformationCard/EmptyState.js b/webapp/src/components/InformationCard/EmptyState.js
@@ -5,7 +5,7 @@ const EmptyState = ({ classes, t }) => {
   return (
     <div className={`${classes.centerWrapper} ${classes.borderLine}`}>
       <div className={classes.emptyState}>
-        <div class={classes.horizontalLine}></div>
+        <div className={classes.horizontalLine}></div>
         <img
           className={classes.imgError}
           src="/empty-states/Error.webp"

diff --git a/webapp/src/components/InformationCard/Stats.js b/webapp/src/components/InformationCard/Stats.js
@@ -1,10 +1,12 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
+import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
+import LaunchIcon from '@mui/icons-material/Launch'
 
 import { eosConfig, generalConfig } from '../../config'
 
-const Stats = ({ missedBlocks, t, classes, votes, rewards, type }) => {
+const Stats = ({ missedBlocks, t, classes, votes, rewards, eosRate }) => {
   if (eosConfig.networkName === 'lacchain') return <></>
 
   return (
@@ -21,6 +23,25 @@ const Stats = ({ missedBlocks, t, classes, votes, rewards, type }) => {
           }`}</Typography>
         </div>
 
+        {!!eosRate && (
+          <div className={classes.rowWrapper}>
+            <Typography variant="body1">{`${t('EOSRate')}: 
+              ${eosRate.average.toFixed(2)} (${eosRate.ratings_cntr} ${t('ratings')})`}
+            </Typography>
+            <Tooltip title={t('openLink')} arrow placement="left">
+              <LaunchIcon
+                onClick={() =>
+                  window.open(
+                    `${generalConfig.eosRateLink}/block-producers/${eosRate.bp}`,
+                    '_blank',
+                  )
+                }
+                className={classes.clickableIcon}
+              />
+            </Tooltip>
+          </div>
+        )}
+
         {!!generalConfig.historyEnabled && (
           <div className={classes.rowWrapper}>
             <Typography variant="body1">

diff --git a/webapp/src/components/InformationCard/index.js b/webapp/src/components/InformationCard/index.js
@@ -87,6 +87,7 @@ const InformationCard = ({ producer, rank, type }) => {
             producer.total_rewards || '0',
             0,
           )}
+          eosRate={producer?.eosRate}
         />
         <Nodes
           nodes={producerOrg.nodes}

diff --git a/webapp/src/components/InformationCard/styles.js b/webapp/src/components/InformationCard/styles.js
@@ -240,7 +240,7 @@ export default (theme) => ({
       marginRight: theme.spacing(1),
     },
     [theme.breakpoints.up('lg')]: {
-      minWidth: 150,
+      minWidth: 120,
     },
   },
   dd: {

diff --git a/webapp/src/gql/producer.gql.js b/webapp/src/gql/producer.gql.js
@@ -215,3 +215,13 @@ export const ALL_NODES_QUERY = gql`
     }
   }
 `
+
+export const EOSRATE_STATS_QUERY = gql`
+  query {
+    eosrate_stats {
+      bp
+      average
+      ratings_cntr
+    }
+  }
+`
diff --git a/webapp/src/hooks/customHooks/useBlockProducerState.js b/webapp/src/hooks/customHooks/useBlockProducerState.js
@@ -1,7 +1,11 @@
 import { useState, useEffect } from 'react'
-import { useSubscription } from '@apollo/client'
+import { useLazyQuery, useSubscription } from '@apollo/client'
 
-import { PRODUCERS_QUERY, BLOCK_TRANSACTIONS_HISTORY } from '../../gql'
+import {
+  PRODUCERS_QUERY,
+  BLOCK_TRANSACTIONS_HISTORY,
+  EOSRATE_STATS_QUERY,
+} from '../../gql'
 import { eosConfig } from '../../config'
 
 import useSearchState from './useSearchState'
@@ -23,15 +27,21 @@ const CHIPS_NAMES = ['all', ...eosConfig.producerTypes]
 
 const useBlockProducerState = () => {
   const [
-    { filters, pagination, loading, producers },
+    { filters, pagination, producers },
     { handleOnSearch, handleOnPageChange, setPagination },
   ] = useSearchState({ query: PRODUCERS_QUERY })
   const { data: dataHistory, loading: loadingHistory } = useSubscription(
     BLOCK_TRANSACTIONS_HISTORY,
   )
+  const [loadStats, { loading = true, data: { eosrate_stats: stats } = {} }] =
+    useLazyQuery(EOSRATE_STATS_QUERY)
   const [items, setItems] = useState([])
   const [missedBlocks, setMissedBlocks] = useState({})
 
+  useEffect(() => {
+    loadStats({})
+  }, [loadStats])
+
   const chips = CHIPS_NAMES.map((e) => {
     return { name: e }
   })
@@ -46,19 +56,36 @@ const useBlockProducerState = () => {
       ...prev,
       page: 1,
       ...filter,
-      where: { ...where, owner: prev.where?.owner, bp_json: { _is_null: false } },
+      where: {
+        ...where,
+        owner: prev.where?.owner,
+        bp_json: { _is_null: false },
+      },
     }))
   }, [filters, setPagination])
 
   useEffect(() => {
     let newItems = producers ?? []
 
     if (eosConfig.networkName === 'lacchain' && filters.name !== 'all') {
-      newItems = items.filter((producer) => producer.bp_json?.type === filters)
+      newItems = newItems.filter(
+        (producer) => producer.bp_json?.type === filters.name,
+      )
+    }
+
+    if (newItems?.length && stats?.length) {
+      newItems = newItems.map((producer) => {
+        return {
+          ...producer,
+          eosRate: Object.keys(producer.bp_json).length
+            ? stats.find((rate) => rate.bp === producer.owner)
+            : undefined,
+        }
+      })
     }
 
     setItems(newItems)
-  }, [filters, producers, items])
+  }, [filters.name, stats, producers])
 
   useEffect(() => {
     if (dataHistory?.stats.length) {

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -252,7 +252,8 @@
     "peer_keys": "Peer Key",
     "account_key": "Account Key",
     "hs_bpJson": "BP Json",
-    "emptyState": "This block producer does not provide any information."
+    "emptyState": "This block producer does not provide any information.",
+    "ratings": "ratings"
   },
   "nodeCardComponent": {
     "features": "Features",

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -258,7 +258,8 @@
     "peer_keys": "Peer",
     "account_key": "Cuenta",
     "hs_bpJson": "BP Json",
-    "emptyState": "Este productor de bloques no proporciona ninguna información."
+    "emptyState": "Este productor de bloques no proporciona ninguna información.",
+    "ratings": "valoraciones"
   },
   "nodeCardComponent": {
     "features": "Características",