Merge pull request #1311 from edenia/dev

Production Release
edenia · Sep 19, 2023 · ffa6205 · ffa6205
2 parents 154857b + 019b462
commit ffa6205
Show file tree

Hide file tree

Showing 60 changed files with 338 additions and 575 deletions.
diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -31,9 +31,25 @@
     <meta property="og:type" content="website" />
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content="%PUBLIC_URL%/" />
+    <meta 
+      property="twitter:title" 
+      content="Antelope Tools network monitors real-time infrastructure data for multiple Antelope and EOSIO chains."
+    />
+    <meta 
+      property="twitter:description" 
+      content="Antelope Tools Dashboard is a network monitor featuring real-time data on block producer nodes and blockchain infrastructure for multiple Antelope and EOSIO chains."
+    />
+    <meta
+      property="twitter:image"
+      content="https://eos.antelope.tools/maskable_icon.png"
+    />
     <meta
       property="og:title"
-      content="Antelope Tools network monitor real-time infrastructure data for multiple Antelope and EOSIO chains."
+      content="Antelope Tools network monitors real-time infrastructure data for multiple Antelope and EOSIO chains."
+    />
+    <meta
+      property="og:description"
+      content="Antelope Tools Dashboard is a network monitor featuring real-time data on block producer nodes and blockchain infrastructure for multiple Antelope and EOSIO chains."
     />
     <meta
       property="og:image"
@@ -42,10 +58,6 @@
     <meta content="image/*" property="og:image:type" />
     <meta property="og:url" content="%PUBLIC_URL%/" />
     <meta property="og:site_name" content="Dashboard" />
-    <meta
-      property="og:description"
-      content="Antelope Tools Dashboard is a network monitor featuring real-time data on block producer nodes and blockchain infrastructure for multiple Antelope and EOSIO chains."
-    />
 
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <link

diff --git a/webapp/src/components/AccountInfo/index.js b/webapp/src/components/AccountInfo/index.js
@@ -9,6 +9,7 @@ import Accordion from '@mui/material/Accordion'
 import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import KeyOutlinedIcon from '@mui/icons-material/KeyOutlined';
 
 import RicardianContract from '../RicardianContract'
 import ContractActions from '../ContractActions'
@@ -31,7 +32,7 @@ const AccordionWrapper = ({ children, title, ...props }) => {
           root: classes.accordionSummary,
         }}
       >
-        <Typography variant="h6" color="primary">
+        <Typography component="h4" variant="h6" color="primary">
           {title}
         </Typography>
       </AccordionSummary>
