diff --git a/packages/app/src/components/Table/Pagination.tsx b/packages/app/src/components/Table/Pagination.tsx index 9876207204..e7dbd9a0fe 100644 --- a/packages/app/src/components/Table/Pagination.tsx +++ b/packages/app/src/components/Table/Pagination.tsx @@ -10,6 +10,8 @@ import { GridDivCenteredCol } from 'components/layout/grid' import { resetButtonCSS } from 'styles/common' import media from 'styles/media' +import StakingPagination from './StakingPagination' + type PaginationProps = { pageIndex: number pageCount: number @@ -19,6 +21,8 @@ type PaginationProps = { setPage: (page: number) => void previousPage: () => void nextPage: () => void + variant?: 'default' | 'staking' + extra?: React.ReactNode } const Pagination: FC = React.memo( @@ -31,38 +35,55 @@ const Pagination: FC = React.memo( setPage, nextPage, previousPage, + variant = 'default', + extra, }) => { const { t } = useTranslation() const firstPage = () => setPage(0) const toLastPage = () => setPage(pageCount - 1) - return ( - - - - - - - - - - - {t('common.pagination.page')}{' '} - {t('common.pagination.page-of-total-pages', { - page: pageIndex + 1, - totalPages: pageCount, - })} - - - - - - - - - - + return variant === 'default' ? ( + <> + + + + + + + + + + + {t('common.pagination.page')}{' '} + {t('common.pagination.page-of-total-pages', { + page: pageIndex + 1, + totalPages: pageCount, + })} + + + + + + + + + + + {extra} + + ) : ( + ) } ) diff --git a/packages/app/src/components/Table/PaginationArea.tsx b/packages/app/src/components/Table/PaginationArea.tsx deleted file mode 100644 index ea5c32be96..0000000000 --- a/packages/app/src/components/Table/PaginationArea.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import styled from 'styled-components' - -import { GridDivCenteredCol } from 'components/layout/grid' - -import CustomizePagination from './CustomizePagination' -import Pagination from './Pagination' - -type PaginationAreaProps = { - customizePagination: boolean - compact: boolean - pageIndex: number - pageCount: number - canNextPage: boolean - canPreviousPage: boolean - gotoPage: (page: number) => void - previousPage: () => void - nextPage: () => void - children?: React.ReactNode -} - -const PaginationArea: React.FC = ({ - customizePagination, - compact = false, - pageIndex, - pageCount, - canNextPage, - canPreviousPage, - gotoPage, - previousPage, - nextPage, - children, -}) => { - if (customizePagination) { - return ( - - - {children} - - ) - } - - return ( - <> - - {children} - - ) -} - -const PaginationContainer = styled(GridDivCenteredCol)` - background: ${(props) => props.theme.colors.selectedTheme.newTheme.containers.cards.background}; - padding: 20px 25px; - border-radius: 100px; - border: 1px solid ${(props) => props.theme.colors.selectedTheme.newTheme.border.color}; - margin-top: 15px; -` - -export default PaginationArea diff --git a/packages/app/src/components/Table/CustomizePagination.tsx b/packages/app/src/components/Table/StakingPagination.tsx similarity index 54% rename from packages/app/src/components/Table/CustomizePagination.tsx rename to packages/app/src/components/Table/StakingPagination.tsx index 570768840b..0ffac9b9fd 100644 --- a/packages/app/src/components/Table/CustomizePagination.tsx +++ b/packages/app/src/components/Table/StakingPagination.tsx @@ -18,9 +18,10 @@ type PaginationProps = { setPage: (page: number) => void previousPage: () => void nextPage: () => void + extra?: React.ReactNode } -const CustomizePagination: FC = React.memo( +const StakingPagination: FC = React.memo( ({ pageIndex, pageCount, @@ -30,6 +31,7 @@ const CustomizePagination: FC = React.memo( setPage, nextPage, previousPage, + extra, }) => { const { t } = useTranslation() @@ -37,44 +39,55 @@ const CustomizePagination: FC = React.memo( const toLastPage = () => setPage(pageCount - 1) return ( - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - {t('common.pagination.page')}{' '} - {t('common.pagination.page-of-total-pages', { - page: pageIndex + 1, - totalPages: pageCount, - })} - + + {t('common.pagination.page')}{' '} + {t('common.pagination.page-of-total-pages', { + page: pageIndex + 1, + totalPages: pageCount, + })} + + {extra} + ) } ) +const PaginationContainer = styled(GridDivCenteredCol)` + background: ${(props) => props.theme.colors.selectedTheme.newTheme.containers.cards.background}; + padding: 20px 25px; + border-radius: 100px; + border: 1px solid ${(props) => props.theme.colors.selectedTheme.newTheme.border.color}; + margin-top: 15px; +` + const PageInfo = styled.span` color: ${(props) => props.theme.colors.selectedTheme.gray}; margin-left: 10px; font-size: 13px; ` -const PaginationContainer = styled(GridDivCenteredCol)<{ compact: boolean }>` +const PageInfoContainer = styled(GridDivCenteredCol)<{ compact: boolean }>` grid-template-columns: auto 1fr auto; padding: ${(props) => (props.compact ? '10px' : '15px')} 12px; border-bottom-left-radius: 4px; @@ -100,4 +113,4 @@ const ArrowButton = styled.button` } ` -export default CustomizePagination +export default StakingPagination diff --git a/packages/app/src/components/Table/Table.tsx b/packages/app/src/components/Table/Table.tsx index 4dbc8a5a04..3b8df547a9 100644 --- a/packages/app/src/components/Table/Table.tsx +++ b/packages/app/src/components/Table/Table.tsx @@ -9,7 +9,7 @@ import Loader from 'components/Loader' import { Body } from 'components/Text' import media from 'styles/media' -import PaginationArea from './PaginationArea' +import Pagination from './Pagination' import TableBodyRow, { TableCell } from './TableBodyRow' export type TablePalette = 'primary' @@ -84,8 +84,9 @@ type TableProps = { rowStyle?: Record rounded?: boolean noBottom?: boolean - customizePagination?: boolean - children?: React.ReactNode + paginationVariant?: 'default' | 'staking' + paginationOutsideTable?: boolean + paginationExtra?: React.ReactNode } export const Table: FC = memo( @@ -111,8 +112,9 @@ export const Table: FC = memo( rowStyle = {}, rounded = true, noBottom = false, - customizePagination = false, - children = null, + paginationVariant = 'default', + paginationOutsideTable = false, + paginationExtra, }) => { const memoizedColumns = useMemo( () => columns, @@ -167,11 +169,20 @@ export const Table: FC = memo( }, [pageIndex, pageCount, gotoPage]) const defaultRef = useRef(null) - const shouldShowPagination = useMemo( + const showPaginationInsideTable = useMemo( () => - (showPagination && !showShortList && data.length > (pageSize ?? MAX_PAGE_ROWS)) || - !!children, - [children, data.length, pageSize, showPagination, showShortList] + showPagination && + !showShortList && + (paginationExtra || data.length > (pageSize ?? MAX_PAGE_ROWS)) && + !paginationOutsideTable, + [ + data.length, + pageSize, + paginationExtra, + paginationOutsideTable, + showPagination, + showShortList, + ] ) return ( @@ -241,34 +252,34 @@ export const Table: FC = memo( })} ) : null} - {!customizePagination && shouldShowPagination && ( - - )} + ) : undefined} - {customizePagination && shouldShowPagination && ( - )} @@ -327,7 +338,6 @@ const ReactTable = styled.div<{ palette: TablePalette; $rounded?: boolean; $noBo display: flex; flex-direction: column; width: 100%; - height: 100%; overflow: auto; position: relative; border: ${(props) => props.theme.colors.selectedTheme.border}; diff --git a/packages/app/src/pages/dashboard/staking.tsx b/packages/app/src/pages/dashboard/staking.tsx index ab5e32bb7f..853247d14f 100644 --- a/packages/app/src/pages/dashboard/staking.tsx +++ b/packages/app/src/pages/dashboard/staking.tsx @@ -11,6 +11,7 @@ import DashboardLayout from 'sections/dashboard/DashboardLayout' import EscrowTable from 'sections/dashboard/Stake/EscrowTable' import StakingPortfolio, { StakeTab } from 'sections/dashboard/Stake/StakingPortfolio' import StakingTabs from 'sections/dashboard/Stake/StakingTabs' +import { StakingCards } from 'sections/dashboard/Stake/types' import { useFetchStakeMigrateData } from 'state/futures/hooks' import { useAppDispatch, useAppSelector } from 'state/hooks' import { setStakingMigrationCompleted } from 'state/staking/reducer' @@ -29,21 +30,6 @@ import media from 'styles/media' type StakingComponent = React.FC & { getLayout: (page: ReactNode) => JSX.Element } -type StakingCard = { - key: string - title: string - value: string - onClick?: () => void -} - -export type StakingCards = { - category: string - card: StakingCard[] - onClick?: () => void - icon?: React.ReactNode - flex?: number -} - const StakingPage: StakingComponent = () => { const { t } = useTranslation() const router = useRouter() diff --git a/packages/app/src/sections/dashboard/Stake/EscrowTable.tsx b/packages/app/src/sections/dashboard/Stake/EscrowTable.tsx index 0b3d81e70e..df509c4ec0 100644 --- a/packages/app/src/sections/dashboard/Stake/EscrowTable.tsx +++ b/packages/app/src/sections/dashboard/Stake/EscrowTable.tsx @@ -140,7 +140,6 @@ const EscrowTable = () => { -