Merge pull request #1338 from edenia/dev

Production Release

hapi/src/config/eos.config.js

@@ -52,10 +52,11 @@ module.exports = {
     wax: 'wax'
   },
   healthCheckAPIs: [
-    { name: 'chain-api', api: '/v1/chain/get_info' },
-    { name: 'atomic-assets-api', api: '/atomicassets/v1/config' },
-    { name: 'hyperion-v2', api: '/v2/health' },
-    { name: 'light-api', api: '/api/status' }
+    { pattern: /^chain-api$/, api: '/v1/chain/get_info' },
+    { pattern: /^atomic-assets-api$/, api: '/atomicassets/v1/config' },
+    { pattern: /^hyperion-v2$/, api: '/v2/health' },
+    { pattern: /^light-api$/, api: '/api/status' },
+    { pattern: /^libre-.+$/, api: ''},
   ],
   rewardsToken: process.env.HAPI_REWARDS_TOKEN,
   eosRateUrl: process.env.HAPI_EOSRATE_GET_STATS_URL,

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

@@ -1,16 +1,19 @@
+const Joi = require('joi')
+
 const { eosConfig } = require('../config')
 const { axiosUtil } = require('../utils')
 
 module.exports = {
   method: 'POST',
   path: '/get-eos-rate',
-  handler: async () => {
+  handler: async ({ payload: { input } }) => {
     if (
       !eosConfig.eosRateUrl ||
       !eosConfig.eosRateUser ||
-      !eosConfig.eosRatePassword
+      !eosConfig.eosRatePassword ||
+      !input?.bp
     ) {
-      return []
+      return {}
     }
 
     const buf = Buffer.from(
@@ -27,9 +30,16 @@ module.exports = {
       }
     )
 
-    return data?.getRatesStats?.bpsStats || []
+    return data?.getRatesStats?.bpsStats?.find(rating => rating?.bp === input?.bp) || {}
   },
   options: {
+    validate: {
+      payload: Joi.object({
+        input: Joi.object({
+          bp: Joi.string().required()
+        }).required()
+      }).options({ stripUnknown: true })
+    },
     auth: false
   }
 }

hapi/src/services/producer.service.js

@@ -279,7 +279,7 @@ const getHealthCheckResponse = async endpoint => {
 
   if (endpoint?.features?.length) {
     for (const API of eosConfig.healthCheckAPIs) {
-      if (endpoint.features?.some(feature => feature === API.name)) {
+      if (endpoint.features?.some(feature => API.pattern?.test(feature))) {
         startTime = new Date()
         response = await producerUtil.getNodeInfo(endpoint.value, API.api)
 

hapi/src/services/stats.service.js

@@ -425,7 +425,7 @@ const syncTransactionsInfo = async () => {
   }
 
   payload.average_daily_transactions_in_last_week =
-    payload.transactions_in_last_day / 7 || 0
+    payload.transactions_in_last_week / 7 || 0
 
   const stats = await getStats()
 

hasura/metadata/actions.graphql

@@ -19,7 +19,9 @@ type Mutation {
 }
 
 type Query {
-  eosrate_stats: [EOSRateStats]
+  eosrate_stats(
+    bp: String!
+  ): EOSRateStats
 }
 
 type Query {

webapp/src/components/ComplianceBar/index.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import styled from 'styled-components'
+import { makeStyles } from '@mui/styles'
+import Typography from '@mui/material/Typography'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const PercentageBar = styled.div`
+    width: 80%;
+    height: 8px;
+    & div {
+      border-radius: ${props => props.theme.spacing(4)};
+      position: relative;
+      height: 100%;
+      max-width: 100%;
+    }
+    & > div + div {
+      width: calc( ${props => props.$percentage} * 100% );
+      top: -100%;
+      background-color: ${props =>
+        props.$percentage >= 0.8
+          ? props.theme.palette.success.main
+          : props.$percentage >= 0.5
+          ? props.theme.palette.warning.main
+          : props.theme.palette.error.main};
+    }
+  `
+
+const ComplianceBar = ({ pass, total }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.container}>
+      <Typography variant="body1">{`${pass}/${total}`}</Typography>
+      <PercentageBar $percentage={pass / total ?? 0}>
+        <div className={classes.bar}></div>
+        <div />
+      </PercentageBar>
+    </div>
+  )
+}
+
+export default ComplianceBar

webapp/src/components/ComplianceBar/styles.js

@@ -0,0 +1,10 @@
+export default (theme) => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  bar: {
+    backgroundColor: theme.palette.neutral.light,
+  },
+})

webapp/src/components/ContractTables/index.js

@@ -234,8 +234,8 @@ const ContractTables = ({
               color="primary"
               className={classes.refreshButton}
               onClick={() => handleSubmit()}
+              startIcon={<RefreshIcon />}
             >
-              <RefreshIcon />
               {t('refreshData')}
             </Button>
           )}

webapp/src/components/CountryFlag/index.js

@@ -25,7 +25,7 @@ const CountryFlag = ({ code = '' }) => {
 }
 
 CountryFlag.propTypes = {
-  code: PropTypes.string
+  code: PropTypes.string,
 }
 
 export default CountryFlag

webapp/src/components/CountryFlag/styles.js

@@ -1,6 +1,12 @@
 export default (theme) => ({
   country: {
     marginRight: theme.spacing(0.5),
-    marginLeft: theme.spacing(1)
-  }
+    marginLeft: theme.spacing(1),
+    '& .flag-icon': {
+      borderRadius: '50%',
+      width: '24px !important',
+      height: '24px !important',
+      top: '-5px',
+    },
+  },
 })

webapp/src/components/EmptyState/EmptyStateRow.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { makeStyles } from '@mui/styles'
+import { useTranslation } from 'react-i18next'
+
+import AlertSvg from 'components/Icons/Alert'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const EmptyStateRow = () => {
+  const classes = useStyles()
+  const { t } = useTranslation('producerCardComponent')
+
+  return (
+    <div className={`${classes.emptyStateContainer} ${classes.emptyStateRow}`}>
+      <AlertSvg />
+      <span>{t('emptyState')}</span>
+    </div>
+  )
+}
+
+export default EmptyStateRow

webapp/src/components/EmptyState/index.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import { makeStyles } from '@mui/styles'
+import { useTranslation } from 'react-i18next'
+import Link from '@mui/material/Link'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const EmptyState = () => {
+  const classes = useStyles()
+  const { t } = useTranslation('producerCardComponent')
+
+  return (
+    <div className={`${classes.emptyStateContainer} ${classes.emptyState}`}>
+      <img
+        className={classes.imgError}
+        src="/empty-states/Error.webp"
+        loading="lazy"
+        alt=""
+      />
+      <span>{t('emptyState')}</span>
+      <Link
+        component={RouterLink}
+        to="/undiscoverable-bps"
+        variant="contained"
+        color="secondary"
+        mt={2}
+      >
+        {t('viewList')}
+      </Link>
+    </div>
+  )
+}
+
+export default EmptyState

webapp/src/components/EmptyState/styles.js

@@ -0,0 +1,44 @@
+export default (theme) => ({
+  emptyState: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+    '& a': {
+      color: theme.palette.primary.main,
+      textDecorationColor: theme.palette.primary.main,
+    },
+  },
+  emptyStateContainer: {
+    '& span': {
+      width: '16em',
+      height: '45px',
+      fontSize: '1em',
+      fontWeight: 'bold',
+      fontStretch: 'normal',
+      fontStyle: 'normal',
+      letterSpacing: '-0.22px',
+      textAlign: 'center',
+      color: theme.palette.neutral.darker,
+    },
+  },
+  emptyStateRow: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '& span': {
+      marginTop: theme.spacing(1),
+    },
+  },
+  imgError: {
+    [theme.breakpoints.down('lg')]: {
+      width: '200px',
+      height: '120px',
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '260px',
+      height: '160px',
+    },
+    objectFit: 'contain',
+  },
+})

