feat(webapp): add yearly rewards and fix infinite skeleton

edenia · Feb 8, 2023 · 50337c6 · 50337c6
1 parent 5e9fdf9
commit 50337c6
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 34 deletions.
diff --git a/webapp/src/components/NonCompliantCard/index.js b/webapp/src/components/NonCompliantCard/index.js
@@ -85,10 +85,7 @@ const NonCompliantCard = ({ producer, stats }) => {
             >
               {t('bpJson')}:
             </Typography>
-            <VisitSite
-              title={t('openLink')}
-              url={producer.bp_json_url}
-            />
+            <VisitSite title={t('openLink')} url={producer.bp_json_url} />
           </div>
         )}
         <RowInfo
@@ -115,6 +112,21 @@ const NonCompliantCard = ({ producer, stats }) => {
           title={`${t('rewards')} (${eosConfig.tokenSymbol})`}
           value={`${formatWithThousandSeparator(producer.total_rewards, 0)}`}
         />
+        <Typography variant="overline">{t('yearlyRewards')}</Typography>
+        <RowInfo
+          title={`${t('rewards')} (USD)`}
+          value={`$${formatWithThousandSeparator(
+            producer.total_rewards * 365 * stats.tokenPrice,
+            0,
+          )}`}
+        />
+        <RowInfo
+          title={`${t('rewards')} (${eosConfig.tokenSymbol})`}
+          value={`${formatWithThousandSeparator(
+            producer.total_rewards * 365,
+            0,
+          )}`}
+        />
       </div>
     </>
   )

