Update styles in tx history page

centrifuge-app/src/components/Portfolio/TransactionTypeChip.tsx

@@ -3,26 +3,21 @@ import * as React from 'react'
 import { TransactionCardProps } from './Transactions'
 
 type TransactionTypeProps = {
-  type: TransactionCardProps['action']
+  type: TransactionCardProps['type']
 }
 
-// @ts-expect-error
 const states: {
-  [Key in TransactionCardProps['action']]: {
+  [Key in TransactionCardProps['type']]: {
     label: string
     status: StatusChipProps['status']
   }
 } = {
-  PENDING_ORDER: {
-    label: 'Pending order',
-    status: 'default',
-  },
   INVEST_ORDER_UPDATE: {
-    label: 'Invest order update',
+    label: 'Pending invest',
     status: 'default',
   },
   REDEEM_ORDER_UPDATE: {
-    label: 'Redeem order update',
+    label: 'Pending redemption',
     status: 'default',
   },
   INVEST_ORDER_CANCEL: {
@@ -34,11 +29,11 @@ const states: {
     status: 'default',
   },
   INVEST_EXECUTION: {
-    label: 'Invest execution',
+    label: 'Invest',
     status: 'ok',
   },
   REDEEM_EXECUTION: {
-    label: 'Redeem execution',
+    label: 'Redeem',
     status: 'info',
   },
   TRANSFER_IN: {
@@ -73,6 +68,10 @@ const states: {
     label: 'Closed',
     status: 'default',
   },
+  PRICED: {
+    label: 'Priced',
+    status: 'default',
+  },
 }
 
 export function TransactionTypeChip({ type }: TransactionTypeProps) {

centrifuge-app/src/components/Portfolio/Transactions.tsx

@@ -2,7 +2,7 @@ import { BorrowerTransactionType, CurrencyBalance, InvestorTransactionType, Pool
 import { useCentrifugeUtils } from '@centrifuge/centrifuge-react'
 import { Box, Grid, IconExternalLink, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useRouteMatch } from 'react-router-dom'
 import { formatDate } from '../../utils/date'
 import { formatBalanceAbbreviated } from '../../utils/formatting'
 import { useAddress } from '../../utils/useAddress'
@@ -21,14 +21,15 @@ export function Transactions({ count, txTypes }: AddressTransactionsProps) {
   const { formatAddress } = useCentrifugeUtils()
   const address = useAddress()
   const transactions = useTransactionsByAddress(formatAddress(address || ''))
+  const match = useRouteMatch('/portfolio/transactions')
 
   const investorTransactions =
     transactions?.investorTransactions
       .filter((tx) => (txTypes ? txTypes?.includes(tx.type) : tx))
       .map((tx) => {
         return {
           date: new Date(tx.timestamp).getTime(),
-          action: tx.type,
+          type: tx.type,
           amount: tx.tokenAmount,
           poolId: tx.poolId,
           hash: tx.hash,
@@ -39,8 +40,9 @@ export function Transactions({ count, txTypes }: AddressTransactionsProps) {
   return !!investorTransactions.slice(0, count ?? investorTransactions.length) ? (
     <Stack as="article" gap={2}>
       <Text as="h2" variant="heading2">
-        Transaction history
+        {match ? null : 'Transaction history'}
       </Text>
+
       <Stack>
         <Grid gridTemplateColumns={TRANSACTION_CARD_COLUMNS} gap={TRANSACTION_CARD_GAP}>
           <Text variant="body3">Action</Text>
@@ -62,21 +64,21 @@ export function Transactions({ count, txTypes }: AddressTransactionsProps) {
           ))}
         </Stack>
       </Stack>
-      <Link to="portfolio/transactions">View all</Link>
+      {match ? null : <Link to="portfolio/transactions">View all</Link>}
     </Stack>
   ) : null
 }
 
 export type TransactionCardProps = {
   date: number
-  action: InvestorTransactionType | BorrowerTransactionType | 'PENDING_ORDER'
+  type: InvestorTransactionType | BorrowerTransactionType
   amount: CurrencyBalance
   poolId: string
   hash: string
   trancheId?: string
 }
 
-export function TransactionListItem({ date, action, amount, poolId, hash, trancheId }: TransactionCardProps) {
+export function TransactionListItem({ date, type, amount, poolId, hash, trancheId }: TransactionCardProps) {
   const pool = usePool(poolId) as Pool
   const { data } = usePoolMetadata(pool)
   const token = trancheId ? pool.tranches.find(({ id }) => id === trancheId) : undefined
@@ -97,7 +99,7 @@ export function TransactionListItem({ date, action, amount, poolId, hash, tranch
       borderBottomStyle="solid"
     >
       <Box>
-        <TransactionTypeChip type={action} />
+        <TransactionTypeChip type={type} />
       </Box>
 
       <Text as="time" variant="interactive2" datetime={date}>

centrifuge-app/src/pages/Portfolio/Transactions/index.tsx

@@ -1,26 +1,29 @@
 import { Box, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { LayoutBase } from '../../../components/LayoutBase'
+import { BasePadding } from '../../../components/LayoutBase/BasePadding'
 import { Transactions } from '../../../components/Portfolio/Transactions'
 import { useAddress } from '../../../utils/useAddress'
 
 export function TransactionsPage() {
   const address = useAddress()
   return (
     <LayoutBase>
-      <Stack>
-        <Box as="header">
-          <Text as="h1" variant="heading1">
-            Transaction history
-          </Text>
-        </Box>
+      <BasePadding>
+        <Stack>
+          <Box as="header">
+            <Text as="h1" variant="heading1">
+              Transaction history
+            </Text>
+          </Box>
 
-        {!!address ? (
-          <Transactions />
-        ) : (
-          <Text as="strong">You need to connect your wallet to see your transactions</Text>
-        )}
-      </Stack>
+          {!!address ? (
+            <Transactions />
+          ) : (
+            <Text as="strong">You need to connect your wallet to see your transactions</Text>
+          )}
+        </Stack>
+      </BasePadding>
     </LayoutBase>
   )
 }