proto: working

packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx

@@ -3,10 +3,6 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 
 import { getTxsPerPage } from '@suite-common/suite-utils';
-import {
-    fetchAllTransactionsForAccountThunk,
-    fetchTransactionsPageThunk,
-} from '@suite-common/wallet-core';
 import {
     advancedSearchTransactions,
     groupTransactionsByDate,
@@ -29,8 +25,10 @@ import { TransactionCandidates } from './TransactionCandidates';
 import { TransactionGroupedList } from './TransactionGroupedList';
 import { TransactionListActions } from './TransactionListActions/TransactionListActions';
 import { PendingGroupHeader } from './TransactionsGroup/PendingGroupHeader';
+import { useFetchTransactions } from './useFetchTransactions';
 
 interface TransactionListProps {
+    allTransactions: WalletAccountTransaction[];
     transactions: WalletAccountTransaction[];
     symbol: WalletAccountTransaction['symbol'];
     isLoading?: boolean;
@@ -40,6 +38,7 @@ interface TransactionListProps {
 }
 
 export const TransactionList = ({
+    allTransactions,
     transactions,
     isLoading,
     account,
@@ -51,10 +50,11 @@ export const TransactionList = ({
     const dispatch = useDispatch();
     const accountMetadata = useSelector(state => selectLabelingDataForAccount(state, account.key));
 
+    const { fetchPage, fetchedAll, fetchAll } = useFetchTransactions(account, allTransactions);
+
     // Search
     const [searchQuery, setSearchQuery] = useState('');
     const [searchedTransactions, setSearchedTransactions] = useState(transactions);
-    const [hasFetchedAll, setHasFetchedAll] = useState(false);
 
     const sectionRef = useRef<HTMLDivElement>(null);
 
@@ -68,16 +68,10 @@ export const TransactionList = ({
     );
 
     useEffect(() => {
-        if (anchor && !hasFetchedAll) {
-            dispatch(
-                fetchAllTransactionsForAccountThunk({
-                    accountKey: account.key,
-                    noLoading: true,
-                }),
-            );
-            setHasFetchedAll(true);
+        if (anchor && !fetchedAll) {
+            fetchAll();
         }
-    }, [anchor, account, dispatch, hasFetchedAll]);
+    }, [anchor, account, dispatch, fetchedAll, fetchAll]);
 
     // Pagination
     const perPage = getTxsPerPage(account.networkType);
@@ -97,7 +91,9 @@ export const TransactionList = ({
         setSelectedPage(page);
 
         if (!isSearching) {
-            dispatch(fetchTransactionsPageThunk({ accountKey: account.key, page, perPage }));
+            fetchPage(page, {
+                recursive: true,
+            });
         }
 
         if (sectionRef.current) {

packages/suite/src/views/wallet/transactions/TransactionList/WalletTransactionList.tsx

@@ -0,0 +1,37 @@
+import { selectNetworkTokenDefinitions } from '@suite-common/token-definitions';
+
+import { useSelector } from 'src/hooks/suite';
+import { Account, WalletAccountTransaction } from 'src/types/wallet';
+
+import { TransactionList } from './TransactionList';
+import { useVisibleTransactionsRetriever } from './useFetchTransactions';
+
+interface TransactionListProps {
+    symbol: WalletAccountTransaction['symbol'];
+    account: Account;
+    customTotalItems?: number;
+    isExportable?: boolean;
+}
+
+export const WalletTransactionList = ({
+    account,
+    symbol,
+    customTotalItems,
+    isExportable = true,
+}: TransactionListProps) => {
+    const result = useVisibleTransactionsRetriever({
+        account,
+    });
+
+    return (
+        <TransactionList
+            allTransactions={result.allTransactions}
+            transactions={result.visibleTransactions}
+            symbol={symbol}
+            account={account}
+            isLoading={result.isFetching}
+            customTotalItems={customTotalItems ?? result.visibleTotal}
+            isExportable={isExportable}
+        />
+    );
+};

packages/suite/src/views/wallet/transactions/TransactionList/__tests__/transaction-fetch-utils.test.ts

@@ -0,0 +1,87 @@
+import { shouldAttemptToLoadNextPageForVisibleTransactions } from '../transaction-fetch-utils';
+
+describe('TransactionFetchUtils', () => {
+    it('should request fetching because the current number of visible transaction is 0 and there are still available', () => {
+        const result = shouldAttemptToLoadNextPageForVisibleTransactions({
+            totalNumberOfTransactions: 100,
+            currentNumberOfTransactions: 0,
+            currentNumberOfVisibleTransactions: 0,
+            perPage: 25,
+            pagesFetched: 0,
+        });
+
+        expect(result).toBe(true);
+    });
+
+    it('should request fetching because there are still pages a available even though many transactions were filtered', () => {
+        const result = shouldAttemptToLoadNextPageForVisibleTransactions({
+            totalNumberOfTransactions: 100,
+            currentNumberOfTransactions: 25,
+            currentNumberOfVisibleTransactions: 0,
+            perPage: 25,
+            pagesFetched: 1,
+        });
+
+        expect(result).toBe(true);
+    });
+
+    it("should request fetching because the number of visible pages won't fit even one page", () => {
+        const result = shouldAttemptToLoadNextPageForVisibleTransactions({
+            totalNumberOfTransactions: 100,
+            currentNumberOfTransactions: 25,
+            currentNumberOfVisibleTransactions: 10,
+            perPage: 25,
+            pagesFetched: 1,
+        });
+
+        expect(result).toBe(true);
+    });
+
+    it('should NOT request fetching because the number of visible pages will fit even one page', () => {
+        const result = shouldAttemptToLoadNextPageForVisibleTransactions({
+            totalNumberOfTransactions: 100,
+            currentNumberOfTransactions: 25,
+            currentNumberOfVisibleTransactions: 25,
+            perPage: 25,
+            pagesFetched: 1,
+        });
+
+        expect(result).toBe(false);
+    });
+
+    it('should request fetching because there is too little number of page for 2 pages', () => {
+        const result = shouldAttemptToLoadNextPageForVisibleTransactions({
+            totalNumberOfTransactions: 100,
+            currentNumberOfTransactions: 50,
+            currentNumberOfVisibleTransactions: 40,
+            perPage: 25,
+            pagesFetched: 2,
+        });
+
+        expect(result).toBe(true);
+    });
+
+    it('should request fetching because there is too little number of page for 3 pages', () => {
+        const result = shouldAttemptToLoadNextPageForVisibleTransactions({
+            totalNumberOfTransactions: 100,
+            currentNumberOfTransactions: 75,
+            currentNumberOfVisibleTransactions: 50,
+            perPage: 25,
+            pagesFetched: 3,
+        });
+
+        expect(result).toBe(true);
+    });
+
+    it('should NOT request fetching any more pages because there are not any left', () => {
+        const result = shouldAttemptToLoadNextPageForVisibleTransactions({
+            totalNumberOfTransactions: 100,
+            currentNumberOfTransactions: 100,
+            currentNumberOfVisibleTransactions: 2,
+            perPage: 25,
+            pagesFetched: 1,
+        });
+
+        expect(result).toBe(false);
+    });
+});

packages/suite/src/views/wallet/transactions/TransactionList/transaction-fetch-utils.ts

@@ -0,0 +1,36 @@
+export function shouldAttemptToLoadNextPageForVisibleTransactions({
+    totalNumberOfTransactions,
+    currentNumberOfTransactions,
+    currentNumberOfVisibleTransactions,
+    perPage,
+    pagesFetched,
+}: {
+    totalNumberOfTransactions: number;
+    perPage: number;
+    currentNumberOfTransactions: number;
+    currentNumberOfVisibleTransactions: number;
+    pagesFetched: number;
+}): boolean {
+    if (totalNumberOfTransactions === 0) return false;
+
+    if (
+        currentNumberOfVisibleTransactions === currentNumberOfTransactions &&
+        currentNumberOfVisibleTransactions !== 0
+    )
+        return false;
+
+    if (totalNumberOfTransactions <= currentNumberOfTransactions) return false;
+
+    const itemsIfAllDisplayed = pagesFetched * perPage;
+
+    if (itemsIfAllDisplayed > currentNumberOfVisibleTransactions) return true;
+
+    const fetchedPagesByTransactions = Math.ceil(currentNumberOfTransactions / perPage);
+    const pagesByVisibleTransactions = Math.floor(currentNumberOfVisibleTransactions / perPage);
+
+    if (pagesByVisibleTransactions === 0 && totalNumberOfTransactions > 0) return true;
+
+    if (fetchedPagesByTransactions <= pagesByVisibleTransactions) return false;
+
+    return true;
+}

packages/suite/src/views/wallet/transactions/Transactions.tsx

@@ -12,7 +12,7 @@ import { AppState } from 'src/types/suite';
 import { CoinjoinExplanation } from './CoinjoinExplanation/CoinjoinExplanation';
 import { CoinjoinSummary } from './CoinjoinSummary/CoinjoinSummary';
 import { TradeBox } from './TradeBox/TradeBox';
-import { TransactionList } from './TransactionList/TransactionList';
+import { WalletTransactionList } from './TransactionList/WalletTransactionList';
 import { AccountEmpty } from './components/AccountEmpty';
 import { NoTransactions } from './components/NoTransactions';
 import { TransactionSummary } from './components/TransactionSummary';
@@ -58,12 +58,7 @@ export const Transactions = () => {
                         {isEmpty ? (
                             <CoinjoinExplanation />
                         ) : (
-                            <TransactionList
-                                account={account}
-                                transactions={accountTransactions}
-                                symbol={account.symbol}
-                                isLoading={transactionsIsLoading}
-                            />
+                            <WalletTransactionList account={account} symbol={account.symbol} />
                         )}
                     </>
                 )}
@@ -76,12 +71,7 @@ export const Transactions = () => {
             <Layout selectedAccount={selectedAccount}>
                 <TransactionSummary account={account} />
                 <TradeBox account={account} />
-                <TransactionList
-                    account={account}
-                    transactions={accountTransactions}
-                    symbol={account.symbol}
-                    isLoading={transactionsIsLoading}
-                />
+                <WalletTransactionList account={account} symbol={account.symbol} />
             </Layout>
         );
     }