feat(app/leaderboard): update leaderboard page

packages/apps/dashboard/ui-2024/src/components/Home/index.ts

@@ -1,3 +1,2 @@
 export * from './SmallGraph';
 export * from './GraphSwiper';
-export * from './Leaderboard/Leaderboard';

packages/apps/dashboard/ui-2024/src/components/Home/Leaderboard/components/Table/Table.tsx → packages/apps/dashboard/ui-2024/src/features/Leaderboard/components/Table.tsx

@@ -6,16 +6,16 @@ import TableBody from '@mui/material/TableBody';
 import Grid from '@mui/material/Grid';
 import AbbreviateClipboard from '@components/SearchResults/AbbreviateClipboard';
 import { useNavigate } from 'react-router-dom';
-import { ReputationLabel } from '@components/Home/Leaderboard/components/ReputationLabel';
-import { EntityIcon } from '@components/Home/Leaderboard/components/EntityIcon';
-import { TableHead } from '@components/Home/Leaderboard/components/Table/TableHead';
+import { ReputationLabel } from './ReputationLabel';
+import { EntityIcon } from './EntityIcon';
+import { TableHead } from './TableHead';
 import { LeaderBoardData } from '@services/api/use-leaderboard-details';
 import {
 	getComparator,
 	Order,
 	SortableFieldsInLeaderBoardData,
 	stableSort,
-} from '@components/Home/Leaderboard/components/Table/sorting';
+} from '../helpers/sorting';
 import { useLeaderboardSearch } from '@utils/hooks/use-leaderboard-search';
 import { getNetwork } from '@utils/config/networks';
 import { NetworkIcon } from '@components/NetworkIcon';
@@ -26,25 +26,6 @@ import { handleErrorMessage } from '@services/handle-error-message';
 import Loader from '@components/Loader';
 import { useBreakPoints } from '@utils/hooks/use-is-mobile';
 
