chore: bump react.js from 16 to 18

package.json

@@ -46,7 +46,7 @@
   "devDependencies": {
     "@babel/core": "7.19.3",
     "@types/jest": "27.5.2",
-    "@types/node": "16.11.7",
+    "@types/node": "18.11.9",
     "@types/npmlog": "4.1.4",
     "@typescript-eslint/eslint-plugin": "5.40.1",
     "@typescript-eslint/parser": "5.40.1",
@@ -61,6 +61,7 @@
   },
   "dependencies": {},
   "resolutions": {
-    "@types/react": "16.14.32"
+    "@types/react": "17.0.39",
+    "react-i18next": ">=11.16.4"
   }
 }

packages/neuron-ui/package.json

@@ -42,19 +42,19 @@
   "dependencies": {
     "@nervosnetwork/ckb-sdk-core": "0.103.1",
     "@nervosnetwork/ckb-sdk-utils": "0.103.1",
-    "@uifabric/experiments": "7.42.4",
+    "@uifabric/experiments": "7.45.14",
     "@uifabric/styling": "7.20.0",
     "canvg": "2.0.0",
     "i18next": "21.6.6",
     "immer": "9.0.15",
     "jsqr": "1.4.0",
-    "office-ui-fabric-react": "7.180.3",
-    "primereact": "7.1.0",
+    "office-ui-fabric-react": "7.199.6",
+    "primereact": "8.7.1",
     "qr.js": "0.0.0",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
-    "react-i18next": "11.15.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-router-dom": "5.1.2",
+    "react-i18next": "11.15.3",
     "sass": "1.47.0"
   },
   "devDependencies": {
@@ -69,17 +69,17 @@
     "@storybook/react": "5.3.18",
     "@types/enzyme": "3.10.12",
     "@types/enzyme-adapter-react-16": "1.0.5",
-    "@types/node": "12.20.55",
-    "@types/react": "16.14.32",
-    "@types/react-dom": "16.9.16",
+    "@types/node": "18.11.9",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.11",
     "@types/react-router-dom": "5.3.3",
-    "@types/storybook-react-router": "1.0.1",
     "@types/storybook__addon-storyshots": "5.1.2",
+    "@types/storybook-react-router": "1.0.1",
     "@types/styled-components": "4.4.3",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "babel-jest": "25.5.1",
     "electron": "16.2.8",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.2",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
@@ -94,5 +94,8 @@
     "react-test-renderer": "16.12.0",
     "rimraf": "3.0.2",
     "storybook-react-router": "1.0.8"
+  },
+  "resolutions": {
+    "react-i18next": ">=11.16.4"
   }
 }

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

@@ -35,7 +35,7 @@ const ClearCache = ({ dispatch }: { dispatch: StateDispatch }) => {
   }, [setIsDialogOpen])
 
   const toggleIsRebuild = useCallback(
-    e => {
+    (e: React.ChangeEvent<HTMLInputElement>) => {
       setIsRebuild(e.target.checked)
     },
     [setIsRebuild]

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   getCkbNodeDataPath,
@@ -48,7 +48,7 @@ export const useDataPath = () => {
     })
   }, [closeDialog, type])
   const onConfirm = useCallback(
-    e => {
+    (e: React.MouseEvent<HTMLDivElement>) => {
       const { dataset } = e.currentTarget
       setIsSaveing(true)
       setSavingType(dataset.syncType)

packages/neuron-ui/src/components/ImportHardware/name-wallet.tsx

@@ -42,7 +42,7 @@ const NameWallet = ({
     [walletName, extendedPublicKey]
   )
 
-  const onInput = useCallback(e => {
+  const onInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setWalletName(e.target.value)
     setErrorMsg('')
   }, [])

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

@@ -52,7 +52,7 @@ const SelectModel = ({ dispatch }: { dispatch: React.Dispatch<ActionType> }) =>
     })
   }, [dispatch, model])
 
