diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx index c5ac5006f47..5c7254f9275 100644 --- a/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx +++ b/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx @@ -74,6 +74,25 @@ const sectionListContainerStyle = prepareNativeStyle(utils => ({ paddingVertical: utils.spacings.small, })); +const sortKeysPendingFirst = (a: string, b: string) => { + if (a === 'pending' && b === 'pending') return 0; + 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 && b.blockTime === undefined) return 0; + if (a.blockTime === undefined) return -1; + if (b.blockTime === undefined) return 1; + + return a.blockTime - b.blockTime; +}; + const renderTransactionItem = ({ item, isFirst, @@ -163,20 +182,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 => [