refactor: change how to represent modal routes

packages/mask/popups/Popup.tsx

@@ -6,7 +6,7 @@ import { ProviderType } from '@masknet/web3-shared-evm'
 import { Box } from '@mui/material'
 import { Suspense, lazy, memo, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { useIdleTimer } from 'react-idle-timer'
-import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
+import { HashRouter, Navigate, Route, Routes, useNavigate, useSearchParams } from 'react-router-dom'
 import { usePopupTheme } from './hooks/usePopupTheme.js'
 import Services from '#services'
 import { LoadingPlaceholder } from './components/LoadingPlaceholder/index.js'
@@ -49,8 +49,7 @@ const personaInitialState = {
     queryPersonaAvatar: Services.Identity.getPersonaAvatar,
 }
 const PopupRoutes = memo(function PopupRoutes() {
-    const location = useLocation()
-    const mainLocation = location.state?.mainLocation as Location | undefined
+    const [searchParams] = useSearchParams()
 
     return (
         <Suspense
@@ -62,7 +61,7 @@ const PopupRoutes = memo(function PopupRoutes() {
             <PersonaContext.Provider initialState={personaInitialState}>
                 <UserContext.Provider>
                     <RouterListener />
-                    <Routes location={mainLocation || location}>
+                    <Routes>
                         <Route path="/" element={<PopupLayout />}>
                             <Route path={PopupPaths.Personas + '/*'} element={withSuspense(<Personas />)} />
                             <Route path={PopupPaths.Wallet + '/*'} element={withSuspense(<Wallet />)} />
@@ -73,8 +72,8 @@ const PopupRoutes = memo(function PopupRoutes() {
                         <Route path={PopupPaths.RequestPermission} element={<RequestPermissionPage />} />
                         <Route path="*" element={<Navigate replace to={PopupPaths.Personas} />} />
                     </Routes>
-                    {mainLocation ?
-                        <Routes>
+                    {searchParams.get('modal') ?
+                        <Routes location={searchParams.get('modal') || ''}>
                             <Route
                                 path={PopupModalRoutes.verifyBackupPassword}
                                 element={wrapModal(<VerifyBackupPasswordModal />)}

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

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material'
 import { useCallback, useRef, useState } from 'react'
-import { useNavigate, useLocation, type NavigateOptions } from 'react-router-dom'
+import { useNavigate, useLocation, useSearchParams } from 'react-router-dom'
 import type { PopupModalRoutes } from '@masknet/shared-base'
 import { createContainer } from 'unstated-next'
 import urlcat from 'urlcat'
@@ -39,22 +39,19 @@ export function useActionModal() {
 }
 
 /**
- * To open a modal, should navigate with setting state `{ mainLocation: location }`
+ * Open a modal
  */
 export function useModalNavigate() {
     const location = useLocation()
-    const navigate = useNavigate()
+    const [, setSearchParams] = useSearchParams()
     const openModal = useCallback(
-        (path: PopupModalRoutes, params?: Record<string, any>, options?: NavigateOptions) => {
-            navigate(urlcat(path, params ?? {}), {
-                ...options,
-                state: {
-                    ...options?.state,
-                    mainLocation: location.state?.mainLocation ?? location,
-                },
+        (path: PopupModalRoutes, params?: Record<string, any>) => {
+            setSearchParams((prev) => {
+                prev.set('modal', urlcat(path, params || {}))
+                return prev
             })
         },
-        [location, navigate],
+        [location, setSearchParams],
     )
     return openModal
 }

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

@@ -74,10 +74,7 @@ export const NFTAvatarPicker = memo<NFTAvatarPickerProps>(function NFTAvatarPick
 
     const tokens = useMemo(() => uniqBy(assets, (x) => x.contract?.address.toLowerCase() + x.tokenId), [assets])
 
-    const handleChangeWallet = useCallback(
-        () => modalNavigate(PopupModalRoutes.SelectProvider, { onlyMask: true }, { replace: true }),
-        [],
-    )
+    const handleChangeWallet = useCallback(() => modalNavigate(PopupModalRoutes.SelectProvider, { onlyMask: true }), [])
 
     const handleChange = useCallback((address: string, pluginID: NetworkPluginID, chainId: Web3Helper.ChainIdAll) => {
         setAccount(address)

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

@@ -74,15 +74,7 @@ export const SelectProvider = memo(function SelectProvider() {
             } else {
                 const currentPopupWindowId = await Services.Helper.queryCurrentPopupWindowId()
                 if (currentPopupWindowId) {
-                    modalNavigate(
-                        PopupModalRoutes.ConnectProvider,
-                        {
-                            providerType,
-                        },
-                        {
-                            replace: true,
-                        },
-                    )
+                    modalNavigate(PopupModalRoutes.ConnectProvider, { providerType })
                     return
                 }
 

packages/mask/popups/pages/Personas/index.tsx

@@ -27,10 +27,8 @@ const Persona = memo(() => {
         return CrossIsolationMessages.events.popupWalletConnectEvent.on(({ open, uri }) => {
             if (!open || location.href.includes(PopupRoutes.WalletConnect)) return
             navigate(PopupRoutes.WalletConnect, {
-                replace: location.hash.includes('/modal/select-provider'),
-                state: {
-                    uri,
-                },
+                replace: params.get('modal')?.includes(PopupModalRoutes.SelectProvider),
+                state: { uri },
             })
         })
     })

packages/shared-base/src/types/Routes.ts

@@ -20,22 +20,22 @@ export enum DashboardRoutes {
 }
 
 export enum PopupModalRoutes {
-    ChooseCurrency = '/modal/choose-currency',
-    ChooseNetwork = '/modal/choose-network',
-    SwitchWallet = '/modal/switch-wallet',
-    ConnectSocialAccount = '/modal/connect-social-account',
-    SelectProvider = '/modal/select-provider',
-    ConnectProvider = '/modal/connect-provider',
-    SwitchPersona = '/modal/switch-persona',
-    PersonaSettings = '/modal/persona-setting',
-    PersonaRename = '/modal/persona-rename',
-    SetBackupPassword = '/modal/set-backup-password',
-    verifyBackupPassword = '/modal/verify-backup-password',
-    WalletAccount = '/modal/wallet-accounts',
-    SelectLanguage = '/modal/select-language',
-    SelectAppearance = '/modal/select-appearance',
-    SupportedSitesModal = '/modal/supported-sites',
-    ChangeBackupPassword = '/modal/change-backup-password',
+    ChooseCurrency = '/choose-currency',
+    ChooseNetwork = '/choose-network',
+    SwitchWallet = '/switch-wallet',
+    ConnectSocialAccount = '/connect-social-account',
+    SelectProvider = '/select-provider',
+    ConnectProvider = '/connect-provider',
+    SwitchPersona = '/switch-persona',
+    PersonaSettings = '/persona-setting',
+    PersonaRename = '/persona-rename',
+    SetBackupPassword = '/set-backup-password',
+    verifyBackupPassword = '/verify-backup-password',
+    WalletAccount = '/wallet-accounts',
+    SelectLanguage = '/select-language',
+    SelectAppearance = '/select-appearance',
+    SupportedSitesModal = '/supported-sites',
+    ChangeBackupPassword = '/change-backup-password',
 }
 
 export enum PopupRoutes {

packages/web3-hooks/base/src/useContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useState, useMemo, memo, type PropsWithChildren } from 'react'
 import { isUndefined, omitBy } from 'lodash-es'
 import { usePersistSubscription, useValueRef } from '@masknet/shared-base-ui'
-import { compose, Sniffings, NetworkPluginID, getSiteType, pluginIDsSettings } from '@masknet/shared-base'
+import { compose, Sniffings, NetworkPluginID, getSiteType, pluginIDsSettings, PopupRoutes } from '@masknet/shared-base'
 import { MaskWalletProvider } from '@masknet/web3-providers'
 import { ProviderType } from '@masknet/web3-shared-evm'
 import type { Web3Helper } from '@masknet/web3-helpers'
@@ -78,7 +78,7 @@ export const ChainContextProvider = memo(function ChainContextProvider(props: Pr
     const [_providerType, setProviderType] = useState<Web3Helper.ProviderTypeAll>()
 
     const location = useLocation()
-    const is_popup_wallet_page = Sniffings.is_popup_page && location.hash?.includes('/wallet')
+    const is_popup_wallet_page = Sniffings.is_popup_page && location.hash?.includes(PopupRoutes.Wallet)
     const account =
         controlled ? props.account : _account ?? props.account ?? (is_popup_wallet_page ? maskAccount : globalAccount)
     const chainId =