[Dashboard] - Update MUI packages

packages/apps/dashboard/client/package.json

@@ -20,12 +20,12 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@human-protocol/sdk": "workspace:*",
-    "@mui/icons-material": "^7.0.1",
-    "@mui/material": "^5.15.18",
-    "@mui/styled-engine-sc": "6.4.0",
-    "@mui/system": "^5.15.14",
-    "@mui/x-data-grid": "^8.5.2",
-    "@mui/x-date-pickers": "^7.23.6",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
+    "@mui/styled-engine-sc": "7.2.0",
+    "@mui/system": "^7.2.0",
+    "@mui/x-data-grid": "^8.7.0",
+    "@mui/x-date-pickers": "^8.7.0",
     "@tanstack/react-query": "^5.67.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/recharts": "^1.8.29",

packages/apps/dashboard/client/src/app/index.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
+import { StrictMode } from 'react';
 
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import ReactDOM from 'react-dom/client';
 
@@ -17,10 +19,12 @@ const queryClient = new QueryClient({
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <ThemeProvider>
-    <React.StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <AppRoutes />
-      </QueryClientProvider>
-    </React.StrictMode>
+    <StrictMode>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <QueryClientProvider client={queryClient}>
+          <AppRoutes />
+        </QueryClientProvider>
+      </LocalizationProvider>
+    </StrictMode>
   </ThemeProvider>
 );

packages/apps/dashboard/client/src/app/providers/ThemeProvider.tsx

@@ -9,7 +9,7 @@ import {
 
 import type { PaletteMode } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
-import MuiThemeProvider from '@mui/material/styles/ThemeProvider';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 
 import { createAppTheme } from '@/shared/ui/theme';
 

packages/apps/dashboard/client/src/features/graph/ui/AreaChart.tsx

@@ -2,7 +2,7 @@ import { type FC, useEffect, useRef, useState } from 'react';
 
 import Card from '@mui/material/Card';
 import Stack from '@mui/material/Stack';
-import useTheme from '@mui/material/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import dayjs, { type Dayjs } from 'dayjs';
 import {

packages/apps/dashboard/client/src/features/graph/ui/CustomXAxisTick.tsx

@@ -1,4 +1,4 @@
-import useTheme from '@mui/material/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 // @ts-expect-error -- import error, but this type work property
 import type { ContentRenderer } from 'recharts';
 

packages/apps/dashboard/client/src/features/graph/ui/SmallGraph.tsx

@@ -3,7 +3,7 @@ import { type FC, Fragment } from 'react';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import Stack from '@mui/material/Stack';
-import useTheme from '@mui/material/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import {
   Area,

packages/apps/dashboard/client/src/features/graph/ui/ToggleButtons.tsx

@@ -1,5 +1,5 @@
 import Button from '@mui/material/Button';
-import styled from '@mui/material/styles/styled';
+import { styled } from '@mui/material/styles';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import dayjs from 'dayjs';

packages/apps/dashboard/client/src/features/searchResults/ui/ReputationScore.tsx

@@ -1,5 +1,5 @@
 import Chip from '@mui/material/Chip';
-import useTheme from '@mui/material/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 
 import type { Reputation } from '@/shared/model/reputationSchema';
 

packages/apps/dashboard/client/src/pages/home/ui/HomePage.tsx

@@ -4,9 +4,9 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
-import styled from '@mui/material/styles/styled';
+import Grid from '@mui/material/Grid';
+import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
 import { Link } from 'react-router-dom';
 
 import GraphSwiper from '@/features/graph/ui/GraphSwiper';
@@ -71,7 +71,7 @@ const HomePage: FC = () => {
       </Typography>
       <SearchBar />
       <Grid container mt={{ xs: 6, md: 8 }} columnSpacing={3} rowSpacing={3}>
-        <Grid xs={12} md={3}>
+        <Grid size={{ xs: 12, md: 3 }}>
           <CardWrapper flexDirection="column" gap={3}>
             <Typography variant="body2">Token</Typography>
             <Box display="flex" gap={1}>
@@ -85,7 +85,7 @@ const HomePage: FC = () => {
             </Box>
           </CardWrapper>
         </Grid>
-        <Grid xs={12} md={9}>
+        <Grid size={{ xs: 12, md: 9 }}>
           <CardWrapper gap={4} flexDirection={{ xs: 'column', md: 'row' }}>
             <Box
               display="flex"

packages/apps/dashboard/client/src/shared/ui/DatePicker/index.tsx

@@ -1,44 +1,15 @@
-import { type Dispatch, type SetStateAction, useState } from 'react';
-
 import Typography from '@mui/material/Typography';
-import {
-  type DatePickerProps,
-  LocalizationProvider,
-  type UseDateFieldProps,
-} from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DatePicker as DatePickerMui } from '@mui/x-date-pickers/DatePicker';
-import type {
-  BaseSingleInputFieldProps,
-  DateValidationError,
-  FieldSection,
-} from '@mui/x-date-pickers/models';
+import { type DatePickerProps, usePickerContext } from '@mui/x-date-pickers';
+import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
 import type { Dayjs } from 'dayjs';
 
-interface CustomDateFieldProps
-  extends UseDateFieldProps<Dayjs, false>,
-    BaseSingleInputFieldProps<
-      Dayjs | null,
-      Dayjs,
-      FieldSection,
-      false,
-      DateValidationError
-    > {
-  setOpen: Dispatch<SetStateAction<boolean>>;
-}
+const CustomDateField = () => {
+  const { triggerRef, setOpen, label } = usePickerContext();
 
-const CustomDateField = ({
-  setOpen,
-  label,
-  id,
-  InputProps: { ref } = {},
-  inputProps: { 'aria-label': ariaLabel } = {},
-}: CustomDateFieldProps) => {
   return (
     <Typography
-      id={id}
-      ref={ref}
-      aria-label={ariaLabel}
+      ref={triggerRef}
+      aria-label="Select date"
       onClick={() => setOpen((prevState) => !prevState)}
       sx={{
         borderBottom: '1px solid',
@@ -54,49 +25,27 @@ const CustomDateField = ({
   );
 };
 
-interface CustomDatePickerProps {
-  props: Omit<DatePickerProps<Dayjs>, 'open' | 'onOpen' | 'onClose'>;
-}
-
-const CustomDatePicker = ({ props }: CustomDatePickerProps) => {
-  const [open, setOpen] = useState(false);
+type MuiDatePickerProps = {
+  value: Dayjs;
+  onChange: (value: Dayjs | null) => void;
+  customProps?: DatePickerProps;
+};
 
+const DatePicker = ({ value, onChange, customProps }: MuiDatePickerProps) => {
   return (
-    <DatePickerMui
-      {...props}
-      slots={{ ...props.slots, field: CustomDateField }}
-      slotProps={{ ...props.slotProps, field: { setOpen } as never }}
-      open={open}
-      onClose={() => setOpen(false)}
-      onOpen={() => setOpen(true)}
+    <MuiDatePicker
+      label={value.format('DD MMM, YYYY')}
+      value={value}
+      onChange={onChange}
+      slots={{ field: CustomDateField }}
       sx={{
         '& .StaticDatePicker-calendarContainer .DayPicker-Day': {
           fontSize: 14,
         },
       }}
+      {...customProps}
     />
   );
 };
 
-interface DatePickerPropsMui {
-  value: Dayjs;
-  onChange: (value: Dayjs | null) => void;
-  customProps?: Omit<CustomDatePickerProps, 'value' | 'onChange'>['props'];
-}
-
-const DatePicker = ({ value, onChange, customProps }: DatePickerPropsMui) => {
-  return (
-    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <CustomDatePicker
-        props={{
-          label: value.format('DD MMM, YYYY'),
-          value: value,
-          onChange: onChange,
-          ...customProps,
-        }}
-      />
-    </LocalizationProvider>
-  );
-};
-
 export default DatePicker;

packages/apps/dashboard/client/src/shared/ui/SearchBar/index.tsx

@@ -9,7 +9,7 @@ import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import MenuItem from '@mui/material/MenuItem';
 import MuiSelect, { type SelectChangeEvent } from '@mui/material/Select';
-import useTheme from '@mui/material/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import { useLocation, useNavigate } from 'react-router-dom';
 

packages/apps/dashboard/client/src/shared/ui/theme/index.tsx

@@ -1,11 +1,11 @@
 import type { CSSProperties } from 'react';
 
-import type {
-  PaletteColorOptions,
-  PaletteColor,
-} from '@mui/material/styles/createPalette';
-import createTheme from '@mui/material/styles/createTheme';
-import type { Shadows } from '@mui/material/styles/shadows';
+import {
+  createTheme,
+  type PaletteColorOptions,
+  type PaletteColor,
+  type Shadows,
+} from '@mui/material/styles';
 
 import { lightPalette, darkPalette } from './palette';
 

packages/apps/dashboard/client/src/widgets/footer/ui/Footer.tsx

@@ -7,7 +7,7 @@ import TwitterIcon from '@mui/icons-material/Twitter';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Link from '@mui/material/Link';
-import styled from '@mui/material/styles/styled';
+import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
 import { env } from '@/shared/config/env';

packages/apps/dashboard/client/src/widgets/header/ui/Header.tsx

@@ -8,7 +8,7 @@ import Button from '@mui/material/Button';
 import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
 import MuiLink from '@mui/material/Link';
-import styled from '@mui/material/styles/styled';
+import { styled } from '@mui/material/styles';
 import Toolbar from '@mui/material/Toolbar';
 import { Link } from 'react-router-dom';
 

packages/apps/dashboard/client/src/widgets/header/ui/ThemeModeSwitch.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 
 import IconButton from '@mui/material/IconButton';
-import useTheme from '@mui/material/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 
 import DarkModeIcon from '@/shared/ui/icons/DarkModeIcon';
 import LightModeIcon from '@/shared/ui/icons/LightModeIcon';

packages/apps/staking/package.json

@@ -31,6 +31,7 @@
     "@human-protocol/sdk": "*",
     "@mui/icons-material": "^7.0.1",
     "@mui/material": "^5.16.7",
+    "@mui/x-data-grid": "^8.7.0",
     "@tanstack/query-sync-storage-persister": "^5.68.0",
     "@tanstack/react-query": "^5.67.2",
     "@tanstack/react-query-persist-client": "^5.80.7",