Add count and txTypes to cent-js

centrifuge · Sep 28, 2023 · 532062d · 532062d
1 parent d9e3cf8
commit 532062d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 22 deletions.
diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx
@@ -38,15 +38,14 @@ type AddressTransactionsProps = {
 export function Transactions({ count, txTypes }: AddressTransactionsProps) {
   const { formatAddress } = useCentrifugeUtils()
   const address = useAddress()
-  const transactions = useTransactionsByAddress(formatAddress(address || ''))
+  const transactions = useTransactionsByAddress(formatAddress(address || ''), count, txTypes)
   const match = useRouteMatch('/portfolio/transactions')
   const [sortKey, setSortKey] = React.useState<'date' | 'amount'>('date')
   const [sortOrder, setSortOrder] = React.useState<'asc' | 'desc'>('desc')
 
-  const investorTransactions = React.useMemo(() => {
+  const investorTransactions: TransactionCardProps[] = React.useMemo(() => {
     const txs =
       transactions?.investorTransactions
-        .filter((tx) => (txTypes ? txTypes?.includes(tx.type) : tx))
         .map((tx) => {
           return {
             date: new Date(tx.timestamp).getTime(),
@@ -66,10 +65,10 @@ export function Transactions({ count, txTypes }: AddressTransactionsProps) {
             return 1
           }
         }) || []
-    return sortOrder === 'asc' ? txs : txs.reverse()
+    return sortOrder === 'asc' ? txs.reverse() : txs
   }, [sortKey, transactions, sortOrder])
 
-  return !!investorTransactions.slice(0, count ?? investorTransactions.length) ? (
+  return !!investorTransactions ? (
     <Stack as="article" gap={2}>
       <Text as="h2" variant="heading2">
         {match ? null : 'Transaction history'}
@@ -127,7 +126,7 @@ export function Transactions({ count, txTypes }: AddressTransactionsProps) {
         </Grid>
 
         <Stack as="ul" role="list">
-          {investorTransactions.slice(0, count ?? investorTransactions.length).map((transaction, index) => (
+          {investorTransactions.map((transaction, index) => (
             <Box as="li" key={`${transaction.poolId}${index}`}>
               <TransactionListItem {...transaction} />
             </Box>
@@ -136,7 +135,7 @@ export function Transactions({ count, txTypes }: AddressTransactionsProps) {
       </Stack>
       <Box>
         {match ? null : (
-          <AnchorButton variant="tertiary" href="portfolio/transactions" icon={IconEye}>
+          <AnchorButton small variant="tertiary" href="portfolio/transactions" icon={IconEye}>
             View all
           </AnchorButton>
         )}

diff --git a/centrifuge-app/src/utils/usePools.ts b/centrifuge-app/src/utils/usePools.ts
@@ -1,4 +1,4 @@
-import Centrifuge, { Pool, PoolMetadata } from '@centrifuge/centrifuge-js'
+import Centrifuge, { InvestorTransactionType, Pool, PoolMetadata } from '@centrifuge/centrifuge-js'
 import { useCentrifuge, useCentrifugeQuery, useWallet } from '@centrifuge/centrifuge-react'
 import { useEffect } from 'react'
 import { useQuery } from 'react-query'
@@ -49,10 +49,10 @@ export function useMonthlyPoolStates(poolId: string, from?: Date, to?: Date) {
   return result
 }
 
-export function useTransactionsByAddress(address?: string) {
+export function useTransactionsByAddress(address?: string, count?: number, txTypes?: InvestorTransactionType[]) {
   const [result] = useCentrifugeQuery(
     ['txByAddress', address],
-    (cent) => cent.pools.getTransactionsByAddress([address!]),
+    (cent) => cent.pools.getTransactionsByAddress([address!, count, txTypes]),
     {
       enabled: !!address,
     }

diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
@@ -2015,18 +2015,17 @@ export function getPoolsModule(inst: Centrifuge) {
     )
   }
 
-  function getTransactionsByAddress(args: [address: string]) {
-    const [address] = args
+  function getTransactionsByAddress(args: [address: string, count?: number, txTypes?: InvestorTransactionType[]]) {
+    const [address, count, txTypes] = args
 
     const $query = inst.getSubqueryObservable<{
       investorTransactions: { nodes: SubqueryInvestorTransaction[] }
     }>(
-      `query($address: String!) {
-        investorTransactions(filter: {
-          accountId: {
-            equalTo: $address
-          }
-        }) {
+      `query ($address: String) {
+        investorTransactions(
+          filter: {accountId: {equalTo: $address}}
+          orderBy: TIMESTAMP_DESC
+        ) {
           nodes {
             timestamp
             type
@@ -2064,11 +2063,10 @@ export function getPoolsModule(inst: Centrifuge) {
 
         return forkJoin([$investorTransactions]).pipe(
           map(([investorTransactions]) => {
-            investorTransactions.sort((a, b) => {
-              return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-            })
             return {
-              investorTransactions,
+              investorTransactions: investorTransactions
+                .filter((tx) => (txTypes ? txTypes?.includes(tx.type) : tx))
+                .slice(0, count || investorTransactions.length),
             }
           })
         )