@@ -116,7 +117,7 @@ const AccountInfo = ({
       {!!info && (
         <>
           <div className={classes.boxHeaderCard}>
-            <div className="identicon">
+            <div className={`identicon ${classes.cardPadding}`}>
               <div className={classes.iconBorder}>
                 <Identicon
                   string={info.account_name || 'default'}
@@ -125,6 +126,7 @@ const AccountInfo = ({
                 />
               </div>
               <Typography
+                component="h2"
                 variant="h4"
                 color="primary"
                 className={classes.accountName}
@@ -133,7 +135,7 @@ const AccountInfo = ({
               </Typography>
             </div>
             <div className={classes.border}>
-              <Typography variant="h6" color="primary" className="columTitle">
+              <Typography component="h3" variant="h6" color="primary" className="columTitle">
                 {t('resources')}
               </Typography>
               <div className="resourceUsage">
@@ -155,28 +157,26 @@ const AccountInfo = ({
               </div>
             </div>
             <div className={classes.border}>
-              <Typography variant="h6" color="primary" className="columTitle">
+              <Typography component="h3" variant="h6" color="primary" className="columTitle">
                 {t('keys')}
               </Typography>
               <div className="keys">
-                <dl>
-                  {info.keys.map((key) => (
-                    <span key={`account-key-${key.label}`}>
-                      <dt className={classes.keyItem}>
-                        <Typography>{key.label}</Typography>
-                        {key.value ? (
-                          <MoreInfoModal>
-                            <Typography className={classes.keyLabel}>
-                              {key.value}
-                            </Typography>
-                          </MoreInfoModal>
-                        ) : (
-                          <p>-</p>
-                        )}
-                      </dt>
-                    </span>
-                  ))}
-                </dl>
+                {info.keys.map(key => (
+                  <span key={`account-key-${key.label}`}>
+                    <div className={classes.keyItem}>
+                      <Typography>{key.label}</Typography>
+                      {key.value ? (
+                        <MoreInfoModal Icon={KeyOutlinedIcon}>
+                          <Typography className={classes.keyLabel}>
+                            {key.value}
+                          </Typography>
+                        </MoreInfoModal>
+                      ) : (
+                        <p>-</p>
+                      )}
+                    </div>
+                  </span>
+                ))}
               </div>
             </div>
           </div>

diff --git a/webapp/src/components/AccountInfo/styles.js b/webapp/src/components/AccountInfo/styles.js
@@ -28,7 +28,15 @@ export default (theme) => ({
     display: 'flex',
     textTransform: 'capitalize',
     justifyContent: 'space-between',
+    alignItems: 'center',
     minWidth: '100px',
+    paddingTop: theme.spacing(2),
+    '& p': {
+      marginRight: theme.spacing(2),
+    },
+    '& p:first-child': {
+      minWidth: '80px',
+    },
   },
   keyIcon: {
     marginRight: theme.spacing(1),
@@ -105,4 +113,9 @@ export default (theme) => ({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  cardPadding: {
+    [theme.breakpoints.up('lg')]: {
+      paddingRight: theme.spacing(4),
+    },
+  },
 })
diff --git a/webapp/src/components/ContractActions/index.js b/webapp/src/components/ContractActions/index.js
@@ -2,10 +2,9 @@ import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@mui/styles'
-import MenuItem from '@mui/material/MenuItem'
-import Select from '@mui/material/Select'
+import Autocomplete from '@mui/material/Autocomplete'
 import FormControl from '@mui/material/FormControl'
-import InputLabel from '@mui/material/InputLabel'
+import TextField from '@mui/material/TextField'
 
 import ContractActionForm from '../ContractActionForm'
 
@@ -32,25 +31,24 @@ const ContractActions = ({ accountName, abi, onSubmitAction }) => {
   return (
     <div className={classes.formControl}>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel id="actionNameLabel">{t('action')}</InputLabel>
-        <Select
-          labelId="actionNameLabel"
-          id="actionName"
-          value={action}
-          onChange={(event) => setAction(event.target.value)}
-          label={t('action')}
-        >
-          {actions.map((item) => (
-            <MenuItem key={`action-menu-item-${item}`} value={item}>
-              {item}
-            </MenuItem>
-          ))}
-        </Select>
+        <Autocomplete
+            id="actionName"
+            labelid="actionNameLabel"
+            options={actions}
+            value={action}
+            inputValue={action}
+            onChange={(_e, value) => setAction(value || '')}
+            onInputChange={(_e, value) => setAction(value || '')}
+            renderInput={params => (
+              <TextField {...params} label={t('action')} />
+            )}
+            noOptionsText={t('noOptions')}
+          />
       </FormControl>
 
       <ContractActionForm
         accountName={accountName}
-        action={action}
+        action={actions.find(element => element === action)}
         abi={abi}
         onSubmitAction={onSubmitAction}
       />

diff --git a/webapp/src/components/EndpointsTable/index.js b/webapp/src/components/EndpointsTable/index.js
@@ -87,6 +87,7 @@ const EndpointsTable = ({ producers, textLists }) => {
                       <MUITooltip title={t('linkToStats')} arrow>
                         <Link
                           aria-label={`Link to endpoints stats of ${producer.name}`}
+                          title={`${producer.name} endpoints stats`}
                           component={RouterLink}
                           state={{ producerId: producer.id }}
                           to="/endpoints-stats"

diff --git a/webapp/src/components/InformationCard/styles.js b/webapp/src/components/InformationCard/styles.js
@@ -61,6 +61,7 @@ export default (theme) => ({
     '& img': {
       width: 82,
       height: 82,
+      aspectRatio: '1 / 1',
     },
     '& .bpName': {
       fontSize: 28,

diff --git a/webapp/src/components/MoreInfoModal/index.js b/webapp/src/components/MoreInfoModal/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, memo } from 'react'
 import { makeStyles } from '@mui/styles'
 import { useTranslation } from 'react-i18next'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
@@ -10,7 +10,7 @@ import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
-const MoreInfoModal = ({ hideCloseButton, children }) => {
+const MoreInfoModal = ({ hideCloseButton, Icon, children }) => {
   const classes = useStyles()
   const { t } = useTranslation()
   const [anchorEl, setAnchorEl] = useState(null)
@@ -26,12 +26,21 @@ const MoreInfoModal = ({ hideCloseButton, children }) => {
   return (
     <>
       <MUITooltip title={t('moreInfo')} arrow placement="right">
-        <InfoOutlinedIcon
-          className={classes.clickableIcon}
-          onClick={(e) => {
-            handlePopoverOpen(e.target)
-          }}
-        />
+        {Icon ? (
+          <Icon
+            className={classes.clickableIcon}
+            onClick={(e) => {
+              handlePopoverOpen(e.target)
+            }}
+          />
+        ) : (
+          <InfoOutlinedIcon
+            className={classes.clickableIcon}
+            onClick={(e) => {
+              handlePopoverOpen(e.target)
+            }}
+          />
+        )}
       </MUITooltip>
       <Tooltip
         anchorEl={anchorEl}
@@ -45,8 +54,8 @@ const MoreInfoModal = ({ hideCloseButton, children }) => {
   )
 }
 
-Tooltip.defaultProps = {
+MoreInfoModal.defaultProps = {
   hideCloseButton: false,
 }
 
-export default MoreInfoModal
+export default memo(MoreInfoModal)
diff --git a/webapp/src/components/NodeCard/NodesCard.js b/webapp/src/components/NodeCard/NodesCard.js
@@ -6,6 +6,7 @@ import { makeStyles } from '@mui/styles'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
 import Chip from '@mui/material/Chip'
+import KeyOutlinedIcon from '@mui/icons-material/KeyOutlined';
 import 'flag-icon-css/css/flag-icons.css'
 
 import ChipList from '../ChipList'
@@ -51,7 +52,7 @@ const NodesCard = ({ nodes }) => {
         {Object.keys(keys).map((key, i) => (
           <div key={i} className={classes.keysContainer}>
             <p className={classes.bold}>{key}:</p>
-            <MoreInfoModal>
+            <MoreInfoModal Icon={KeyOutlinedIcon}>
               <p className={classes.keys}>{keys[key]}</p>
             </MoreInfoModal>
           </div>

diff --git a/webapp/src/components/NodesSummary/index.js b/webapp/src/components/NodesSummary/index.js
@@ -2,7 +2,6 @@
 import React, { memo, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useQuery } from '@apollo/client'
-import { useTranslation } from 'react-i18next'
 
 import { NODES_SUMMARY_QUERY } from '../../gql'
 import { eosConfig } from '../../config'
@@ -27,8 +26,6 @@ const NODES_ORDER = [
 
 const NodesSummary = ({ t }) => {
   const { data, loading } = useQuery(NODES_SUMMARY_QUERY)
-  const { i18n } = useTranslation('translations')
-  const [currentLanguaje, setCurrentLanguaje] = useState('')
   const [total, setTotal] = useState()
   const [nodes, setNodes] = useState()
 
@@ -65,10 +62,6 @@ const NodesSummary = ({ t }) => {
     setNodes(sortedNodes)
   }, [data])
 
-  useEffect(() => {
-    setCurrentLanguaje(i18n.language.substring(0, 2))
-  }, [i18n.language])
-
   return (
     <>
       <SimpleDataCard
@@ -89,11 +82,7 @@ const NodesSummary = ({ t }) => {
                 ? t(`tooltip.${node.type}`)
                 : ''
             }
-            title={
-              currentLanguaje === 'es'
-                ? t('nodes') + ' ' + t(node.type)
-                : t(node.type) + ' ' + t('nodes')
-            }
+            title={t('nodeType', { nodeType: node.type })}
             value={node.value || 0}
             loading={loading}
           />

diff --git a/webapp/src/components/PageTitle/index.js b/webapp/src/components/PageTitle/index.js
@@ -4,18 +4,26 @@ import PropTypes from 'prop-types'
 
 import { generalConfig } from '../../config'
 
-const PageTitle = ({ title }) => (
+const PageTitle = ({ title, metaTitle, metaDescription }) => (
   <Helmet>
     <title>{title}</title>
+    <meta name="title" content={metaTitle} />
+    <meta name="description" content={metaDescription} />
+    <meta property="og:title" content={metaTitle} />
+    <meta property="og:description" content={metaDescription} />
   </Helmet>
 )
 
 PageTitle.propTypes = {
-  title: PropTypes.string
+  title: PropTypes.string,
+  metaTitle: PropTypes.string,
+  metaDescription: PropTypes.string,
 }
 
 PageTitle.defaultProps = {
-  title: generalConfig.title
+  title: generalConfig.title,
+  metaTitle: '',
+  metaDescription: '',
 }
 
 export default PageTitle
diff --git a/webapp/src/components/ProducerAvatar/index.js b/webapp/src/components/ProducerAvatar/index.js
@@ -3,15 +3,20 @@ import PropTypes from 'prop-types'
 
 import { generalConfig } from '../../config'
 import { onImgError } from '../../utils'
-import isLogoValid from '../../utils/validate-image'
+import useBPLogoState from 'hooks/customHooks/useBPLogoState'
 
 const ProducerAvatar = ({ logo, name, classes }) => {
+  const defaultLogo = generalConfig.defaultProducerLogo
+  const [{ src, logoRef }, { handleLoad }] = useBPLogoState(logo, defaultLogo)
+
   return (
     <img
       loading="lazy"
       className={classes?.avatar}
-      src={isLogoValid(logo) ? logo : generalConfig.defaultProducerLogo}
-      onError={onImgError(generalConfig.defaultProducerLogo)}
+      src={src}
+      ref={logoRef}
+      onLoad={handleLoad}
+      onError={onImgError(defaultLogo)}
       alt={`${name} logo`}
     />
   )