add escrow table pagination (Kwenta#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
candlenetwork · Dec 14, 2022 · 5af5a6d · 5af5a6d
1 parent af6e738
commit 5af5a6d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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={[
 						{