Merge pull request #296 from pshenmic/feat/validator-page

Update Validator page
pshenmic · Oct 23, 2024 · 980b4d2 · 980b4d2
2 parents 824d974 + 751cfc8
commit 980b4d2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/packages/frontend/src/app/validator/[hash]/Validator.js b/packages/frontend/src/app/validator/[hash]/Validator.js
@@ -10,7 +10,7 @@ import BlocksList from '../../../components/blocks/BlocksList'
 import TransactionsList from '../../../components/transactions/TransactionsList'
 import BlocksChart from './BlocksChart'
 import Link from 'next/link'
-import { Identifier, DateBlock, Endpoint, IpAddress, InfoLine } from '../../../components/data'
+import { Identifier, DateBlock, Endpoint, IpAddress, InfoLine, Credits } from '../../../components/data'
 import { ValueContainer, PageDataContainer, InfoContainer } from '../../../components/ui/containers'
 import { HorisontalSeparator } from '../../../components/ui/separators'
 import { ValidatorCard } from '../../../components/validators'
@@ -205,7 +205,9 @@ function Validator ({ hash }) {
                 title={'Rewards This Epoch'}
                 value={(
                   <RateTooltip credits={validator.data?.epochReward} rate={rate.data}>
-                    <span>{validator.data?.epochReward}</span>
+                    <span>
+                      <Credits>{validator.data?.epochReward}</Credits>
+                    </span>
                   </RateTooltip>
                 )}
                 loading={validator.loading}
@@ -216,12 +218,21 @@ function Validator ({ hash }) {
                 title={'Total Rewards Earned'}
                 value={(
                   <RateTooltip credits={validator.data?.totalReward} rate={rate.data}>
-                    <span>{validator.data?.totalReward}</span>
+                    <span>
+                      <Credits>{validator.data?.totalReward}</Credits>
+                    </span>
                   </RateTooltip>
                 )}
                 loading={validator.loading}
                 error={validator.error || !(typeof validator.data?.totalReward === 'number')}
               />
+              <InfoLine
+                className={'ValidatorPage__InfoLine'}
+                title={'Blocks proposed'}
+                value={validator.data?.proposedBlocksAmount}
+                loading={validator.loading}
+                error={validator.error || typeof validator.data?.proposedBlocksAmount !== 'number'}
+              />
               <InfoLine
                 className={'ValidatorPage__InfoLine'}
                 title={'Last Proposed Block'}

diff --git a/packages/frontend/src/components/blocks/BlocksList.js b/packages/frontend/src/components/blocks/BlocksList.js
@@ -20,13 +20,13 @@ function BlocksList ({ blocks = [], columnsCount = 1, size = 'l', headerStyles =
         <GridItem className={'BlocksList__ColumnTitle'}>
           Height
         </GridItem>
-        <GridItem className={'BlocksList__ColumnTitle'}>
+        <GridItem className={'BlocksList__ColumnTitle BlocksList__ColumnTitle--Time'}>
           Time
         </GridItem>
         <GridItem className={'BlocksList__ColumnTitle BlocksList__ColumnTitle--Hash'}>
           Block Hash
         </GridItem>
-        <GridItem className={'BlocksList__ColumnTitle'}>
+        <GridItem className={'BlocksList__ColumnTitle BlocksList__ColumnTitle--Txs'}>
           TXs count
         </GridItem>
       </Grid>

diff --git a/packages/frontend/src/components/blocks/BlocksList.scss b/packages/frontend/src/components/blocks/BlocksList.scss
@@ -20,4 +20,25 @@
       text-align: right;
     }
   }
+
+  @media screen and (max-width: 620px) {
+    &__ColumnTitles {
+      grid-template-columns: 70px 90px calc(100% - 160px);
+    }
+
+    &__ColumnTitle {
+      &--Hash {
+        display: none;
+      }
+
+      &--Txs {
+        order: 0;
+        text-align: left !important;
+      }
+
+      &--Time {
+        order: 2;
+      }
+    }
+  }
 }