Feat/add eos rating 666

.github/workflows/deploy-jungle-testnet.yaml

@@ -102,6 +102,9 @@ jobs:
           HAPI_EOS_EXCHANGE_RATE_API: https://api.coingecko.com/api/v3/simple/price?ids=eos&vs_currencies=usd
           HAPI_COINGECKO_API_TOKEN_ID: eos
           HAPI_REWARDS_TOKEN: EOS
+          HAPI_EOSRATE_GET_STATS_URL: ${{ secrets.HAPI_EOSRATE_GET_STATS_URL }}
+          HAPI_EOSRATE_GET_STATS_USER: ${{ secrets.HAPI_EOSRATE_GET_STATS_USER }}
+          HAPI_EOSRATE_GET_STATS_PASSWORD: ${{ secrets.HAPI_EOSRATE_GET_STATS_PASSWORD }}
           # hasura
           HASURA_GRAPHQL_ENABLE_CONSOLE: true
           HASURA_GRAPHQL_DATABASE_URL: ${{ secrets.HASURA_GRAPHQL_DATABASE_URL }}

.github/workflows/deploy-mainnet.yaml

@@ -100,6 +100,9 @@ jobs:
           HAPI_REWARDS_TOKEN: EOS
           HAPI_RE_CAPTCHA_PROJECT_ID: ${{ secrets.HAPI_RE_CAPTCHA_PROJECT_ID }}
           HAPI_PUBLIC_RE_CAPTCHA_KEY: ${{ secrets.HAPI_PUBLIC_RE_CAPTCHA_KEY }}
+          HAPI_EOSRATE_GET_STATS_URL: ${{ secrets.HAPI_EOSRATE_GET_STATS_URL }}
+          HAPI_EOSRATE_GET_STATS_USER: ${{ secrets.HAPI_EOSRATE_GET_STATS_USER }}
+          HAPI_EOSRATE_GET_STATS_PASSWORD: ${{ secrets.HAPI_EOSRATE_GET_STATS_PASSWORD }}
 
           # hasura
           HASURA_GRAPHQL_ENABLE_CONSOLE: 'true'

docker-compose.yaml

@@ -64,6 +64,9 @@ services:
       HAPI_RE_CAPTCHA_PROJECT_ID: '${HAPI_RE_CAPTCHA_PROJECT_ID}'
       HAPI_PUBLIC_RE_CAPTCHA_KEY: '${HAPI_PUBLIC_RE_CAPTCHA_KEY}'
       HAPI_CREATE_ACCOUNT_ACTION_NAME: '${HAPI_CREATE_ACCOUNT_ACTION_NAME}'
+      HAPI_EOSRATE_GET_STATS_URL: '${HAPI_EOSRATE_GET_STATS_URL}'
+      HAPI_EOSRATE_GET_STATS_USER: '${HAPI_EOSRATE_GET_STATS_USER}'
+      HAPI_EOSRATE_GET_STATS_PASSWORD: '${HAPI_EOSRATE_GET_STATS_PASSWORD}'
   hasura:
     container_name: '${STAGE}-${APP_NAME}-hasura'
     image: hasura/graphql-engine:v2.16.0.cli-migrations-v3

hapi/src/config/eos.config.js

