feat: Update react-router to v6.

.github/workflows/unit_tests.yml

@@ -40,7 +40,7 @@ jobs:
           path: |
             node_modules
             */*/node_modules
-          key: 2022-09-09-${{ runner.os }}-${{ hashFiles('**/yarn.lock')}}
+          key: 2022-10-11-${{ runner.os }}-${{ hashFiles('**/yarn.lock')}}
 
       - name: Install libudev
         if: matrix.os == 'ubuntu-20.04'

packages/neuron-ui/package.json

@@ -54,7 +54,7 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-i18next": "11.15.3",
-    "react-router-dom": "5.1.2",
+    "react-router-dom": "6.4.1",
     "sass": "1.47.0"
   },
   "devDependencies": {
@@ -72,7 +72,6 @@
     "@types/node": "12.12.14",
     "@types/react": "16.9.15",
     "@types/react-dom": "16.9.4",
-    "@types/react-router-dom": "5.1.3",
     "@types/storybook-react-router": "1.0.1",
     "@types/storybook__addon-storyshots": "5.1.2",
     "@types/styled-components": "4.4.0",

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback } from 'react'
 import { clipboard } from 'electron'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { ReactComponent as Edit } from 'widgets/Icons/Edit.svg'
 import TextField from 'widgets/TextField'
@@ -30,7 +30,7 @@ const Addresses = () => {
   } = useGlobalState()
   const dispatch = useDispatch()
   const [t] = useTranslation()
-  const history = useHistory()
+  const navigate = useNavigate()
 
   const isMainnet = isMainnetUtil(networks, networkID)
   const breakcrum = [{ label: t('navbar.receive'), link: RoutePath.Receive }]