-const TableBodyWrapper = ({ children }: { children: JSX.Element | string }) => {
-	return (
-		<Stack
-			sx={{
-				position: 'absolute',
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				display: 'flex',
-				justifyContent: 'center',
-				alignItems: 'center',
-			}}
-		>
-			{children}
-		</Stack>
-	);
-};
-
 export const Table = ({
 	data = [],
 	status,
@@ -207,6 +188,25 @@ export const Table = ({
 	);
 };
 
+function TableBodyWrapper({ children }: { children: JSX.Element | string }) {
+	return (
+		<Stack
+			sx={{
+				position: 'absolute',
+				top: 0,
+				left: 0,
+				width: '100%',
+				height: '100%',
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+			}}
+		>
+			{children}
+		</Stack>
+	);
+}
+
 function getAfterElementProperties(
 	isFirstElement: boolean,
 	isLastElement: boolean

packages/apps/dashboard/ui-2024/src/components/Home/Leaderboard/components/Table/TableHead.tsx → packages/apps/dashboard/ui-2024/src/features/Leaderboard/components/TableHead.tsx

@@ -6,13 +6,10 @@ import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
-import {
-	Order,
-	SortableFieldsInLeaderBoardData,
-} from '@components/Home/Leaderboard/components/Table/sorting';
-import { SelectNetwork } from '@components/Home/Leaderboard/components/SelectNetwork';
+import { SelectNetwork } from './SelectNetwork';
 import { colorPalette } from '@assets/styles/color-palette';
 import { useBreakPoints } from '@utils/hooks/use-is-mobile';
+import { Order, SortableFieldsInLeaderBoardData } from '../helpers/sorting';
 
 interface TableHeadProps {
 	onRequestSort: (

packages/apps/dashboard/ui-2024/src/features/Leaderboard/index.tsx

@@ -0,0 +1,57 @@
+import { colorPalette } from '@assets/styles/color-palette';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import TableContainer from '@mui/material/TableContainer';
+import { LeaderBoardData } from '@services/api/use-leaderboard-details';
+import { useNavigate } from 'react-router-dom';
+import SimpleBar from 'simplebar-react';
+import { SelectNetwork } from './components/SelectNetwork';
+import { Table } from './components/Table';
+
+export type LeaderboardCommonProps = {
+	data: LeaderBoardData | undefined;
+	status: 'success' | 'error' | 'pending';
+	error: unknown;
+};
+
+export const Leaderboard = ({
+	data,
+	status,
+	error,
+	viewAllBanner,
+}: LeaderboardCommonProps & {
+	viewAllBanner?: boolean;
+}) => {
+	const navigate = useNavigate();
+	return (
+		<TableContainer
+			component={Paper}
+			sx={{ padding: '32px', marginTop: '30px' }}
+		>
+			<div className="mobile-select">
+				<SelectNetwork />
+			</div>
+			<SimpleBar>
+				<Table data={data} status={status} error={error} />
+			</SimpleBar>
+			{viewAllBanner ? (
+				<Box
+					sx={{
+						height: '42px',
+						border: `1px ${colorPalette.primary.main} solid`,
+						borderRadius: '4px',
+						display: 'flex',
+						justifyContent: 'center',
+						alignItems: 'center',
+						cursor: 'pointer',
+					}}
+					onClick={() => {
+						navigate('/leaderboard');
+					}}
+				>
+					View All
+				</Box>
+			) : null}
+		</TableContainer>
+	);
+};

packages/apps/dashboard/ui-2024/src/pages/Home/Home.tsx

@@ -8,7 +8,7 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import Divider from '@mui/material/Divider';
 import { Link } from 'react-router-dom';
 import cup from '@assets/cup.png';
-import Leaderboard from '@components/Home/Leaderboard/Leaderboard';
+import { Leaderboard } from './Leaderboard';
 import GraphSwiper from '@components/Home/GraphSwiper';
 import { HMTPrice } from '@pages/Home/HMTPrice';
 import { TotalNumberOfTasks } from '@pages/Home/TotalNumberOfTasks';

packages/apps/dashboard/ui-2024/src/pages/Home/Leaderboard.tsx

@@ -0,0 +1,16 @@
+import { useLeaderboardDetails } from '@services/api/use-leaderboard-details';
+import { Leaderboard as LeaderboardFeature } from '../../features/Leaderboard';
+
+export const Leaderboard = () => {
+	const { data, status, error } = useLeaderboardDetails();
+	const isMoreThatFiveEntries = data?.length && data.length > 5;
+
+	return (
+		<LeaderboardFeature
+			data={isMoreThatFiveEntries ? data.slice(0, 5) : data}
+			status={status}
+			error={error}
+			viewAllBanner
+		/>
+	);
+};

packages/apps/dashboard/ui-2024/src/pages/Leaderboard/index.tsx

@@ -2,15 +2,13 @@ import Breadcrumbs from '@components/Breadcrumbs';
 import PageWrapper from '@components/PageWrapper';
 import ShadowIcon from '@components/ShadowIcon';
 import cup from '@assets/cup.png';
-import { useLeaderboardDetails } from '@services/api/use-leaderboard-details';
-import TableContainer from '@mui/material/TableContainer';
-import { SelectNetwork } from '@components/Home/Leaderboard/components/SelectNetwork';
-import SimpleBar from 'simplebar-react';
-import { Table } from '@components/Home/Leaderboard/components/Table/Table';
-import Paper from '@mui/material/Paper';
+import { Leaderboard } from '../../features/Leaderboard/index';
+import { useLeaderboardAllDetails } from '@services/api/use-leaderboard-all-details';
 
 export const LeaderBoard = () => {
-	const { data, status, error } = useLeaderboardDetails();
+	const { data, status, error } = useLeaderboardAllDetails();
+	const isMoreThatFiveEntries = data?.length && data.length > 5;
+
 	return (
 		<PageWrapper displaySearchBar className="standard-background">
 			<Breadcrumbs title="Leaderboard" />
@@ -19,17 +17,11 @@ export const LeaderBoard = () => {
 				title="Leaderboard"
 				img={cup}
 			/>
-			<TableContainer
-				component={Paper}
-				sx={{ padding: '32px', marginTop: '30px' }}
-			>
-				<div className="mobile-select">
-					<SelectNetwork />
-				</div>
-				<SimpleBar>
-					<Table data={data} status={status} error={error} />
-				</SimpleBar>
-			</TableContainer>
+			<Leaderboard
+				data={isMoreThatFiveEntries ? data.slice(0, 5) : data}
+				status={status}
+				error={error}
+			/>
 		</PageWrapper>
 	);
 };

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

@@ -5,11 +5,11 @@ import { AddressDetailsLeader } from '@services/api/use-address-details';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
 import { EscrowsTableBody } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/tableComponents/EscrowsTableBody';
-import TableFooter from '@mui/material/TableFooter';
 import TablePagination from '@mui/material/TablePagination';
 import { useEscrowDetailsDto } from '@utils/hooks/use-escrows-details-dto';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
+import { Stack } from '@mui/material';
 
 export const RoleDetailsEscrowsTable = ({
 	role,
@@ -54,42 +54,47 @@ export const RoleDetailsEscrowsTable = ({
 							<TableRow></TableRow>
 						</TableHead>
 						<EscrowsTableBody role={role} />
-						<TableFooter>
-							<TablePagination
-								// count is unknown but required as props
-								count={9999}
-								// onPageChange is required as props
-								onPageChange={() => {}}
-								page={page}
-								rowsPerPage={pageSize}
-								onRowsPerPageChange={(event) => {
-									setPageSize(Number(event.target.value));
-								}}
-								rowsPerPageOptions={[5, 10]}
-								labelDisplayedRows={({ from, to }) => {
-									return `${from}–${to}`;
-								}}
-								slotProps={{
-									actions: {
-										nextButton: {
-											onClick: () => {
-												setNextPage();
-											},
-											disabled:
-												lastPageIndex !== undefined &&
-												(page === lastPageIndex || lastPageIndex - 1 === page),
-										},
-										previousButton: {
-											onClick: () => {
-												setPrevPage();
-											},
-										},
-									},
-								}}
-							/>
-						</TableFooter>
 					</Table>
 				</TableContainer>
+				<Stack
+					sx={{
+						width: '100%',
+						display: 'flex',
+					}}
+				>
+					<TablePagination
+						// count is unknown but required as props
+						count={9999}
+						// onPageChange is required as props
+						onPageChange={() => {}}
+						page={page}
+						rowsPerPage={pageSize}
+						onRowsPerPageChange={(event) => {
+							setPageSize(Number(event.target.value));
+						}}
+						rowsPerPageOptions={[5, 10]}
+						labelDisplayedRows={({ from, to }) => {
+							return `${from}–${to}`;
+						}}
+						slotProps={{
+							actions: {
+								nextButton: {
+									onClick: () => {
+										setNextPage();
+									},
+									disabled:
+										lastPageIndex !== undefined &&
+										(page === lastPageIndex || lastPageIndex - 1 === page),
+								},
+								previousButton: {
+									onClick: () => {
+										setPrevPage();
+									},
+								},
+							},
+						}}
+					/>
+				</Stack>
 			</Box>
 		</Card>
 	);

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

@@ -70,7 +70,9 @@ const leaderSchema = z.object({
 		.transform(transformOptionalTokenAmount),
 	amountLocked: z.string().optional().transform(transformOptionalTokenAmount),
 	lockedUntilTimestamp: z.string().optional(),
-	reputation: z.number(),
+	reputation: z.union([z.string(), z.number()]).transform((value) => {
+		return `${value}`;
+	}),
 	fee: z.number(),
 	jobTypes: z.array(z.string()).optional().nullable(),
 	url: z.string().optional().nullable(),