refactor: remove the gone /swap route (#11627)

packages/mask/popups/Popup.tsx

@@ -1,19 +1,12 @@
 import { PageUIProvider, PersonaContext } from '@masknet/shared'
-import { MaskMessages, PopupModalRoutes, PopupRoutes as PopupPaths, PopupsHistory } from '@masknet/shared-base'
+import { MaskMessages, PopupModalRoutes, PopupRoutes as PopupPaths } from '@masknet/shared-base'
 import { PopupSnackbarProvider } from '@masknet/theme'
 import { EVMWeb3ContextProvider } from '@masknet/web3-hooks-base'
 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 {
-    unstable_HistoryRouter as HistoryRouter,
-    Navigate,
-    Route,
-    Routes,
-    useLocation,
-    type HistoryRouterProps,
-} from 'react-router-dom'
+import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
 import { usePopupTheme } from './hooks/usePopupTheme.js'
 import Services from '#services'
 import { LoadingPlaceholder } from './components/LoadingPlaceholder/index.js'
@@ -39,7 +32,6 @@ import {
 } from './modals/modals.js'
 import { Modals } from './modals/index.js'
 import SwitchWallet from './pages/Wallet/SwitchWallet/index.js'
-import { noop } from 'lodash-es'
 import { UserContext, queryPersistOptions } from '../shared-ui/index.js'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
@@ -60,10 +52,6 @@ const PopupRoutes = memo(function PopupRoutes() {
     const location = useLocation()
     const mainLocation = location.state?.mainLocation as Location | undefined
 
-    useEffect(() => {
-        document.getElementById('app-spinner')?.remove()
-    }, [])
-
     return (
         <Suspense
             fallback={
@@ -73,6 +61,7 @@ const PopupRoutes = memo(function PopupRoutes() {
             }>
             <PersonaContext.Provider initialState={personaInitialState}>
                 <UserContext.Provider>
+                    <RouterListener />
                     <Routes location={mainLocation || location}>
                         <Route path="/" element={<PopupLayout />}>
                             <Route path={PopupPaths.Personas + '/*'} element={withSuspense(<Personas />)} />
@@ -166,13 +155,9 @@ export default function Popups() {
     )
 
     useIdleTimer({
-        onAction: !location.hash.includes('/swap') ? () => Services.Wallet.setAutoLockTimer() : noop,
+        onAction: () => Services.Wallet.setAutoLockTimer(),
         throttle: 10000,
     })
-    useEffect(() => {
-        if (location.hash.includes('/swap')) return
-        return MaskMessages.events.popupRouteUpdated.on((url) => PopupsHistory.replace(url))
-    }, [])
 
     return (
         <PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions}>
@@ -186,10 +171,10 @@ export default function Popups() {
                     <EVMWeb3ContextProvider providerType={ProviderType.MaskWallet}>
                         <PopupContext.Provider>
                             <PageTitleContext.Provider value={titleContext}>
-                                <HistoryRouter history={PopupsHistory as unknown as HistoryRouterProps['history']}>
+                                <HashRouter>
                                     <PopupRoutes />
                                     <Modals />
-                                </HistoryRouter>
+                                </HashRouter>
                             </PageTitleContext.Provider>
                         </PopupContext.Provider>
                     </EVMWeb3ContextProvider>
@@ -199,3 +184,14 @@ export default function Popups() {
         </PersistQueryClientProvider>
     )
 }
+function RouterListener() {
+    const navigate = useNavigate()
+    useEffect(() => {
+        return MaskMessages.events.popupRouteUpdated.on((url) => navigate(url, { replace: true }))
+    }, [])
+
+    useEffect(() => {
+        document.getElementById('app-spinner')?.remove()
+    }, [])
+    return null
+}

packages/mask/shared-ui/initUIContext.ts

@@ -7,6 +7,7 @@ import {
 import Services from '#services'
 import { __setUIContext__ } from '@masknet/plugin-infra/content-script'
 import type { Subscription } from 'use-subscription'
+import { openPopupWindow } from './utils/openPopup.js'
 
 export const allPersonas: Subscription<PersonaInformation[]> = createSubscriptionFromAsync(
     () => Services.Identity.queryOwnedPersonaInformation(true),
@@ -38,7 +39,7 @@ export function setupUIContext() {
         fetchJSON: Services.Helper.fetchJSON,
         queryPersonaByProfile: Services.Identity.queryPersonaByProfile,
         openDashboard: Services.Helper.openDashboard,
-        openPopupWindow: Services.Helper.openPopupWindow,
+        openPopupWindow,
         signWithPersona: (a, b, c, d) => Services.Identity.signWithPersona(a, b, c, location.origin, d),
         hasPaymentPassword: Services.Wallet.hasPassword,
         createPersona: () => Services.Helper.openDashboard(DashboardRoutes.SignUpPersona),

packages/mask/shared-ui/initialization/walletSetup.ts

@@ -4,6 +4,7 @@ import { allPersonas } from '../initUIContext.js'
 import { CrossIsolationMessages, EMPTY_LIST, Sniffings, createSubscriptionFromAsync } from '@masknet/shared-base'
 import * as shared from /* webpackDefer: true */ '@masknet/shared'
 import { defer, delay } from '@masknet/kit'
+import { openPopupWindow } from '../utils/openPopup.js'
 
 await initWallet({
     signWithPersona: (a, b, c, d) => Services.Identity.signWithPersona(a, b, c, location.origin, d),
@@ -33,7 +34,7 @@ await initWallet({
         },
     },
     MessageContext: {
-        openPopupWindow: Services.Helper.openPopupWindow,
+        openPopupWindow,
         send: Services.Wallet.send,
         hasPaymentPassword: Services.Wallet.hasPassword,
     },

packages/mask/shared-ui/utils/openPopup.ts

@@ -0,0 +1,16 @@
+import Services from '#services'
+import { MaskMessages, Sniffings, type PopupRoutes, type PopupRoutesParamsMap } from '@masknet/shared-base'
+import type { OpenPopupWindowOptions } from '../../background/services/helper/popup-opener.js'
+import urlcat from 'urlcat'
+
+export async function openPopupWindow<T extends PopupRoutes>(
+    route: T,
+    params: T extends keyof PopupRoutesParamsMap ? PopupRoutesParamsMap[T] : undefined,
+    options?: OpenPopupWindowOptions,
+): Promise<void> {
+    if (Sniffings.is_popup_page) {
+        MaskMessages.events.popupRouteUpdated.sendToAll(urlcat(route, params || {}))
+        return
+    }
+    return Services.Helper.openPopupWindow(route, params, options)
+}

packages/mask/swap/initialization/render.tsx

@@ -3,6 +3,4 @@ import Swap from '../Swap.js'
 import { setupUIContext } from '../../shared-ui/initUIContext.js'
 
 setupUIContext()
-if (location.hash === '') location.assign('#/swap')
-
 createNormalReactRoot(<Swap />)

packages/shared-base/package.json

@@ -24,7 +24,6 @@
     "async-call-rpc": "^6.4.0",
     "bignumber.js": "9.1.2",
     "dompurify": "^3.0.5",
-    "history": "^5.3.0",
     "i18next-browser-languagedetector": "^7.1.0",
     "idb": "^7.1.1",
     "json-stable-stringify": "^1.0.2",

packages/shared-base/src/index.ts

@@ -24,4 +24,3 @@ export * from './LegacySettings/index.js'
 export * from './KVStorage/index.js'
 export * from './KVStorage/kv-storage/index.js'
 export * from './Telemetry/index.js'
-export * from './Histories/index.js'

packages/web3-providers/src/Web3/EVM/state/Message.ts

@@ -1,7 +1,6 @@
 import { omitBy } from 'lodash-es'
-import urlcat from 'urlcat'
 import type { JsonRpcResponse } from 'web3-core-helpers'
-import { EMPTY_OBJECT, PopupRoutes, PopupsHistory, Sniffings, type StorageItem } from '@masknet/shared-base'
+import { EMPTY_OBJECT, PopupRoutes, Sniffings, type StorageItem } from '@masknet/shared-base'
 import { MessageStateType, type ReasonableMessage } from '@masknet/web3-shared-base'
 import {
     createJsonRpcPayload,
@@ -84,8 +83,8 @@ export class EVMMessage extends MessageState<MessageRequest, MessageResponse> {
             const fromState =
                 route !== PopupRoutes.ContractInteraction ? { from: PopupRoutes.ContractInteraction } : EMPTY_OBJECT
 
-            if (Sniffings.is_popup_page && !location.hash.includes('/swap')) {
-                PopupsHistory.push(urlcat(PopupRoutes.Wallet, fromState))
+            if (Sniffings.is_popup_page) {
+                await this.context.openPopupWindow(route, fromState as any)
             } else {
                 // open the popups window and wait for approval from the user.
                 await this.context.openPopupWindow(route, {