feat(suite): limit the pagination in trasancation of the end pages an…

…d go to end for networks with unrealiable transactions
trezor · Feb 7, 2025 · 3b13d9e · 3b13d9e
1 parent e2c31f4
commit 3b13d9e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 19 deletions.
diff --git a/packages/suite/src/components/wallet/Pagination.tsx b/packages/suite/src/components/wallet/Pagination.tsx
@@ -53,6 +53,7 @@ interface PaginationProps {
     hasPages?: boolean;
     perPage: number;
     totalItems: number;
+    limitedPageList?: boolean;
     onPageSelected: (page: number) => void;
 }
 
@@ -63,6 +64,7 @@ export const Pagination = ({
     isLastPage,
     perPage,
     totalItems,
+    limitedPageList,
     ...rest
 }: PaginationProps) => {
     const totalPages = Math.ceil(totalItems / perPage);
@@ -98,17 +100,19 @@ export const Pagination = ({
             </Actions>
 
             {totalPages ? (
-                calculatedPages.map(i => (
-                    <PageItem
-                        key={i}
-                        data-testid={`@wallet/accounts/pagination/${i}`}
-                        data-test-activated={i === currentPage}
-                        onClick={() => onPageSelected(i)}
-                        $isActive={i === currentPage}
-                    >
-                        {i}
-                    </PageItem>
-                ))
+                calculatedPages
+                    .slice(0, limitedPageList ? currentPage + 2 : calculatedPages.length)
+                    .map(i => (
+                        <PageItem
+                            key={i}
+                            data-testid={`@wallet/accounts/pagination/${i}`}
+                            data-test-activated={i === currentPage}
+                            onClick={() => onPageSelected(i)}
+                            $isActive={i === currentPage}
+                        >
+                            {i}
+                        </PageItem>
+                    ))
             ) : (
                 <>
                     {[...Array(currentPage - 1)].map((_p, i) => (
@@ -131,7 +135,7 @@ export const Pagination = ({
 
             <Actions $isActive={currentPage < (totalPages || 1)}>
                 <PageItem onClick={() => onPageSelected(currentPage + 1)}>›</PageItem>
-                {totalPages && totalPages > 2 && (
+                {totalPages && totalPages > 2 && !limitedPageList && (
                     <PageItem onClick={() => onPageSelected(totalPages)}>»</PageItem>
                 )}
             </Actions>

diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx
@@ -33,6 +33,7 @@ interface TransactionListProps {
     symbol: WalletAccountTransaction['symbol'];
     isLoading?: boolean;
     account: Account;
+    limitPaging?: boolean;
     customTotalItems?: number;
     isExportable?: boolean;
     onPageRequested?: (page: number) => void;
@@ -44,6 +45,7 @@ export const TransactionList = ({
     isLoading,
     account,
     symbol,
+    limitPaging,
     customTotalItems,
     onPageRequested,
     isExportable = true,
@@ -192,6 +194,7 @@ export const TransactionList = ({
 
             {showPagination && (
                 <Pagination
+                    limitedPageList={Boolean(limitPaging)}
                     hasPages={!isRipple}
                     currentPage={currentPage}
                     isLastPage={isLastRipplePage}

diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/WalletTransactionList.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/WalletTransactionList.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import styled from 'styled-components';
 
+import { areNetworkTransactionsUnreliable } from '@suite-common/wallet-config';
 import { Card, Column } from '@trezor/components';
 import { typography } from '@trezor/theme';
 
@@ -53,6 +54,7 @@ export const WalletTransactionList = ({
 
     return (
         <TransactionList
+            limitPaging={areNetworkTransactionsUnreliable(symbol)}
             allTransactions={result.allTransactions}
             transactions={result.visibleTransactions}
             symbol={symbol}

diff --git a/suite-common/wallet-config/src/types.ts b/suite-common/wallet-config/src/types.ts
@@ -43,6 +43,17 @@ export const TREZOR_CONNECT_BACKENDS = [
     'blockfrost',
     'solana',
 ] as const;
+export const UNREALIABLE_TRANSACTION_COINS = [
+    'eth',
+    'xrp',
+    'sol',
+    'arb',
+    'pol',
+    'base',
+    'op',
+    'ada',
+] as const satisfies NetworkSymbol[];
+
 export const NON_STANDARD_BACKENDS = ['coinjoin'] as const;
 
 type TrezorConnectBackendType = (typeof TREZOR_CONNECT_BACKENDS)[number];

diff --git a/suite-common/wallet-config/src/utils.ts b/suite-common/wallet-config/src/utils.ts
@@ -1,11 +1,12 @@
 import { networks } from './networksConfig';
-import type {
-    AccountType,
-    Network,
-    NetworkFeature,
-    NetworkSymbol,
-    NetworkSymbolExtended,
-    NormalizedNetworkAccount,
+import {
+    type AccountType,
+    type Network,
+    type NetworkFeature,
+    type NetworkSymbol,
+    type NetworkSymbolExtended,
+    type NormalizedNetworkAccount,
+    UNREALIABLE_TRANSACTION_COINS,
 } from './types';
 
 export const NORMAL_ACCOUNT_TYPE = 'normal' satisfies AccountType;
@@ -114,3 +115,6 @@ export const getNetworkDisplaySymbolName = (symbol: NetworkSymbol) => {
 
     return network.displaySymbolName || network.name;
 };
+
+export const areNetworkTransactionsUnreliable = (symbol: NetworkSymbol) =>
+    UNREALIABLE_TRANSACTION_COINS.some(coin => coin === symbol);