Add view all bn

centrifuge · Jan 20, 2025 · 96d7e8a · 96d7e8a
1 parent 8e5fa0c
commit 96d7e8a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 48 deletions.
diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx
@@ -1,17 +1,6 @@
 import { AssetTransactionType, InvestorTransactionType, Pool, Token, TokenBalance } from '@centrifuge/centrifuge-js'
 import { Network, formatBalance, useGetExplorerUrl } from '@centrifuge/centrifuge-react'
-import {
-  AnchorButton,
-  Box,
-  Button,
-  IconExternalLink,
-  Pagination,
-  PaginationProvider,
-  Shelf,
-  Stack,
-  Text,
-  usePagination,
-} from '@centrifuge/fabric'
+import { AnchorButton, Box, Button, IconExternalLink, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useNavigate } from 'react-router'
 import { TransactionTypeChip } from '../../components/Portfolio/TransactionTypeChip'
@@ -26,6 +15,7 @@ type TransactionsProps = {
   txTypes?: InvestorTransactionType[]
   address?: string
   trancheId?: string
+  title?: string
 }
 
 type Row = {
@@ -41,9 +31,11 @@ type Row = {
   network: Network
 }
 
-export function Transactions({ onlyMostRecent, narrow, txTypes, address, trancheId }: TransactionsProps) {
+export function Transactions({ onlyMostRecent, narrow, txTypes, address, trancheId, title }: TransactionsProps) {
   const navigate = useNavigate()
   const explorer = useGetExplorerUrl()
+  const [expandTable, setExpandTable] = React.useState(false)
+
   const columns = [
     {
       align: 'left',
@@ -170,41 +162,28 @@ export function Transactions({ onlyMostRecent, narrow, txTypes, address, tranche
 
   const csvUrl = React.useMemo(() => csvData && getCSVDownloadUrl(csvData), [csvData])
 
-  const pagination = usePagination({ data: investorTransactions, pageSize: onlyMostRecent ? 3 : 15 })
-
   return address && investorTransactions?.length ? (
-    <PaginationProvider pagination={pagination}>
-      <Stack gap={2}>
-        <Box overflow="auto" width="100%">
-          <DataTable
-            data={investorTransactions}
-            columns={columns}
-            pageSize={pagination.pageSize}
-            page={pagination.page}
-          />
-        </Box>
-        {onlyMostRecent ? (
-          <Button onClick={() => navigate(`/history/${address}`)} variant="inverted" style={{ width: 100 }} small>
-            View all
-          </Button>
-        ) : (
-          <Shelf justifyContent="space-between">
-            {pagination.pageCount > 1 && (
-              <Shelf>
-                <Pagination />
-              </Shelf>
-            )}
-            {csvUrl && (
-              <Box style={{ gridColumn: columns.length, justifySelf: 'end' }}>
-                <AnchorButton small variant="secondary" href={csvUrl} download={`transaction-history-${address}.csv`}>
-                  Export as CSV
-                </AnchorButton>
-              </Box>
-            )}
-          </Shelf>
+    <Stack gap={2}>
+      <Box display="flex" alignItems="center" justifyContent="space-between">
+        <Text variant="heading4">{title}</Text>
+        {csvUrl && (
+          <Box style={{ gridColumn: columns.length, justifySelf: 'end' }}>
+            <AnchorButton small variant="secondary" href={csvUrl} download={`transaction-history-${address}.csv`}>
+              Download
+            </AnchorButton>
+          </Box>
         )}
-      </Stack>
-    </PaginationProvider>
+      </Box>
+      <Box overflow="auto" width="100%">
+        <DataTable data={expandTable ? investorTransactions : investorTransactions.splice(0, 3)} columns={columns} />
+      </Box>
+
+      {investorTransactions.length > 3 && !expandTable && (
+        <Button onClick={() => setExpandTable(true)} variant="inverted" style={{ width: 100 }} small>
+          View all
+        </Button>
+      )}
+    </Stack>
   ) : (
     <Shelf borderRadius="4px" backgroundColor="backgroundSecondary" justifyContent="center" p="10px">
       <Text color="textSecondary" variant="body2">

diff --git a/centrifuge-app/src/pages/Prime/Detail.tsx b/centrifuge-app/src/pages/Prime/Detail.tsx
@@ -85,8 +85,7 @@ const PrimeDetail = () => {
         <Holdings address={centAddress} showActions={false} />
       </LayoutSection>
       <LayoutSection mt={1} pt={0}>
-        <Text variant="heading4">Transaction history</Text>
-        <Transactions onlyMostRecent address={centAddress} />
+        <Transactions address={centAddress} title="Transaction history" />
       </LayoutSection>
       <LayoutSection mt={1} pt={0}>
         <Text variant="heading4">Resolutions</Text>