diff --git a/package-lock.json b/package-lock.json index 9244ee6..5644b3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,8 @@ "@chainsafe/ssz": "^1.3.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^7.3.9", - "@mui/material": "^7.3.9", + "@mui/icons-material": "^9.0.0", + "@mui/material": "^9.0.0", "@reown/appkit": "^1.8.19", "@reown/appkit-adapter-wagmi": "^1.8.19", "@tanstack/react-query": "^5.90.20", @@ -1592,9 +1592,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz", - "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==", + "version": "7.29.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz", + "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==", "license": "MIT", "engines": { "node": ">=6.9.0" @@ -3435,9 +3435,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.9.tgz", - "integrity": "sha512-MOkOCTfbMJwLshlBCKJ59V2F/uaLYfmKnN76kksj6jlGUVdI25A9Hzs08m+zjBRdLv+sK7Rqdsefe8X7h/6PCw==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.0.0.tgz", + "integrity": "sha512-uwQNGkhv0lf7ufxw6QXev77BW6pWbW+7uxYjU5+rfp4lBkFtMEgJCsarTM3Tn+i0lGx6+Ol2u88JdGXr0GDskA==", "license": "MIT", "funding": { "type": "opencollective", @@ -3445,12 +3445,12 @@ } }, "node_modules/@mui/icons-material": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.9.tgz", - "integrity": "sha512-BT+zPJXss8Hg/oEMRmHl17Q97bPACG4ufFSfGEdhiE96jOyR5Dz1ty7ZWt1fVGR0y1p+sSgEwQT/MNZQmoWDCw==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.0.0.tgz", + "integrity": "sha512-oDwyvI6LgjWRC9MBcSGvLkPud9S9ELgSBQFYxa1rYcZn6Br55dn22SyvsPDMsn0G8OndFk53iMT45W5mNqrogw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.6" + "@babel/runtime": "^7.29.2" }, "engines": { "node": ">=14.0.0" @@ -3460,7 +3460,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^7.3.9", + "@mui/material": "^9.0.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -3471,22 +3471,22 @@ } }, "node_modules/@mui/material": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.9.tgz", - "integrity": "sha512-I8yO3t4T0y7bvDiR1qhIN6iBWZOTBfVOnmLlM7K6h3dx5YX2a7rnkuXzc2UkZaqhxY9NgTnEbdPlokR1RxCNRQ==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.0.0.tgz", + "integrity": "sha512-+VP/oQCDhDR87NQQgXnNBG8dwy6GNuQLnenS1pZvkbn2dKFSxRSRMybTpH9xUxXP+316mlYDy5CSbYtusnCWtw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.6", - "@mui/core-downloads-tracker": "^7.3.9", - "@mui/system": "^7.3.9", - "@mui/types": "^7.4.12", - "@mui/utils": "^7.3.9", + "@babel/runtime": "^7.29.2", + "@mui/core-downloads-tracker": "^9.0.0", + "@mui/system": "^9.0.0", + "@mui/types": "^9.0.0", + "@mui/utils": "^9.0.0", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", "csstype": "^3.2.3", "prop-types": "^15.8.1", - "react-is": "^19.2.3", + "react-is": "^19.2.4", "react-transition-group": "^4.4.5" }, "engines": { @@ -3499,7 +3499,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^7.3.9", + "@mui/material-pigment-css": "^9.0.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -3520,13 +3520,13 @@ } }, "node_modules/@mui/private-theming": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.9.tgz", - "integrity": "sha512-ErIyRQvsiQEq7Yvcvfw9UDHngaqjMy9P3JDPnRAaKG5qhpl2C4tX/W1S4zJvpu+feihmZJStjIyvnv6KDbIrlw==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.0.0.tgz", + "integrity": "sha512-JtuZoaiCqwD6vjgYu6Xp3T7DZkrxJlgtDz5yESzhI34fEX5hHMh2VJUbuL9UOg8xrfIFMrq6dcYoH/7Zi4G0RA==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.6", - "@mui/utils": "^7.3.9", + "@babel/runtime": "^7.29.2", + "@mui/utils": "^9.0.0", "prop-types": "^15.8.1" }, "engines": { @@ -3547,12 +3547,12 @@ } }, "node_modules/@mui/styled-engine": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.9.tgz", - "integrity": "sha512-JqujWt5bX4okjUPGpVof/7pvgClqh7HvIbsIBIOOlCh2u3wG/Bwp4+E1bc1dXSwkrkp9WUAoNdI5HEC+5HKvMw==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.0.0.tgz", + "integrity": "sha512-9RLGdX4Jg0aQPRuvqh/OLzYSPlgd5zyEw5/1HIRfdavSiOd03WtUaGZH9/w1RoTYuRKwpgy0hpIFaMHIqPVIWg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.6", + "@babel/runtime": "^7.29.2", "@emotion/cache": "^11.14.0", "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", @@ -3581,16 +3581,16 @@ } }, "node_modules/@mui/system": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.9.tgz", - "integrity": "sha512-aL1q9am8XpRrSabv9qWf5RHhJICJql34wnrc1nz0MuOglPRYF/liN+c8VqZdTvUn9qg+ZjRVbKf4sJVFfIDtmg==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.0.0.tgz", + "integrity": "sha512-YnC5Zg6j04IxiLc/boAKs0464jfZlLFVa7mf5E8lF0XOtZVUvG6R6gJK50lgUYdaaLdyLfxF6xR7LaPuEpeT/g==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.6", - "@mui/private-theming": "^7.3.9", - "@mui/styled-engine": "^7.3.9", - "@mui/types": "^7.4.12", - "@mui/utils": "^7.3.9", + "@babel/runtime": "^7.29.2", + "@mui/private-theming": "^9.0.0", + "@mui/styled-engine": "^9.0.0", + "@mui/types": "^9.0.0", + "@mui/utils": "^9.0.0", "clsx": "^2.1.1", "csstype": "^3.2.3", "prop-types": "^15.8.1" @@ -3621,12 +3621,12 @@ } }, "node_modules/@mui/types": { - "version": "7.4.12", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz", - "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.0.0.tgz", + "integrity": "sha512-i1cuFCAWN44b3AJWO7mh7tuh1sqbQSeVr/94oG0TX5uXivac8XalgE4/6fQZcmGZigzbQ35IXxj/4jLpRIBYZg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.6" + "@babel/runtime": "^7.29.2" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -3638,17 +3638,17 @@ } }, "node_modules/@mui/utils": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.9.tgz", - "integrity": "sha512-U6SdZaGbfb65fqTsH3V5oJdFj9uYwyLE2WVuNvmbggTSDBb8QHrFsqY8BN3taK9t3yJ8/BPHD/kNvLNyjwM7Yw==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.0.0.tgz", + "integrity": "sha512-bQcqyg/gjULUqTuyUjSAFr6LQGLvtkNtDbJerAtoUn9kGZ0hg5QJiN1PLHMLbeFpe3te1831uq7GFl2ITokGdg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.6", - "@mui/types": "^7.4.12", + "@babel/runtime": "^7.29.2", + "@mui/types": "^9.0.0", "@types/prop-types": "^15.7.15", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^19.2.3" + "react-is": "^19.2.4" }, "engines": { "node": ">=14.0.0" @@ -14996,9 +14996,9 @@ } }, "node_modules/react-is": { - "version": "19.2.4", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz", - "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==", + "version": "19.2.5", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.5.tgz", + "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==", "license": "MIT" }, "node_modules/react-refresh": { diff --git a/package.json b/package.json index 18adf14..a663485 100644 --- a/package.json +++ b/package.json @@ -24,8 +24,8 @@ "@chainsafe/ssz": "^1.3.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^7.3.9", - "@mui/material": "^7.3.9", + "@mui/icons-material": "^9.0.0", + "@mui/material": "^9.0.0", "@reown/appkit": "^1.8.19", "@reown/appkit-adapter-wagmi": "^1.8.19", "@tanstack/react-query": "^5.90.20", diff --git a/src/components/ErrorSplash/ErrorSplash.tsx b/src/components/ErrorSplash/ErrorSplash.tsx index 08731bd..466174a 100644 --- a/src/components/ErrorSplash/ErrorSplash.tsx +++ b/src/components/ErrorSplash/ErrorSplash.tsx @@ -3,7 +3,7 @@ import { Box, Link, Paper, Typography } from "@mui/material"; export const ErrorSplash = () => { return ( - + diff --git a/src/components/Input/FilterInput.tsx b/src/components/Input/FilterInput.tsx index 922fa2b..b32977c 100644 --- a/src/components/Input/FilterInput.tsx +++ b/src/components/Input/FilterInput.tsx @@ -26,12 +26,14 @@ export const FilterInput = ({ size="small" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} - InputProps={{ - startAdornment: ( - - - - ), + slotProps={{ + input: { + startAdornment: ( + + + + ), + }, }} /> ); diff --git a/src/components/PartialWithdrawValidatorTable/PartialWithdrawValidatorTable.tsx b/src/components/PartialWithdrawValidatorTable/PartialWithdrawValidatorTable.tsx index e0401df..1e58a68 100644 --- a/src/components/PartialWithdrawValidatorTable/PartialWithdrawValidatorTable.tsx +++ b/src/components/PartialWithdrawValidatorTable/PartialWithdrawValidatorTable.tsx @@ -295,20 +295,22 @@ export const PartialWithdrawValidatorTable = ({ ) } disabled={!canWithdraw} - InputProps={{ - inputProps: { - min: 0, - max: maxWithdrawal, - onWheel: (e) => e.currentTarget.blur(), - onKeyDown: (e) => { - if ( - e.key === "+" || - e.key === "-" || - e.key === "e" || - e.key === "E" - ) { - e.preventDefault(); - } + slotProps={{ + input: { + inputProps: { + min: 0, + max: maxWithdrawal, + onWheel: (e) => e.currentTarget.blur(), + onKeyDown: (e) => { + if ( + e.key === "+" || + e.key === "-" || + e.key === "e" || + e.key === "E" + ) { + e.preventDefault(); + } + }, }, }, }} diff --git a/src/components/TopUpValidatorTable/TopUpValidatorTable.tsx b/src/components/TopUpValidatorTable/TopUpValidatorTable.tsx index 324c9b7..1e162cb 100644 --- a/src/components/TopUpValidatorTable/TopUpValidatorTable.tsx +++ b/src/components/TopUpValidatorTable/TopUpValidatorTable.tsx @@ -293,19 +293,21 @@ export const TopUpValidatorTable = ({ ) } disabled={!canTopUp} - InputProps={{ - inputProps: { - min: 1, - onWheel: (e) => e.currentTarget.blur(), - onKeyDown: (e) => { - if ( - e.key === "+" || - e.key === "-" || - e.key === "e" || - e.key === "E" - ) { - e.preventDefault(); - } + slotProps={{ + input: { + inputProps: { + min: 1, + onWheel: (e) => e.currentTarget.blur(), + onKeyDown: (e) => { + if ( + e.key === "+" || + e.key === "-" || + e.key === "e" || + e.key === "E" + ) { + e.preventDefault(); + } + }, }, }, }} diff --git a/src/components/ValidatorMenu/ValidatorMenu.tsx b/src/components/ValidatorMenu/ValidatorMenu.tsx index 00ebfee..44ed76b 100644 --- a/src/components/ValidatorMenu/ValidatorMenu.tsx +++ b/src/components/ValidatorMenu/ValidatorMenu.tsx @@ -46,11 +46,13 @@ export const ValidatorMenu = ({ anchorEl={anchorEl} open={!!anchorEl && !!validator} onClose={onClose} - PaperProps={{ - sx: { - backgroundColor: "#333333", - color: "#ffffff", - border: "1px solid #404040", + slotProps={{ + paper: { + sx: { + backgroundColor: "#333333", + color: "#ffffff", + border: "1px solid #404040", + }, }, }} > diff --git a/src/modals/BaseDialog/BaseDialog.tsx b/src/modals/BaseDialog/BaseDialog.tsx index 132c117..35b2e62 100644 --- a/src/modals/BaseDialog/BaseDialog.tsx +++ b/src/modals/BaseDialog/BaseDialog.tsx @@ -1,4 +1,5 @@ import { Dialog, DialogProps, Paper, styled } from "@mui/material"; +import React from "react"; interface StyledPaperProps { wide?: boolean; @@ -41,8 +42,13 @@ export const BaseDialog = ({ maxWidth={false} fullWidth={false} fullScreen={isFullscreen} - PaperComponent={StyledPaper} - PaperProps={{ wide, isFullscreen }} + slots={{ paper: StyledPaper }} + slotProps={{ + paper: { + wide, + isFullscreen, + } as React.ComponentProps, + }} > {children} diff --git a/src/modals/Consolidate/ConsolidateConfirmModal.tsx b/src/modals/Consolidate/ConsolidateConfirmModal.tsx index ef8e748..4465c88 100644 --- a/src/modals/Consolidate/ConsolidateConfirmModal.tsx +++ b/src/modals/Consolidate/ConsolidateConfirmModal.tsx @@ -91,8 +91,8 @@ export const ConsolidateConfirmModal: React.FC< return ( - - + + - + diff --git a/src/modals/Deposit/DepositConfirmModal.tsx b/src/modals/Deposit/DepositConfirmModal.tsx index 511f009..8ba61a5 100644 --- a/src/modals/Deposit/DepositConfirmModal.tsx +++ b/src/modals/Deposit/DepositConfirmModal.tsx @@ -93,8 +93,8 @@ export const DepositConfirmModal: React.FC = ({ return ( - - + + @@ -107,7 +107,7 @@ export const DepositConfirmModal: React.FC = ({ - + Connected Wallet diff --git a/src/modals/Deposit/DepositInfoModal.tsx b/src/modals/Deposit/DepositInfoModal.tsx index 210fd12..c72d737 100644 --- a/src/modals/Deposit/DepositInfoModal.tsx +++ b/src/modals/Deposit/DepositInfoModal.tsx @@ -88,13 +88,15 @@ export const DepositInfoModal: React.FC = ({ maxWidth={false} fullWidth={false} fullScreen={isFullscreen} - PaperProps={{ - sx: { - backgroundColor: "#1E2128", - borderRadius: isFullscreen ? 0 : 2, - maxHeight: isFullscreen ? "100vh" : "85vh", - width: isFullscreen ? "100vw" : "1000px", - height: isFullscreen ? "100vh" : "auto", + slotProps={{ + paper: { + sx: { + backgroundColor: "#1E2128", + borderRadius: isFullscreen ? 0 : 2, + maxHeight: isFullscreen ? "100vh" : "85vh", + width: isFullscreen ? "100vw" : "1000px", + height: isFullscreen ? "100vh" : "auto", + }, }, }} > @@ -705,7 +707,13 @@ export const DepositInfoModal: React.FC = ({ Math.max(1, parseInt(e.target.value) || 1), ) } - inputProps={{ min: 1 }} + slotProps={{ + input: { + inputProps: { + min: 1, + }, + }, + }} sx={{ width: "200px", "& .MuiOutlinedInput-root": { @@ -739,7 +747,14 @@ export const DepositInfoModal: React.FC = ({ ), ) } - inputProps={{ min: 32, max: 2048 }} + slotProps={{ + input: { + inputProps: { + min: 32, + max: 2048, + }, + }, + }} sx={{ width: "200px", "& .MuiOutlinedInput-root": { @@ -1259,7 +1274,13 @@ export const DepositInfoModal: React.FC = ({ Math.max(1, parseInt(e.target.value) || 1), ) } - inputProps={{ min: 1 }} + slotProps={{ + input: { + inputProps: { + min: 1, + }, + }, + }} sx={{ width: "200px", "& .MuiOutlinedInput-root": { @@ -1293,7 +1314,14 @@ export const DepositInfoModal: React.FC = ({ ), ) } - inputProps={{ min: 32, max: 2048 }} + slotProps={{ + input: { + inputProps: { + min: 32, + max: 2048, + }, + }, + }} sx={{ width: "200px", "& .MuiOutlinedInput-root": { diff --git a/src/modals/Exit/ExitConfirmModal.tsx b/src/modals/Exit/ExitConfirmModal.tsx index d250ae9..a250ed4 100644 --- a/src/modals/Exit/ExitConfirmModal.tsx +++ b/src/modals/Exit/ExitConfirmModal.tsx @@ -98,8 +98,8 @@ export const ExitConfirmModal: React.FC = ({ return ( - - + + = ({ - + diff --git a/src/modals/OfflineMulti/OfflineMultiModal.tsx b/src/modals/OfflineMulti/OfflineMultiModal.tsx index 1d1e817..d6c07c6 100644 --- a/src/modals/OfflineMulti/OfflineMultiModal.tsx +++ b/src/modals/OfflineMulti/OfflineMultiModal.tsx @@ -112,8 +112,8 @@ export const OfflineMultiModal = ({ return ( - - + + diff --git a/src/modals/PartialWithdraw/PartialWithdrawConfirmModal.tsx b/src/modals/PartialWithdraw/PartialWithdrawConfirmModal.tsx index 84b83ff..6f195af 100644 --- a/src/modals/PartialWithdraw/PartialWithdrawConfirmModal.tsx +++ b/src/modals/PartialWithdraw/PartialWithdrawConfirmModal.tsx @@ -102,8 +102,8 @@ export const PartialWithdrawConfirmModal: React.FC< return ( - - + + - + diff --git a/src/modals/ProgressModal/ProgressModal.tsx b/src/modals/ProgressModal/ProgressModal.tsx index 9d300f4..44d9e50 100644 --- a/src/modals/ProgressModal/ProgressModal.tsx +++ b/src/modals/ProgressModal/ProgressModal.tsx @@ -27,8 +27,8 @@ export const ProgressModal: React.FC = ({ }) => { return ( - - + + diff --git a/src/modals/TargetValidatorSelectionModal/TargetValidatorSelectionModal.tsx b/src/modals/TargetValidatorSelectionModal/TargetValidatorSelectionModal.tsx index 5f04136..78d21b3 100644 --- a/src/modals/TargetValidatorSelectionModal/TargetValidatorSelectionModal.tsx +++ b/src/modals/TargetValidatorSelectionModal/TargetValidatorSelectionModal.tsx @@ -186,8 +186,8 @@ export const TargetValidatorSelectionModal: React.FC< return ( - - + + - + Search Validators diff --git a/src/modals/TopUp/TopUpConfirmModal.tsx b/src/modals/TopUp/TopUpConfirmModal.tsx index 63be81d..b6e67b3 100644 --- a/src/modals/TopUp/TopUpConfirmModal.tsx +++ b/src/modals/TopUp/TopUpConfirmModal.tsx @@ -97,8 +97,8 @@ export const TopUpConfirmModal: React.FC = ({ return ( - - + + = ({ - + Connected Wallet diff --git a/src/modals/Upgrade/UpgradeConfirmModal.tsx b/src/modals/Upgrade/UpgradeConfirmModal.tsx index a0ce5c6..651c18c 100644 --- a/src/modals/Upgrade/UpgradeConfirmModal.tsx +++ b/src/modals/Upgrade/UpgradeConfirmModal.tsx @@ -72,8 +72,8 @@ export const UpgradeConfirmModal: React.FC = ({ return ( - - + + = ({ - +