From 4bd66f5932f76ad47d6849f56300264ee0a6812c Mon Sep 17 00:00:00 2001
From: Matej Kriz <matej@matejkriz.cz>
Date: Thu, 25 Jul 2024 15:17:27 +0200
Subject: [PATCH] fix(suite-native): pending transactions at the beginning of
 the list in one separate group as before

---
 .../TransactionsList/TransactionList.tsx      | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx
index c5ac5006f470..7e6bf116f78a 100644
--- a/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx
+++ b/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx
@@ -74,6 +74,23 @@ const sectionListContainerStyle = prepareNativeStyle(utils => ({
     paddingVertical: utils.spacings.small,
 }));
 
+const sortKeysPendingFirst = (a: string, b: string) => {
+    if (a === 'pending') return -1;
+    if (b === 'pending') return 1;
+
+    const dateA = new Date(a);
+    const dateB = new Date(b);
+
+    return dateA.getTime() - dateB.getTime();
+};
+
+const sortPendingTransactions = (a: WalletAccountTransaction, b: WalletAccountTransaction) => {
+    if (a.blockTime === undefined) return -1;
+    if (b.blockTime === undefined) return 1;
+
+    return a.blockTime - b.blockTime;
+};
+
 const renderTransactionItem = ({
     item,
     isFirst,
@@ -163,20 +180,22 @@ export const TransactionList = ({
     }, [dispatch, accountKey, fetchTransactions]);
 
     const data = useMemo((): TransactionListItem[] => {
-        // groupTransactionsByDate now sorts also pending transactions, if they have blockTime set
-        // this is a temporary solution to emulate the original behavior here in suite-native
-        // TODO: display pending transactions in the correct order
+        // groupTransactionsByDate now sorts also pending transactions, if they have blockTime set.
+        // This is here to keep the original behavior of having pending transactions in one group
+        // at the beginning of the list.
         const [pendingTxs, confirmedTxs] = arrayPartition(transactions, isPending);
         const accountTransactionsByMonth = groupTransactionsByDate(confirmedTxs, 'month');
         if (pendingTxs.length || accountTransactionsByMonth['no-blocktime']) {
             accountTransactionsByMonth['pending'] = [
                 ...(accountTransactionsByMonth['no-blocktime'] ?? []),
-                ...pendingTxs,
+                ...pendingTxs.sort(sortPendingTransactions),
             ];
             delete accountTransactionsByMonth['no-blocktime'];
         }
 
-        const transactionMonthKeys = Object.keys(accountTransactionsByMonth) as MonthKey[];
+        const transactionMonthKeys = Object.keys(accountTransactionsByMonth).sort(
+            sortKeysPendingFirst,
+        ) as MonthKey[];
 
         if (tokenContract) {
             return transactionMonthKeys.flatMap(monthKey => [