From 85f8947e1a1d5901fa2687d9e97e9fd6385b8b83 Mon Sep 17 00:00:00 2001 From: Wukong Sun Date: Fri, 11 Apr 2025 14:38:30 +0800 Subject: [PATCH] fix: mf-6690 modal naviate --- packages/mask/popups/Popup.tsx | 2 +- .../ActionModal/ActionModalContext.tsx | 21 ++++++++++--------- .../components/NFTAvatarPicker/index.tsx | 20 +++++++++--------- .../modals/PersonaSettingModal/index.tsx | 1 - .../VerifyBackupPasswordModal/index.tsx | 10 ++++----- 5 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/mask/popups/Popup.tsx b/packages/mask/popups/Popup.tsx index c0175a71ebf8..62c4f4fb95cb 100644 --- a/packages/mask/popups/Popup.tsx +++ b/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() diff --git a/packages/mask/popups/components/ActionModal/ActionModalContext.tsx b/packages/mask/popups/components/ActionModal/ActionModalContext.tsx index 8b60f286b17d..d5859237c6a8 100644 --- a/packages/mask/popups/components/ActionModal/ActionModalContext.tsx +++ b/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) => { - 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 } diff --git a/packages/mask/popups/components/NFTAvatarPicker/index.tsx b/packages/mask/popups/components/NFTAvatarPicker/index.tsx index 69753d7ae893..b36f45206a54 100644 --- a/packages/mask/popups/components/NFTAvatarPicker/index.tsx +++ b/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(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() diff --git a/packages/mask/popups/modals/PersonaSettingModal/index.tsx b/packages/mask/popups/modals/PersonaSettingModal/index.tsx index f7ce442a444d..6c9c6f7a4102 100644 --- a/packages/mask/popups/modals/PersonaSettingModal/index.tsx +++ b/packages/mask/popups/modals/PersonaSettingModal/index.tsx @@ -120,7 +120,6 @@ export const PersonaSettingModal = memo(function PersonaSe !user.backupPassword ? PopupModalRoutes.SetBackupPassword : PopupModalRoutes.verifyBackupPassword, - { to: PopupRoutes.ExportPrivateKey }, ) }} /> diff --git a/packages/mask/popups/modals/VerifyBackupPasswordModal/index.tsx b/packages/mask/popups/modals/VerifyBackupPasswordModal/index.tsx index 28a1d8471ffe..b214e54d6ce3 100644 --- a/packages/mask/popups/modals/VerifyBackupPasswordModal/index.tsx +++ b/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(function VerifyBackupPasswordModal() { const { t } = useLingui()