chore(deps): update react monorepo to v18 (major)

package.json

@@ -63,7 +63,7 @@
   },
   "dependencies": {},
   "resolutions": {
-    "@types/react": "17.0.71",
+    "@types/react": "18.2.45",
     "react-i18next": ">=11.16.4"
   },
   "volta": {

packages/neuron-ui/package.json

@@ -55,14 +55,14 @@
     "@nervosnetwork/ckb-sdk-core": "0.109.0",
     "@nervosnetwork/ckb-sdk-utils": "0.109.0",
     "canvg": "2.0.0",
-    "i18next": "21.10.0",
+    "i18next": "23.7.11",
     "immer": "9.0.21",
     "jsqr": "1.4.0",
     "office-ui-fabric-react": "7.204.0",
     "qr.js": "0.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-i18next": "12.1.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-i18next": "13.5.0",
     "react-router-dom": "6.21.0",
     "react-transition-group": "4.4.5",
     "sass": "1.69.5",
@@ -84,8 +84,8 @@
     "@types/enzyme": "3.10.18",
     "@types/enzyme-adapter-react-16": "1.0.9",
     "@types/node": "18.19.3",
-    "@types/react": "17.0.71",
-    "@types/react-dom": "17.0.25",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.18",
     "@types/react-router-dom": "5.3.3",
     "@types/styled-components": "5.1.34",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
@@ -100,7 +100,7 @@
     "jest-styled-components": "7.2.0",
     "react-app-rewired": "2.2.1",
     "react-scripts": "5.0.1",
-    "react-test-renderer": "16.14.0",
+    "react-test-renderer": "18.2.0",
     "storybook": "7.6.6",
     "storybook-addon-react-router-v6": "1.0.2",
     "webpack": "5.89.0"

packages/neuron-ui/src/components/ImportHardware/select-model.tsx

@@ -51,7 +51,7 @@ const SelectModel = ({ dispatch }: { dispatch: React.Dispatch<ActionType> }) =>
     })
   }, [dispatch, model])
 
