Merge pull request #1558 from oasisprotocol/mz/syncSignedBlocks

Sync signed blocks with incoming API changes

.changelog/1558.trivial.md

@@ -0,0 +1 @@
+Sync signed blocks with incoming API changes

src/app/pages/ValidatorDetailsPage/SignedBlocks.tsx

@@ -3,15 +3,20 @@ import { useTranslation } from 'react-i18next'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
+import Skeleton from '@mui/material/Skeleton'
 import Typography from '@mui/material/Typography'
 import { COLORS } from 'styles/theme/colors'
 import { BlockStats } from '../../components/BlockStats'
+import { ValidatorSignedBlock } from '../../../oasis-nexus/api'
 
-export const SignedBlocks: FC = () => {
+type SignedBlocksProps = {
+  isLoading: boolean
+  isFetched: boolean
+  signedBlocks: ValidatorSignedBlock[] | undefined
+}
+
+export const SignedBlocks: FC<SignedBlocksProps> = ({ isLoading, isFetched, signedBlocks }) => {
   const { t } = useTranslation()
-  // TODO: provide data from the API and sync dataKey value
-  const data: any[] = []
-  const dataKey = ''
 
   return (
     <Card sx={{ flex: 1 }}>
@@ -22,26 +27,39 @@ export const SignedBlocks: FC = () => {
         sx={{ paddingBottom: 0 }}
       />
       <CardContent>
-        {data && data.length > 0 && (
-          <>
-            <Typography
-              sx={{
-                fontSize: '18px',
-                color: COLORS.grayMedium,
-                paddingBottom: 4,
-              }}
-            >
-              {t('validator.signedBlocksDescription')}
-            </Typography>
-            <BlockStats
-              data={data}
-              dataKey={dataKey}
-              legendLabels={{ success: t('validator.signed'), fail: t('validator.missed') }}
-              tooltipFormatter={value => t('validator.blockWithHeight', { height: value })}
-            />
-          </>
+        {isLoading && <Skeleton variant="rectangular" sx={{ height: 240 }} />}
+        {isFetched && signedBlocks && signedBlocks.length > 0 && (
+          <SignedBlocksContent signedBlocks={signedBlocks} />
         )}
       </CardContent>
     </Card>
   )
 }
+
+type SignedBlocksContentProps = {
+  signedBlocks: ValidatorSignedBlock[]
+}
+
+export const SignedBlocksContent: FC<SignedBlocksContentProps> = ({ signedBlocks }) => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <Typography
+        sx={{
+          fontSize: '18px',
+          color: COLORS.grayMedium,
+          paddingBottom: 4,
+        }}
+      >
+        {t('validator.signedBlocksDescription')}
+      </Typography>
+      <BlockStats
+        data={signedBlocks}
+        dataKey="height"
+        legendLabels={{ success: t('validator.signed'), fail: t('validator.missed') }}
+        tooltipFormatter={value => t('validator.blockWithHeight', { height: value })}
+      />
+    </>
+  )
+}

src/app/pages/ValidatorDetailsPage/index.tsx

@@ -42,7 +42,7 @@ export const ValidatorDetailsPage: FC = () => {
   const scope = useRequiredScopeParam()
   const { address } = useLoaderData() as AddressLoaderData
   const validatorQuery = useGetConsensusValidatorsAddress(scope.network, address)
-  const { isLoading, data } = validatorQuery
+  const { isLoading, isFetched, data } = validatorQuery
   const validator = data?.data.validators[0]
   const stats = data?.data.stats
   const transactionsLink = useHref('')
@@ -62,7 +62,7 @@ export const ValidatorDetailsPage: FC = () => {
           <StakingTrend address={address} scope={scope} />
         </StyledGrid>
         <StyledGrid item xs={12} md={6}>
-          <SignedBlocks />
+          <SignedBlocks isLoading={isLoading} isFetched={isFetched} signedBlocks={validator?.signed_blocks} />
         </StyledGrid>
       </Grid>
       <ProposedBlocks scope={scope} validator={validator} />