chore: upgrade mui

.vscode/settings.json

@@ -10,9 +10,6 @@
         "README.md": ".commitlintrc*, .ecrc, .node-version, .npm*, .prettier*, .unlock*, .ignore, CNAME, gulp*, LICENSE, lint-staged*, cspell*, svgo*, *.ts, crowdin*",
         "package.json": "pnpm-*.yaml, .pnpmfile.cjs"
     },
-    "editor.codeActionsOnSave": {
-        "source.fixAll": "explicit"
-    },
     "editor.tabSize": 4,
     "json.schemas": [
         {

cspell.json

@@ -82,6 +82,7 @@
         "favourites",
         "filelist",
         "fileservice",
+        "foxact",
         "funder",
         "fusd",
         "gopluslabs",

eslint.config.js

@@ -219,6 +219,20 @@ const avoidMistakeRules = {
     'no-template-curly-in-string': 'error', // "${expr}" looks like a bug
     'no-unmodified-loop-condition': 'error', // loop bug
     'no-unreachable-loop': 'error', // loop bug
+    'no-restricted-syntax': [
+        'error',
+        {
+            selector:
+                "MemberExpression[object.type='MemberExpression'][object.object.type='Identifier'][object.object.name='theme'][object.property.type='Identifier'][object.property.name='palette']",
+            message:
+                'Use theme.vars.palette for color values and theme.applyStyles() for color-scheme-specific styles.',
+        },
+        {
+            selector: "JSXAttribute[name.name='style'] ObjectExpression > Property[key.value=/^--/]",
+            message:
+                'Use sx={(theme) => ({ ...theme.applyStyles(...) })} for CSS custom properties that vary by color scheme.',
+        },
+    ],
     // 'array-callback-return': 'error', // .map .some ... calls should have a return value
     eqeqeq: 'error', // ===
     'no-restricted-globals': [
@@ -350,6 +364,11 @@ const moduleSystemRules = {
                     message: 'Avoid using type unsafe methods.',
                     importNames: ['get'],
                 },
+                {
+                    name: '@mui/material',
+                    importNames: ['alpha'],
+                    message: 'Use theme.vars.palette and alpha from @masknet/theme instead.',
+                },
                 {
                     name: 'viem',
                     message:

package.json

@@ -32,17 +32,20 @@
   },
   "dependencies": {
     "@dimensiondev/holoflows-kit": "0.9.0-20240322092738-f9180f3",
-    "@emotion/cache": "11.11.0",
-    "@emotion/react": "11.11.4",
-    "@emotion/serialize": "1.1.4",
-    "@emotion/styled": "11.11.5",
+    "@emotion/cache": "11.14.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/serialize": "1.3.3",
+    "@emotion/styled": "11.14.1",
     "@lingui/core": "^6.5.0",
     "@lingui/react": "^6.5.0",
     "@masknet/kit": "0.4.1",
-    "@mui/icons-material": "5.15.21",
-    "@mui/lab": "5.0.0-alpha.170",
-    "@mui/material": "5.15.20",
-    "@mui/system": "5.15.20",
+    "@mui/icons-material": "9.2.0",
+    "@mui/lab": "9.0.0-beta.6",
+    "@mui/material": "9.2.0",
+    "@mui/private-theming": "9.2.0",
+    "@mui/styled-engine": "9.1.1",
+    "@mui/system": "9.2.0",
+    "@mui/utils": "9.2.0",
     "@tanstack/react-query": "^5.49.2",
     "@types/masknet__global-types": "workspace:^",
     "@types/react": "^19.2.10",

packages/icons/utils/MaskIconPaletteContext.d.ts

@@ -1,4 +1,4 @@
 import { Context } from 'react'
 
-export type MaskIconPalette = 'light' | 'dark' | 'dim'
+export type MaskIconPalette = 'light' | 'dark'
 export const MaskIconPaletteContext: Context<MaskIconPalette>

packages/icons/utils/index.js

@@ -16,13 +16,23 @@ export function createIcon(name, svg, viewBox, defaultSize) {
     /** @type {import('react').ComponentType<import('@mui/material').SvgIconProps>} */ let Icon
     if (typeof svg === 'function') {
         Icon = ({ sx, ref, ...props }) => {
-            const style = defaultSize ? { width, height, ...sx } : sx
-            return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: style }, svg(useTheme()))
+            const next_sx =
+                defaultSize ?
+                    Array.isArray(sx) ?
+                        [{ width, height }, ...sx]
+                    :   [{ width, height }, sx]
+                :   sx
+            return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: next_sx }, svg(useTheme()))
         }
     } else {
         Icon = ({ sx, ref, ...props }) => {
-            const style = defaultSize ? { width, height, ...sx } : sx
-            return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: style }, svg)
+            const next_sx =
+                defaultSize ?
+                    Array.isArray(sx) ?
+                        [{ width, height }, ...sx]
+                    :   [{ width, height }, sx]
+                :   sx
+            return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: next_sx }, svg)
         }
     }
     Icon.displayName = `Icon (${name})`

