Restore tests

src/components/dashboard/PendingTxs/PendingTxList.test.ts

@@ -1,20 +1,71 @@
+import { BigNumber } from 'ethers'
 import { faker } from '@faker-js/faker'
-import type { Transaction } from '@safe-global/safe-gateway-typescript-sdk'
+import { DetailedExecutionInfoType } from '@safe-global/safe-gateway-typescript-sdk'
+import type { MultisigExecutionInfo, Transaction } from '@safe-global/safe-gateway-typescript-sdk'
+
 import { safeInfoBuilder } from '@/tests/builders/safe'
 import { _getTransactionsToDisplay } from './PendingTxsList'
+import type { RecoveryQueueItem } from '@/features/recovery/services/recovery-state'
 
 describe('_getTransactionsToDisplay', () => {
-  it('should return the queue sliced by max txs', () => {
+  it('should return the recovery queue if it has more than or equal to MAX_TXS items', () => {
+    const walletAddress = faker.finance.ethereumAddress()
+    const safe = safeInfoBuilder().build()
+    const recoveryQueue = [
+      { timestamp: BigNumber.from(1) },
+      { timestamp: BigNumber.from(2) },
+      { timestamp: BigNumber.from(3) },
+      { timestamp: BigNumber.from(4) },
+      { timestamp: BigNumber.from(5) },
+    ] as Array<RecoveryQueueItem>
+    const queue = [] as Array<Transaction>
+
+    const result = _getTransactionsToDisplay({ recoveryQueue, queue, walletAddress, safe })
+    expect(result).toStrictEqual([recoveryQueue.slice(0, 4), []])
+  })
+
+  it('should return the recovery queue followed by the actionable transactions from the queue', () => {
+    const walletAddress = faker.finance.ethereumAddress()
+    const safe = safeInfoBuilder().build()
+    const recoveryQueue = [
+      { timestamp: BigNumber.from(1) },
+      { timestamp: BigNumber.from(2) },
+      { timestamp: BigNumber.from(3) },
+    ] as Array<RecoveryQueueItem>
+    const actionableQueue = [
+      {
+        transaction: { id: '1' },
+        executionInfo: {
+          type: DetailedExecutionInfoType.MULTISIG,
+          missingSigners: [walletAddress],
+        } as unknown as MultisigExecutionInfo,
+      } as unknown as Transaction,
+      {
+        transaction: { id: '2' },
+        executionInfo: {
+          type: DetailedExecutionInfoType.MULTISIG,
+          missingSigners: [walletAddress],
+        } as unknown as MultisigExecutionInfo,
+      } as unknown as Transaction,
+    ]
+
+    const expected = [recoveryQueue, [actionableQueue[0]]]
+    const result = _getTransactionsToDisplay({ recoveryQueue, queue: actionableQueue, walletAddress, safe })
+    expect(result).toEqual(expected)
+  })
+
+  it('should return the recovery queue followed by the transactions from the queue if there are no actionable transactions', () => {
     const walletAddress = faker.finance.ethereumAddress()
     const safe = safeInfoBuilder().build()
-    const queue = [
-      { transaction: { id: '1' } },
-      { transaction: { id: '2' } },
-      { transaction: { id: '3' } },
-      { transaction: { id: '4' } },
-    ] as Array<Transaction>
+    const recoveryQueue = [
+      { timestamp: BigNumber.from(1) },
+      { timestamp: BigNumber.from(2) },
+      { timestamp: BigNumber.from(3) },
+    ] as Array<RecoveryQueueItem>
+    const queue = [{ transaction: { id: '1' } }, { transaction: { id: '2' } }] as Array<Transaction>
 
-    const result = _getTransactionsToDisplay(queue, walletAddress, safe, 3)
-    expect(result).toEqual(queue.slice(0, 3))
+    const expected = [recoveryQueue, [queue[0]]]
+    const result = _getTransactionsToDisplay({ recoveryQueue, queue, walletAddress, safe })
+    expect(result).toEqual(expected)
   })
 })

src/components/dashboard/PendingTxs/PendingTxsList.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react'
 import { useMemo } from 'react'
 import { useRouter } from 'next/router'
+import dynamic from 'next/dynamic'
 import { getLatestTransactions } from '@/utils/tx-list'
 import { Box, Skeleton, Typography } from '@mui/material'
 import { Card, ViewAllLink, WidgetBody, WidgetContainer } from '../styled'
@@ -14,7 +15,7 @@ import useWallet from '@/hooks/wallets/useWallet'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useRecoveryQueue } from '@/features/recovery/hooks/useRecoveryQueue'
 import type { SafeInfo, Transaction } from '@safe-global/safe-gateway-typescript-sdk'
-import dynamic from 'next/dynamic'
+import type { RecoveryQueueItem } from '@/features/recovery/services/recovery-state'
 
 const PendingRecoveryListItem = dynamic(() => import('./PendingRecoveryListItem'))
 
@@ -52,14 +53,26 @@ function getActionableTransactions(txs: Transaction[], safe: SafeInfo, walletAdd
   })
 }
 
