chore(webapp): non-compliant improvements

edenia · Jan 19, 2023 · 9d0dc04 · 9d0dc04
1 parent 7f31cef
commit 9d0dc04
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 41 deletions.
diff --git a/webapp/src/components/Icons/NonCompliant.js b/webapp/src/components/Icons/NonCompliant.js
@@ -2,9 +2,9 @@ import React from 'react'
 
 const NonCompliant = () => (
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
+    width="26"
+    height="20"
+    viewBox="0 0 26 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >

diff --git a/webapp/src/components/NonCompliantCard/index.js b/webapp/src/components/NonCompliantCard/index.js
@@ -7,6 +7,7 @@ import moment from 'moment'
 
 import { eosConfig } from '../../config'
 import { formatWithThousandSeparator } from '../../utils'
+import isUrlValid from '../../utils/validate-url'
 import VisitSite from 'components/VisitSite'
 
 import styles from './styles'
@@ -31,17 +32,19 @@ const NonCompliantCard = ({ producer, stats }) => {
   return (
     <>
       <div className={`${classes.content} ${classes.account}`}>
-        <Typography variant="h3">{producer.owner}</Typography>
+        <Typography variant="h3" component="span">{producer.owner}</Typography>
         <Typography variant="body1">{t('noInfo')}</Typography>
       </div>
       <div className={`${classes.content} ${classes.borderLine}`}>
         <Typography variant="overline">{t('info')}</Typography>
-        <div className={classes.flex}>
-          <Typography variant="body1" className={classes.bold}>
-            {t('website')}:
-          </Typography>
-          <VisitSite title={t('openLink')} url={producer.url} />
-        </div>
+        {isUrlValid(producer.url) && (
+          <div className={classes.flex}>
+            <Typography variant="body1" className={classes.bold}>
+              {t('website')}:
+            </Typography>
+            <VisitSite title={t('openLink')} url={producer.url} />
+          </div>
+        )}
         <RowInfo
           title={`${t('votes')}`}
           value={`${formatWithThousandSeparator(producer.total_votes_eos, 0)}`}

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -259,7 +259,7 @@
     "emptyState": "This block producer does not provide any information.",
     "average": "average rating",
     "ratings": "ratings",
-    "lastClaimTime": "Last time claimed",
+    "lastClaimTime": "Last Claimed Time",
     "noInfo": "No info provided",
     "dailyRewards": "Daily Rewards"
   },

diff --git a/webapp/src/routes/NonCompliantBPs/RewardsStats.js b/webapp/src/routes/NonCompliantBPs/RewardsStats.js
@@ -19,16 +19,20 @@ const RewardsStats = ({ stats }) => {
     <>
       <div className={`${classes.cardHeader} ${classes.cardShadow}`}>
         <div className={classes.rewardsCards}>
-          <Typography variant="h6">{t('paidProducers')}</Typography>
-          <Typography variant="h3" className={classes.statsText}>
+          <Typography variant="h6" component="h4">
+            {t('paidProducers')}
+          </Typography>
+          <Typography variant="h3" component="p" className={classes.statsText}>
             {stats.quantity || 0}
           </Typography>
         </div>
       </div>
       <div className={`${classes.cardHeader} ${classes.cardShadow}`}>
         <div className={classes.rewardsCards}>
-          <Typography variant="h6">{`${t('dailyRewards')} (USD)`}</Typography>
-          <Typography variant="h3" className={classes.statsText}>
+          <Typography variant="h6" component="h4">{`${t(
+            'dailyRewards',
+          )} (USD)`}</Typography>
+          <Typography variant="h3" component="p" className={classes.statsText}>
             {`${formatWithThousandSeparator(
               stats.dailyRewards * stats.tokenPrice,
               0,
@@ -38,10 +42,10 @@ const RewardsStats = ({ stats }) => {
       </div>
       <div className={`${classes.cardHeader} ${classes.cardShadow}`}>
         <div className={classes.rewardsCards}>
-          <Typography variant="h6">
+          <Typography variant="h6" component="h4">
             {`${t('dailyRewards')} (${eosConfig.tokenSymbol})`}
           </Typography>
-          <Typography variant="h3" className={classes.statsText}>
+          <Typography variant="h3" component="p" className={classes.statsText}>
             {`${formatWithThousandSeparator(stats.dailyRewards, 0)} ${
               eosConfig.tokenSymbol
             }`}
@@ -50,8 +54,10 @@ const RewardsStats = ({ stats }) => {
       </div>
       <div className={`${classes.cardHeader} ${classes.cardShadow}`}>
         <div className={classes.rewardsCards}>
-          <Typography variant="h6">{t('rewardsPercentage')}</Typography>
-          <Typography variant="h3" className={classes.statsText}>
+          <Typography variant="h6" component="h4">
+            {t('rewardsPercentage')}
+          </Typography>
+          <Typography variant="h3" component="p" className={classes.statsText}>
             {`${stats.percentageRewards?.toFixed(2)}%`}
           </Typography>
         </div>

diff --git a/webapp/src/routes/NonCompliantBPs/styles.js b/webapp/src/routes/NonCompliantBPs/styles.js
@@ -29,6 +29,7 @@ export default (theme) => ({
     height: 'auto',
     margin: '0px',
     flexGrow: '1',
+    background: theme.palette.common.white,
     [theme.breakpoints.down('sm')]: {
       width: '200px',
     },
@@ -52,6 +53,7 @@ export default (theme) => ({
     flexFlow: 'row nowrap',
     minHeight: '125px',
     padding: theme.spacing(2),
+    background: theme.palette.common.white,
     '& .MuiTypography-h6': {
       display: 'flex',
     },

diff --git a/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js b/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js
@@ -37,8 +37,10 @@ const RewardsDistributionStats = ({
       <div className={classes.cardHeader}>
         <Card className={`${classes.cardContent} ${classes.cardShadow}`}>
           <CardContent className={classes.cards}>
-            <Typography variant="h6">{t('dailyRewards')}</Typography>
-            <Typography variant="h3">
+            <Typography variant="h6" component="h4">
+              {t('dailyRewards')}
+            </Typography>
+            <Typography variant="h3" component="p">
               {!nodes.length > 0 && (
                 <Skeleton variant="text" width="100%" animation="wave" />
               )}
@@ -49,7 +51,7 @@ const RewardsDistributionStats = ({
                 </span>
               )}
             </Typography>
-            <Typography variant="h3">
+            <Typography variant="h3" component="p">
               {!nodes.length > 0 && (
                 <Skeleton variant="text" width="100%" animation="wave" />
               )}
@@ -70,8 +72,10 @@ const RewardsDistributionStats = ({
       <div className={classes.cardHeader}>
         <Card className={`${classes.cardContent} ${classes.cardShadow}`}>
           <CardContent className={classes.cards}>
-            <Typography variant="h6">{t('topCountryDailyRwards')}</Typography>
-            <Typography variant="h3">
+            <Typography variant="h6" component="h4">
+              {t('topCountryDailyRwards')}
+            </Typography>
+            <Typography variant="h3" component="p">
               {!nodes.length > 0 && (
                 <Skeleton variant="text" width="100%" animation="wave" />
               )}
@@ -83,7 +87,7 @@ const RewardsDistributionStats = ({
               )}
             </Typography>
             <div className={`${classes.textMargin} ${classes.spaceBetween}`}>
-              <Typography variant="subtitle1">
+              <Typography variant="subtitle1" component="p">
                 {!nodes?.length > 0 && (
                   <Skeleton variant="text" width="100%" animation="wave" />
                 )}
@@ -105,30 +109,36 @@ const RewardsDistributionStats = ({
       <div className={classes.cardHeader}>
         <Card className={`${classes.cardContent} ${classes.cardShadow}`}>
           <CardContent className={classes.cards}>
-            <Typography variant="h6">{t('paidProducers')}</Typography>
-            <Typography variant="h3">
+            <div className={classes.notLocated}>
+              <Typography variant="h6" component="h4">
+                {t('paidProducers')}
+              </Typography>
+              <Button
+                className={classes.nonCompliantButton}
+                component={Link}
+                to="/non-compliant-bps"
+                variant="contained"
+                color="secondary"
+                mt={2}
+              >
+                {t('viewList')}
+              </Button>
+            </div>
+            <Typography variant="h3" component="p">
               {!nodes.length > 0 && (
                 <Skeleton variant="text" width="100%" animation="wave" />
               )}
               {nodes.length > 0 &&
                 summary?.producersWithoutProperBpJson.quantity && (
-                  <span className={classes.spaceBetween}>
-                    {summary?.producersWithoutProperBpJson.quantity}
-                    <Button
-                      className={classes.nonCompliantButton}
-                      component={Link}
-                      to="/non-compliant-bps"
-                      variant="contained"
-                      color="secondary"
-                      mt={2}
-                    >
-                      {t('viewList')}
-                    </Button>
-                  </span>
+                  <span>{summary?.producersWithoutProperBpJson.quantity}</span>
                 )}
             </Typography>
             {!!summary?.producersWithoutProperBpJson.quantity && (
-              <Typography variant="subtitle1" className={classes.textMargin}>
+              <Typography
+                variant="subtitle1"
+                component="p"
+                className={classes.textMargin}
+              >
                 <TokenToUSD
                   amount={summary?.producersWithoutProperBpJson.rewards}
                   tokenPrice={setting?.token_price}
@@ -145,6 +155,7 @@ const RewardsDistributionStats = ({
             <div className={classes.center}>
               <Typography
                 variant="subtitle1"
+                component="p"
                 className={classes.rewardsColorSchema}
               >
                 <span
@@ -154,6 +165,7 @@ const RewardsDistributionStats = ({
               </Typography>
               <Typography
                 variant="subtitle1"
+                component="p"
                 className={classes.rewardsColorSchema}
               >
                 <span
@@ -165,6 +177,7 @@ const RewardsDistributionStats = ({
             {setting?.token_price && (
               <Typography
                 variant="subtitle1"
+                component="p"
                 className={`${classes.textMargin} ${classes.center}`}
               >
                 <span className={classes.exchangeRateLabel}>

diff --git a/webapp/src/routes/RewardsDistribution/styles.js b/webapp/src/routes/RewardsDistribution/styles.js
@@ -102,6 +102,9 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
   },
   nonCompliantButton: {
     height: '30px',
+    width: '100px',
+    fontSize: '12px !important',
+    textAlign: 'center',
     borderRadius: '90px !important',
     backgroundColor: '#1565c0 !important',
   },
@@ -114,4 +117,13 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
     margin: `${theme.spacing(4, 0, 0)} !important`,
     wordBreak: 'break-word',
   },
+  notLocated: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    paddingBottom: theme.spacing(2),
+    '& .MuiTypography-h6': {
+      paddingBottom: 0,
+    },
+  },
 })
diff --git a/webapp/src/utils/index.js b/webapp/src/utils/index.js
@@ -6,3 +6,4 @@ export * from './get-blocknum-url'
 export * from './get-range-options'
 export * from './get-transaction-url'
 export * from './validate-image'
+export * from './validate-url'
diff --git a/webapp/src/utils/validate-url.js b/webapp/src/utils/validate-url.js
@@ -0,0 +1,8 @@
+const isUrlValid = (url) => {
+  const urlRegex =
+    /(http|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])/
+
+  return url && urlRegex.test(url)
+}
+
+export default isUrlValid