From 5af5a6dd7feb612c30f5db51bc618f0e9b326499 Mon Sep 17 00:00:00 2001
From: leifu <leifu.chen@gmail.com>
Date: Wed, 14 Dec 2022 15:43:58 +0200
Subject: [PATCH] add escrow table pagination (#1739)

* Increase the max total rows of the tables and add pagination

* Reduce the max page rows to 10

* Use the page size to control the number of rows per page

* Added page size to mobile escrow table

* Fixed the page size on mobile
---
 components/Table/Pagination.tsx          | 8 +++++---
 components/Table/Table.tsx               | 5 ++++-
 constants/defaults.ts                    | 2 +-
 sections/dashboard/Stake/EscrowTable.tsx | 7 ++++++-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/Table/Pagination.tsx b/components/Table/Pagination.tsx
index 7155459ddc..af2635b947 100644
--- a/components/Table/Pagination.tsx
+++ b/components/Table/Pagination.tsx
@@ -13,6 +13,7 @@ type PaginationProps = {
 	pageCount: number;
 	canNextPage: boolean;
 	canPreviousPage: boolean;
+	compact: boolean;
 	setPage: (page: number) => void;
 	previousPage: () => void;
 	nextPage: () => void;
@@ -24,6 +25,7 @@ const Pagination: FC<PaginationProps> = React.memo(
 		pageCount,
 		canNextPage = true,
 		canPreviousPage = true,
+		compact = false,
 		setPage,
 		nextPage,
 		previousPage,
@@ -34,7 +36,7 @@ const Pagination: FC<PaginationProps> = React.memo(
 		const toLastPage = () => setPage(pageCount - 1);
 
 		return (
-			<PaginationContainer>
+			<PaginationContainer compact={compact}>
 				<span>
 					<ArrowButton onClick={firstPage} disabled={!canPreviousPage}>
 						<LeftEndArrowIcon />
@@ -67,9 +69,9 @@ const PageInfo = styled.span`
 	color: ${(props) => props.theme.colors.selectedTheme.gray};
 `;
 
-const PaginationContainer = styled(GridDivCenteredCol)`
+const PaginationContainer = styled(GridDivCenteredCol)<{ compact: boolean }>`
 	grid-template-columns: auto 1fr auto;
-	padding: 15px 12px;
+	padding: ${(props) => (props.compact ? '10px' : '15px')} 12px;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 	justify-items: center;
diff --git a/components/Table/Table.tsx b/components/Table/Table.tsx
index 2605e88b9b..87da091dd0 100644
--- a/components/Table/Table.tsx
+++ b/components/Table/Table.tsx
@@ -15,7 +15,7 @@ export type TablePalette = 'primary';
 
 const CARD_HEIGHT = '40px';
 const MAX_PAGE_ROWS = 100;
-const MAX_TOTAL_ROWS = 1000;
+const MAX_TOTAL_ROWS = 9999;
 
 type ColumnWithSorting<D extends object = {}> = Column<D> & {
 	sortType?: string | ((rowA: Row<any>, rowB: Row<any>) => -1 | 1);
@@ -66,6 +66,7 @@ type TableProps = {
 	sortBy?: object[];
 	showShortList?: boolean;
 	lastRef?: any;
+	compactPagination?: boolean;
 };
 
 export const Table: FC<TableProps> = ({
@@ -86,6 +87,7 @@ export const Table: FC<TableProps> = ({
 	showShortList,
 	sortBy = [],
 	lastRef = null,
+	compactPagination = false,
 }) => {
 	const memoizedColumns = useMemo(
 		() => columns,
@@ -209,6 +211,7 @@ export const Table: FC<TableProps> = ({
 			</TableContainer>
 			{showPagination && !showShortList && data.length > (pageSize ?? MAX_PAGE_ROWS) ? (
 				<Pagination
+					compact={compactPagination}
 					pageIndex={pageIndex}
 					pageCount={pageCount}
 					canNextPage={canNextPage}
diff --git a/constants/defaults.ts b/constants/defaults.ts
index 71fa8f86b2..3dd508d4f9 100644
--- a/constants/defaults.ts
+++ b/constants/defaults.ts
@@ -39,7 +39,7 @@ export const DEFAULT_NUMBER_OF_TRADES: number = 16;
 export const MAX_TIMESTAMP: number = 8640000000000000;
 
 // for Fee History
-export const DEFAULT_NUMBER_OF_FUTURES_FEE: number = 5000;
+export const DEFAULT_NUMBER_OF_FUTURES_FEE: number = 9999;
 
 // leverage adjustment
 export const DEFAULT_NP_LEVERAGE_ADJUSTMENT: number = 0.9975;
diff --git a/sections/dashboard/Stake/EscrowTable.tsx b/sections/dashboard/Stake/EscrowTable.tsx
index 50644ad7c6..509bd24ef0 100644
--- a/sections/dashboard/Stake/EscrowTable.tsx
+++ b/sections/dashboard/Stake/EscrowTable.tsx
@@ -83,7 +83,9 @@ const EscrowTable = () => {
 			<DesktopOnlyView>
 				<StyledTable
 					data={escrowData}
-					showPagination={false}
+					compactPagination={true}
+					pageSize={10}
+					showPagination={true}
 					columnsDeps={columnsDeps}
 					columns={[
 						{
@@ -165,6 +167,9 @@ const EscrowTable = () => {
 			<MobileOrTabletView>
 				<StyledTable
 					data={escrowData}
+					compactPagination={true}
+					pageSize={5}
+					showPagination={true}
 					columnsDeps={columnsDeps}
 					columns={[
 						{