webapp/src/components/Header/index.js

@@ -1,7 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, lazy, Suspense } from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@mui/styles'
-import { Hidden, Menu, MenuItem, AppBar, IconButton } from '@mui/material'
+import Hidden from '@mui/material/Hidden'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import AppBar from '@mui/material/AppBar'
+import IconButton from '@mui/material/IconButton'
+import Skeleton from '@mui/material/Skeleton'
 import Button from '@mui/material/Button'
 import Toolbar from '@mui/material/Toolbar'
 import MenuIcon from '@mui/icons-material/Menu'
@@ -10,9 +15,10 @@ import { useTranslation } from 'react-i18next'
 import moment from 'moment'
 import 'moment/locale/es'
 
-import AuthButton from './AuthButton'
 import styles from './styles'
 
+const AuthButton = lazy(() => import('./AuthButton'))
+
 const useStyles = makeStyles(styles)
 
 const languages = [
@@ -72,9 +78,7 @@ const LanguageMenu = () => {
         onClick={toggleMenu}
         className={classes.btnLanguage}
       >
-        <span>
-          {currentLanguaje.toUpperCase()}
-        </span>
+        <span>{currentLanguaje.toUpperCase()}</span>
       </Button>
       <Menu
         id="menu-appbar"
@@ -96,7 +100,7 @@ const LanguageMenu = () => {
   )
 }
 
-const Header = ({ onDrawerToggle }) => {
+const Header = ({ onDrawerToggle, useConnectWallet = false }) => {
   const classes = useStyles()
 
   return (
@@ -118,7 +122,15 @@ const Header = ({ onDrawerToggle }) => {
           </div>
           <div className={classes.userBox}>
             <LanguageMenu />
-            <AuthButton classes={classes} />
+            {useConnectWallet && (
+              <Suspense
+                fallback={
+                  <Skeleton variant="rectangular" width={210} height={40} />
+                }
+              >
+                <AuthButton classes={classes} />
+              </Suspense>
+            )}
           </div>
         </div>
       </Toolbar>
@@ -128,6 +140,7 @@ const Header = ({ onDrawerToggle }) => {
 
 Header.propTypes = {
   onDrawerToggle: PropTypes.func,
+  useConnectWallet: PropTypes.bool,
 }
 
 export default Header

webapp/src/components/Icons/Alert.js

@@ -0,0 +1,27 @@
+import React from 'react'
+
+const AlertSvg = () => (
+  <svg
+    width="33"
+    height="33"
+    viewBox="0 0 33 33"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.6381 1H21.9145C22.3423 1 22.7258 1.16162 23.0159 1.45178L30.9945 9.43037L31.7016 8.72327L30.9945 9.43037C31.2847 9.72053 31.4463 10.104 31.4463 10.5317V21.755C31.4463 22.1827 31.2847 22.5662 30.9945 22.8563L23.1223 30.7286C22.8321 31.0187 22.4486 31.1803 22.0209 31.1803H10.6381C10.2104 31.1803 9.82692 31.0187 9.53676 30.7286L1.45177 22.6436C1.16161 22.3534 1 21.9699 1 21.5422V10.5317C1 10.1046 1.16122 9.72147 1.4507 9.43144C1.45106 9.43108 1.45142 9.43073 1.45177 9.43037L9.46219 1.47301C9.82531 1.15241 10.2248 1 10.6381 1Z"
+      stroke="#FF5F3B"
+      strokeWidth="2"
+    />
+    <path
+      d="M18.138 6.40551V11.7434C18.138 12.0993 18.138 12.4551 18.0848 12.8618L17.4997 16.6746C17.4465 16.9796 17.1806 17.2338 16.8082 17.2338H15.638C15.3189 17.2338 14.9998 16.9796 14.9466 16.6746L14.3615 12.8618C14.3083 12.506 14.3083 12.1501 14.3083 11.7434V6.40551C14.3083 6.04965 14.6274 5.74463 14.9997 5.74463H17.4997C17.8189 5.79547 18.138 6.04965 18.138 6.40551Z"
+      fill="#FF5F3B"
+    />
+    <path
+      d="M17.4997 25.2655H14.8933C14.4678 25.2655 14.0955 24.8932 14.0955 24.4677V21.8613C14.0955 21.4358 14.4678 21.0635 14.8933 21.0635H17.4997C17.9252 21.0635 18.2975 21.4358 18.2975 21.8613V24.4677C18.2975 24.8932 17.9252 25.2655 17.4997 25.2655Z"
+      fill="#FF5F3B"
+    />
+  </svg>
+)
+
+export default AlertSvg