packages/icons/utils/internal.js

@@ -1,4 +1,4 @@
-import { useTheme, Box } from '@mui/material'
+import { Box } from '@mui/material'
 import * as React from 'react'
 import { MaskIconPaletteContext } from './MaskIconPaletteContext.js'
 
@@ -55,7 +55,7 @@ export function __createIcon(name, variants, intrinsicSize = [24, 24]) {
             ...rest,
             ref,
             'data-icon': name,
-            sx: { ...iconStyle, ...sx },
+            sx: Array.isArray(sx) ? [iconStyle, ...sx] : [iconStyle, sx],
             // To align icon center.
             fontSize: 0,
         }
@@ -85,11 +85,7 @@ export function __createIcon(name, variants, intrinsicSize = [24, 24]) {
 
 function useDefaultPalette() {
     const palette = React.useContext(MaskIconPaletteContext)
-
-    const theme = useTheme()
-    const isDarkMode = theme.palette.mode === 'dark'
-    if (isDarkMode && palette === 'dim') return 'dim'
-    return theme.palette.mode
+    return palette
 }
 
 /**
@@ -102,11 +98,9 @@ function selectVariant(variants, palette) {
     const light = variants.find((x) => !x.c || x.c.includes('light'))
     // !x.c means light
     const dark = variants.find((x) => x.c?.includes('dark'))
-    const dim = variants.find((x) => x.c?.includes('dim'))
 
-    if (palette === 'light') return light || dark || dim || variants[0]
-    if (palette === 'dark') return dark || dim || light || variants[0]
-    if (palette === 'dim') return dim || dark || light || variants[0]
+    if (palette === 'light') return light || dark || variants[0]
+    if (palette === 'dark') return dark || light || variants[0]
     return variants[0]
 }
 

packages/mask/.webpack/config.ts

@@ -264,11 +264,12 @@ export async function createConfiguration(
                 'process.stderr': '/* stdin */ null',
             }),
             flags.reactRefresh &&
-                new (
-                    await (rspack ?
-                        import('@rspack/plugin-react-refresh')
-                    :   import('@pmmmwh/react-refresh-webpack-plugin'))
-                ).default({ overlay: false, esModule: true }),
+                new (rspack ?
+                    (await import('@rspack/plugin-react-refresh')).ReactRefreshRspackPlugin
+                :   (await import('@pmmmwh/react-refresh-webpack-plugin')).default)({
+                    overlay: false,
+                    esModule: true,
+                }),
             flags.profiling && new ProfilingPlugin(),
             // TODO: crashes rspack
             !rspack && new TrustedTypesPlugin(),

packages/mask/content-script/components/CompositionDialog/Composition.tsx

@@ -11,10 +11,10 @@ import {
     currentPersonaIdentifier,
 } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
-import { makeStyles } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
-import { DialogContent, alpha } from '@mui/material'
+import { DialogContent } from '@mui/material'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useAsync } from 'react-use'
 import { useCurrentPersona, usePersonasFromDB } from '../../../shared-ui/hooks/index.js'
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     persona: {
         padding: 0,
-        background: alpha(theme.palette.maskColor.bottom, 0.8),
+        background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
         width: 'auto',
         boxShadow: 'none',
     },

packages/mask/content-script/components/CompositionDialog/CompositionUI.tsx

@@ -8,8 +8,7 @@ import {
     useRef,
     useState,
 } from 'react'
