chore: upgrade @types/react to react 18

package.json

@@ -38,8 +38,8 @@
     "@mui/material": "5.6.0",
     "@mui/system": "5.6.0",
     "@types/masknet__global-types": "workspace:*",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/web": "^0.0.61",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
@@ -83,7 +83,7 @@
   "pnpm": {
     "overrides": {
       "@types/node": "^17.0.23",
-      "@types/react@18": "17.0.43"
+      "@types/react": "18.0.0"
     },
     "onlyBuiltDependencies": []
   }

packages/dashboard/src/components/CreateWalletForm/index.tsx

@@ -1,4 +1,13 @@
-import { FormControl, ListItemIcon, MenuItem, Select, styled, Typography, FilledInput } from '@mui/material'
+import {
+    FormControl,
+    ListItemIcon,
+    MenuItem,
+    Select,
+    styled,
+    Typography,
+    FilledInput,
+    SelectChangeEvent,
+} from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useCallback, useState } from 'react'
 import { useDashboardI18N } from '../../locales'
@@ -32,7 +41,7 @@ export interface CreateWalletFormProps {
 export function CreateWalletForm(props: CreateWalletFormProps) {
     const { options } = props
     const { classes } = useStyles()
-    const [selected, setSelected] = useState()
+    const [selected, setSelected] = useState<any>()
 
     const t = useDashboardI18N()
 
@@ -43,7 +52,7 @@ export function CreateWalletForm(props: CreateWalletFormProps) {
                     classes={{ filled: classes.filled }}
                     variant="filled"
                     value={selected}
-                    onChange={useCallback((event) => setSelected(event.target.value), [])}>
+                    onChange={useCallback((event: SelectChangeEvent<any>) => setSelected(event.target.value), [])}>
                     {options.map(({ label, icon, value }) => (
                         <MenuItem value={value} key={label}>
                             <ListItemIcon>{icon}</ListItemIcon>

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

@@ -49,7 +49,7 @@ export const RestoreBlueLogo = styled(RestoreBlueIcon)(({ theme }) => ({
 
 interface PersonaLogoBoxProps {}
 
-export const PersonaLogoBox = memo<PersonaLogoBoxProps>(({ children }) => {
+export const PersonaLogoBox = memo<React.PropsWithChildren<PersonaLogoBoxProps>>(({ children }) => {
     const t = useDashboardI18N()
     return (
         <LogoBoxStyled>

packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx

@@ -211,7 +211,7 @@ export const TransferERC721 = memo(() => {
     }, [transferState])
 
     const onTransfer = useCallback(
-        async (data) => {
+        async (data: FormInputs) => {
             if (EthereumAddress.isValid(data.recipient)) {
                 await transferCallback(data.tokenId, data.recipient, gasConfig)
                 return

packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx

@@ -1,4 +1,4 @@
-import { FC, memo } from 'react'
+import React, { FC, memo } from 'react'
 import { Box, Button, Stack, Typography } from '@mui/material'
 import { ProviderType, TransactionStatusType } from '@masknet/web3-shared-evm'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
@@ -109,7 +109,7 @@ interface WalletStateBarUIProps {
     openMenu: ReturnType<typeof useNetworkSelector>[1]
 }
 
-export const WalletStateBarUI: FC<WalletStateBarUIProps> = ({
+export const WalletStateBarUI: FC<React.PropsWithChildren<WalletStateBarUIProps>> = ({
     isPending,
     network,
     provider,

packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx

@@ -1,9 +1,9 @@
-import { memo, useCallback } from 'react'
+import { memo, PropsWithChildren, useCallback } from 'react'
 import { Typography, Link as MaterialLink } from '@mui/material'
 import type { RenderFragmentsContextType } from '@masknet/typed-message/dom'
 import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra'
 
-export const Container = memo(function Container(props) {
+export const Container = memo(function Container(props: PropsWithChildren<{}>) {
     return (
         <Typography color="textPrimary" fontSize="inherit">
             {props.children}

packages/mask/src/components/CompositionDialog/TypedMessageEditor.tsx

@@ -76,7 +76,7 @@ export const TypedMessageEditor = memo(
             [setMessage],
         )
         const deleteMetaID = useCallback(
-            (meta) => {
+            (meta: string) => {
                 setMessage(editTypedMessageMeta(currentValue.current, (map) => map.delete(meta)))
             },
             [setMessage],

packages/mask/src/components/InjectedComponents/PageTab.tsx

@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface PageTabProps {
-    tabs: Plugin.SNSAdaptor.ProfileTab[]
+    tabs: ({ pluginID: string } & Plugin.SNSAdaptor.ProfileTab)[]
     selectedTab?: Plugin.SNSAdaptor.ProfileTab
     onChange?: (tag: Plugin.SNSAdaptor.ProfileTab) => void
 }
@@ -34,6 +34,7 @@ export function PageTab(props: PageTabProps) {
         <div className={classes.root}>
             {tabs.map((x) => (
                 <PageTabItem
+                    pluginID={x.pluginID}
                     key={x.ID}
                     tab={x}
                     selected={selectedTab?.ID === x.ID}

packages/mask/src/components/InjectedComponents/PageTabItem.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { makeStyles } from '@masknet/theme'
 import { Button } from '@mui/material'
-import type { Plugin } from '@masknet/plugin-infra'
+import { Plugin, usePluginI18NField } from '@masknet/plugin-infra'
 
 const borderShadows = {
     dark: '0px 0px 16px 0px #FFFFFF33',
@@ -35,6 +35,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface PageTabItemProps {
+    pluginID: string
     tab: Plugin.SNSAdaptor.ProfileTab
     selected?: boolean
     onClick?: (tab: Plugin.SNSAdaptor.ProfileTab) => void
@@ -43,14 +44,15 @@ export interface PageTabItemProps {
 export function PageTabItem(props: PageTabItemProps) {
     const { tab, selected, onClick } = props
     const { classes } = useStyles()
+    const translate = usePluginI18NField()
 
     return (
         <Button
             className={classNames(selected ? classes.selected : classes.button)}
             variant="outlined"
             size="medium"
             onClick={() => onClick?.(tab)}>
-            {tab.label}
+            {typeof tab.label === 'string' ? tab.label : translate(props.pluginID, tab.label)}
         </Button>
     )
 }

packages/mask/src/components/InjectedComponents/SelectPeopleDialog.tsx

@@ -49,7 +49,9 @@ export function SelectProfileDialog(props: SelectProfileDialogProps) {
             </DialogContent>
             {rejection && (
                 <DialogContent className={classes.content}>
-                    Error: {rejection.message} {console.error(rejection)}
+                    <>
+                        Error: {rejection.message} {console.error(rejection)}
+                    </>
                 </DialogContent>
             )}
             <DialogActions>

packages/mask/src/components/shared/DraggableDiv.tsx

@@ -34,14 +34,14 @@ export function DraggableDiv({
     return (
         <div className={classes.root}>
             <Draggable
-                // @ts-ignore
                 nodeRef={ref}
                 bounds="parent"
                 cancel="p, h1, input, button, address"
                 handle="nav"
-                {...DraggableProps}>
-                <div {...props} ref={ref} className={classes.paper} />
-            </Draggable>
+                {...DraggableProps}
+                // @ts-expect-error @types/react 18
+                children={<div {...props} ref={ref} className={classes.paper} />}
+            />
         </div>
     )
 }

packages/mask/src/components/shared/SelectProfileUI/SelectProfileUI.tsx

@@ -98,7 +98,10 @@ export function SelectProfileUI(props: SelectProfileUIProps) {
                 <InputBase
                     className={classes.input}
                     value={disabled ? '' : search}
-                    onChange={useCallback((e) => setSearch(e.target.value), [])}
+                    onChange={useCallback(
+                        (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setSearch(e.target.value),
+                        [],
+                    )}
                     onKeyDown={(e) => {
                         if (search === '' && e.key === 'Backspace') {
                             onSetSelected(selected.slice(0, selected.length - 1) as Profile[])

packages/mask/src/components/shared/SelectRecipients/ProfileInList.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback } from 'react'
+import { useCallback } from 'react'
 import classNames from 'classnames'
 import { ListItemText, Checkbox, ListItemAvatar } from '@mui/material'
 import ListItemButton from '@mui/material/ListItemButton'
@@ -32,7 +32,7 @@ export interface ProfileInListProps extends withClasses<never> {
     search?: string
     checked?: boolean
     disabled?: boolean
-    onChange: (ev: ChangeEvent<HTMLInputElement>, checked: boolean) => void
+    onChange: (ev: React.MouseEvent<HTMLDivElement>, checked: boolean) => void
     CheckboxProps?: Partial<CheckboxProps>
     ListItemProps?: Partial<DefaultComponentProps<ListItemTypeMap<{ button: true }, 'div'>>>
 }
@@ -41,7 +41,7 @@ export function ProfileInList(props: ProfileInListProps) {
     const profile = props.item
     const name = profile.nickname || profile.identifier.userId
     const secondary = profile.linkedPersona?.fingerprint ? profile.linkedPersona?.fingerprint.toLowerCase() : ''
-    const onClick = useCallback((ev) => props.onChange(ev, !props.checked), [props])
+    const onClick = useCallback((ev: React.MouseEvent<HTMLDivElement>) => props.onChange(ev, !props.checked), [props])
     return (
         <ListItemButton
             onClick={onClick}

packages/mask/src/extension/options-page/DashboardDialogs/Wallet/TransferNFT.tsx

@@ -55,7 +55,7 @@ export function DashboardWalletTransferDialogNFT(props: WrappedDialogProps<{ tok
     const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
         WalletMessages.events.transactionDialogUpdated,
         useCallback(
-            (ev) => {
+            (ev: { open: boolean }) => {
                 if (ev.open) return
                 resetTransferCallback()
                 if (transferState.type !== TransactionStateType.HASH) return

packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx

@@ -104,7 +104,7 @@ const AddDeriveWallet = memo(() => {
     }, [mnemonic, wallets.length, page])
 
     const onCheck = useCallback(
-        async (checked, index) => {
+        async (checked: boolean, index: number) => {
             if (checked) {
                 indexes.current.add(page * 10 + index)
             } else {

packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx

@@ -6,7 +6,6 @@ import { useNavigate } from 'react-router-dom'
 import { PopupRoutes } from '@masknet/shared-base'
 import { useI18N } from '../../../../../utils'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
-import { useCopyToClipboard } from 'react-use'
 import { NetworkSelector } from '../../../components/NetworkSelector'
 import { currentProviderSettings } from '../../../../../plugins/Wallet/settings'
 import { WalletItem } from './WalletItem'
@@ -89,8 +88,6 @@ const SwitchWallet = memo(() => {
     const wallet = useWallet()
     const wallets = useWallets(ProviderType.MaskWallet)
 
-    const [, copyToClipboard] = useCopyToClipboard()
-
     const handleClickCreate = useCallback(() => {
         if (!walletPrimary) {
             browser.tabs.create({
@@ -103,7 +100,7 @@ const SwitchWallet = memo(() => {
     }, [walletPrimary, history])
 
     const handleSelect = useCallback(
-        async (address) => {
+        async (address: string | undefined) => {
             await WalletRPC.updateMaskAccount({
                 account: address,
             })
@@ -116,13 +113,6 @@ const SwitchWallet = memo(() => {
         [history],
     )
 
-    const onCopy = useCallback(
-        (address: string) => {
-            copyToClipboard(address)
-        },
-        [copyToClipboard],
-    )
-
     return (
         <>
             <div className={classes.header}>

packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx

@@ -98,7 +98,7 @@ export function PurchaseDialog(props: ActionBarProps) {
     const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
         WalletMessages.events.transactionDialogUpdated,
         useCallback(
-            (ev) => {
+            (ev: { open: boolean }) => {
                 if (!ev.open) {
                     const allowedTypes = [TransactionStateType.HASH, TransactionStateType.CONFIRMED]
                     if (!allowedTypes.includes(purchaseState.type)) return

packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx

@@ -110,7 +110,7 @@ export function NFTAvatar(props: NFTAvatarProps) {
         setSelectedToken(undefined)
     }, [onChange, selectedToken])
 
-    const onAddClick = useCallback((token) => {
+    const onAddClick = useCallback((token: ERC721TokenDetailed) => {
         setSelectedToken(token)
         setCollectibles_((tokens) => uniqBy([token, ...tokens], (x) => x.contractDetailed.address && x.tokenId))
     }, [])

packages/mask/src/plugins/Collectible/SNSAdaptor/OrderRow.tsx

@@ -88,27 +88,29 @@ export function OrderRow({ order, isDifferenceToken }: IRowProps) {
                 <>
                     <TableCell>
                         <Typography className={classes.content}>
-                            {provider === NonFungibleAssetProvider.OPENSEA ? (
-                                <Link
-                                    href={resolveAddressLinkOnExplorer(ChainId.Mainnet, order.payment_token!)}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className={classes.tokenLink}>
-                                    {order.payment_token_contract?.image_url && (
-                                        <img
-                                            src={order.payment_token_contract.image_url}
-                                            className={classes.token}
-                                            alt={order.payment_token_contract?.symbol}
-                                        />
-                                    )}
-                                </Link>
-                            ) : null}
-                            {getOrderUnitPrice(
-                                order.current_price,
-                                order.payment_token_contract?.decimals,
-                                order.quantity,
-                            )}{' '}
-                            {order.payment_token_contract?.symbol}
+                            <>
+                                {provider === NonFungibleAssetProvider.OPENSEA ? (
+                                    <Link
+                                        href={resolveAddressLinkOnExplorer(ChainId.Mainnet, order.payment_token!)}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className={classes.tokenLink}>
+                                        {order.payment_token_contract?.image_url && (
+                                            <img
+                                                src={order.payment_token_contract.image_url}
+                                                className={classes.token}
+                                                alt={order.payment_token_contract?.symbol}
+                                            />
+                                        )}
+                                    </Link>
+                                ) : null}
+                                {getOrderUnitPrice(
+                                    order.current_price,
+                                    order.payment_token_contract?.decimals,
+                                    order.quantity,
+                                )}{' '}
+                                {order.payment_token_contract?.symbol}
+                            </>
                         </Typography>
                     </TableCell>
                     <TableCell>

packages/mask/src/plugins/CryptoartAI/SNSAdaptor/CheckoutDialog.tsx

@@ -117,7 +117,7 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
     const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
         WalletMessages.events.transactionDialogUpdated,
         useCallback(
-            (ev) => {
+            (ev: { open: boolean }) => {
                 if (!ev.open) {
                     if (purchaseState.type === TransactionStateType.HASH) onClose()
                 }

packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx

@@ -131,7 +131,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
     const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
         WalletMessages.events.transactionDialogUpdated,
         useCallback(
-            (ev) => {
+            (ev: { open: boolean }) => {
                 if (!ev.open) {
                     if (placeBidState.type === TransactionStateType.HASH) onClose()
                     if (placeBidState.type === TransactionStateType.CONFIRMED) {

packages/mask/src/plugins/FindTruman/SNSAdaptor/LoadingFailCard.tsx

@@ -2,7 +2,9 @@ import { Component } from 'react'
 import { FindTrumanCard } from './FindTrumanCard'
 import { Typography, Button } from '@mui/material'
 
-export class LoadingFailCard extends Component<{ title: string; retry: () => void; isFullPluginDown?: boolean }> {
+export class LoadingFailCard extends Component<
+    React.PropsWithChildren<{ title: string; retry: () => void; isFullPluginDown?: boolean }>
+> {
     static getDerivedStateFromError(error: unknown) {
         return { error }
     }

packages/mask/src/plugins/ITO/SNSAdaptor/RegionSelect.tsx

@@ -74,7 +74,7 @@ export const RegionSelect = forwardRef(({ value = [], onRegionChange, ...props }
     const displayRef = useRef<HTMLElement | null>()
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
     const [open, setOpen] = useState(false)
-    const handleDisplayRef = useCallback((node) => {
+    const handleDisplayRef = useCallback((node: HTMLElement | null) => {
         displayRef.current = node
         if (node) setAnchorEl(node)
     }, [])