@@ -62,7 +62,7 @@ const Addresses = () => {
           {
             label: t('addresses.request-payment'),
             click: () => {
-              history.push(`${RoutePath.Receive}/${item.address}`)
+              navigate(`${RoutePath.Receive}/${item.address}`)
             },
           },
           {
@@ -76,7 +76,7 @@ const Addresses = () => {
         openContextMenu(menuTemplate)
       }
     },
-    [t, isMainnet, history]
+    [t, isMainnet, navigate]
   )
 
   return (

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

@@ -12,7 +12,7 @@ import {
 } from 'states'
 import { ControllerResponse } from 'services/remote/remoteApiWrapper'
 import Spinner from 'widgets/Spinner'
-import { useHistory } from 'react-router-dom'
+import { NavigateFunction } from 'react-router-dom'
 import { ReactComponent as HardWalletIcon } from 'widgets/Icons/HardWallet.svg'
 import {
   connectDevice,
@@ -43,13 +43,13 @@ export interface HardwareSignProps {
   offlineSignType?: OfflineSignType
   onDismiss: () => void
   signMessage?: (password: string) => Promise<any>
-  history?: ReturnType<typeof useHistory>
+  navigate?: NavigateFunction
 }
 
 const HardwareSign = ({
   signType,
   signMessage,
-  history,
+  navigate,
   wallet,
   onDismiss,
   offlineSignJSON,
@@ -259,7 +259,7 @@ const HardwareSign = ({
             description,
           })(dispatch).then(res => {
             if (isSuccessResponse(res)) {
-              history!.push(RoutePath.History)
+              navigate?.(RoutePath.History)
             } else {
               setError(res.message)
             }
@@ -272,7 +272,7 @@ const HardwareSign = ({
           }
           sendTransaction({ walletID: wallet.id, tx, description })(dispatch).then(res => {
             if (isSuccessResponse(res)) {
-              history!.push(RoutePath.History)
+              navigate?.(RoutePath.History)
             } else {
               setError(res.message)
             }
@@ -288,7 +288,7 @@ const HardwareSign = ({
           }
           sendCreateSUDTAccountTransaction(params)(dispatch).then(res => {
             if (isSuccessResponse(res)) {
-              history!.push(RoutePath.History)
+              navigate?.(RoutePath.History)
             } else {
               setError(res.message)
             }
@@ -310,7 +310,7 @@ const HardwareSign = ({
           }
           sendSUDTTransaction(params)(dispatch).then(res => {
             if (isSuccessResponse(res)) {
-              history!.push(RoutePath.History)
+              navigate?.(RoutePath.History)
             } else {
               setError(res.message)
             }
@@ -320,7 +320,7 @@ const HardwareSign = ({
         case 'migrate-acp': {
           await migrateAcp({ id: wallet.id })(dispatch).then(res => {
             if (isSuccessResponse(res)) {
-              history!.push(RoutePath.History)
+              navigate?.(RoutePath.History)
             } else {
               // @ts-ignore
               setError(res.message.content)
@@ -361,7 +361,7 @@ const HardwareSign = ({
     wallet.id,
     description,
     dispatch,
-    history,
+    navigate,
     signAndExportFromJSON,
     ensureDeviceAvailable,
     multisigConfig,

packages/neuron-ui/src/components/HardwareSign/success.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { RoutePath } from 'utils'
 import Button from 'widgets/Button'
 import { ReactComponent as CompleteIcon } from 'widgets/Icons/Complete.svg'
@@ -9,11 +9,11 @@ import styles from './hardwareSign.module.scss'
 
 const SignSuccess = ({ onCancel }: { onCancel: () => void }) => {
   const [t] = useTranslation()
-  const history = useHistory()
+  const navigate = useNavigate()
   const onClose = useCallback(() => {
     onCancel()
-    history.push(RoutePath.History)
-  }, [history, onCancel])
+    navigate(RoutePath.History)
+  }, [navigate, onCancel])
 
   return (
     <div className={styles.container}>

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

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Stack, SearchBox } from 'office-ui-fabric-react'
 import Pagination from 'widgets/Pagination'
@@ -27,13 +27,13 @@ const History = () => {
   } = useGlobalState()
   const dispatch = useDispatch()
   const [t] = useTranslation()
-  const history = useHistory()
+  const navigate = useNavigate()
   const { search } = useLocation()
   const [isExporting, setIsExporting] = useState(false)
   const isMainnet = isMainnetUtil(networks, networkID)
 
   const { keywords, onKeywordsChange } = useSearch(search, id, dispatch)
-  const onSearch = useCallback(() => history.push(`${RoutePath.History}?keywords=${keywords}`), [history, keywords])
+  const onSearch = useCallback(() => navigate(`${RoutePath.History}?keywords=${keywords}`), [navigate, keywords])
   const onExport = useCallback(() => {
     setIsExporting(true)
     const timer = setTimeout(() => {
@@ -98,7 +98,7 @@ const History = () => {
             pageSize={pageSize}
             pageNo={pageNo}
             onChange={(no: number) => {
-              history.push(`${RoutePath.History}?pageNo=${no}&keywords=${keywords}`)
+              navigate(`${RoutePath.History}?pageNo=${no}&keywords=${keywords}`)
             }}
           />
         </div>
@@ -116,7 +116,7 @@ const History = () => {
     pageNo,
     totalCount,
     pageSize,
-    history,
+    navigate,
     isMainnet,
     t,
     isExporting,

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
-import { useHistory } from 'react-router-dom'
 import { CreateFirstWalletNav } from 'components/WalletWizard'
 import { useGoBack } from 'utils'
 import { AttentionOutline } from 'widgets/Icons/icon'
@@ -44,8 +43,7 @@ const supportedHardwareModels = [
 const SelectModel = ({ dispatch }: { dispatch: React.Dispatch<ActionType> }) => {
   const [t] = useTranslation()
   const [model, setModel] = useState<Model | null>()
-  const history = useHistory()
-  const onBack = useGoBack(history)
+  const onBack = useGoBack()
   const onNext = useCallback(() => {
     dispatch({
       model,

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

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { importKeystore, showOpenDialogModal } from 'services/remote'
 import { useState as useGlobalState } from 'states'
@@ -44,10 +44,10 @@ const ImportKeystore = () => {
   const {
     settings: { wallets },
   } = useGlobalState()
-  const history = useHistory()
+  const navigate = useNavigate()
   const [fields, setFields] = useState(defaultFields)
   const [openingFile, setOpeningFile] = useState(false)
-  const goBack = useGoBack(history)
+  const goBack = useGoBack()
 
   const disabled = !!(
     !fields.name ||
@@ -105,7 +105,7 @@ const ImportKeystore = () => {
       importKeystore({ name: fields.name!, keystorePath: fields.path, password: fields.password })
         .then(res => {
           if (isSuccessResponse(res)) {
-            history.push(window.neuron.role === 'main' ? RoutePath.Overview : RoutePath.SettingsWallets)
+            navigate(window.neuron.role === 'main' ? RoutePath.Overview : RoutePath.SettingsWallets)
             return
           }
 
@@ -131,7 +131,7 @@ const ImportKeystore = () => {
           closeDialog()
         })
     },
-    [fields.name, fields.password, fields.path, history, openDialog, closeDialog, disabled, setFields, t]
+    [fields.name, fields.password, fields.path, navigate, openDialog, closeDialog, disabled, setFields, t]
   )
 
   const handleChange = useCallback(

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Panel, PanelType, SpinnerSize } from 'office-ui-fabric-react'
 import { useState as useGlobalState } from 'states'
@@ -11,13 +11,13 @@ export const LaunchScreen = () => {
     wallet: { id = '' },
   } = useGlobalState()
   const { t } = useTranslation()
-  const history = useHistory()
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (id) {
-      history.push(RoutePath.Overview)
+      navigate(RoutePath.Overview)
     }
-  }, [id, history])
+  }, [id, navigate])
 
   return (
     <Panel isOpen type={PanelType.custom} customWidth="100vw">

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

@@ -100,7 +100,7 @@ const NFTSend = () => {
     [isSubmittable, globalDispatch, walletId]
   )
 
-  const location = useLocation<{ outPoint?: any }>()
+  const location = useLocation()
 
   const outPoint = location.state?.outPoint
 

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

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { useHistory } from 'react-router-dom'
+import { NavigateFunction } from 'react-router-dom'
 
 import { StateDispatch, createNetwork, updateNetwork, addNotification } from 'states'
 import { ErrorCode, CONSTANTS } from 'utils'
@@ -11,7 +11,7 @@ export const useOnSubmit = ({
   name = '',
   remote = '',
   networks = [],
-  history,
+  navigate,
   dispatch,
   disabled,
   setIsUpdating,
@@ -20,7 +20,7 @@ export const useOnSubmit = ({
   name: string
   remote: string
   networks: Readonly<State.Network[]>
-  history: ReturnType<typeof useHistory>
+  navigate: NavigateFunction
   dispatch: StateDispatch
   disabled: boolean
   setIsUpdating: React.Dispatch<boolean>
@@ -103,7 +103,7 @@ export const useOnSubmit = ({
         createNetwork({
           name,
           remote,
-        })(dispatch, history)
+        })(dispatch, navigate)
         return
       }
 
@@ -127,9 +127,9 @@ export const useOnSubmit = ({
           name,
           remote,
         },
-      })(dispatch, history).then(() => setIsUpdating(false))
+      })(dispatch, navigate).then(() => setIsUpdating(false))
     },
-    [id, name, remote, networks, history, dispatch, disabled, setIsUpdating]
+    [id, name, remote, networks, navigate, dispatch, disabled, setIsUpdating]
   )
 
 export default {

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { useParams, useHistory } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Stack } from 'office-ui-fabric-react'
 import TextField from 'widgets/TextField'
@@ -18,7 +18,7 @@ const NetworkEditor = () => {
   } = useGlobalState()
   const dispatch = useDispatch()
   const { id } = useParams<{ id: string }>()
-  const history = useHistory()
+  const navigate = useNavigate()
   const cachedNetworks = useRef(networks)
   const cachedNetwork = useMemo(() => cachedNetworks.current.find(network => network.id === id), [cachedNetworks, id])
   const usedNetworkNames = useMemo(
@@ -81,14 +81,14 @@ const NetworkEditor = () => {
     },
     [setEditor, t, usedNetworkNames]
   )
-  const goBack = useGoBack(history)
+  const goBack = useGoBack()
 
   const onSubmit = useOnSubmit({
     id: id!,
     name: editor.name,
     remote: editor.url,
     networks,
-    history,
+    navigate,
     dispatch,
     disabled,
     setIsUpdating,