-import { LoadingButton } from '@mui/lab'
-import { Button, DialogActions, Typography, alpha } from '@mui/material'
+import { Button, DialogActions, Typography } from '@mui/material'
 import type { EncryptTargetPublic } from '@masknet/encryption'
 import { Icons } from '@masknet/icons'
 import {
@@ -26,7 +25,7 @@ import {
     type ProfileIdentifier,
     type ProfileInformation,
 } from '@masknet/shared-base'
-import { makeStyles } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import type { SerializableTypedMessages, TypedMessage } from '@masknet/typed-message'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventType, EventID } from '@masknet/web3-telemetry/types'
@@ -59,13 +58,13 @@ const useStyles = makeStyles()((theme) => ({
     optionTitle: {
         lineHeight: '18px',
         fontSize: 14,
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         marginRight: 12,
     },
     editorWrapper: {
         flex: 1,
         width: 568,
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         padding: 0,
         boxSizing: 'border-box',
         borderRadius: 8,
@@ -74,16 +73,16 @@ const useStyles = makeStyles()((theme) => ({
     icon: {
         width: 18,
         height: 18,
-        fill: theme.palette.text.buttonText,
+        fill: theme.vars.palette.text.buttonText,
     },
     action: {
         height: 68,
         padding: '0 16px',
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                ' 0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12);',
-        background: alpha(theme.palette.maskColor.bottom, 0.8),
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
+        background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
         justifyContent: 'space-between',
         display: 'flex',
     },
@@ -297,7 +296,7 @@ export function CompositionDialogUI({ ref, ...props }: CompositionProps) {
                             <Trans>Enable auto paste</Trans>
                         </Button>
                     :   null}
-                    <LoadingButton
+                    <Button
                         style={{ opacity: 1 }}
                         disabled={!submitAvailable}
                         loading={sending}
@@ -306,7 +305,7 @@ export function CompositionDialogUI({ ref, ...props }: CompositionProps) {
                         onClick={onSubmit}
                         startIcon={<Icons.Send className={classes.icon} />}>
                         <Trans>Encrypt</Trans>
-                    </LoadingButton>
+                    </Button>
                 </div>
             </DialogActions>
         </CompositionContext>

packages/mask/content-script/components/CompositionDialog/EncryptionMethodSelector.tsx

@@ -10,13 +10,13 @@ const useStyles = makeStyles()((theme) => ({
         fontFamily: 'sans-serif',
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         marginRight: 12,
     },
     divider: {
         width: '100%',
         height: 1,
-        background: theme.palette.divider,
+        background: theme.vars.palette.divider,
         margin: '8px 0',
     },
 }))

packages/mask/content-script/components/CompositionDialog/EncryptionTargetSelector.tsx

@@ -18,17 +18,17 @@ const useStyles = makeStyles()((theme) => ({
     optionTitle: {
         lineHeight: '18px',
         fontSize: 14,
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         marginRight: 12,
     },
     divider: {
         width: '100%',
         height: 1,
-        background: theme.palette.divider,
+        background: theme.vars.palette.divider,
         margin: '8px 0',
     },
     mainTitle: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         fontWeight: 700,
     },
     flex: {
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
     create: {
         cursor: 'pointer',
         fontWeight: 700,
-        color: theme.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.primary,
         textAlign: 'right',
     },
     rightIcon: {
@@ -70,7 +70,7 @@ export function EncryptionTargetSelector(props: EncryptionTargetSelectorProps) {
                 <Typography className={classes.mainTitle}>
                     <Trans>Persona required.</Trans>
                 </Typography>
-                <Box flex={1} />
+                <Box sx={{ flex: 1 }} />
                 <ConnectPersonaBoundary
                     personas={allPersonas}
                     identity={lastRecognized}

packages/mask/content-script/components/CompositionDialog/PopoverListTrigger.tsx

@@ -10,11 +10,9 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 4,
     },
     paperRoot: {
-        background: theme.palette.maskColor.bottom,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)' }),
     },
     popperText: {
         fontSize: 14,
@@ -39,7 +37,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '18px',
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 

packages/mask/content-script/components/GuideStep/index.tsx

@@ -17,11 +17,13 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     container: {
         position: 'absolute',
-        boxShadow: `0 0 0 3000px ${theme.palette.mode === 'light' ? 'rgba(0,0,0,.3)' : 'rgba(110,118,125,.3)'}`,
+        boxShadow: '0 0 0 3000px rgba(0,0,0,.3)',
+        ...theme.applyStyles('dark', { boxShadow: '0 0 0 3000px rgba(110,118,125,.3)' }),
         borderRadius: 8,
     },
     noBoxShadowCover: {
-        boxShadow: `0 0 0 3000px ${theme.palette.mode === 'light' ? 'rgba(0,0,0,.2)' : 'rgba(110,118,125,.2)'}`,
+        boxShadow: '0 0 0 3000px rgba(0,0,0,.2)',
+        ...theme.applyStyles('dark', { boxShadow: '0 0 0 3000px rgba(110,118,125,.2)' }),
     },
     target: {
         background: 'transparent',
@@ -204,15 +206,13 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
                                                 :   'arrow-bottom'
                                             :   '',
                                         )}>
-                                        <Box paddingBottom="16px">
-                                            <Typography fontSize={20}>
+                                        <Box sx={{ paddingBottom: '16px' }}>
+                                            <Typography sx={{ fontSize: 20 }}>
                                                 {step}/{total}
                                             </Typography>
                                         </Box>
                                         <div>
-                                            <Typography fontSize={14} fontWeight={600}>
-                                                {tip}
-                                            </Typography>
+                                            <Typography sx={{ fontSize: 14, fontWeight: 600 }}>{tip}</Typography>
                                         </div>
                                         <div className={classes.buttonContainer}>
                                             {step === total ?