chore(webapp): fix margins, change the logo, and validate that the to…

…ken price exists
edenia · Jan 20, 2023 · a2a2d05 · a2a2d05
1 parent 9d0dc04
commit a2a2d05
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 85 deletions.
diff --git a/webapp/src/components/Icons/NonCompliant.js b/webapp/src/components/Icons/NonCompliant.js
diff --git a/webapp/src/components/Icons/index.js b/webapp/src/components/Icons/index.js
@@ -4,7 +4,6 @@ import RewardsDistributionSvg from './RewardsDistribution'
 import BPJsonSvg from './BPJson'
 import EndpointSvg from './Endpoint'
 import MissingBlocksSvg from './MissingBlocks'
-import NonCompliantSvg from './NonCompliant'
 import TopologySvg from './Topology'
 import RewardsSvg from './Rewards'
 
@@ -15,7 +14,6 @@ export {
   BPJsonSvg,
   EndpointSvg,
   MissingBlocksSvg,
-  NonCompliantSvg,
   TopologySvg,
   RewardsSvg,
 }
diff --git a/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js b/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js
@@ -36,7 +36,7 @@ const RewardsDistributionStats = ({
     <div className={classes.divMargin}>
       <div className={classes.cardHeader}>
         <Card className={`${classes.cardContent} ${classes.cardShadow}`}>
-          <CardContent className={classes.cards}>
+          <CardContent className={`${classes.cards} ${classes.totalDailyCard}`}>
             <Typography variant="h6" component="h4">
               {t('dailyRewards')}
             </Typography>
@@ -91,7 +91,7 @@ const RewardsDistributionStats = ({
                 {!nodes?.length > 0 && (
                   <Skeleton variant="text" width="100%" animation="wave" />
                 )}
-                {nodes?.length > 0 && setting?.token_price && (
+                {nodes?.length > 0 && (
                   <TokenToUSD
                     amount={summary.topCountryByRewards.rewards}
                     tokenPrice={setting?.token_price}
@@ -113,16 +113,18 @@ const RewardsDistributionStats = ({
               <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>
+              {!!summary?.producersWithoutProperBpJson.quantity && (
+                <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 && (
@@ -133,19 +135,17 @@ const RewardsDistributionStats = ({
                   <span>{summary?.producersWithoutProperBpJson.quantity}</span>
                 )}
             </Typography>
-            {!!summary?.producersWithoutProperBpJson.quantity && (
-              <Typography
-                variant="subtitle1"
-                component="p"
-                className={classes.textMargin}
-              >
-                <TokenToUSD
-                  amount={summary?.producersWithoutProperBpJson.rewards}
-                  tokenPrice={setting?.token_price}
-                />{' '}
-                {t('paidProducersText')}
-              </Typography>
-            )}
+            <Typography
+              variant="subtitle1"
+              component="p"
+              className={classes.textMargin}
+            >
+              <TokenToUSD
+                amount={summary?.producersWithoutProperBpJson.rewards}
+                tokenPrice={setting?.token_price}
+              />{' '}
+              {t('paidProducersText')}
+            </Typography>
           </CardContent>
         </Card>
       </div>
@@ -174,23 +174,25 @@ const RewardsDistributionStats = ({
                 <span className={classes.itemLabel}>{t('highestRewards')}</span>
               </Typography>
             </div>
-            {setting?.token_price && (
-              <Typography
-                variant="subtitle1"
-                component="p"
-                className={`${classes.textMargin} ${classes.center}`}
-              >
-                <span className={classes.exchangeRateLabel}>
-                  {`${t('exchangeRate')}: `}{' '}
-                </span>
+            <Typography
+              variant="subtitle1"
+              component="p"
+              className={`${classes.textMargin} ${classes.center}`}
+            >
+              <span className={classes.exchangeRateLabel}>
+                {`${t('exchangeRate')}: `}{' '}
+              </span>
+              {setting?.token_price ? (
                 <span>
                   {`1 ${eosConfig.tokenSymbol} = $${formatWithThousandSeparator(
                     setting.token_price,
                     4,
                   )}`}
                 </span>
-              </Typography>
-            )}
+              ) : (
+                <span>N/A</span>
+              )}
+            </Typography>
           </CardContent>
         </Card>
       </div>

diff --git a/webapp/src/routes/RewardsDistribution/TokenToUSD.js b/webapp/src/routes/RewardsDistribution/TokenToUSD.js
@@ -6,12 +6,9 @@ import { eosConfig } from '../../config'
 const TokenToUSD = ({ amount, tokenPrice }) => {
   return (
     <span>
-      {`${formatWithThousandSeparator(amount, 2)} ${
-        eosConfig.tokenSymbol
-      } / $${formatWithThousandSeparator(
-        amount * tokenPrice,
-        2,
-      )} USD`}
+      {`${formatWithThousandSeparator(amount, 2)} ${eosConfig.tokenSymbol}`}
+      {tokenPrice &&
+        `/ $${formatWithThousandSeparator(amount * tokenPrice, 2)} USD`}
     </span>
   )
 }

diff --git a/webapp/src/routes/RewardsDistribution/styles.js b/webapp/src/routes/RewardsDistribution/styles.js
@@ -56,6 +56,7 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
   },
   exchangeRateLabel: {
     fontWeight: 'bold',
+    marginRight: theme.spacing(1),
   },
   mapWrapper: {
     marginTop: theme.spacing(3),
@@ -89,11 +90,18 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
     },
   },
   cards: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
     '& .MuiTypography-h6': {
       display: 'flex',
       paddingBottom: theme.spacing(4),
     },
   },
+  totalDailyCard: {
+    justifyContent: 'flex-start',
+  },
   shadow: {
     '& .MuiPaper-root': {
       boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
@@ -102,7 +110,6 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
   },
   nonCompliantButton: {
     height: '30px',
-    width: '100px',
     fontSize: '12px !important',
     textAlign: 'center',
     borderRadius: '90px !important',
@@ -121,9 +128,9 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
     display: 'flex',
     flexWrap: 'wrap',
     justifyContent: 'space-between',
-    paddingBottom: theme.spacing(2),
+    paddingBottom: theme.spacing(1),
     '& .MuiTypography-h6': {
-      paddingBottom: 0,
+      width: 'calc(100% - 130px)',
     },
   },
 })
diff --git a/webapp/src/routes/index.js b/webapp/src/routes/index.js
@@ -6,6 +6,7 @@ import {
   Server as ServerIcon,
   Sliders as SlidersIcon,
   User as UserIcon,
+  UserX as UserXIcon,
   Info as InfoIcon,
   HelpCircle as HelpIcon,
   Inbox as InboxIcon,
@@ -22,7 +23,6 @@ import {
   MissingBlocksSvg,
   TopologySvg,
   RewardsSvg,
-  NonCompliantSvg
 } from '../components/Icons'
 
 const Home = lazy(() => import('./Home'))
@@ -64,7 +64,7 @@ const defaultRoutes = [
   },
   {
     name: 'nonCompliantBPs',
-    icon: <NonCompliantSvg />,
+    icon: <UserXIcon />,
     component: NonCompliantBPs,
     path: '/non-compliant-bps',
     exact: true,