From 0f8dd04514291d24a6ab0e745cb2627dab072371 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Mon, 15 Jul 2024 16:31:01 +0200
Subject: [PATCH] Enable tx card in Consensus block details page

---
 .changelog/1479.trivial.md                    |  1 +
 .../TransactionsCard.tsx                      | 59 +++++++++++++++++++
 .../pages/ConsensusBlockDetailPage/index.tsx  |  2 +
 3 files changed, 62 insertions(+)
 create mode 100644 .changelog/1479.trivial.md
 create mode 100644 src/app/pages/ConsensusBlockDetailPage/TransactionsCard.tsx

diff --git a/.changelog/1479.trivial.md b/.changelog/1479.trivial.md
new file mode 100644
index 000000000..df7ffe575
--- /dev/null
+++ b/.changelog/1479.trivial.md
@@ -0,0 +1 @@
+Enable tx card in Consensus block details page
diff --git a/src/app/pages/ConsensusBlockDetailPage/TransactionsCard.tsx b/src/app/pages/ConsensusBlockDetailPage/TransactionsCard.tsx
new file mode 100644
index 000000000..4d8ff1c86
--- /dev/null
+++ b/src/app/pages/ConsensusBlockDetailPage/TransactionsCard.tsx
@@ -0,0 +1,59 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
+import { useGetConsensusTransactions } from '../../../oasis-nexus/api'
+import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
+import { ConsensusTransactions } from '../../components/Transactions'
+import { ErrorBoundary } from '../../components/ErrorBoundary'
+import { ScrollingCard } from '../../components/PageLayout/ScrollingCard'
+import { AppErrors } from '../../../types/errors'
+import { SearchScope } from '../../../types/searchScope'
+
+export const transactionsContainerId = 'transactions'
+
+const TransactionList: FC<{ scope: SearchScope; blockHeight: number }> = ({ scope, blockHeight }) => {
+  const txsPagination = useSearchParamsPagination('page')
+  const txsOffset = (txsPagination.selectedPage - 1) * NUMBER_OF_ITEMS_ON_SEPARATE_PAGE
+  const transactionsQuery = useGetConsensusTransactions(scope.network, {
+    block: blockHeight,
+    limit: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE,
+    offset: txsOffset,
+  })
+  const { isLoading, isFetched, data } = transactionsQuery
+  const transactions = data?.data.transactions
+
+  if (isFetched && txsPagination.selectedPage > 1 && !transactions?.length) {
+    throw AppErrors.PageDoesNotExist
+  }
+
+  return (
+    <ConsensusTransactions
+      transactions={transactions}
+      isLoading={isLoading}
+      limit={NUMBER_OF_ITEMS_ON_SEPARATE_PAGE}
+      pagination={{
+        selectedPage: txsPagination.selectedPage,
+        linkToPage: txsPagination.linkToPage,
+        totalCount: data?.data.total_count,
+        isTotalCountClipped: data?.data.is_total_count_clipped,
+        rowsPerPage: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE,
+      }}
+    />
+  )
+}
+
+export const TransactionsCard: FC<{ scope: SearchScope; blockHeight: number }> = ({ scope, blockHeight }) => {
+  const { t } = useTranslation()
+  return (
+    <ScrollingCard id={transactionsContainerId}>
+      <CardHeader disableTypography component="h3" title={t('common.transactions')} />
+      <CardContent>
+        <ErrorBoundary light={true}>
+          <TransactionList scope={scope} blockHeight={blockHeight} />
+        </ErrorBoundary>
+      </CardContent>
+    </ScrollingCard>
+  )
+}
diff --git a/src/app/pages/ConsensusBlockDetailPage/index.tsx b/src/app/pages/ConsensusBlockDetailPage/index.tsx
index b6eb223e1..c1865fc99 100644
--- a/src/app/pages/ConsensusBlockDetailPage/index.tsx
+++ b/src/app/pages/ConsensusBlockDetailPage/index.tsx
@@ -16,6 +16,7 @@ import { PageLayout } from '../../components/PageLayout'
 import { SubPageCard } from '../../components/SubPageCard'
 import { AdaptiveTrimmer } from '../../components/AdaptiveTrimmer/AdaptiveTrimmer'
 import { DashboardLink } from '../ParatimeDashboardPage/DashboardLink'
+import { TransactionsCard } from './TransactionsCard'
 
 export type BlockDetailConsensusBlock = Block & {
   markAsNew?: boolean
@@ -38,6 +39,7 @@ export const ConsensusBlockDetailPage: FC = () => {
       <SubPageCard featured title={t('common.block')}>
         <ConsensusBlockDetailView enableBlockNavigation isLoading={isLoading} block={block} />
       </SubPageCard>
+      {!!block?.num_transactions && <TransactionsCard scope={scope} blockHeight={blockHeight} />}
     </PageLayout>
   )
 }