diff --git a/webapp/src/hooks/customHooks/useNonCompliantState.js b/webapp/src/hooks/customHooks/useNonCompliantState.js
@@ -53,6 +53,7 @@ const useNonCompliantState = () => {
     setStats({
       percentageRewards,
       dailyRewards: nonCompliantRewards,
+      yearlyRewards: nonCompliantRewards * 365,
       tokenPrice: setting?.token_price,
       quantity: nonCompliantBPs.length,
     })

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -148,6 +148,7 @@
   "blockProducersRoute": {},
   "rewardsDistributionRoute": {
     "dailyRewards": "Total Daily Rewards",
+    "yearlyRewards": "Total Yearly Rewards",
     "topCountryDailyRwards": "Top Country By Daily Rewards",
     "notAvailable": "Not available",
     "paidProducers": "Paid BPs Not Located",
@@ -262,6 +263,7 @@
     "lastClaimTime": "Last Claimed Time",
     "noInfo": "No info provided",
     "dailyRewards": "Daily Rewards",
+    "yearlyRewards": "Yearly Rewards",
     "invalidUrl": "Invalid URL",
     "viewList": "View undiscoverable BPs list",
     "bpJson": "BP.json",

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -154,6 +154,7 @@
   "blockProducersRoute": {},
   "rewardsDistributionRoute": {
     "dailyRewards": "Recompensas Diarias Totales",
+    "yearlyRewards": "Recompensas Anuales Totales",
     "topCountryDailyRwards": "País Superior Por Recompensas Diarias",
     "notAvailable": "No Disponible",
     "paidProducers": "Productores Pagados No Ubicados",
@@ -269,6 +270,7 @@
     "lastClaimTime": "Último reclamo",
     "noInfo": "No provee información",
     "dailyRewards": "Recompensas diarias",
+    "yearlyRewards": "Recompensas anuales",
     "invalidUrl": "URL inválida",
     "viewList": "Ver lista de BPs indetectables",
     "bpJson": "BP.json",

diff --git a/webapp/src/routes/NonCompliantBPs/RewardsStats.js b/webapp/src/routes/NonCompliantBPs/RewardsStats.js
@@ -29,27 +29,42 @@ const RewardsStats = ({ stats }) => {
       </div>
       <div className={`${classes.cardHeader} ${classes.cardShadow}`}>
         <div className={classes.rewardsCards}>
-          <Typography variant="h6" component="h4">{`${t(
-            'dailyRewards',
-          )} (USD)`}</Typography>
-          <Typography variant="h3" component="p" className={classes.statsText}>
-            {`${formatWithThousandSeparator(
-              stats.dailyRewards * stats.tokenPrice,
-              0,
-            )} USD`}
+          <Typography variant="h6" component="h4">
+            {t('dailyRewards')}
           </Typography>
+          <div className={classes.statsText}>
+            <Typography variant="h3" component="p" className={classes.price}>
+              {`${formatWithThousandSeparator(stats.dailyRewards, 0)} ${
+                eosConfig.tokenSymbol
+              }`}
+            </Typography>
+            <Typography variant="h3" component="p" className={classes.price}>
+              {`$ ${formatWithThousandSeparator(
+                stats.dailyRewards * stats.tokenPrice,
+                0,
+              )} USD`}
+            </Typography>
+          </div>
         </div>
       </div>
       <div className={`${classes.cardHeader} ${classes.cardShadow}`}>
         <div className={classes.rewardsCards}>
           <Typography variant="h6" component="h4">
-            {`${t('dailyRewards')} (${eosConfig.tokenSymbol})`}
-          </Typography>
-          <Typography variant="h3" component="p" className={classes.statsText}>
-            {`${formatWithThousandSeparator(stats.dailyRewards, 0)} ${
-              eosConfig.tokenSymbol
-            }`}
+            {t('dailyRewards')}
           </Typography>
+          <div className={classes.statsText}>
+            <Typography variant="h3" component="p" className={classes.price}>
+              {`${formatWithThousandSeparator(stats.yearlyRewards, 0)} ${
+                eosConfig.tokenSymbol
+              }`}
+            </Typography>
+            <Typography variant="h3" component="p" className={classes.price}>
+              {`$ ${formatWithThousandSeparator(
+                stats.yearlyRewards * stats.tokenPrice,
+                0,
+              )} USD`}
+            </Typography>
+          </div>
         </div>
       </div>
       <div className={`${classes.cardHeader} ${classes.cardShadow}`}>

diff --git a/webapp/src/routes/NonCompliantBPs/styles.js b/webapp/src/routes/NonCompliantBPs/styles.js
@@ -4,7 +4,10 @@ export default (theme) => ({
   },
   statsText: {
     textAlign: 'center',
-    marginTop: `${theme.spacing(6)} !important`,
+    marginTop: `${theme.spacing(4)} !important`,
+  },
+  price: {
+    paddingBottom: theme.spacing(2),
   },
   statsContainer: {
     display: 'flex',

diff --git a/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js b/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js
@@ -23,11 +23,7 @@ const useStyles = makeStyles((theme) =>
   styles(theme, lowestRewardsColor, highestRewardsColor),
 )
 
-const RewardsDistributionStats = ({
-  summary,
-  setting,
-  handlePopoverOpen,
-}) => {
+const RewardsDistributionStats = ({ summary, setting, handlePopoverOpen }) => {
   const classes = useStyles()
   const { t } = useTranslation('rewardsDistributionRoute')
 
@@ -130,27 +126,29 @@ const RewardsDistributionStats = ({
               )}
             </div>
             <Typography variant="h3" component="p">
-              {!summary?.producersWithoutProperBpJson.quantity > 0 && (
+              {!summary?.producersWithoutProperBpJson.quantity > 0 ?? (
                 <Skeleton variant="text" width="100%" animation="wave" />
               )}
-              {summary?.producersWithoutProperBpJson.quantity > 0 &&
+              {summary?.producersWithoutProperBpJson.quantity >= 0 &&
                 summary?.producersWithoutProperBpJson.quantity && (
                   <span>{summary?.producersWithoutProperBpJson.quantity}</span>
                 )}
             </Typography>
-            <Typography
-              variant="subtitle2"
-              component="p"
-              className={`${classes.textMargin} ${classes.marginPaidText}`}
-            >
-              {t('paidProducersText')}
-            </Typography>
+            {summary?.producersWithoutProperBpJson.rewards > 0 && (
+              <Typography
+                variant="subtitle2"
+                component="p"
+                className={`${classes.textMargin} ${classes.marginPaidText}`}
+              >
+                {t('paidProducersText')}
+              </Typography>
+            )}
             <Typography
               variant="subtitle1"
               component="p"
               className={classes.textMargin}
             >
-              {!summary?.producersWithoutProperBpJson.rewards > 0 && (
+              {!summary?.producersWithoutProperBpJson.rewards > 0 ?? (
                 <Skeleton variant="text" width="100%" animation="wave" />
               )}
               {summary?.producersWithoutProperBpJson.rewards > 0 && (