fix(app): fixes done according to qa

packages/apps/dashboard/ui-2024/package.json

@@ -30,7 +30,7 @@
     "react-dom": "^18.2.0",
     "react-number-format": "^5.4.0",
     "react-router-dom": "^6.23.1",
-    "recharts": "^2.12.7",
+    "recharts": "^2.13.0-alpha.4",
     "simplebar-react": "^3.2.5",
     "styled-components": "^6.1.11",
     "swiper": "^11.1.3",

packages/apps/dashboard/ui-2024/src/components/Header/Header.tsx

@@ -10,8 +10,11 @@ import Link from '@mui/material/Link';
 import logo from '@assets/logo.png';
 import Search from '@components/Search';
 import logoMobile from '@assets/logo-mobile.png';
+import { env } from '@helpers/env';
+import { useNavigate } from 'react-router-dom';
 
 const Header: FC<{ displaySearchBar?: boolean }> = ({ displaySearchBar }) => {
+	const navigate = useNavigate();
 	const [open, setState] = useState(false);
 
 	const handleClick = (url: string) => {
@@ -31,7 +34,17 @@ const Header: FC<{ displaySearchBar?: boolean }> = ({ displaySearchBar }) => {
 			{displaySearchBar && (
 				<Search displaySearchBar className="search-header-mobile" />
 			)}
-			<Link href="/" underline="none">
+			<Link
+				onClick={() => {
+					navigate('/');
+				}}
+				underline="none"
+				sx={{
+					':hover': {
+						cursor: 'pointer',
+					},
+				}}
+			>
 				<img className="logo" src={logo} alt="logo" />
 				<img className="logo-mobile" src={logoMobile} alt="logo" />
 			</Link>
@@ -43,39 +56,33 @@ const Header: FC<{ displaySearchBar?: boolean }> = ({ displaySearchBar }) => {
 			<div className="header-list-link">
 				<div
 					className="header-link"
-					onClick={() => handleClick('https://app.humanprotocol.org/')}
+					onClick={() => handleClick(env.VITE_NAVBAR_LINK_GITBOOK)}
 				>
 					GitBook
 				</div>
 				<div
 					className="header-link"
-					onClick={() => handleClick('https://app.humanprotocol.org/')}
-				>
-					KV Store
-				</div>
-				<div
-					className="header-link"
-					onClick={() => handleClick('https://app.humanprotocol.org/')}
+					onClick={() => handleClick(env.VITE_NAVBAR_LINK_FAUCETS)}
 				>
 					Faucet
 				</div>
 				<div
 					className="header-link"
-					onClick={() => handleClick('https://app.humanprotocol.org/')}
+					onClick={() => handleClick(env.VITE_NAVBAR_LINK_HUMAN_WEBSITE)}
 				>
 					HUMAN Website
 				</div>
 				<Button
 					variant="contained"
 					color="primary"
-					onClick={() => handleClick('https://app.humanprotocol.org/')}
+					onClick={() => handleClick(env.VITE_NAVBAR_LINK_LAUNCH_JOBS)}
 				>
 					Launch Jobs
 				</Button>
 				<Button
 					variant="contained"
 					color="secondary"
-					onClick={() => handleClick('https://app.humanprotocol.org/')}
+					onClick={() => handleClick(env.VITE_NAVBAR_LINK_WORK_AND_EARN)}
 				>
 					Work & Earn
 				</Button>
@@ -104,21 +111,35 @@ const Header: FC<{ displaySearchBar?: boolean }> = ({ displaySearchBar }) => {
 			>
 				<Box className="header-mobile-menu">
 					<div className="header-list-link">
-						<div className="header-link">GitBook</div>
-						<div className="header-link">KV Store</div>
-						<div className="header-link">Faucet</div>
-						<div className="header-link">HUMAN Website</div>
+						<div
+							className="header-link"
+							onClick={() => handleClick(env.VITE_NAVBAR_LINK_GITBOOK)}
+						>
+							GitBook
+						</div>
+						<div
+							className="header-link"
+							onClick={() => handleClick(env.VITE_NAVBAR_LINK_FAUCETS)}
+						>
+							Faucet
+						</div>
+						<div
+							className="header-link"
+							onClick={() => handleClick(env.VITE_NAVBAR_LINK_HUMAN_WEBSITE)}
+						>
+							HUMAN Website
+						</div>
 						<Button
 							variant="contained"
 							color="primary"
-							onClick={() => handleClick('https://app.humanprotocol.org/')}
+							onClick={() => handleClick(env.VITE_NAVBAR_LINK_LAUNCH_JOBS)}
 						>
 							Launch Jobs
 						</Button>
 						<Button
 							variant="contained"
 							color="secondary"
-							onClick={() => handleClick('https://app.humanprotocol.org/')}
+							onClick={() => handleClick(env.VITE_NAVBAR_LINK_WORK_AND_EARN)}
 						>
 							Work & Earn
 						</Button>

packages/apps/dashboard/ui-2024/src/components/Home/SmallGraph.tsx

@@ -38,7 +38,7 @@ const CustomSmallChartTooltip = ({
 					{payload?.map((elem) => (
 						<Fragment key={elem.name}>
 							<Typography fontWeight={500} variant="caption">
-								{formatDate(elem.payload.name, 'MMMM d, YYYY')}
+								{formatDate(elem.payload.date, 'MMMM DD, YYYY')}
 							</Typography>
 							<Typography fontWeight={500} variant="h6" component="p">
 								{elem.value ? elem.value.toLocaleString('en-US') : ''}
@@ -87,7 +87,7 @@ const SmallGraph = ({ title, graphData }: SmallGraphProps) => {
 						interval="preserveStartEnd"
 						dataKey="date"
 						stroke={colorPalette.fog.main}
-						tickFormatter={(value) => formatDate(value, 'DD MMM')}
+						tickFormatter={(value) => formatDate(value, 'DD MMMM')}
 						tick={{ dy: 10 }}
 						tickSize={0}
 					/>

packages/apps/dashboard/ui-2024/src/components/TableRowWithCustomContextMenu/TableRowWithCustomContextMenu.tsx

@@ -0,0 +1,81 @@
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import TableRow, { TableRowProps } from '@mui/material/TableRow';
+import * as React from 'react';
+
+export const TableRowWithCustomContextMenu = ({
+	children,
+	componentProps,
+	newTabLink,
+}: {
+	children: JSX.Element | (JSX.Element | null)[];
+	newTabLink: string;
+	componentProps?: TableRowProps;
+}) => {
+	const [contextMenu, setContextMenu] = React.useState<null | {
+		mouseX: number;
+		mouseY: number;
+	}>(null);
+
+	const handleContextMenu = (event: React.MouseEvent) => {
+		event.preventDefault();
+		event.stopPropagation();
+		setContextMenu(
+			contextMenu === null
+				? {
+						mouseX: event.clientX + 2,
+						mouseY: event.clientY - 6,
+					}
+				: null
+		);
+	};
+
+	const handleMouseDown = (event: React.MouseEvent) => {
+		if (event.button === 1) {
+			const newWindow = window.open(
+				newTabLink,
+				'_blank',
+				'noopener,noreferrer'
+			);
+			if (newWindow) newWindow.opener = null;
+		}
+	};
+	const onMenuItemClick = () => {
+		setContextMenu(null);
+		const newWindow = window.open(newTabLink, '_blank', 'noopener,noreferrer');
+		if (newWindow) newWindow.opener = null;
+	};
+
+	return (
+		<>
+			<TableRow
+				aria-controls={contextMenu ? 'basic-menu' : undefined}
+				aria-haspopup="true"
+				aria-expanded={contextMenu ? 'true' : undefined}
+				onContextMenu={handleContextMenu}
+				onMouseDown={handleMouseDown}
+				{...componentProps}
+			>
+				{children}
+			</TableRow>
+			<Menu
+				open={contextMenu != null}
+				onClose={() => setContextMenu(null)}
+				anchorReference="anchorPosition"
+				sx={{
+					textDecoration: 'none',
+					visited: {
+						textDecoration: 'none',
+					},
+				}}
+				anchorPosition={
+					contextMenu != null
+						? { top: contextMenu.mouseY, left: contextMenu.mouseX }
+						: undefined
+				}
+			>
+				<MenuItem onClick={onMenuItemClick}>Open in new tab</MenuItem>
+			</Menu>
+		</>
+	);
+};

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

@@ -34,15 +34,23 @@ export const SelectNetwork = () => {
 				{leaderboardSearchSelectConfig.map((selectItem) => {
 					if ('allNetworksId' in selectItem) {
 						return (
-							<MenuItem className="select-item" value={-1}>
+							<MenuItem
+								key={selectItem.name}
+								className="select-item"
+								value={-1}
+							>
 								<HumanIcon />
 								All Networks
 							</MenuItem>
 						);
 					}
 
 					return (
-						<MenuItem className="select-item" value={selectItem.id}>
+						<MenuItem
+							key={selectItem.name}
+							className="select-item"
+							value={selectItem.id}
+						>
 							<NetworkIcon chainId={selectItem.id} />
 							{selectItem.name}
 						</MenuItem>

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

@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from 'react';
-import TableRow from '@mui/material/TableRow';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
 import MuiTable from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -25,6 +24,7 @@ import Stack from '@mui/material/Stack';
 import { handleErrorMessage } from '@services/handle-error-message';
 import Loader from '@components/Loader';
 import { useBreakPoints } from '@utils/hooks/use-is-mobile';
+import { TableRowWithCustomContextMenu } from '@components/TableRowWithCustomContextMenu/TableRowWithCustomContextMenu';
 
 export const Table = ({
 	data = [],
@@ -103,18 +103,22 @@ export const Table = ({
 				) : (
 					<>
 						{visibleRows.map((row, index) => (
-							<TableRow
-								onClick={() =>
-									navigate(`/search/${row.chainId}/${row.address}`, {
-										preventScrollReset: false,
-									})
-								}
-								key={row.address + index}
-								className="home-page-table-row"
-								sx={{
-									paddingTop: '1px',
-									':hover': {
-										backgroundColor: colorPalette.overlay.light,
+							<TableRowWithCustomContextMenu
+								key={index + row.address}
+								newTabLink={`/search/${row.chainId}/${row.address}`}
+								componentProps={{
+									onClick: () => {
+										navigate(`/search/${row.chainId}/${row.address}`, {
+											preventScrollReset: false,
+										});
+									},
+									className: 'home-page-table-row',
+									sx: {
+										paddingTop: '1px',
+										':hover': {
+											backgroundColor: colorPalette.overlay.light,
+										},
+										textDecoration: 'none',
 									},
 								}}
 							>
@@ -179,7 +183,7 @@ export const Table = ({
 									<ReputationLabel reputation={row.reputation} />
 								</TableCell>
 								<TableCell>{row.fee}%</TableCell>
-							</TableRow>
+							</TableRowWithCustomContextMenu>
 						))}
 					</>
 				)}
@@ -191,6 +195,7 @@ export const Table = ({
 function TableBodyWrapper({ children }: { children: JSX.Element | string }) {
 	return (
 		<Stack
+			component="tr"
 			sx={{
 				position: 'absolute',
 				top: 0,
@@ -202,7 +207,7 @@ function TableBodyWrapper({ children }: { children: JSX.Element | string }) {
 				alignItems: 'center',
 			}}
 		>
-			{children}
+			<th>{children}</th>
 		</Stack>
 	);
 }

packages/apps/dashboard/ui-2024/src/helpers/env.ts

@@ -2,12 +2,18 @@ import { ZodError, z } from 'zod';
 
 const envSchema = z.object({
 	VITE_API_URL: z.string(),
+	VITE_NAVBAR_LINK_GITBOOK: z.string(),
+	VITE_NAVBAR_LINK_FAUCETS: z.string(),
+	VITE_NAVBAR_LINK_HUMAN_WEBSITE: z.string(),
+	VITE_NAVBAR_LINK_LAUNCH_JOBS: z.string(),
+	VITE_NAVBAR_LINK_WORK_AND_EARN: z.string(),
 	VITE_BITFINEX_LINK: z.string().optional(),
 	VITE_PROBITGLOBAL_LINK: z.string().optional(),
 	VITE_GATEIO_LINK: z.string().optional(),
 	VITE_BINGX_LINK: z.string().optional(),
 	VITE_COINLISTPRO_LINK: z.string().optional(),
 	VITE_LBANK_LINK: z.string().optional(),
+	VITE_HUMANPROTOCOL_CORE_ARCHITECTURE: z.string().optional(),
 });
 
 let validEnvs;