-export function _getTransactionsToDisplay(
-  queue: Transaction[],
-  walletAddress: string | undefined,
-  safe: SafeInfo,
-  maxTxs: number,
-): Transaction[] {
+export function _getTransactionsToDisplay({
+  recoveryQueue,
+  queue,
+  walletAddress,
+  safe,
+}: {
+  recoveryQueue: RecoveryQueueItem[]
+  queue: Transaction[]
+  walletAddress?: string
+  safe: SafeInfo
+}): [RecoveryQueueItem[], Transaction[]] {
+  if (recoveryQueue.length >= MAX_TXS) {
+    return [recoveryQueue.slice(0, MAX_TXS), []]
+  }
+
   const actionableQueue = getActionableTransactions(queue, safe, walletAddress)
-  return (actionableQueue.length > 0 ? actionableQueue : queue).slice(0, maxTxs)
+  const _queue = actionableQueue.length > 0 ? actionableQueue : queue
+  const queueToDisplay = _queue.slice(0, MAX_TXS - recoveryQueue.length)
+
+  return [recoveryQueue, queueToDisplay]
 }
 
 const PendingTxsList = (): ReactElement | null => {
@@ -69,12 +82,17 @@ const PendingTxsList = (): ReactElement | null => {
   const wallet = useWallet()
   const queuedTxns = useMemo(() => getLatestTransactions(page?.results), [page?.results])
   const recoveryQueue = useRecoveryQueue()
-  const recoveryTxsToDisplay = useMemo(() => recoveryQueue.slice(0, MAX_TXS), [recoveryQueue])
-  const maxRest = MAX_TXS - recoveryTxsToDisplay.length
 
-  const txsToDisplay = useMemo(() => {
-    return _getTransactionsToDisplay(queuedTxns, wallet?.address, safe, maxRest)
-  }, [queuedTxns, wallet?.address, safe, maxRest])
+  const [recoveryTxs, queuedTxs] = useMemo(() => {
+    return _getTransactionsToDisplay({
+      recoveryQueue,
+      queue: queuedTxns,
+      walletAddress: wallet?.address,
+      safe,
+    })
+  }, [recoveryQueue, queuedTxns, wallet?.address, safe])
+
+  const totalTxs = recoveryTxs.length + queuedTxs.length
 
   const queueUrl = useMemo(
     () => ({
@@ -84,28 +102,26 @@ const PendingTxsList = (): ReactElement | null => {
     [router.query.safe],
   )
 
-  const totalItems = recoveryTxsToDisplay.length + txsToDisplay.length
-
   return (
     <WidgetContainer>
       <div className={css.title}>
         <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
           Pending transactions
         </Typography>
 
-        {totalItems > 0 && <ViewAllLink url={queueUrl} />}
+        {totalTxs > 0 && <ViewAllLink url={queueUrl} />}
       </div>
 
       <WidgetBody>
         {loading ? (
           <LoadingState />
-        ) : totalItems > 0 ? (
+        ) : totalTxs > 0 ? (
           <div className={css.list}>
-            {recoveryTxsToDisplay.map((tx) => (
+            {recoveryTxs.map((tx) => (
               <PendingRecoveryListItem transaction={tx} key={tx.transactionHash} />
             ))}
 
-            {txsToDisplay.map((tx) => (
+            {queuedTxs.map((tx) => (
               <PendingTxListItem transaction={tx.transaction} key={tx.transaction.id} />
             ))}
           </div>