@@ -1,15 +1,16 @@
 module.exports = {
   networkName: process.env.HAPI_EOS_API_NETWORK_NAME,
   apiEndpoints: process.env.HAPI_EOS_API_ENDPOINTS
-  ? JSON.parse(process.env.HAPI_EOS_API_ENDPOINTS)
-  : [],
+    ? JSON.parse(process.env.HAPI_EOS_API_ENDPOINTS)
+    : [],
   apiEndpoint: process.env.HAPI_EOS_API_ENDPOINTS
-  ? JSON.parse(process.env.HAPI_EOS_API_ENDPOINTS)[0]
-  : '',
+    ? JSON.parse(process.env.HAPI_EOS_API_ENDPOINTS)[0]
+    : '',
   stateHistoryPluginEndpoint:
     process.env.HAPI_EOS_STATE_HISTORY_PLUGIN_ENDPOINT,
   chainId: process.env.HAPI_EOS_API_CHAIN_ID,
-  eosChainId: 'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
+  eosChainId:
+    'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
   eosTopLimit: 150,
   baseAccount: process.env.HAPI_EOS_BASE_ACCOUNT,
   baseAccountPassword: process.env.HAPI_EOS_BASE_ACCOUNT_PASSWORD,
@@ -41,5 +42,8 @@ module.exports = {
   knownNetworks: {
     lacchain: 'lacchain'
   },
-  rewardsToken: process.env.HAPI_REWARDS_TOKEN
+  rewardsToken: process.env.HAPI_REWARDS_TOKEN,
+  eosRateUrl: process.env.HAPI_EOSRATE_GET_STATS_URL,
+  eosRateUser: process.env.HAPI_EOSRATE_GET_STATS_USER,
+  eosRatePassword: process.env.HAPI_EOSRATE_GET_STATS_PASSWORD
 }

hapi/src/routes/get-eos-rate-stats.route.js

@@ -0,0 +1,35 @@
+const { eosConfig } = require('../config')
+const { axiosUtil } = require('../utils')
+
+module.exports = {
+  method: 'POST',
+  path: '/get-eos-rate',
+  handler: async () => {
+    if (
+      !eosConfig.eosRateUrl ||
+      !eosConfig.eosRateUser ||
+      !eosConfig.eosRatePassword
+    ) {
+      return []
+    }
+
+    const buf = Buffer.from(
+      `${eosConfig.eosRateUser}:${eosConfig.eosRatePassword}`,
+      'utf8'
+    )
+    const auth = buf.toString('base64')
+
+    const { data } = await axiosUtil.instance.post(
+      eosConfig.eosRateUrl,
+      { ratesStatsInput: {} },
+      {
+        headers: { Authorization: `Basic ${auth}` }
+      }
+    )
+
+    return data?.getRatesStats?.bpsStats || []
+  },
+  options: {
+    auth: false
+  }
+}

hapi/src/routes/index.js

@@ -7,6 +7,7 @@ const transactionsRoute = require('./transactions.route')
 const createFaucetAccountRoute = require('./create-faucet-account.route')
 const transferFaucetTokensRoute = require('./transfer-faucet-tokens.route')
 const getProducersInfoRoute = require('./get-producers-info.route')
+const getEOSRateStats = require('./get-eos-rate-stats.route')
 
 module.exports = [
   healthzRoute,
@@ -17,5 +18,6 @@ module.exports = [
   transactionsRoute,
   createFaucetAccountRoute,
   transferFaucetTokensRoute,
-  getProducersInfoRoute
+  getProducersInfoRoute,
+  getEOSRateStats
 ]

hasura/metadata/actions.graphql

@@ -18,6 +18,10 @@ type Mutation {
   ): CreateAccountOutput
 }
 
+type Query {
+  eosrate_stats: [EOSRateStats]
+}
+
 type Mutation {
   getProducersInfo(
     bpParams: GetProducersInfoInput!
@@ -96,3 +100,14 @@ type GetProducersInfoOutput {
   producersInfo: [jsonb]
 }
 
+type EOSRateStats {
+  ratings_cntr: Int
+  transparency: Float
+  average: Float
+  infrastructure: Float
+  bp: String
+  development: Float
+  community: Float
+  trustiness: Float
+}
+

hasura/metadata/actions.yaml

@@ -20,6 +20,10 @@ actions:
       handler: '{{HASURA_GRAPHQL_ACTION_BASE_URL}}/create-faucet-account'
     permissions:
       - role: guest
+  - name: eosrate_stats
+    definition:
+      kind: ""
+      handler: '{{HASURA_GRAPHQL_ACTION_BASE_URL}}/get-eos-rate'
   - name: getProducersInfo
     definition:
       kind: synchronous
@@ -65,4 +69,5 @@ custom_types:
     - name: CreateAccountOutput
     - name: TransferFaucetTokensOutput
     - name: GetProducersInfoOutput
+    - name: EOSRateStats
   scalars: []

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"

webapp/src/components/InformationCard/ProducerInformation.js

@@ -5,8 +5,9 @@ import Typography from '@mui/material/Typography'
 import { Popover, Tooltip } from '@mui/material'
 import CountryFlag from '../CountryFlag'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
-import LaunchIcon from '@mui/icons-material/Launch'
+
 import CopyToClipboard from '../CopyToClipboard'
+import VisitSite from '../VisitSite'
 
 const ProducerInformation = ({ info, classes, t }) => {
   const [anchorEl, setAnchorEl] = useState(null)
@@ -49,12 +50,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('website')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => window.open(info?.website, '_blank')}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
+                <VisitSite title={t('openLink')} url={info?.website} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}
@@ -98,13 +94,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('email')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => (window.location = `mailto:${info.email}`)}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
-
+                <VisitSite title={t('openLink')} url={`mailto:${info.email}`} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}
@@ -148,12 +138,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('ownershipDisclosure')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => window.open(info?.ownership, '_blank')}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
+                <VisitSite title={t('openLink')} url={info?.ownership} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}
@@ -193,12 +178,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('codeofconduct')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => window.open(info?.code_of_conduct, '_blank')}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
+                <VisitSite title={t('openLink')} url={info?.code_of_conduct} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}
@@ -238,13 +218,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('chainResources')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => window.open(info?.chain, '_blank')}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
-
+                <VisitSite title={t('openLink')} url={info?.chain} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}

