diff --git a/packages/mask/popups/Popup.tsx b/packages/mask/popups/Popup.tsx index 6bf8e34c6c5c..2dc5d3575e5c 100644 --- a/packages/mask/popups/Popup.tsx +++ b/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 ( - + }> )} /> )} /> @@ -73,8 +72,8 @@ const PopupRoutes = memo(function PopupRoutes() { } /> } /> - {mainLocation ? - + {searchParams.get('modal') ? + )} diff --git a/packages/mask/popups/components/ActionModal/ActionModalContext.tsx b/packages/mask/popups/components/ActionModal/ActionModalContext.tsx index 142e8b616648..210a0fede9c8 100644 --- a/packages/mask/popups/components/ActionModal/ActionModalContext.tsx +++ b/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, options?: NavigateOptions) => { - navigate(urlcat(path, params ?? {}), { - ...options, - state: { - ...options?.state, - mainLocation: location.state?.mainLocation ?? location, - }, + (path: PopupModalRoutes, params?: Record) => { + setSearchParams((prev) => { + prev.set('modal', urlcat(path, params || {})) + return prev }) }, - [location, navigate], + [location, setSearchParams], ) return openModal } diff --git a/packages/mask/popups/components/NFTAvatarPicker/index.tsx b/packages/mask/popups/components/NFTAvatarPicker/index.tsx index 4f2088e20873..e5193a4d1a26 100644 --- a/packages/mask/popups/components/NFTAvatarPicker/index.tsx +++ b/packages/mask/popups/components/NFTAvatarPicker/index.tsx @@ -74,10 +74,7 @@ export const NFTAvatarPicker = memo(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) diff --git a/packages/mask/popups/components/SelectProvider/index.tsx b/packages/mask/popups/components/SelectProvider/index.tsx index 3202ebd60f58..2422a798b691 100644 --- a/packages/mask/popups/components/SelectProvider/index.tsx +++ b/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 } diff --git a/packages/mask/popups/pages/Personas/index.tsx b/packages/mask/popups/pages/Personas/index.tsx index b4a0be375524..47479cbbd257 100644 --- a/packages/mask/popups/pages/Personas/index.tsx +++ b/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 }, }) }) }) diff --git a/packages/shared-base/src/types/Routes.ts b/packages/shared-base/src/types/Routes.ts index 971a5089c244..0499cedfafc2 100644 --- a/packages/shared-base/src/types/Routes.ts +++ b/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 { diff --git a/packages/web3-hooks/base/src/useContext.tsx b/packages/web3-hooks/base/src/useContext.tsx index 0ae454268175..838b698a097d 100644 --- a/packages/web3-hooks/base/src/useContext.tsx +++ b/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() 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 =