fix: Move the i18n subscribe to the entry of the page. (#3201)

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import {
-  useOnLocaleChange,
   isMainnet as isMainnetUtil,
   shannonToCKBFormatter,
   useExitOnWalletChange,
@@ -84,8 +83,7 @@ const LearnMore = React.memo(({ t }: { t: TFunction }) => (
 ))
 
 const MultisigAddress = () => {
-  const [t, i18n] = useTranslation()
-  useOnLocaleChange(i18n)
+  const [t] = useTranslation()
   useExitOnWalletChange()
   const {
     wallet: { id: walletId, addresses },

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

@@ -9,7 +9,7 @@ import {
   Navigation as NavigationSubject,
   Command as CommandSubject,
 } from 'services/subjects'
-import { useOnLocalStorageChange, useOnLocaleChange } from 'utils'
+import { useOnLocalStorageChange } from 'utils'
 import PageContainer from 'components/PageContainer'
 import WalletSetting from 'components/WalletSetting'
 import GeneralSetting from 'components/GeneralSetting'
@@ -28,9 +28,7 @@ const Settings = () => {
   const dispatch = useDispatch()
   const globalState = useGlobalState()
   const navigate = useNavigate()
-  const [t, i18n] = useTranslation()
-
-  useOnLocaleChange(i18n)
+  const [t] = useTranslation()
 
   useEffect(() => {
     const onNavigate = (url: string) => navigate(url)

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

@@ -3,14 +3,7 @@ import { TFunction } from 'i18next'
 import { useTranslation } from 'react-i18next'
 import { showErrorMessage, signMessage, verifyMessage } from 'services/remote'
 import { ControllerResponse } from 'services/remote/remoteApiWrapper'
-import {
-  ErrorCode,
-  isSuccessResponse,
-  shannonToCKBFormatter,
-  useExitOnWalletChange,
-  useGoBack,
-  useOnLocaleChange,
-} from 'utils'
+import { ErrorCode, isSuccessResponse, shannonToCKBFormatter, useExitOnWalletChange, useGoBack } from 'utils'
 import { useState as useGlobalState } from 'states'
 import Button from 'widgets/Button'
 import Balance from 'widgets/Balance'
@@ -33,15 +26,13 @@ interface PasswordDialogProps {
 }
 
 const PasswordDialog = ({ show, walletName, onCancel, onSubmit }: PasswordDialogProps) => {
-  const [t, i18n] = useTranslation()
+  const [t] = useTranslation()
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
 
   const disabled = !password || loading
 
-  useOnLocaleChange(i18n)
-
   useEffect(() => {
     if (!show) {
       setPassword('')
@@ -131,7 +122,7 @@ const Notifications = ({ notification, onDismiss, t, failReason }: Notifications
   ) : null
 
 const SignAndVerify = () => {
-  const [t, i18n] = useTranslation()
+  const [t] = useTranslation()
   const [notification, setNotification] = useState<Notification>(null)
   const [failReason, setFailReason] = useState<string | undefined>('')
   const [showDialog, setShowDialog] = useState(true)
@@ -141,7 +132,6 @@ const SignAndVerify = () => {
   const [address, setAddress] = useState('')
   const { wallet } = useGlobalState()
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
-  useOnLocaleChange(i18n)
   useExitOnWalletChange()
 
   const handlePasswordDialogOpen = useCallback(() => {

packages/neuron-ui/src/containers/LockWindow/index.tsx

@@ -7,7 +7,7 @@ import DarkUnLockMp4 from 'widgets/Icons/dark-unlock.mp4'
 import UnLockMp4 from 'widgets/Icons/unlock.mp4'
 import SplitPasswordInput from 'widgets/SplitPasswordInput'
 import { useTranslation } from 'react-i18next'
-import { clsx, isSuccessResponse } from 'utils'
+import { clsx, isSuccessResponse, useOnLocaleChange } from 'utils'
 import { isDark, signMessage, unlockWindow } from 'services/remote'
 import { retryUnlockWindow } from 'services/localCache'
 import { MILLISECS_PER_HOUR, MILLISECS_PER_MIN, MILLISECS_PER_SEC } from 'utils/getSyncLeftTime'
@@ -34,7 +34,8 @@ const getWaitMillisecs = (retryTimes: number) => {
 
 const LockWindow = ({ children }: { children: React.ReactNode }) => {
   const dispatch = useDispatch()
-  const [t] = useTranslation()
+  const [t, i18n] = useTranslation()
+  useOnLocaleChange(i18n)
   useEffect(() => {
     getLockWindowInfo(dispatch)
   }, [])

packages/neuron-ui/src/containers/Main/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useEffect, useState } from 'react'
 import { useNavigate, useLocation, Outlet } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { useState as useGlobalState, useDispatch, dismissGlobalAlertDialog } from 'states'
-import { useMigrate, useOnDefaultContextMenu, useOnLocaleChange, wakeScreen } from 'utils'
+import { useMigrate, useOnDefaultContextMenu, wakeScreen } from 'utils'
 import AlertDialog from 'widgets/AlertDialog'
 import Dialog from 'widgets/Dialog'
 import Button from 'widgets/Button'
@@ -28,7 +28,7 @@ const MainContent = () => {
   } = useGlobalState()
   const dispatch = useDispatch()
   const { networkID } = chain
-  const [t, i18n] = useTranslation()
+  const [t] = useTranslation()
 
   const network = useMemo(() => networks.find(n => n.id === networkID), [networks, networkID])
 
@@ -74,7 +74,6 @@ const MainContent = () => {
     navigate,
     dispatch,
   })
-  useOnLocaleChange(i18n)
   const onContextMenu = useOnDefaultContextMenu(t)
   const onCancelGlobalDialog = useCallback(() => {
     dismissGlobalAlertDialog()(dispatch)

packages/neuron-ui/src/containers/Navbar/index.tsx

@@ -14,7 +14,7 @@ import { AppUpdater as AppUpdaterSubject } from 'services/subjects'
 import Badge from 'widgets/Badge'
 import Logo from 'widgets/Icons/Logo.png'
 import { Overview, History, NervosDAO, Settings, Experimental, MenuExpand, ArrowNext } from 'widgets/Icons/icon'
-import { RoutePath, clsx, isSuccessResponse, useOnLocaleChange } from 'utils'
+import { RoutePath, clsx, isSuccessResponse } from 'utils'
 import Tooltip from 'widgets/Tooltip'
 import styles from './navbar.module.scss'
 
@@ -74,7 +74,6 @@ const Navbar = () => {
     updater: { version, isUpdated },
   } = neuronWallet
   const [t, i18n] = useTranslation()
-  useOnLocaleChange(i18n)
   const [isClickedSetting, setIsClickedSetting] = useState<boolean>(false)
   const selectedKey = menuItems.find(item => item.key === pathname || item.children?.some(v => v.key === pathname))?.key