webapp/src/components/InformationCard/Stats.js

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types'
 import Typography from '@mui/material/Typography'
 
 import { eosConfig, generalConfig } from '../../config'
+import VisitSite from '../VisitSite'
 
-const Stats = ({ missedBlocks, t, classes, votes, rewards, type }) => {
+const Stats = ({ missedBlocks, t, classes, votes, rewards, eosRate }) => {
   if (eosConfig.networkName === 'lacchain') return <></>
 
   return (
-    <div className={classes.healthStatus}>
+    <div className={classes.stats}>
       <Typography variant="overline">{t('stats')}</Typography>
       <div className={classes.borderLine}>
         <div className={classes.rowWrapper}>
@@ -21,6 +22,20 @@ const Stats = ({ missedBlocks, t, classes, votes, rewards, type }) => {
           }`}</Typography>
         </div>
 
+        {!!eosRate && (
+          <div className={classes.rowWrapper}>
+            <Typography variant="body1" className={classes.ratings}>
+              {`${t('EOSRate')}: 
+              ${eosRate.average.toFixed(2)} ${t('average')} 
+              (${eosRate.ratings_cntr} ${t('ratings')})`}
+            </Typography>
+            <VisitSite
+              title={t('openLink')}
+              url={`${generalConfig.eosRateLink}/block-producers/${eosRate.bp}`}
+            />
+          </div>
+        )}
+
         {!!generalConfig.historyEnabled && (
           <div className={classes.rowWrapper}>
             <Typography variant="body1">

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}

webapp/src/components/InformationCard/styles.js

@@ -188,6 +188,11 @@ export default (theme) => ({
       minWidth: 150,
     },
   },
+  ratings: {
+    [theme.breakpoints.up('lg')]: {
+      whiteSpace: 'pre-line !important',
+    },
+  },
   boxLabel: {
     alignItems: 'baseline !important',
   },
@@ -223,6 +228,15 @@ export default (theme) => ({
       minWidth: 130,
     },
   },
+  stats: {
+    '& .MuiTypography-body1': {
+      margin: theme.spacing(1, 0),
+      display: 'flex',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    },
+  },
   social: {
     borderLeft: 'none',
     width: 100,
@@ -240,7 +254,7 @@ export default (theme) => ({
       marginRight: theme.spacing(1),
     },
     [theme.breakpoints.up('lg')]: {
-      minWidth: 150,
+      minWidth: 120,
     },
   },
   dd: {

webapp/src/components/VisitSite/index.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { makeStyles } from '@mui/styles'
+import Tooltip from '@mui/material/Tooltip'
+import LaunchIcon from '@mui/icons-material/Launch'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const VisitSite = ({ title, url, placement = 'left' }) => {
+  const classes = useStyles()
+
+  return (
+    <Tooltip title={title} arrow placement={placement}>
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={classes.link}
+      >
+        <LaunchIcon className={classes.clickableIcon} />
+      </a>
+    </Tooltip>
+  )
+}
+
+export default VisitSite

webapp/src/components/VisitSite/styles.js

@@ -0,0 +1,14 @@
+export default (theme) => ({
+  link: {
+    width: '24px',
+    height: '24px',
+    marginLeft: theme.spacing(3),
+  },
+  clickableIcon: {
+    color: 'black',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#1565c0',
+    },
+  },
+})

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
+    }
+  }
+`