-  const onClickDeviceType = useCallback(e => {
+  const onClickDeviceType: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = useCallback(e => {
     const { dataset } = e.target
     setModel(
       dataset.manufacturer && dataset.product

packages/neuron-ui/src/components/NervosDAODetail/CellsCard/index.tsx

@@ -13,12 +13,11 @@ import CopyZone from 'widgets/CopyZone'
 import Tooltip from 'widgets/Tooltip'
 import styles from './cellsCard.module.scss'
 
-const TabsVariantWithCellsCard: FC<
-  VariantProps<{
-    title: string
-    cells: (State.DetailedInput | State.DetailedOutput)[]
-  }>
-> = ({ tabs, selectedTab, onTabChange }) => {
+const TabsVariantWithCellsCard = ({
+  tabs,
+  selectedTab,
+  onTabChange,
+}: VariantProps<{ title: string; cells: (State.DetailedInput | State.DetailedOutput)[] }>): React.ReactElement => {
   const [t] = useTranslation()
   const {
     chain: { networkID },

packages/neuron-ui/src/components/NervosDAODetail/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useState as useGlobalState, transactionState, useDispatch, showPageNotice } from 'states'
 import {
@@ -25,12 +25,11 @@ import styles from './nervosDAODetail.module.scss'
 import hooks from './hooks'
 import CellsCard from './CellsCard'
 
-const TabsVariantWithTxTypes: FC<
-  VariantProps<{
-    title: string
-    hash: string
-  }>
-> = ({ tabs, selectedTab, onTabChange }) => {
+const TabsVariantWithTxTypes = ({
+  tabs,
+  selectedTab,
+  onTabChange,
+}: VariantProps<Record<'title' | 'hash', string>>): React.ReactElement => {
   const [t] = useTranslation()
   const [transaction, setTransaction] = useState(transactionState)
   const [error, setError] = useState<string>()

packages/neuron-ui/src/components/NetworkSetting/index.tsx

@@ -62,7 +62,7 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
   useOnWindowResize(toggleBottomBorder)
 
   const handleChange = useCallback(
-    checked => {
+    (checked: string) => {
       if (checked !== currentId) {
         setCurrentNetwork(checked)
       }

packages/neuron-ui/src/components/Overview/index.tsx

@@ -100,7 +100,7 @@ const Overview = () => {
     })(dispatch)
   }, [id, dispatch])
 
-  const onRecentActivityClick = useCallback((_, item: State.Transaction) => {
+  const onRecentActivityClick = useCallback((_: React.SyntheticEvent, item: State.Transaction) => {
     const { hash } = item
     navigate(`${RoutePath.Overview}/${hash}`)
   }, [])

packages/neuron-ui/src/components/SUDTSend/hooks.ts

@@ -1,3 +1,4 @@
+import type { TOptions } from 'i18next'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { AccountType, isAnyoneCanPayAddress, isSecp256k1Address, isSuccessResponse, shannonToCKBFormatter } from 'utils'
 import { SUDTAccount } from 'components/SUDTAccountList'
@@ -29,7 +30,7 @@ type Option = {
   tooltip?: string
   label: string
   key: SendType
-  params?: object
+  params?: TOptions
 }
 export function useOptions({
   address,
@@ -127,8 +128,8 @@ export function useSendType({
     }
   }, [addressLockType, accountType])
   const onChange = useCallback(
-    id => {
-      setSendType(id as SendType)
+    (id: SendType | undefined) => {
+      setSendType(id)
     },
     [setSendType]
   )
@@ -138,6 +139,10 @@ export function useSendType({
   }
 }
 
+export const isSendType = (v: string): v is SendType => {
+  return Object.values(SendType).includes(v as SendType)
+}
+
 export function getGenerator(sendType?: SendType) {
   if (sendType === SendType.secp256Cheque) {
     return generateChequeTransaction

packages/neuron-ui/src/components/SUDTSend/index.tsx

@@ -34,7 +34,15 @@ import { SendType } from 'utils/enums'
 import { AmountNotEnoughException, isErrorWithI18n } from 'exceptions'
 import { getDisplayName, getDisplaySymbol } from 'components/UANDisplay'
 import { Attention } from 'widgets/Icons/icon'
-import { AddressLockType, getGenerator, useAddressLockType, useOnSubmit, useOptions, useSendType } from './hooks'
+import {
+  AddressLockType,
+  getGenerator,
+  isSendType,
+  useAddressLockType,
+  useOnSubmit,
+  useOptions,
+  useSendType,
+} from './hooks'
 import styles from './sUDTSend.module.scss'
 
 const { INIT_SEND_PRICE, DEFAULT_SUDT_FIELDS, HIDE_BALANCE } = CONSTANTS
@@ -401,7 +409,11 @@ const SUDTSend = () => {
                       <>
                         {options.length > 1 ? (
                           <RadioGroup
-                            onChange={onChangeSendType}
+                            onChange={(v: string) => {
+                              if (isSendType(v)) {
+                                onChangeSendType(v)
+                              }
+                            }}
                             itemClassName={styles.optionItem}
                             options={options.map(item => ({
                               value: item.key,

packages/neuron-ui/src/components/SpecialAssetList/index.tsx

@@ -220,7 +220,7 @@ const SpecialAssetList = () => {
   }, [search, id, dispatch, fetchList])
 
   const handleActionSuccess = useCallback(
-    text => {
+    (text: string) => {
       setNotice(text)
       fetchList(id, pageNo)
     },

packages/neuron-ui/src/components/WalletEditorDialog/hooks.ts

@@ -1,3 +1,4 @@
+import type { TOptions } from 'i18next'
 import { useState, useMemo, useCallback } from 'react'
 import { StateDispatch, updateWalletProperty } from 'states'
 import { ErrorCode, ResponseCode, CONSTANTS } from 'utils'
@@ -61,7 +62,11 @@ export const useOnSubmit = (
   }, [name, id, dispatch, disabled])
 }
 
-export const useHint = (name: string, usedNames: string[], t: (key: string, opts: object) => string): string | null => {
+export const useHint = (
+  name: string,
+  usedNames: string[],
+  t: (key: string, opts: TOptions) => string
+): string | null => {
   return useMemo(() => {
     if (name === '') {
       return t(`messages.codes.${ErrorCode.FieldRequired}`, { fieldName: 'name' })

packages/neuron-ui/src/components/WalletSetting/index.tsx

@@ -71,7 +71,7 @@ const WalletSetting = ({
   const onHandleWallet = useOnHandleWallet({ dispatch })
 
   const handleChange = useCallback(
-    checked => {
+    (checked: string) => {
       onHandleWallet({
         target: {
           dataset: {

packages/neuron-ui/src/components/WalletWizard/hooks.ts

@@ -3,8 +3,9 @@ import { useState, useCallback } from 'react'
 export const useInputWords = () => {
   const [inputsWords, setInputsWords] = useState<string[]>(new Array(12).fill(''))
   const onChangeInput = useCallback(
-    e => {
-      const idx = +e.target.dataset.idx
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const idx = Number(e.target.dataset.idx)
+      if (Number.isNaN(idx)) return
       const { value } = e.target
       setInputsWords(v => {
         const newWords = [...v]

packages/neuron-ui/src/containers/Main/hooks.ts

@@ -118,7 +118,7 @@ export const useSubscription = ({
   const { pageNo, pageSize, keywords } = chain.transactions
 
   const navigateToolsRouter = useCallback(
-    path => {
+    (path: string) => {
       const { pathname } = location
       const currentPath = [RoutePath.OfflineSign, RoutePath.SignVerify, RoutePath.MultisigAddress].find(item =>
         pathname.includes(item)

packages/neuron-ui/src/widgets/Alert/index.tsx

@@ -4,7 +4,7 @@ import styles from './index.module.scss'
 
 type AlertStatus = 'init' | 'success' | 'error' | 'warn'
 
-const Alert: React.FC<{ status: AlertStatus; className?: string; withIcon?: boolean }> = ({
+const Alert: React.FC<React.PropsWithChildren<{ status: AlertStatus; className?: string; withIcon?: boolean }>> = ({
   status,
   children,
   className,

packages/neuron-ui/src/widgets/RadioGroup/index.tsx

@@ -11,7 +11,7 @@ export interface RadioGroupOptions {
 
 export interface RadioGroupProps {
   options: RadioGroupOptions[]
-  onChange?: (arg: string | number) => void
+  onChange?: (arg: string) => void
   defaultValue?: string | number
   value?: string | number
   itemClassName?: string

packages/neuron-ui/src/widgets/RingProgressBar/index.tsx

@@ -13,12 +13,14 @@ const RingProgressBar = ({
   strokeWidth?: React.CSSProperties['strokeWidth']
   size?: React.CSSProperties['width']
 }) => {
+  // declare background as a string to avoid type error "Expression produces a union type that is too complex to represent."
+  const background: string = `conic-gradient(${color} 0%, ${color} ${percents}%, ${backgroundColor} ${percents}%, ${backgroundColor} 100%)`
   return (
     <div
       style={{
         width: size,
         height: size,
-        background: `conic-gradient(${color} 0%, ${color} ${percents}%, ${backgroundColor} ${percents}%, ${backgroundColor} 100%)`,
+        background,
         borderRadius: '50%',
         WebkitMask: `radial-gradient(transparent calc(${size}/2 - ${strokeWidth}), #000 calc(${size}/2 - ${strokeWidth}))`,
       }}

packages/neuron-ui/src/widgets/Tooltip/index.tsx

@@ -16,7 +16,7 @@ interface TooltipProps {
   isTriggerNextToChild?: boolean
   onVisibleChange?: (visible: boolean) => void
 }
-const Tooltip: React.FC<TooltipProps> = ({
+const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   children,
   tip,
   className = '',