Add latest blocks section to homepage

Author: buberdds

src/app/components/Blocks/Blocks.tsx

@@ -0,0 +1,84 @@
+import { useTranslation } from 'react-i18next'
+import { RuntimeBlock } from '../../../oasis-nexus/api'
+import { Table, TableCellAlign, TableColProps } from '../../components/Table'
+import { paraTimesConfig } from '../../../config'
+import { BlockHashLink, BlockLink } from './BlockLink'
+import { useScreenSize } from '../../hooks/useScreensize'
+import { FC } from 'react'
+import { TableHeaderAge } from '../TableHeaderAge'
+import { TableCellAge } from '../TableCellAge'
+
+export type TableBlockList = {
+  blocks: RuntimeBlock[]
+  total_count: number
+  is_total_count_clipped: boolean
+}
+
+type BlocksProps = {
+  blocks?: RuntimeBlock[]
+  isLoading: boolean
+  limit: number
+}
+
+export const Blocks: FC<BlocksProps> = ({ isLoading, blocks, limit }) => {
+  const { t } = useTranslation()
+  const { isLaptop } = useScreenSize()
+  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 => {
+    const blockGasLimit = paraTimesConfig[block.layer]?.[block.network]?.blockGasLimit
+    if (!blockGasLimit) throw new Error('blockGasLimit is not configured')
+    return {
+      key: block.hash,
+      data: [
+        {
+          content: 'Consensus',
+          key: 'layer',
+        },
+
+        {
+          content: <BlockLink scope={block} height={block.round} />,
+          key: 'block',
+        },
+        {
+          content: <BlockHashLink scope={block} hash={block.hash} height={block.round} 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 './Blocks'
 export enum BlocksTableType {
   Mobile,
   DesktopLite,

src/app/pages/HomePage/LatestBlocks.tsx

@@ -0,0 +1,48 @@
+// TODO: Remove runtime related code from commit when API supports latest blocks for all layers
+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 { useGetRuntimeBlocks } from '../../../oasis-nexus/api'
+import { Blocks } from '../../components/Blocks/Blocks'
+import { NUMBER_OF_ITEMS_ON_DASHBOARD } from '../../../config'
+import { RuntimeScope } from '../../../types/searchScope'
+import { ErrorBoundary } from '../../components/ErrorBoundary'
+
+const limit = NUMBER_OF_ITEMS_ON_DASHBOARD
+
+const LatestBlocksContent: FC = () => {
+  const scope = { network: 'mainnet', layer: 'sapphire' } as RuntimeScope
+  const { network, layer } = scope
+  const blocksQuery = useGetRuntimeBlocks(
+    network,
+    layer,
+    { limit },
+    {
+      query: {
+        cacheTime: 0,
+      },
+    },
+  )
+
+  return <Blocks isLoading={blocksQuery.isLoading} blocks={blocksQuery.data?.data.blocks} limit={limit} />
+}
+
+export const LatestBlocks: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Card variant="layout" className="md:mb-0">
+      <CardHeader>
+        <CardTitle>
+          <Typography variant="h3">{t('blocks.latest')}</Typography>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ErrorBoundary light minHeight={400}>
+          <LatestBlocksContent />
+        </ErrorBoundary>
+      </CardContent>
+    </Card>
+  )
+}

src/app/pages/HomePage/index.tsx

@@ -7,6 +7,7 @@ import { RoflAppsCard } from './RoflAppsCard'
 import { FooterBanner } from './FooterBanner'
 import { HomeSearch } from './HomeSearch'
 import { Header } from 'app/components/PageLayout/Header'
+import { LatestBlocks } from './LatestBlocks'
 
 export const HomePage: FC = () => {
   const { network } = useSearchQueryNetworkParam()
@@ -18,6 +19,10 @@ export const HomePage: FC = () => {
       <Header sticky={false} />
       <div className="flex flex-col px-6 gap-6">
         <HomeSearch />
+        <div className="flex gap-6 flex-col md:flex-row">
+          <LatestBlocks />
+          <div>Placeholder</div>
+        </div>
         <RoflAppsCard />
         <FooterBanner />
       </div>