From 3651b85572021446fabcf66e92063cdce00723a0 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 9 Jul 2025 16:46:35 +0300 Subject: [PATCH 1/5] chore: update mui/material and collateral mui packages to v7 --- packages/apps/dashboard/client/package.json | 8 +- .../client/src/pages/home/ui/HomePage.tsx | 8 +- .../client/src/shared/ui/theme/index.tsx | 10 +- .../client/src/widgets/header/ui/Header.tsx | 2 +- yarn.lock | 190 +++++++++++++++++- 5 files changed, 193 insertions(+), 25 deletions(-) diff --git a/packages/apps/dashboard/client/package.json b/packages/apps/dashboard/client/package.json index 80032a771a..cf10113ca7 100644 --- a/packages/apps/dashboard/client/package.json +++ b/packages/apps/dashboard/client/package.json @@ -20,10 +20,10 @@ "@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/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.5.2", "@mui/x-date-pickers": "^7.23.6", "@tanstack/react-query": "^5.67.2", diff --git a/packages/apps/dashboard/client/src/pages/home/ui/HomePage.tsx b/packages/apps/dashboard/client/src/pages/home/ui/HomePage.tsx index a92bd05c73..3d1c7f9d00 100644 --- a/packages/apps/dashboard/client/src/pages/home/ui/HomePage.tsx +++ b/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 = () => { - + Token @@ -85,7 +85,7 @@ const HomePage: FC = () => { - + Date: Wed, 9 Jul 2025 16:51:21 +0300 Subject: [PATCH 2/5] chore: bump x-data-grid --- packages/apps/dashboard/client/package.json | 2 +- yarn.lock | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/apps/dashboard/client/package.json b/packages/apps/dashboard/client/package.json index cf10113ca7..5e6f93c9cb 100644 --- a/packages/apps/dashboard/client/package.json +++ b/packages/apps/dashboard/client/package.json @@ -24,7 +24,7 @@ "@mui/material": "^7.2.0", "@mui/styled-engine-sc": "7.2.0", "@mui/system": "^7.2.0", - "@mui/x-data-grid": "^8.5.2", + "@mui/x-data-grid": "^8.7.0", "@mui/x-date-pickers": "^7.23.6", "@tanstack/react-query": "^5.67.2", "@types/react-router-dom": "^5.3.3", diff --git a/yarn.lock b/yarn.lock index 2d249ded1e..f5417dcbf7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3925,7 +3925,7 @@ __metadata: "@mui/material": "npm:^7.2.0" "@mui/styled-engine-sc": "npm:7.2.0" "@mui/system": "npm:^7.2.0" - "@mui/x-data-grid": "npm:^8.5.2" + "@mui/x-data-grid": "npm:^8.7.0" "@mui/x-date-pickers": "npm:^7.23.6" "@tanstack/react-query": "npm:^5.67.2" "@types/react": "npm:^18.2.66" @@ -6079,13 +6079,13 @@ __metadata: languageName: node linkType: hard -"@mui/x-data-grid@npm:^8.5.2": - version: 8.5.2 - resolution: "@mui/x-data-grid@npm:8.5.2" +"@mui/x-data-grid@npm:^8.7.0": + version: 8.7.0 + resolution: "@mui/x-data-grid@npm:8.7.0" dependencies: "@babel/runtime": "npm:^7.27.6" "@mui/utils": "npm:^7.1.1" - "@mui/x-internals": "npm:8.5.2" + "@mui/x-internals": "npm:8.7.0" clsx: "npm:^2.1.1" prop-types: "npm:^15.8.1" use-sync-external-store: "npm:^1.5.0" @@ -6101,7 +6101,7 @@ __metadata: optional: true "@emotion/styled": optional: true - checksum: 10c0/deb5e7e1f9391b92d85acdb39eb1bc0fd85cbad748be839b132b62dedd3fcce5aae1919b4630a76f156ebcbd8402114feff97b6cc118f484883d722d31976b47 + checksum: 10c0/cb77a88b336a4809dcec2e1f0252700eb8467913eb19adea32b6c65c0a0f3ac68311d82f4f83f8ef6269d2e90ddd83518c378cfcb8f1a45dfc7d59fd2a749fe9 languageName: node linkType: hard @@ -6165,9 +6165,9 @@ __metadata: languageName: node linkType: hard -"@mui/x-internals@npm:8.5.2": - version: 8.5.2 - resolution: "@mui/x-internals@npm:8.5.2" +"@mui/x-internals@npm:8.7.0": + version: 8.7.0 + resolution: "@mui/x-internals@npm:8.7.0" dependencies: "@babel/runtime": "npm:^7.27.6" "@mui/utils": "npm:^7.1.1" @@ -6175,7 +6175,7 @@ __metadata: peerDependencies: "@mui/system": ^5.15.14 || ^6.0.0 || ^7.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10c0/03d2105d82624b0064c618a6bfc289c124f7fd8bff2f11fe5ceb9504514fb4cf59be906b5649b3537f21b86c54dbcbf4406e55d529a8a399d9fbc510f3bd2bf9 + checksum: 10c0/c3fab5603a046db85f739195576de4581cf9afed7c6b299322b6745ad9336534afb1e62e8fa9fc5a37e1e9eee942b51c7bccf2ccecf591efa27650a513071eed languageName: node linkType: hard From f1815ff943a506935fd81a20b1b05e7159b62030 Mon Sep 17 00:00:00 2001 From: kirill Date: Wed, 9 Jul 2025 17:49:44 +0300 Subject: [PATCH 3/5] chore: bump x-date-pickers; move LocalizationProvider to app file --- packages/apps/dashboard/client/package.json | 2 +- .../apps/dashboard/client/src/app/index.tsx | 16 +++--- .../client/src/shared/ui/DatePicker/index.tsx | 49 +++++++----------- yarn.lock | 50 ++++++++++++++++++- 4 files changed, 78 insertions(+), 39 deletions(-) diff --git a/packages/apps/dashboard/client/package.json b/packages/apps/dashboard/client/package.json index 5e6f93c9cb..5458c1869e 100644 --- a/packages/apps/dashboard/client/package.json +++ b/packages/apps/dashboard/client/package.json @@ -25,7 +25,7 @@ "@mui/styled-engine-sc": "7.2.0", "@mui/system": "^7.2.0", "@mui/x-data-grid": "^8.7.0", - "@mui/x-date-pickers": "^7.23.6", + "@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", diff --git a/packages/apps/dashboard/client/src/app/index.tsx b/packages/apps/dashboard/client/src/app/index.tsx index 04a926ce42..1f3145606d 100644 --- a/packages/apps/dashboard/client/src/app/index.tsx +++ b/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( - - - - - + + + + + + + ); diff --git a/packages/apps/dashboard/client/src/shared/ui/DatePicker/index.tsx b/packages/apps/dashboard/client/src/shared/ui/DatePicker/index.tsx index 1ec5ff700f..d355ccecc4 100644 --- a/packages/apps/dashboard/client/src/shared/ui/DatePicker/index.tsx +++ b/packages/apps/dashboard/client/src/shared/ui/DatePicker/index.tsx @@ -1,30 +1,19 @@ import { Dispatch, SetStateAction, useState } from 'react'; import Typography from '@mui/material/Typography'; +import type { DatePickerProps } from '@mui/x-date-pickers'; import { - DatePickerProps, - LocalizationProvider, - 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 { - BaseSingleInputFieldProps, - DateValidationError, - FieldSection, -} from '@mui/x-date-pickers/models'; + DatePicker as DatePickerMui, + type DatePickerFieldProps, +} from '@mui/x-date-pickers/DatePicker'; import type { Dayjs } from 'dayjs'; -interface CustomDateFieldProps - extends UseDateFieldProps, - BaseSingleInputFieldProps< - Dayjs | null, - Dayjs, - FieldSection, - false, - DateValidationError - > { +interface CustomDateFieldProps extends DatePickerFieldProps { setOpen: Dispatch>; + label: string; + id: string; + InputProps: { ref?: React.Ref }; + inputProps: { 'aria-label'?: string }; } const CustomDateField = ({ @@ -55,7 +44,7 @@ const CustomDateField = ({ }; interface CustomDatePickerProps { - props: Omit, 'open' | 'onOpen' | 'onClose'>; + props: Omit, 'open' | 'onOpen' | 'onClose'>; } const CustomDatePicker = ({ props }: CustomDatePickerProps) => { @@ -86,16 +75,14 @@ interface DatePickerPropsMui { const DatePicker = ({ value, onChange, customProps }: DatePickerPropsMui) => { return ( - - - + ); }; diff --git a/yarn.lock b/yarn.lock index f5417dcbf7..350785c7cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3926,7 +3926,7 @@ __metadata: "@mui/styled-engine-sc": "npm:7.2.0" "@mui/system": "npm:^7.2.0" "@mui/x-data-grid": "npm:^8.7.0" - "@mui/x-date-pickers": "npm:^7.23.6" + "@mui/x-date-pickers": "npm:^8.7.0" "@tanstack/react-query": "npm:^5.67.2" "@types/react": "npm:^18.2.66" "@types/react-dom": "npm:^18.2.22" @@ -6153,6 +6153,54 @@ __metadata: languageName: node linkType: hard +"@mui/x-date-pickers@npm:^8.7.0": + version: 8.7.0 + resolution: "@mui/x-date-pickers@npm:8.7.0" + dependencies: + "@babel/runtime": "npm:^7.27.6" + "@mui/utils": "npm:^7.1.1" + "@mui/x-internals": "npm:8.7.0" + "@types/react-transition-group": "npm:^4.4.12" + clsx: "npm:^2.1.1" + prop-types: "npm:^15.8.1" + react-transition-group: "npm:^4.4.5" + peerDependencies: + "@emotion/react": ^11.9.0 + "@emotion/styled": ^11.8.1 + "@mui/material": ^5.15.14 || ^6.0.0 || ^7.0.0 + "@mui/system": ^5.15.14 || ^6.0.0 || ^7.0.0 + date-fns: ^2.25.0 || ^3.2.0 || ^4.0.0 + date-fns-jalali: ^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0 + dayjs: ^1.10.7 + luxon: ^3.0.2 + moment: ^2.29.4 + moment-hijri: ^2.1.2 || ^3.0.0 + moment-jalaali: ^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + date-fns: + optional: true + date-fns-jalali: + optional: true + dayjs: + optional: true + luxon: + optional: true + moment: + optional: true + moment-hijri: + optional: true + moment-jalaali: + optional: true + checksum: 10c0/964b2ab033b50925536319e67512055ae496631595de3cf488b37cc1d44c7f962645eae7942589c4817d8e82fa35fd819cae62108b4902cb916e8315774ce966 + languageName: node + linkType: hard + "@mui/x-internals@npm:7.29.0": version: 7.29.0 resolution: "@mui/x-internals@npm:7.29.0" From 64dc3675787308a0ec7768b9c067722d37f82854 Mon Sep 17 00:00:00 2001 From: kirill Date: Thu, 10 Jul 2025 14:57:48 +0300 Subject: [PATCH 4/5] install data-grid on staking --- packages/apps/staking/package.json | 1 + yarn.lock | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/apps/staking/package.json b/packages/apps/staking/package.json index 57b96a50c5..0da86f96be 100644 --- a/packages/apps/staking/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 350785c7cf..618b072959 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4557,6 +4557,7 @@ __metadata: "@human-protocol/sdk": "npm:*" "@mui/icons-material": "npm:^7.0.1" "@mui/material": "npm:^5.16.7" + "@mui/x-data-grid": "npm:^8.7.0" "@tanstack/query-sync-storage-persister": "npm:^5.68.0" "@tanstack/react-query": "npm:^5.67.2" "@tanstack/react-query-persist-client": "npm:^5.80.7" From 2fe89fa1e88d892f13a71e418d9ce32203101ac7 Mon Sep 17 00:00:00 2001 From: kirill Date: Thu, 10 Jul 2025 16:29:37 +0300 Subject: [PATCH 5/5] refactor: simplify date picker --- .../client/src/shared/ui/DatePicker/index.tsx | 74 +++++-------------- 1 file changed, 18 insertions(+), 56 deletions(-) diff --git a/packages/apps/dashboard/client/src/shared/ui/DatePicker/index.tsx b/packages/apps/dashboard/client/src/shared/ui/DatePicker/index.tsx index d355ccecc4..a1d4dcae47 100644 --- a/packages/apps/dashboard/client/src/shared/ui/DatePicker/index.tsx +++ b/packages/apps/dashboard/client/src/shared/ui/DatePicker/index.tsx @@ -1,33 +1,15 @@ -import { Dispatch, SetStateAction, useState } from 'react'; - import Typography from '@mui/material/Typography'; -import type { DatePickerProps } from '@mui/x-date-pickers'; -import { - DatePicker as DatePickerMui, - type DatePickerFieldProps, -} from '@mui/x-date-pickers/DatePicker'; +import { usePickerContext, DatePickerProps } from '@mui/x-date-pickers'; +import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker'; import type { Dayjs } from 'dayjs'; -interface CustomDateFieldProps extends DatePickerFieldProps { - setOpen: Dispatch>; - label: string; - id: string; - InputProps: { ref?: React.Ref }; - inputProps: { 'aria-label'?: string }; -} +const CustomDateField = () => { + const { triggerRef, setOpen, label } = usePickerContext(); -const CustomDateField = ({ - setOpen, - label, - id, - InputProps: { ref } = {}, - inputProps: { 'aria-label': ariaLabel } = {}, -}: CustomDateFieldProps) => { return ( setOpen((prevState) => !prevState)} sx={{ borderBottom: '1px solid', @@ -43,45 +25,25 @@ const CustomDateField = ({ ); }; -interface CustomDatePickerProps { - props: Omit, '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 ( - setOpen(false)} - onOpen={() => setOpen(true)} + - ); -}; - -interface DatePickerPropsMui { - value: Dayjs; - onChange: (value: Dayjs | null) => void; - customProps?: Omit['props']; -} - -const DatePicker = ({ value, onChange, customProps }: DatePickerPropsMui) => { - return ( - ); };