From de56eae16ba9903cdedc6bf332e97523bf81837c Mon Sep 17 00:00:00 2001 From: Marek Polak Date: Tue, 27 Feb 2024 14:49:33 +0100 Subject: [PATCH 1/5] refactor(suite): remove TransactionListActions --- .../TransactionList/TransactionList.tsx | 30 ++++++++++----- .../TransactionListActions.tsx | 38 ------------------- 2 files changed, 21 insertions(+), 47 deletions(-) delete mode 100644 packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/TransactionListActions.tsx diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx index 113de670dda..c86b47a6085 100644 --- a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx +++ b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx @@ -14,7 +14,8 @@ import { Translation } from 'src/components/suite'; import { DashboardSection } from 'src/components/dashboard'; import { useDispatch, useSelector } from 'src/hooks/suite'; import { WalletAccountTransaction, Account } from 'src/types/wallet'; -import { TransactionListActions } from './TransactionListActions/TransactionListActions'; +import { SearchAction } from './TransactionListActions/SearchAction'; +import { ExportAction } from './TransactionListActions/ExportAction'; import { TransactionItem } from 'src/components/wallet/TransactionItem/TransactionItem'; import { Pagination } from 'src/components/wallet'; import { TransactionsGroup } from './TransactionsGroup/TransactionsGroup'; @@ -35,6 +36,10 @@ const PaginationWrapper = styled.div` margin-top: 20px; `; +const ActionsWrapper = styled.div` + display: flex; + align-items: center; +`; interface TransactionListProps { transactions: WalletAccountTransaction[]; symbol: WalletAccountTransaction['symbol']; @@ -181,14 +186,21 @@ export const TransactionList = ({ ref={sectionRef} heading={} actions={ - + + + {isExportable && ( + + )} + } data-test="@wallet/accounts/transaction-list" > diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/TransactionListActions.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/TransactionListActions.tsx deleted file mode 100644 index 83791c5f6d6..00000000000 --- a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/TransactionListActions.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import styled from 'styled-components'; - -import { SearchAction, SearchProps } from './SearchAction'; -import { ExportAction, ExportActionProps } from './ExportAction'; - -const Wrapper = styled.div` - display: flex; - align-items: center; -`; - -interface TransactionListActionsProps extends SearchProps, ExportActionProps { - isExportable?: boolean; -} - -export const TransactionListActions = ({ - account, - searchQuery, - setSearch, - setSelectedPage, - accountMetadata, - isExportable = true, -}: TransactionListActionsProps) => ( - - - {isExportable && ( - - )} - -); From 126bf6e958039a6cb51d14a19043dd03076c0840 Mon Sep 17 00:00:00 2001 From: Marek Polak Date: Tue, 27 Feb 2024 17:11:09 +0100 Subject: [PATCH 2/5] feat(suite): useFetchTransactions hook --- .../TransactionList/useFetchTransactions.ts | 97 +++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts b/packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts new file mode 100644 index 00000000000..728b599aca2 --- /dev/null +++ b/packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts @@ -0,0 +1,97 @@ +import { useMemo, useState, useEffect, useCallback } from 'react'; + +import { getSynchronize } from '@trezor/utils'; +import { getTxsPerPage } from '@suite-common/suite-utils'; +import { fetchTransactionsThunk } from '@suite-common/wallet-core'; +import { useDispatch } from 'src/hooks/suite'; +import { Account, WalletAccountTransaction } from 'src/types/wallet'; + +const getPaging = (network: Account['networkType'], txFetched: number, txTotal: number) => { + const perPage = getTxsPerPage(network); + // There is no total in XRP, so always presume there could be one more tx and calculate page count accordingly + const totalItems = network === 'ripple' ? txFetched + 1 : txTotal; + const pagesTotal = Math.ceil(totalItems / perPage); + // Consider incomplete pages unfetched unless fetched tx count equals total + const page = txFetched === totalItems ? pagesTotal : Math.floor(txFetched / perPage); + + return { page, pagesTotal, perPage }; +}; + +export const useFetchTransactions = ( + account: Account, + transactions: WalletAccountTransaction[], +) => { + const accountKey = account.key; + const { page, pagesTotal, perPage } = getPaging( + account.networkType, + transactions.length, + account.history.total, + ); + + const [pagesFetched, setPagesFetched] = useState(1); + const [isFetching, setFetching] = useState(false); + const [fetchedAll, setFetchedAll] = useState(false); + + useEffect(() => { + setPagesFetched(1); + setFetching(false); + setFetchedAll(false); + }, [accountKey]); + + useEffect(() => { + if (page > pagesFetched) { + setPagesFetched(page); + } + }, [pagesFetched, page]); + + const isLastPage = pagesFetched >= pagesTotal; + + useEffect(() => { + if (!fetchedAll && isLastPage) { + setFetchedAll(true); + } + }, [fetchedAll, isLastPage]); + + const synchronize = useMemo(getSynchronize, [accountKey]); + const dispatch = useDispatch(); + + const fetchCommon = useCallback( + (page: number, recursive: boolean) => + dispatch( + fetchTransactionsThunk({ + accountKey, + page, + perPage, + recursive, + noLoading: recursive, + }), + ), + [dispatch, accountKey, perPage], + ); + + const fetchNext = useCallback( + () => + synchronize(async () => { + if (fetchedAll) return; + setFetching(true); + await fetchCommon(pagesFetched + 1, false); + setFetching(false); + setPagesFetched(pagesFetched + 1); + }), + [synchronize, fetchCommon, pagesFetched, fetchedAll], + ); + + const fetchAll = useCallback( + () => + synchronize(async () => { + if (fetchedAll) return; + setFetching(true); + await fetchCommon(pagesFetched + 1, true); + setFetching(false); + setFetchedAll(true); + }), + [synchronize, fetchCommon, pagesFetched, fetchedAll], + ); + + return { fetchNext, fetchAll, isFetching, fetchedAll }; +}; From f285ed9c1f3d2f396a8e3196eea1a7ddc8bb96a3 Mon Sep 17 00:00:00 2001 From: Marek Polak Date: Tue, 27 Feb 2024 17:11:23 +0100 Subject: [PATCH 3/5] feat(suite): remove TransactionList pagination --- .../TransactionList/TransactionList.tsx | 92 +++---------------- .../TransactionListActions/ExportAction.tsx | 23 +++-- .../TransactionListActions/SearchAction.tsx | 42 +++------ 3 files changed, 36 insertions(+), 121 deletions(-) diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx index c86b47a6085..a5698a547a3 100644 --- a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx +++ b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx @@ -1,8 +1,7 @@ -import { useMemo, useState, useEffect, useRef } from 'react'; +import { useMemo, useState, useEffect } from 'react'; import styled from 'styled-components'; import useDebounce from 'react-use/lib/useDebounce'; -import { fetchTransactionsThunk } from '@suite-common/wallet-core'; import { groupTransactionsByDate, advancedSearchTransactions, @@ -12,34 +11,29 @@ import { import { CoinjoinBatchItem } from 'src/components/wallet/TransactionItem/CoinjoinBatchItem'; import { Translation } from 'src/components/suite'; import { DashboardSection } from 'src/components/dashboard'; -import { useDispatch, useSelector } from 'src/hooks/suite'; +import { useSelector } from 'src/hooks/suite'; import { WalletAccountTransaction, Account } from 'src/types/wallet'; import { SearchAction } from './TransactionListActions/SearchAction'; import { ExportAction } from './TransactionListActions/ExportAction'; import { TransactionItem } from 'src/components/wallet/TransactionItem/TransactionItem'; -import { Pagination } from 'src/components/wallet'; import { TransactionsGroup } from './TransactionsGroup/TransactionsGroup'; import { SkeletonTransactionItem } from './SkeletonTransactionItem'; import { NoSearchResults } from './NoSearchResults'; -import { findAnchorTransactionPage } from 'src/utils/suite/anchor'; import { TransactionCandidates } from './TransactionCandidates'; import { selectLabelingDataForAccount } from 'src/reducers/suite/metadataReducer'; -import { getTxsPerPage } from '@suite-common/suite-utils'; import { SkeletonStack } from '@trezor/components'; import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer'; +import { useFetchTransactions } from './useFetchTransactions'; const StyledSection = styled(DashboardSection)` margin-bottom: 20px; `; -const PaginationWrapper = styled.div` - margin-top: 20px; -`; - const ActionsWrapper = styled.div` display: flex; align-items: center; `; + interface TransactionListProps { transactions: WalletAccountTransaction[]; symbol: WalletAccountTransaction['symbol']; @@ -59,16 +53,12 @@ export const TransactionList = ({ }: TransactionListProps) => { const localCurrency = useSelector(selectLocalCurrency); const anchor = useSelector(state => state.router.anchor); - const dispatch = useDispatch(); const accountMetadata = useSelector(state => selectLabelingDataForAccount(state, account.key)); const network = getAccountNetwork(account); // Search const [searchQuery, setSearchQuery] = useState(''); const [searchedTransactions, setSearchedTransactions] = useState(transactions); - const [hasFetchedAll, setHasFetchedAll] = useState(false); - - const sectionRef = useRef(null); useDebounce( () => { @@ -79,58 +69,17 @@ export const TransactionList = ({ [transactions, account.metadata, searchQuery, accountMetadata], ); - useEffect(() => { - if (anchor && !hasFetchedAll) { - dispatch( - fetchTransactionsThunk({ - accountKey: account.key, - page: 2, - perPage: getTxsPerPage(account.networkType), - noLoading: true, - recursive: true, - }), - ); - setHasFetchedAll(true); - } - }, [anchor, account, dispatch, hasFetchedAll]); - - // Pagination - const perPage = getTxsPerPage(account.networkType); - const startPage = findAnchorTransactionPage(transactions, perPage, anchor); - const [currentPage, setSelectedPage] = useState(startPage); + const { fetchNext, fetchAll, fetchedAll } = useFetchTransactions(account, transactions); useEffect(() => { - // reset page on account change - setSelectedPage(startPage); - }, [account.descriptor, account.symbol, startPage]); + if (anchor) fetchAll(); + }, [anchor, fetchAll]); const isSearching = searchQuery.trim() !== ''; - const defaultTotalItems = customTotalItems ?? account.history.total; - const totalItems = isSearching ? searchedTransactions.length : defaultTotalItems; - - const onPageSelected = (page: number) => { - setSelectedPage(page); - - if (!isSearching) { - dispatch(fetchTransactionsThunk({ accountKey: account.key, page, perPage })); - } - - if (sectionRef.current) { - sectionRef.current.scrollIntoView(); - } - }; - - const startIndex = (currentPage - 1) * perPage; - const stopIndex = startIndex + perPage; - - const slicedTransactions = useMemo( - () => searchedTransactions.slice(startIndex, stopIndex), - [searchedTransactions, startIndex, stopIndex], - ); const transactionsByDate = useMemo( - () => groupTransactionsByDate(slicedTransactions), - [slicedTransactions], + () => groupTransactionsByDate(searchedTransactions), + [searchedTransactions], ); const listItems = useMemo( @@ -173,17 +122,10 @@ export const TransactionList = ({ [transactionsByDate, account.key, localCurrency, symbol, network, accountMetadata], ); - // if total pages cannot be determined check current page and number of txs (XRP) - // Edge case: if there is exactly 25 Ripple txs, pagination will be displayed - const isRipple = account.networkType === 'ripple'; - const isLastRipplePage = isRipple && slicedTransactions.length < perPage; - const showRipplePagination = !(isLastRipplePage && currentPage === 1); - const showPagination = isRipple ? showRipplePagination : totalItems > perPage; const areTransactionsAvailable = transactions.length > 0 && searchedTransactions.length === 0; return ( } actions={ @@ -191,13 +133,14 @@ export const TransactionList = ({ account={account} searchQuery={searchQuery} setSearch={setSearchQuery} - setSelectedPage={setSelectedPage} + fetchAll={fetchAll} /> {isExportable && ( )} @@ -219,18 +162,7 @@ export const TransactionList = ({ <>{areTransactionsAvailable ? : listItems} )} - {showPagination && ( - - - - )} + {/* TODO add fetching logic */} ); }; diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/ExportAction.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/ExportAction.tsx index d03688ed4a6..43268d08360 100644 --- a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/ExportAction.tsx +++ b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/ExportAction.tsx @@ -6,10 +6,10 @@ import { useDispatch } from 'src/hooks/suite'; import { useTranslation } from 'src/hooks/suite/useTranslation'; import { useSelector } from 'src/hooks/suite/useSelector'; import { notificationsActions } from '@suite-common/toast-notifications'; -import { exportTransactionsThunk, fetchTransactionsThunk } from '@suite-common/wallet-core'; +import { exportTransactionsThunk } from '@suite-common/wallet-core'; import { ExportFileType } from '@suite-common/wallet-types'; import { Account } from 'src/types/wallet'; -import { isFeatureFlagEnabled, getTxsPerPage } from '@suite-common/suite-utils'; +import { isFeatureFlagEnabled } from '@suite-common/suite-utils'; import { getTitleForNetwork, getTitleForCoinjoinAccount } from '@suite-common/wallet-utils'; import { selectLabelingDataForSelectedAccount } from 'src/reducers/suite/metadataReducer'; import { AccountLabels } from '@suite-common/metadata-types'; @@ -18,9 +18,15 @@ export interface ExportActionProps { account: Account; searchQuery: string; accountMetadata: AccountLabels; + fetchAll: () => Promise; } -export const ExportAction = ({ account, searchQuery, accountMetadata }: ExportActionProps) => { +export const ExportAction = ({ + account, + searchQuery, + accountMetadata, + fetchAll, +}: ExportActionProps) => { const [isExportRunning, setIsExportRunning] = useState(false); const dispatch = useDispatch(); const { translationString } = useTranslation(); @@ -54,15 +60,7 @@ export const ExportAction = ({ account, searchQuery, accountMetadata }: ExportAc setIsExportRunning(true); try { - await dispatch( - fetchTransactionsThunk({ - accountKey: account.key, - page: 2, - perPage: getTxsPerPage(account.networkType), - noLoading: true, - recursive: true, - }), - ); + await fetchAll(); const accountName = accountLabel || getAccountTitle(); await dispatch( exportTransactionsThunk({ @@ -88,6 +86,7 @@ export const ExportAction = ({ account, searchQuery, accountMetadata }: ExportAc [ isExportRunning, account, + fetchAll, dispatch, translationString, getAccountTitle, diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/SearchAction.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/SearchAction.tsx index 6bcb67a339f..dcbae51e258 100644 --- a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/SearchAction.tsx +++ b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionListActions/SearchAction.tsx @@ -15,8 +15,7 @@ import { useTranslation } from 'src/hooks/suite/useTranslation'; import { notificationsActions } from '@suite-common/toast-notifications'; import { Account } from 'src/types/wallet'; import { TooltipSymbol, Translation } from 'src/components/suite'; -import { isFeatureFlagEnabled, getTxsPerPage } from '@suite-common/suite-utils'; -import { fetchTransactionsThunk } from '@suite-common/wallet-core'; +import { isFeatureFlagEnabled } from '@suite-common/suite-utils'; import { borders, spacingsPx } from '@trezor/theme'; const Container = styled.div` @@ -66,12 +65,11 @@ export interface SearchProps { account: Account; searchQuery: string; setSearch: Dispatch>; - setSelectedPage: Dispatch>; + fetchAll: () => Promise; } -export const SearchAction = ({ account, searchQuery, setSearch, setSelectedPage }: SearchProps) => { +export const SearchAction = ({ account, searchQuery, setSearch, fetchAll }: SearchProps) => { const [isExpanded, setExpanded] = useState(false); - const [hasFetchedAll, setHasFetchedAll] = useState(false); const theme = useTheme(); const inputRef = useRef(null); @@ -104,33 +102,20 @@ export const SearchAction = ({ account, searchQuery, setSearch, setSelectedPage const onSearch = useCallback( async ({ target }: ChangeEvent) => { - setSelectedPage(1); setSearch(target.value); - if (!hasFetchedAll) { - setHasFetchedAll(true); - - try { - await dispatch( - fetchTransactionsThunk({ - accountKey: account.key, - page: 2, - perPage: getTxsPerPage(account.networkType), - noLoading: true, - recursive: true, - }), - ); - } catch (err) { - dispatch( - notificationsActions.addToast({ - type: 'error', - error: translationString('TR_SEARCH_FAIL'), - }), - ); - } + try { + await fetchAll(); + } catch (err) { + dispatch( + notificationsActions.addToast({ + type: 'error', + error: translationString('TR_SEARCH_FAIL'), + }), + ); } }, - [account, dispatch, hasFetchedAll, setSearch, setSelectedPage, translationString], + [dispatch, fetchAll, setSearch, translationString], ); const onSearchKeys = useCallback( @@ -148,7 +133,6 @@ export const SearchAction = ({ account, searchQuery, setSearch, setSelectedPage ); useEffect(() => { - setHasFetchedAll(false); setExpanded(false); setSearch(''); From c67b9c94ba1a63b30a13ac4260be3061ad2d2283 Mon Sep 17 00:00:00 2001 From: Marek Polak Date: Wed, 6 Mar 2024 14:11:08 +0100 Subject: [PATCH 4/5] feat(suite): unify standard/staking tx lists --- .../components/Transactions.tsx | 17 ++++------ .../TransactionList/TransactionList.tsx | 33 ++++++++++++------- .../wallet/transactions/Transactions.tsx | 2 -- .../src/transactions/transactionsReducer.ts | 11 +------ 4 files changed, 29 insertions(+), 34 deletions(-) diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/Transactions.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/Transactions.tsx index d8a4749c639..6e5fa3b34b0 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/Transactions.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/Transactions.tsx @@ -1,18 +1,16 @@ import { TransactionList } from 'src/views/wallet/transactions/TransactionList/TransactionList'; import { useSelector } from 'src/hooks/suite'; -import { - selectAccountStakeTypeTransactions, - selectIsLoadingTransactions, -} from '@suite-common/wallet-core'; +import { selectAccountTransactions, selectIsLoadingTransactions } from '@suite-common/wallet-core'; +import { isStakeTypeTx } from '@suite-common/suite-utils'; export const Transactions = () => { const transactionsIsLoading = useSelector(selectIsLoadingTransactions); const selectedAccount = useSelector(state => state.wallet.selectedAccount); - const stakeTxs = useSelector(state => - selectAccountStakeTypeTransactions(state, selectedAccount.account?.key || ''), + const accountTxs = useSelector(state => + selectAccountTransactions(state, selectedAccount.account?.key || ''), ); - if (selectedAccount.status !== 'loaded' || stakeTxs.length < 1) { + if (selectedAccount.status !== 'loaded' || accountTxs.length < 1) { return null; } @@ -21,10 +19,9 @@ export const Transactions = () => { return ( isStakeTypeTx(tx.ethereumSpecific?.parsedData?.methodId)} isLoading={transactionsIsLoading} - customTotalItems={stakeTxs.length} isExportable={false} /> ); diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx index a5698a547a3..fe0a5ecc32d 100644 --- a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx +++ b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx @@ -35,20 +35,18 @@ const ActionsWrapper = styled.div` `; interface TransactionListProps { + account: Account; transactions: WalletAccountTransaction[]; - symbol: WalletAccountTransaction['symbol']; + transactionFilter?: (tx: WalletAccountTransaction) => boolean; isLoading?: boolean; - account: Account; - customTotalItems?: number; isExportable?: boolean; } export const TransactionList = ({ + account, transactions, + transactionFilter, isLoading, - account, - symbol, - customTotalItems, isExportable = true, }: TransactionListProps) => { const localCurrency = useSelector(selectLocalCurrency); @@ -56,17 +54,27 @@ export const TransactionList = ({ const accountMetadata = useSelector(state => selectLabelingDataForAccount(state, account.key)); const network = getAccountNetwork(account); + // Filter + const filteredTransactions = useMemo( + () => (transactionFilter ? transactions.filter(transactionFilter) : transactions), + [transactions, transactionFilter], + ); + // Search const [searchQuery, setSearchQuery] = useState(''); - const [searchedTransactions, setSearchedTransactions] = useState(transactions); + const [searchedTransactions, setSearchedTransactions] = useState(filteredTransactions); useDebounce( () => { - const results = advancedSearchTransactions(transactions, accountMetadata, searchQuery); + const results = advancedSearchTransactions( + filteredTransactions, + accountMetadata, + searchQuery, + ); setSearchedTransactions(results); }, 200, - [transactions, account.metadata, searchQuery, accountMetadata], + [filteredTransactions, account.metadata, searchQuery, accountMetadata], ); const { fetchNext, fetchAll, fetchedAll } = useFetchTransactions(account, transactions); @@ -91,7 +99,7 @@ export const TransactionList = ({ ); }), - [transactionsByDate, account.key, localCurrency, symbol, network, accountMetadata], + [transactionsByDate, account.key, localCurrency, account.symbol, network, accountMetadata], ); - const areTransactionsAvailable = transactions.length > 0 && searchedTransactions.length === 0; + const areTransactionsAvailable = + filteredTransactions.length > 0 && searchedTransactions.length === 0; return ( { )} @@ -89,7 +88,6 @@ export const Transactions = () => { diff --git a/suite-common/wallet-core/src/transactions/transactionsReducer.ts b/suite-common/wallet-core/src/transactions/transactionsReducer.ts index 97525353d17..e4d636864c0 100644 --- a/suite-common/wallet-core/src/transactions/transactionsReducer.ts +++ b/suite-common/wallet-core/src/transactions/transactionsReducer.ts @@ -7,7 +7,7 @@ import { isPending, getIsPhishingTransaction, } from '@suite-common/wallet-utils'; -import { isClaimTx, isStakeTx, isStakeTypeTx, isUnstakeTx } from '@suite-common/suite-utils'; +import { isClaimTx, isStakeTx, isUnstakeTx } from '@suite-common/suite-utils'; import { createReducerWithExtraDeps } from '@suite-common/redux-utils'; import { accountsActions } from '../accounts/accountsActions'; @@ -304,15 +304,6 @@ export const selectIsPhishingTransaction = ( return getIsPhishingTransaction(transaction, tokenDefinitions); }; -export const selectAccountStakeTypeTransactions = ( - state: TransactionsRootState, - accountKey: AccountKey, -) => { - const transactions = selectAccountTransactions(state, accountKey); - - return transactions.filter(tx => isStakeTypeTx(tx?.ethereumSpecific?.parsedData?.methodId)); -}; - export const selectAccountStakeTransactions = ( state: TransactionsRootState, accountKey: AccountKey, From 91c3105f2b8a634762f6b5f23097ce0c726a104b Mon Sep 17 00:00:00 2001 From: Marek Polak Date: Wed, 6 Mar 2024 14:11:45 +0100 Subject: [PATCH 5/5] temp(suite): REMOVE LATER --- .../TransactionList/TransactionList.tsx | 44 ++++++++++++++++++- .../TransactionList/useFetchTransactions.ts | 9 +++- 2 files changed, 50 insertions(+), 3 deletions(-) diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx index fe0a5ecc32d..5d1e7f5bb5d 100644 --- a/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx +++ b/packages/suite/src/views/wallet/transactions/TransactionList/TransactionList.tsx @@ -34,6 +34,38 @@ const ActionsWrapper = styled.div` align-items: center; `; +const TEMPINFOPANEL = ({ + info, + searched, + filtered, +}: { + info: ReturnType['TEMPINFO']; + searched: WalletAccountTransaction[]; + filtered: WalletAccountTransaction[]; +}) => ( +
+ FETCHED {info.pagesFetched}/{info.pagesTotal} PAGES ({info.txFetched}/{info.txTotal} TXS) +
+ {info.txFetched} -> FILTER -> {filtered.length} -> SEARCH -> {searched.length} +
+); + +const TEMPBUTTON = ({ + fetchedAll, + fetchNext, +}: { + fetchedAll: boolean; + fetchNext: () => unknown; +}) => ( + +); + interface TransactionListProps { account: Account; transactions: WalletAccountTransaction[]; @@ -77,7 +109,10 @@ export const TransactionList = ({ [filteredTransactions, account.metadata, searchQuery, accountMetadata], ); - const { fetchNext, fetchAll, fetchedAll } = useFetchTransactions(account, transactions); + const { fetchNext, fetchAll, fetchedAll, TEMPINFO } = useFetchTransactions( + account, + transactions, + ); useEffect(() => { if (anchor) fetchAll(); @@ -171,7 +206,12 @@ export const TransactionList = ({ <>{areTransactionsAvailable ? : listItems} )} - {/* TODO add fetching logic */} + + ); }; diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts b/packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts index 728b599aca2..46980a8b4e6 100644 --- a/packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts +++ b/packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts @@ -93,5 +93,12 @@ export const useFetchTransactions = ( [synchronize, fetchCommon, pagesFetched, fetchedAll], ); - return { fetchNext, fetchAll, isFetching, fetchedAll }; + const TEMPINFO = { + txTotal: account.networkType === 'ripple' ? NaN : account.history.total, + txFetched: transactions.length, + pagesTotal: account.networkType === 'ripple' ? NaN : pagesTotal, + pagesFetched, + }; + + return { fetchNext, fetchAll, isFetching, fetchedAll, TEMPINFO }; };