chore: update to react 19 (#11636)

.pnpmfile.cjs

@@ -11,14 +11,14 @@ approvedList.set('webpack', [
     'Jack-Works/webpack#528c91e564d5756e21c9c462b607d913452af770',
 ])
 
+approvedList.set('@types/react', ['npm:types-react@beta'])
+approvedList.set('@types/react-dom', ['npm:types-react-dom@beta'])
+
 // glob -> jackspeak -> @isaacs/cliui -> ...
 approvedList.set('string-width-cjs', 'npm:string-width@^4.2.0')
 approvedList.set('strip-ansi-cjs', 'npm:strip-ansi@^6.0.1')
 approvedList.set('wrap-ansi-cjs', ['npm:wrap-ansi@^6.0.1', 'npm:wrap-ansi@^7.0.0'])
 
-// knip -> @pnpm/* -> ...
-approvedList.set('ramda', 'npm:@pnpm/[email protected]')
-
 // @magic-works/i18n-codegen -> i18next-translation-parser
 // https://github.com/i18next/i18next-translation-parser/issues/11
 approvedList.set('html-parse-stringify2', [

package.json

@@ -42,14 +42,14 @@
     "@mui/system": "5.15.12",
     "@tanstack/react-query": "^5.29.2",
     "@types/masknet__global-types": "workspace:^",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "npm:types-react@beta",
+    "@types/react-dom": "npm:types-react-dom@beta",
     "@typescript/lib-dom": "npm:@types/web@^0.0.143",
     "i18next": "^23.2.11",
     "knip": "^5.11.0",
     "lodash-es": "^4.17.21",
-    "react": "0.0.0-experimental-8039e6d0b-20231026",
-    "react-dom": "0.0.0-experimental-8039e6d0b-20231026",
+    "react": "0.0.0-experimental-26f2496093-20240514",
+    "react-dom": "0.0.0-experimental-26f2496093-20240514",
     "react-i18next": "^13.0.2",
     "ses": "1.5.0",
     "ts-results-es": "^4.0.0"
@@ -58,7 +58,7 @@
     "@changesets/cli": "^2.26.2",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@magic-works/i18n-codegen": "^0.5.0",
+    "@magic-works/i18n-codegen": "^0.6.0",
     "@masknet/cli": "workspace:^",
     "@masknet/config": "workspace:^",
     "@masknet/eslint-plugin": "^0.2.0",
@@ -92,10 +92,13 @@
   "pnpm": {
     "overrides": {
       "@lifi/widget": "^2.10.1",
+      "@lifi/wallet-management": "2.6.0",
       "@protobufjs/inquire": "1.1.0",
+      "@splinetool/runtime": "0.9.342",
       "@tanstack/react-query": "^5.29.2",
       "@types/node": "20.12.7",
       "@types/react": "$@types/react",
+      "@types/react-dom": "$@types/react-dom",
       "i18next-translation-parser>html-parse-stringify2": "github:locize/html-parse-stringify2#d463109433b2c49c74a081044f54b2a6a1ccad7c",
       "react": "$react",
       "react-dom": "$react-dom",
@@ -104,9 +107,12 @@
     },
     "override reason": {
       "@lifi/widget": "Patching this",
+      "@lifi/wallet-management": "Patching this",
       "@protobufjs/inquire": "Patching this",
+      "@splinetool/runtime": "Patching this",
       "@types/node": "Singleton package",
       "@types/react": "Singleton package",
+      "@types/react-dom": "Singleton package",
       "react": "Singleton package",
       "react-dom": "Singleton package",
       "i18next-translation-parser": "see https://github.com/i18next/i18next-translation-parser/issues/11 manually pin the commit",
@@ -116,13 +122,16 @@
     "onlyBuiltDependencies": [],
     "peerDependencyRules": {
       "ignoreMissing": [],
-      "allowAny": ["webpack"],
+      "allowAny": [
+        "webpack",
+        "react",
+        "react-dom",
+        "@types/react"
+      ],
       "allowedVersions": {}
     },
     "patchedDependencies": {
       "@ceramicnetwork/[email protected]": "patches/@[email protected]",
-      "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]",
       "@types/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]",
       "@project-serum/[email protected]": "patches/@[email protected]",
@@ -136,14 +145,14 @@
       "@protobufjs/[email protected]": "patches/@[email protected]",
       "@splinetool/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
       "@mui/[email protected]": "patches/@[email protected]",
       "@lifi/[email protected]": "patches/@[email protected]",
       "@mui/[email protected]": "patches/@[email protected]",
       "@lifi/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]"
     }
   }
 }

packages/icons/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { SvgIcon, Theme, SvgIconProps } from '@mui/material'
-
+import type { JSX } from 'react'
 export type Size = [width: number | undefined, height: number | undefined]
 export type SvgIconRaw = JSX.Element | ((theme: Theme) => JSX.Element)
 

packages/mask/.webpack/config.ts

@@ -86,7 +86,7 @@ export async function createConfiguration(_inputFlags: BuildFlags): Promise<webp
             alias: (() => {
                 const alias: Record<string, string> = {
                     // conflict with SES
-                    'error-polyfill': require.resolve('./package-overrides/null.mjs'),
+                    'error-polyfill$': require.resolve('./package-overrides/null.mjs'),
                 }
                 if (computedFlags.reactProductionProfiling) alias['react-dom$'] = require.resolve('react-dom/profiling')
                 if (flags.devtools) {

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

@@ -1,4 +1,4 @@
-import { cloneElement, useRef, useState, type ReactElement, useLayoutEffect } from 'react'
+import { cloneElement, useRef, useState, type ReactElement, useLayoutEffect, type RefObject } from 'react'
 import { makeStyles, usePortalShadowRoot } from '@masknet/theme'
 import { Box, Modal, styled, Typography } from '@mui/material'
 import { sayHelloShowed, userGuideFinished, userGuideStatus } from '@masknet/shared-base'
@@ -94,7 +94,7 @@ const NextButton = styled(ActionButton)({
 interface GuideStepProps {
     // cloneElement is used.
     // eslint-disable-next-line @typescript-eslint/ban-types
-    children: ReactElement
+    children: ReactElement<{ ref: RefObject<HTMLElement | undefined> }>
     total: number
     step: number
     tip: string
@@ -105,7 +105,7 @@ interface GuideStepProps {
 export default function GuideStep({ total, step, tip, children, arrow = true, onComplete }: GuideStepProps) {
     const t = useMaskSharedTrans()
     const { classes, cx } = useStyles()
-    const childrenRef = useRef<HTMLElement>()
+    const childrenRef = useRef<HTMLElement>(undefined)
     const [clientRect, setClientRect] = useState<Pick<DOMRect, 'width' | 'height' | 'top' | 'left'>>()
     const [bottomAvailable, setBottomAvailable] = useState(true)
     const { networkIdentifier } = activatedSiteAdaptorUI!

packages/mask/content-script/components/InjectedComponents/AdditionalPostContent.tsx

@@ -4,7 +4,7 @@ import { type TypedMessage, makeTypedMessageText } from '@masknet/typed-message'
 import { TypedMessageRender } from '@masknet/typed-message-react'
 import { TypedMessageRenderContext } from '../../../shared-ui/TypedMessageRender/context.js'
 import { Check as CheckIcon, Close as CloseIcon } from '@mui/icons-material'
-import { memo, useCallback, useMemo } from 'react'
+import { memo, useCallback, useMemo, type JSX } from 'react'
 import { activatedSiteAdaptorUI } from '../../site-adaptor-infra/ui.js'
 import { Icons } from '@masknet/icons'
 

packages/mask/content-script/components/InjectedComponents/PostDialogHint.tsx

@@ -1,7 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { MaskColors, ShadowRootTooltip, makeStyles } from '@masknet/theme'
 import { IconButton } from '@mui/material'
-import { memo } from 'react'
+import { memo, type JSX } from 'react'
 import { useMaskSharedTrans } from '../../../shared-ui/index.js'
 import GuideStep from '../GuideStep/index.js'
 

packages/mask/content-script/components/InjectedComponents/PostInspector.tsx

@@ -9,6 +9,7 @@ import { useCurrentIdentity } from '../DataSource/useActivatedUI.js'
 import { PossiblePluginSuggestionPostInspector } from './DisabledPluginSuggestion.js'
 import { MaskPostExtraPluginWrapperWithPermission } from './PermissionBoundary.js'
 import { PersistentStorages } from '@masknet/shared-base'
+import type { JSX } from 'react'
 
 const PluginHooksRenderer = createInjectHooksRenderer(
     useActivatedPluginsSiteAdaptor.visibility.useNotMinimalMode,

packages/mask/content-script/components/Welcomes/Banner.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useState, type JSX } from 'react'
 import { useMount } from 'react-use'
 import { IconButton } from '@mui/material'
 import { Icons } from '@masknet/icons'

packages/mask/content-script/components/shared/DraggableDiv.tsx

@@ -34,7 +34,7 @@ export function DraggableDiv({
     return (
         <div className={classes.root}>
             <Draggable
-                nodeRef={ref}
+                nodeRef={ref as any}
                 bounds="parent"
                 cancel="p, h1, input, button, address"
                 handle="nav"

packages/mask/content-script/site-adaptors/minds.com/injection/Banner.tsx

@@ -4,6 +4,7 @@ import { Banner } from '../../../components/Welcomes/Banner.js'
 import { startWatch } from '../../../utils/startWatch.js'
 import { attachReactTreeWithContainer } from '../../../utils/shadow-root/renderInShadowRoot.js'
 import { postEditorInTimelineSelector, postEditorInDialogSelector } from '../utils/selector.js'
+import type { JSX } from 'react'
 
 export function injectBannerAtMinds(signal: AbortSignal) {
     injectBanner(postEditorInTimelineSelector(), signal, <MindsBannerTimeline />)

packages/mask/content-script/site-adaptors/twitter.com/injection/NFT/useInjectedCSS.ts

@@ -3,8 +3,8 @@ import { useEffect, useRef } from 'react'
 import { searchTwitterAvatarLinkSelector } from '../../utils/selector.js'
 
 export function useInjectedCSS(showAvatar: boolean, updatedAvatar: boolean) {
-    const rainbowElement = useRef<Element | null>()
-    const borderElement = useRef<Element | null>()
+    const rainbowElement = useRef<Element | null>(null)
+    const borderElement = useRef<Element | null>(null)
     useEffect(() => {
         if (!showAvatar || !updatedAvatar) return
         const linkDom = searchTwitterAvatarLinkSelector().evaluate()
@@ -22,14 +22,14 @@ export function useInjectedCSS(showAvatar: boolean, updatedAvatar: boolean) {
                 const style = document.createElement('style')
                 style.innerText = `
                 ${rainbowBorderKeyFrames.styles}
-                
+
                 .rainbowBorder {
                     animation: ${rainbowBorderKeyFrames.name} 6s linear infinite;
                     box-shadow: 0 5px 15px rgba(0, 248, 255, 0.4), 0 10px 30px rgba(37, 41, 46, 0.2);
                     transition: none;
                     border: 0 solid #00f8ff;
                 }
-            
+
             `
 
                 rainbowElement.current = linkDom.firstElementChild.nextElementSibling

packages/mask/content-script/site-adaptors/twitter.com/injection/ProfileCard/useControlProfileCard.ts

@@ -11,9 +11,9 @@ interface Result {
 
 const LEAVE_DURATION = 500
 
-export function useControlProfileCard(holderRef: RefObject<HTMLDivElement>): Result {
+export function useControlProfileCard(holderRef: RefObject<HTMLDivElement | null>): Result {
     const hoverRef = useRef(false)
-    const closeTimerRef = useRef<ReturnType<typeof setTimeout>>()
+    const closeTimerRef = useRef<ReturnType<typeof setTimeout>>(null)
     const skipClick = useRef(false)
 
     const [active, setActive] = useState(false)
@@ -23,7 +23,7 @@ export function useControlProfileCard(holderRef: RefObject<HTMLDivElement>): Res
     hasDialogRef.current = stack.length > 0
 
     const hideProfileCard = useCallback((byClick?: boolean) => {
-        if (hoverRef.current || hasDialogRef.current) return
+        if (hoverRef.current || hasDialogRef.current || !closeTimerRef.current) return
         clearTimeout(closeTimerRef.current)
         closeTimerRef.current = setTimeout(() => {
             // Discard the click that would open from external
@@ -36,7 +36,7 @@ export function useControlProfileCard(holderRef: RefObject<HTMLDivElement>): Res
     }, [])
 
     const showProfileCard = useCallback((placement: PopperPlacementType) => {
-        clearTimeout(closeTimerRef.current)
+        closeTimerRef.current && clearTimeout(closeTimerRef.current)
         setActive(true)
         setPlacement(placement)
     }, [])
@@ -48,7 +48,7 @@ export function useControlProfileCard(holderRef: RefObject<HTMLDivElement>): Res
         }
         const enter = () => {
             hoverRef.current = true
-            clearTimeout(closeTimerRef.current)
+            closeTimerRef.current && clearTimeout(closeTimerRef.current)
         }
         const leave = () => {
             hoverRef.current = false

packages/mask/content-script/site-adaptors/twitter.com/injection/ProfileTab.tsx

@@ -330,7 +330,7 @@ function InjectProfileTab() {
     const web3TabRef = useRef<HTMLDivElement>(null)
     const { classes } = useStyles({ minWidth: 56 })
     const windowSize = useWindowSize()
-    const timeoutRef = useRef<any>()
+    const timeoutRef = useRef<any>(undefined)
     const [isClick, setIsClick] = useState(false)
 
     function onMouseEnter() {

packages/mask/dashboard/components/OnboardingWriter/index.tsx

@@ -1,5 +1,5 @@
 import { isArray, sum } from 'lodash-es'
-import { useState, useMemo, useEffect, cloneElement } from 'react'
+import { useState, useMemo, useEffect, cloneElement, type JSX } from 'react'
 import { makeStyles } from '@masknet/theme'
 
 const useStyles = makeStyles()((theme) => ({

packages/mask/dashboard/components/RegisterFrame/ColumnContentLayout.tsx

@@ -1,4 +1,4 @@
-import { memo, type ComponentType } from 'react'
+import { memo, type ComponentType, type JSX } from 'react'
 import { Icons } from '@masknet/icons'
 import { Box, Typography } from '@mui/material'
 import { styled } from '@mui/material/styles'

packages/mask/package.json

@@ -154,14 +154,14 @@
   },
   "devDependencies": {
     "@nice-labs/emit-file-webpack-plugin": "^1.1.4",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
     "@types/color": "^3.0.3",
-    "@types/react-devtools-inline": "^4.24.3",
+    "@types/react-devtools-inline": "^4.24.8",
     "copy-webpack-plugin": "^11.0.0",
     "devtools-ignore-webpack-plugin": "^0.1.1",
     "html-webpack-plugin": "^5.5.3",
-    "react-devtools-inline": "4.28.5",
-    "react-refresh": "^0.14.0",
+    "react-devtools-inline": "5.2.0",
+    "react-refresh": "^0.14.2",
     "rimraf": "^5.0.1",
     "source-map-loader": "^4.0.1",
     "svgo-loader": "^4.0.0",

packages/mask/popups/components/ActionModal/ActionModalContext.tsx

@@ -11,7 +11,7 @@ function useModal() {
     const openModal = useCallback(() => setOpen(true), [])
 
     const navigate = useNavigate()
-    const timerRef = useRef<ReturnType<typeof setTimeout>>()
+    const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined)
     const leavingScreen = theme.transitions.duration.leavingScreen
     const closeModal = useCallback(() => {
         setOpen(false)

packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx

@@ -32,7 +32,7 @@ import {
 } from '@masknet/web3-shared-evm'
 import { Box, ListItem, ListItemText, Skeleton, Typography, alpha, type ListItemProps } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
-import { memo, useMemo } from 'react'
+import { memo, useMemo, type JSX } from 'react'
 import { Trans } from 'react-i18next'
 import { formatTokenBalance } from '../../../../../shared/index.js'
 import { useMaskSharedTrans } from '../../../../../shared-ui/index.js'

packages/mask/shared-ui/utils/createNormalReactRoot.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from 'react'
+import { StrictMode, type JSX } from 'react'
 import { createRoot } from 'react-dom/client'
 import { DisableShadowRootContext } from '@masknet/theme'
 

packages/plugin-infra/src/dom/createInjectHooksRenderer.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState, type JSX } from 'react'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
 import { ShadowRootIsolation } from '@masknet/theme'
 import {
@@ -79,7 +79,7 @@ function Main<T>(props: { data: T; UI: Inject<any> }) {
 function RawHookRender<T>({ UI, data }: { data: T; UI: Raw<T> }) {
     const [ref, setRef] = useState<HTMLDivElement | null>()
     const [f, setF] = useState<(props: T) => void>()
-    const cancel = useRef<AbortController>()
+    const cancel = useRef<AbortController>(undefined)
 
     useEffect(() => {
         if (!ref) return

packages/plugin-infra/src/types.ts

@@ -18,6 +18,7 @@ import type { TypedMessage } from '@masknet/typed-message'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import type { SearchResult } from '@masknet/web3-shared-base'
 import type { CompositionType } from './entry-content-script.js'
+import type { JSX } from 'react'
 
 export declare namespace Plugin {
     /**

packages/plugins/Avatar/src/Application/RouterDialog.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles()({
 
 export function RouterDialog(props: InjectedDialogProps) {
     const { classes } = useStyles()
-    const nftListRef = useRef<NFTListDialogRef>()
+    const nftListRef = useRef<NFTListDialogRef>(undefined)
     const t = useAvatarTrans()
     const { pathname } = useLocation()
     const navigate = useNavigate()

packages/plugins/Claim/src/hooks/useClaimAirdrop.tsx

@@ -38,7 +38,7 @@ export function useClaimAirdrop(
 
     const { showSnackbar, closeSnackbar } = useCustomSnackbar()
 
-    const snackbarKeyRef = useRef<SnackbarKey>()
+    const snackbarKeyRef = useRef<SnackbarKey>(undefined)
     const showSingletonSnackbar = useCallback(
         (title: SnackbarMessage, options: ShowSnackbarOptions) => {
             if (snackbarKeyRef.current !== undefined) closeSnackbar(snackbarKeyRef.current)

packages/plugins/CyberConnect/src/SiteAdaptor/index.tsx

@@ -3,7 +3,7 @@ import { ThemeProvider } from '@mui/material'
 import { MaskLightTheme } from '@masknet/theme'
 import { base } from '../base.js'
 import { Icons } from '@masknet/icons'
-import { useMemo } from 'react'
+import { useMemo, type JSX } from 'react'
 import { parseURLs } from '@masknet/shared-base'
 import { extractTextFromTypedMessage } from '@masknet/typed-message'
 import Profile from './Profile.js'

packages/plugins/Debugger/src/SiteAdaptor/components/ConsoleContent.tsx

@@ -18,7 +18,7 @@ import {
 import { CrossIsolationMessages } from '@masknet/shared-base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { joinsABTest } from '@masknet/web3-telemetry/helpers'
-
+import type { JSX } from 'react'
 interface ConsoleContentProps {
     onClose?: () => void
 }

packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx

@@ -12,7 +12,7 @@ import { Provider } from '../../types.js'
 import { useFileManagement } from '../contexts/index.js'
 import { FileList, SelectableFileList } from './FileList.js'
 
-const Tabs = styled(MuiTabs)(({ theme }) => ({
+const Tabs: typeof MuiTabs = styled(MuiTabs)(({ theme }) => ({
     display: 'flex',
     gap: theme.spacing(0.5),
     [`& .${tabsClasses.indicator}`]: {