-  const onDropDownChange = useCallback(({ data }) => {
+  const onDropDownChange = useCallback(({ data }: SelectOptions) => {
     setModel(data)
   }, [])
   const options = useMemo(

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

@@ -26,7 +26,7 @@ export const useSearch = (clearSelected: () => void, onFilterConfig: (searchKey:
   }
 
   const onSearch = useCallback(
-    value => {
+    (value: string) => {
       onFilterConfig(value)
       clearSelected()
     },

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

@@ -53,7 +53,7 @@ const NFTSend = () => {
   const [sendState, dispatch] = useReducer(reducer, initState)
   const [remoteError, setRemoteError] = useState('')
 
-  const onInput = useCallback(e => {
+  const onInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const {
       dataset: { field },
       value,

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

@@ -23,7 +23,7 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
   const { networkID: currentId } = chain
 
   const onChoiceChange = useCallback(
-    (_e, option?: IChoiceGroupOption) => {
+    (_e: React.FormEvent<HTMLInputElement | HTMLElement> | undefined, option?: IChoiceGroupOption) => {
       if (option && option.key !== currentId) {
         setCurrentNetowrk(option.key)
       }

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

@@ -144,7 +144,7 @@ const SUDTCreateDialog = ({
     isAccountNameReady && Object.values(info).every(v => v.trim()) && Object.values(tokenErrors).every(e => !e)
 
   const onInput = useCallback(
-    e => {
+    (e: any) => {
       const {
         value: payload,
         dataset: { field: type },
@@ -175,15 +175,15 @@ const SUDTCreateDialog = ({
   )
 
   const onAccountTypeSelect = useCallback(
-    (_, option?: IChoiceGroupOption) => {
+    (_: any, option?: IChoiceGroupOption) => {
       if (option) {
         setAccountType(option.key as AccountType)
       }
     },
     [setAccountType]
   )
 
-  const onNext = (e: any) => {
+  const onNext = (e: React.BaseSyntheticEvent) => {
     e.stopPropagation()
     e.preventDefault()
     switch (step) {

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

@@ -29,7 +29,7 @@ const SUDTMigrateToExistAccountDialog = ({
   const [address, setAddress] = useState('')
   const [addressError, setAddressError] = useState('')
   const onAddressChange = useCallback(
-    value => {
+    (value: string) => {
       try {
         validateSpecificAddress(value, isMainnet, AnyoneCanPayLockInfoOnAggron.TagName)
         setAddressError('')

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

@@ -1,5 +1,5 @@
 import { TFunction } from 'i18next'
-import { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useSUDTAccountInfoErrors } from 'utils'
 
 export type TokenInfoType = Omit<Controller.GetTokenInfoList.TokenInfo, 'tokenID'> & {
@@ -37,7 +37,7 @@ export const useTokenInfo = ({
     }
   }, [findTokenInfo])
   const onChangeTokenInfo = useCallback(
-    e => {
+    (e: React.BaseSyntheticEvent) => {
       const {
         dataset: { field },
         value,

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

@@ -262,7 +262,7 @@ const SUDTSend = () => {
   }, [sendState.sendAll, experimental, accountInfo])
 
   const onInput = useCallback(
-    e => {
+    (e: React.ChangeEvent<HTMLInputElement>) => {
       const {
         dataset: { field },
         value,

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

@@ -88,7 +88,7 @@ const SUDTUpdateDialog = ({
   const isTokenReady = Object.values(info).every(v => v.trim()) && Object.values(tokenErrors).every(e => !e)
 
   const onInput = useCallback(
-    e => {
+    (e: any) => {
       const {
         value: payload,
         dataset: { field: type },
@@ -98,7 +98,7 @@ const SUDTUpdateDialog = ({
     [dispatch]
   )
 
-  const onConfirm = (e: any) => {
+  const onConfirm = (e: React.FormEvent) => {
     e.stopPropagation()
     e.preventDefault()
 

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

@@ -68,7 +68,7 @@ const Send = () => {
   const [locktimeIndex, setLocktimeIndex] = useState<number>(-1)
 
   const handleLocktimeClick = useCallback(
-    e => {
+    (e: React.BaseSyntheticEvent) => {
       const {
         dataset: { index, type },
       } = e.target

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

@@ -1,4 +1,4 @@
-import { useCallback, useState, useMemo, useEffect } from 'react'
+import React, { useCallback, useState, useMemo, useEffect } from 'react'
 import {
   useOutputErrors,
   outputsToTotalAmount,
@@ -101,7 +101,7 @@ export const useSendInfo = ({
     setSendInfoList(v => [...v, { address: undefined, amount: undefined, unit: CapacityUnit.CKB, disabled: false }])
   }, [setSendInfoList])
   const deleteSendInfo = useCallback(
-    e => {
+    (e: React.SyntheticEvent<HTMLButtonElement, Event>) => {
       const {
         dataset: { idx = '-1' },
       } = e.currentTarget
@@ -110,7 +110,7 @@ export const useSendInfo = ({
     [setSendInfoList]
   )
   const onSendInfoChange = useCallback(
-    e => {
+    (e: React.BaseSyntheticEvent) => {
       const {
         dataset: { idx = '-1', field },
         value,
@@ -172,7 +172,7 @@ export const useSendInfo = ({
   }, [sendInfoList, setErrorMessage, multisigConfig, dispatch, t, isMainnet, outputErrors])
   const [isSendMax, setIsSendMax] = useState(false)
   const onSendMaxClick = useCallback(
-    e => {
+    (e: React.BaseSyntheticEvent) => {
       const {
         dataset: { isOn = 'false' },
       } = e.currentTarget
@@ -218,6 +218,7 @@ export const useSendInfo = ({
     }
     return false
   }, [sendInfoList, isMainnet])
+
   return {
     sendInfoList,
     addSendInfo,

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

@@ -50,7 +50,7 @@ const PasswordDialog = ({ dialogRef, onCancel, onSubmit }: PasswordDialogProps)
   }, [dialogRef.current && dialogRef.current.open, setPassword, setError])
 
   const handleInputChange = useCallback(
-    e => {
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setPassword(e.target.value)
     },
     [setPassword]
@@ -203,7 +203,7 @@ const SignAndVerify = () => {
   })
 
   const handleInputChange = useCallback(
-    e => {
+    (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
       const {
         dataset: { field },
         value,
@@ -230,7 +230,7 @@ const SignAndVerify = () => {
   )
 
   const handleAddrSelected = useCallback(
-    e => {
+    (e: React.BaseSyntheticEvent) => {
       const {
         dataset: { addr },
       } = e.target

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

@@ -1,12 +1,12 @@
-import { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { getSUDTAccountList } from 'services/remote'
 import { NeuronWalletActions, useDispatch } from 'states'
 import { isSuccessResponse, useDialogWrapper, useDidMount } from 'utils'
 
 export const useMigrate = () => {
   const { openDialog, dialogRef, closeDialog } = useDialogWrapper()
   const onDocumentClick = useCallback(
-    e => {
+    (e: any) => {
       if (!dialogRef?.current?.children?.[0]?.contains(e.target) && dialogRef?.current?.open) {
         closeDialog()
       }
@@ -52,7 +52,7 @@ export const useClickMigrate = ({
   openMigrateToExistAccountDialog: () => void
 }) => {
   return useCallback(
-    e => {
+    (e: React.BaseSyntheticEvent) => {
       const {
         dataset: { type },
       } = e.currentTarget

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

@@ -159,7 +159,7 @@ const SpecialAssetList = () => {
   }, [dispatch])
 
   const fetchList = useCallback(
-    (walletID, pageNum: number) => {
+    (walletID: string, pageNum: number) => {
       getSpecialAssets({
         walletID,
         pageNo: pageNum,
@@ -201,7 +201,7 @@ const SpecialAssetList = () => {
   }, [globalDialog, fetchList, id, pageNo])
 
   const handleAction = useCallback(
-    e => {
+    (e: React.BaseSyntheticEvent) => {
       const {
         dataset: { txHash, idx },
       } = e.target

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { ChoiceGroup } from 'office-ui-fabric-react'
+import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react'
 
 import { WalletWizardPath } from 'components/WalletWizard'
 import { ReactComponent as EditWallet } from 'widgets/Icons/Edit.svg'
@@ -65,7 +65,7 @@ const WalletSetting = ({
   }, [])
 
   const onChange = useCallback(
-    (_e, option) => {
+    (_e?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => {
       if (option) {
         setCurrentWallet(option.key)(dispatch)
       }

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

@@ -4,7 +4,7 @@ import { useState as useGlobalState } from 'states'
 
 export interface Element {
   path: string
-  comp: React.SFC<any>
+  comp: React.FC<any>
 }
 
 export interface WithWizardState {

packages/neuron-ui/src/setupTests.ts

@@ -1,5 +1,5 @@
 import { configure } from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
 
 configure({
   adapter: new Adapter(),

packages/neuron-ui/src/states/stateProvider/provider.tsx

@@ -9,7 +9,7 @@ export const NeuronWalletContext = createContext<{ state: State.AppWithNeuronWal
   dispatch: basicDispatch,
 })
 
-export const withProvider = (Comp: React.ComponentType) => (props: React.Props<any>) => {
+export const withProvider = (Comp: React.ComponentType) => (props: JSX.IntrinsicAttributes) => {
   const [providers, dispatch] = useReducer(reducer, initStates)
 
   Object.defineProperty(Comp, 'displayName', {

packages/neuron-ui/src/utils/hooks/index.ts

@@ -464,7 +464,7 @@ export const useForceUpdate = <T extends Function>(cb: T) => {
   const [, update] = useState<{}>(Object.create(null))
 
   const memoizedDispatch = useCallback(
-    (...args) => {
+    (...args: any) => {
       cb(...args)
       update(Object.create(null))
     },