Merge pull request #2345 from oasisprotocol/mz/homepage-recentBlock

Add recent blocks components

Author: buberdds

.changelog/2345.trivial.md

@@ -0,0 +1 @@
+Add recent blocks components

src/app/components/Blocks/RecentBlocks.tsx

@@ -0,0 +1,99 @@
+import { FC } from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
+import { RecentBlock } from '../../../oasis-nexus/api'
+import { useScreenSize } from '../../hooks/useScreensize'
+import { getLayerLabels } from '../../utils/content'
+import { RouteUtils } from '../../utils/route-utils'
+import { Table, TableCellAlign, TableColProps } from '../Table'
+import { TableCellAge } from '../TableCellAge'
+import { TableHeaderAge } from '../TableHeaderAge'
+import { BlockHashLink, BlockLink } from './BlockLink'
+
+export type TableBlockList = {
+  blocks: RecentBlock[]
+  total_count: number
+  is_total_count_clipped: boolean
+}
+
+type RecentBlocksProps = {
+  blocks?: RecentBlock[]
+  isLoading: boolean
+  limit: number
+}
+
+export const RecentBlocks: FC<RecentBlocksProps> = ({ isLoading, blocks, limit }) => {
+  const { t } = useTranslation()
+  const { isLaptop } = useScreenSize()
+  const layerLabels = getLayerLabels(t)
+  const tableColumns: TableColProps[] = [
+    { key: 'layer', content: t('common.layer') },
+    { key: 'height', content: t('common.height') },
+    {
+      key: 'hash',
+      content: t('common.hash'),
+    },
+    { key: 'age', content: <TableHeaderAge />, align: TableCellAlign.Right },
+    {
+      key: 'transaction',
+      content: isLaptop ? t('common.transactionAbbreviation') : t('common.transactions'),
+      align: TableCellAlign.Right,
+    },
+  ]
+
+  const tableRows = blocks?.map(block => {
+    return {
+      key: block.hash,
+      data: [
+        {
+          content: (
+            <Link asChild className="font-medium">
+              <RouterLink to={RouteUtils.getDashboardRoute({ layer: block.layer, network: block.network })}>
+                {layerLabels[block.layer]}
+              </RouterLink>
+            </Link>
+          ),
+          key: 'layer',
+        },
+
+        {
+          content: <BlockLink scope={{ network: block.network, layer: block.layer }} height={block.height} />,
+          key: 'block',
+        },
+        {
+          content: (
+            <BlockHashLink
+              scope={{ network: block.network, layer: block.layer }}
+              hash={block.hash}
+              height={block.height}
+              alwaysTrim
+            />
+          ),
+          key: 'hash',
+        },
+        {
+          align: TableCellAlign.Right,
+          content: <TableCellAge sinceTimestamp={block.timestamp} />,
+          key: 'timestamp',
+        },
+        {
+          align: TableCellAlign.Right,
+          content: block.num_transactions.toLocaleString(),
+          key: 'txs',
+        },
+      ],
+    }
+  })
+
+  return (
+    <Table
+      columns={tableColumns}
+      rows={tableRows}
+      rowsNumber={limit}
+      name={t('blocks.latest')}
+      isLoading={isLoading}
+      pagination={false}
+    />
+  )
+}

src/app/components/Blocks/index.tsx

@@ -1,5 +1,6 @@
 export * from './RuntimeBlocks'
 export * from './ConsensusBlocks'
+export * from './RecentBlocks'
 export enum BlocksTableType {
   Mobile,
   DesktopLite,

src/app/pages/HomePage/RecentBlocksCard.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Card, CardContent, CardHeader, CardTitle } from '@oasisprotocol/ui-library/src/components/cards'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
+import { useGetRecentBlocks } from '../../../oasis-nexus/api'
+import { RecentBlocks } from '../../components/Blocks/RecentBlocks'
+import { NUMBER_OF_ITEMS_ON_DASHBOARD } from '../../../config'
+import { ErrorBoundary } from '../../components/ErrorBoundary'
+
+const limit = NUMBER_OF_ITEMS_ON_DASHBOARD
+
+const RecentBlocksContent: FC = () => {
+  const recentBlocksQuery = useGetRecentBlocks('mainnet')
+  const recentBlocks = recentBlocksQuery.data?.data.blocks
+  const filteredBlocks = recentBlocks?.slice(0, 5)
+
+  return <RecentBlocks isLoading={recentBlocksQuery.isLoading} blocks={filteredBlocks} limit={limit} />
+}
+
+export const RecentBlocksCard: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Card variant="layout">
+      <CardHeader>
+        <CardTitle>
+          <Typography variant="h3">{t('blocks.latest')}</Typography>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ErrorBoundary light minHeight={400}>
+          <RecentBlocksContent />
+        </ErrorBoundary>
+      </CardContent>
+    </Card>
+  )
+}

src/locales/en/translation.json

@@ -106,6 +106,7 @@
     "hide": "Hide",
     "id": "ID",
     "invalidVotes": "Invalid votes",
+    "layer": "Layer",
     "localnet": "Localnet",
     "loadMore": "Load more",
     "lessThanAmount": "&lt;{{value, number}} <TickerLink />",