Hdm 21 (#2640)

* fix(dashboard/ui-2024/transactions-table): disable next page button if last page

* fix(dashboard/ui-2024/transactions-table): display correct  items count in pagination

Author: KacperKoza343

packages/apps/dashboard/ui-2024/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx

@@ -7,6 +7,7 @@ import Table from '@mui/material/Table';
 import { EscrowsTableBody } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/tableComponents/EscrowsTableBody';
 import TablePagination from '@mui/material/TablePagination';
 import { useEscrowDetailsDto } from '@utils/hooks/use-escrows-details-dto';
+import { useEscrowDetails } from '@services/api/use-escrows-details';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import { Stack } from '@mui/material';
@@ -16,6 +17,7 @@ export const RoleDetailsEscrowsTable = ({
 }: {
 	role: AddressDetailsLeader['role'];
 }) => {
+	const { data } = useEscrowDetails({ role });
 	const {
 		pagination: { page, pageSize, lastPageIndex },
 		setPageSize,
@@ -76,7 +78,10 @@ export const RoleDetailsEscrowsTable = ({
 						}}
 						rowsPerPageOptions={[5, 10]}
 						labelDisplayedRows={({ from, to }) => {
-							return `${from}–${to}`;
+							const effectiveTo = data?.results
+								? from + data.results.length - 1
+								: to;
+							return `${from}–${effectiveTo}`;
 						}}
 						component="div"
 						slotProps={{

packages/apps/dashboard/ui-2024/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/WalletAddressTransactionsTable.tsx

@@ -8,8 +8,10 @@ import { TransactionsTableHead } from '@pages/SearchResults/WalletAddress/Wallet
 import { TransactionsTableBody } from '@pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody';
 import { useTransactionDetailsDto } from '@utils/hooks/use-transactions-details-dto';
 import { TableFooter } from '@mui/material';
+import { useTransactionDetails } from '@services/api/use-transaction-details';
 
 export const WalletAddressTransactionsTable = () => {
+	const { data } = useTransactionDetails();
 	const {
 		pagination: { page, pageSize, lastPageIndex },
 		setPageSize,
@@ -57,7 +59,10 @@ export const WalletAddressTransactionsTable = () => {
 									}}
 									rowsPerPageOptions={[5, 10]}
 									labelDisplayedRows={({ from, to }) => {
-										return `${from}–${to}`;
+										const effectiveTo = data?.results
+											? from + data.results.length - 1
+											: to;
+										return `${from}–${effectiveTo}`;
 									}}
 									slotProps={{
 										actions: {

packages/apps/dashboard/ui-2024/src/services/api/use-escrows-details.tsx

@@ -42,7 +42,11 @@ export function useEscrowDetails({
 	role: AddressDetailsLeader['role'];
 }) {
 	const { filterParams } = useWalletSearch();
-	const { params } = useEscrowDetailsDto();
+	const {
+		setLastPageIndex,
+		pagination: { page, lastPageIndex },
+		params,
+	} = useEscrowDetailsDto();
 
 	const dto: PaginatedEscrowsDetailsDto = {
 		chainId: filterParams.chainId,
@@ -65,6 +69,28 @@ export function useEscrowDetails({
 				paginatedEscrowsDetailsSuccessResponseSchema
 			);
 
+			// check if last page
+			if (lastPageIndex === undefined) {
+				const { data: lastPageCheckData } = await httpService.get(
+					`${apiPaths.escrowDetails.path}/${filterParams.address}`,
+					{
+						params: {
+							...dto,
+							skip: dto.skip + validResponse.results.length,
+							first: 1,
+						},
+					}
+				);
+				const validLastPageCheckData = validateResponse(
+					lastPageCheckData,
+					paginatedEscrowsDetailsSuccessResponseSchema
+				);
+
+				if (validLastPageCheckData.results.length === 0) {
+					setLastPageIndex(page + 1);
+				}
+			}
+
 			return validResponse;
 		},
 		queryKey: ['useEscrowDetails', filterParams.address, dto],

packages/apps/dashboard/ui-2024/src/services/api/use-transaction-details.tsx

@@ -39,7 +39,11 @@ export interface PaginatedTransactionDetailsDto {
 
 export function useTransactionDetails() {
 	const { filterParams } = useWalletSearch();
-	const { params } = useTransactionDetailsDto();
+	const {
+		params,
+		pagination: { lastPageIndex, page },
+		setLastPageIndex,
+	} = useTransactionDetailsDto();
 
 	const dto: PaginatedTransactionDetailsDto = {
 		chainId: filterParams.chainId,
@@ -61,6 +65,28 @@ export function useTransactionDetails() {
 				paginatedTransactionDetailsSuccessResponseSchema
 			);
 
+			// check if last page
+			if (lastPageIndex === undefined) {
+				const { data: lastPageCheckData } = await httpService.get(
+					`${apiPaths.transactionDetails.path}/${filterParams.address}`,
+					{
+						params: {
+							...dto,
+							skip: dto.skip + validResponse.results.length,
+							first: 1,
+						},
+					}
+				);
+				const validLastPageCheckData = validateResponse(
+					lastPageCheckData,
+					paginatedTransactionDetailsSuccessResponseSchema
+				);
+
+				if (validLastPageCheckData.results.length === 0) {
+					setLastPageIndex(page + 1);
+				}
+			}
+
 			return validResponse;
 		},
 		queryKey: ['useTransactionDetails', filterParams.address, dto],