fix: mf-6690 modal naviate (#12199)

Author: swkatmask

packages/mask/popups/Popup.tsx

@@ -50,7 +50,7 @@ const PopupShell = memo(function PopupShell() {
     const navigate = useNavigate()
     useEffect(() => {
         return MaskMessages.events.popupRouteUpdated.on((url) => navigate(url, { replace: true }))
-    }, [])
+    }, [navigate])
 
     useEffect(() => {
         document.getElementById('app-spinner')?.remove()

packages/mask/popups/components/ActionModal/ActionModalContext.tsx

@@ -1,8 +1,8 @@
-import { useTheme } from '@mui/material'
-import { useCallback, useRef, useState } from 'react'
-import { useNavigate, useLocation, useSearchParams } from 'react-router-dom'
 import type { PopupModalRoutes } from '@masknet/shared-base'
 import { createContainer } from '@masknet/shared-base-ui'
+import { useTheme } from '@mui/material'
+import { useCallback, useRef, useState } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import urlcat from 'urlcat'
 
 function useModal() {
@@ -42,16 +42,17 @@ export function useActionModal() {
  * Open a modal
  */
 export function useModalNavigate() {
-    const location = useLocation()
-    const [, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
+    const navigate = useNavigate()
     const openModal = useCallback(
         (path: PopupModalRoutes, params?: Record<string, any>) => {
-            setSearchParams((prev) => {
-                prev.set('modal', urlcat(path, params || {}))
-                return prev
-            })
+            searchParams.set('modal', urlcat(path, params || {}))
+            // useLocation().pathname is pathname of modal Routes (maybe since a certain version)
+            // So we use pathname in hash instead
+            const mainLocationPathname = location.hash.slice(1).replace(/\?.*$/, '')
+            navigate(`${mainLocationPathname}?${searchParams.toString()}`)
         },
-        [location, setSearchParams],
+        [navigate, searchParams],
     )
     return openModal
 }

packages/mask/popups/components/NFTAvatarPicker/index.tsx

@@ -1,16 +1,16 @@
+import { Trans } from '@lingui/react/macro'
+import { Flags } from '@masknet/flags'
 import { ElementAnchor, NetworkTab, PluginVerifiedWalletStatusBar, RetryHint } from '@masknet/shared'
-import { Box, Button, Stack } from '@mui/material'
-import { memo, useCallback, useMemo, useState } from 'react'
-import { getRegisteredWeb3Networks } from '@masknet/web3-providers'
-import { useChainContext, useNetworkContext, useNonFungibleAssets, useWallet } from '@masknet/web3-hooks-base'
-import { first, uniqBy } from 'lodash-es'
+import { EMPTY_LIST, PopupModalRoutes, type BindingProof, type NetworkPluginID } from '@masknet/shared-base'
 import { LoadingBase, makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { CollectionList } from './CollectionList.js'
-import { EMPTY_LIST, type NetworkPluginID, PopupModalRoutes, type BindingProof } from '@masknet/shared-base'
+import { useChainContext, useNetworkContext, useNonFungibleAssets, useWallet } from '@masknet/web3-hooks-base'
+import { getRegisteredWeb3Networks } from '@masknet/web3-providers'
+import { Box, Button, Stack } from '@mui/material'
+import { first, uniqBy } from 'lodash-es'
+import { memo, useCallback, useMemo, useState } from 'react'
 import { useModalNavigate } from '../index.js'
-import { Flags } from '@masknet/flags'
-import { Trans } from '@lingui/react/macro'
+import { CollectionList } from './CollectionList.js'
 
 const useStyles = makeStyles()((theme) => ({
     picker: {
@@ -54,7 +54,7 @@ export const NFTAvatarPicker = memo<NFTAvatarPickerProps>(function NFTAvatarPick
     const chains = useMemo(() => {
         const networks = getRegisteredWeb3Networks(pluginID)
         return networks.filter((x) => (Flags.support_testnet_switch ? true : x.isMainnet)).map((x) => x.chainId)
-    }, [])
+    }, [pluginID])
 
     const [selected, setSelected] = useState<Web3Helper.NonFungibleAssetAll | undefined>()
 

packages/mask/popups/modals/PersonaSettingModal/index.tsx

@@ -120,7 +120,6 @@ export const PersonaSettingModal = memo<ActionModalBaseProps>(function PersonaSe
                             !user.backupPassword ?
                                 PopupModalRoutes.SetBackupPassword
                             :   PopupModalRoutes.verifyBackupPassword,
-                            { to: PopupRoutes.ExportPrivateKey },
                         )
                     }}
                 />

packages/mask/popups/modals/VerifyBackupPasswordModal/index.tsx

@@ -1,13 +1,13 @@
-import { memo, useCallback, useState } from 'react'
+import { Trans, useLingui } from '@lingui/react/macro'
+import { PopupRoutes } from '@masknet/shared-base'
 import { ActionButton } from '@masknet/theme'
 import { Box } from '@mui/material'
-import { ActionModal, type ActionModalBaseProps } from '../../components/index.js'
+import { memo, useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { UserContext } from '../../../shared-ui/index.js'
+import { ActionModal, type ActionModalBaseProps } from '../../components/index.js'
 import { PasswordField } from '../../components/PasswordField/index.js'
-import { useNavigate } from 'react-router-dom'
-import { PopupRoutes } from '@masknet/shared-base'
 import { MATCH_PASSWORD_RE } from '../../constants.js'
-import { Trans, useLingui } from '@lingui/react/macro'
 
 export const VerifyBackupPasswordModal = memo<ActionModalBaseProps>(function VerifyBackupPasswordModal() {
     const { t } = useLingui()