Redesign transaction history table

centrifuge · Sep 17, 2024 · 1181892 · 1181892
1 parent 8dde4b4
commit 1181892
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 28 deletions.
diff --git a/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx b/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx
@@ -1,5 +1,5 @@
 import { AssetTransaction, CurrencyBalance } from '@centrifuge/centrifuge-js'
-import { AnchorButton, IconDownload, IconExternalLink, Shelf, Stack, StatusChip, Text } from '@centrifuge/fabric'
+import { AnchorButton, IconDownload, IconExternalLink, Shelf, Stack, Text } from '@centrifuge/fabric'
 import BN from 'bn.js'
 import { formatDate } from '../../utils/date'
 import { formatBalance } from '../../utils/formatting'
@@ -202,7 +202,6 @@ export const TransactionHistoryTable = ({
       return {
         activeAssetId,
         netFlow,
-        type: label,
         transactionDate: transaction.timestamp,
         assetId: transaction.asset.id,
         assetName: transaction.asset.name,
@@ -216,11 +215,6 @@ export const TransactionHistoryTable = ({
     }) || []
 
   const columns = [
-    {
-      align: 'left',
-      header: 'Type',
-      cell: ({ type }: Row) => <StatusChip status={getTransactionTypeStatus(type)}>{type}</StatusChip>,
-    },
     {
       align: 'left',
       header: <SortableTableHeader label="Transaction date" />,
@@ -233,7 +227,7 @@ export const TransactionHistoryTable = ({
     },
     {
       align: 'left',
-      header: 'Asset',
+      header: <SortableTableHeader label="Transaction" />,
       cell: ({ activeAssetId, assetId, assetName, fromAssetId, fromAssetName, toAssetId, toAssetName }: Row) => {
         const base = `${basePath}/${poolId}/assets/`
         return fromAssetId && toAssetId && activeAssetId === fromAssetId.split('-')[1] ? (
@@ -263,6 +257,7 @@ export const TransactionHistoryTable = ({
           </Text>
         )
       },
+      sortKey: 'transaction',
     },
     {
       align: 'right',
@@ -299,25 +294,28 @@ export const TransactionHistoryTable = ({
         <Text fontSize="18px" fontWeight="500">
           Transaction history
         </Text>
-        {transactions?.length && (
-          <AnchorButton
-            href={csvUrl}
-            download={`pool-transaction-history-${poolId}.csv`}
-            variant="secondary"
-            icon={IconDownload}
-            small
-            target="_blank"
-          >
-            Download
-          </AnchorButton>
-        )}
+        <Shelf>
+          {transactions?.length! > 8 && preview && (
+            <AnchorButton href={`#/pools/${poolId}/transactions`} small variant="inverted">
+              View all
+            </AnchorButton>
+          )}
+          {transactions?.length && (
+            <AnchorButton
+              href={csvUrl}
+              download={`pool-transaction-history-${poolId}.csv`}
+              variant="inverted"
+              icon={IconDownload}
+              small
+              target="_blank"
+              style={{ marginLeft: 8 }}
+            >
+              Download
+            </AnchorButton>
+          )}
+        </Shelf>
       </Shelf>
       <DataTable data={tableData} columns={columns} />
-      {transactions?.length! > 8 && preview && (
-        <Text variant="body2" color="textSecondary">
-          <RouterTextLink to={`/pools/${poolId}/transactions`}>View all</RouterTextLink>
-        </Text>
-      )}
     </Stack>
   )
 }
diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx
@@ -153,9 +153,7 @@ export function PoolDetailOverview() {
         </React.Suspense>
         {!isTinlakePool && (
           <React.Suspense fallback={<Spinner />}>
-            <Card p={3}>
-              <TransactionHistory poolId={poolId} />
-            </Card>
+            <TransactionHistory poolId={poolId} />
           </React.Suspense>
         )}
       </Box>