diff --git a/packages/dashboard/src/initialization/Dashboard.tsx b/packages/dashboard/src/initialization/Dashboard.tsx
index 5715cdc26333..84236295ed53 100644
--- a/packages/dashboard/src/initialization/Dashboard.tsx
+++ b/packages/dashboard/src/initialization/Dashboard.tsx
@@ -60,8 +60,8 @@ export default function DashboardRoot() {
                                         <SharedContextProvider>
                                             <HashRouter>
                                                 <Pages />
+                                                <PluginRender />
                                             </HashRouter>
-                                            <PluginRender />
                                         </SharedContextProvider>
                                     </CustomSnackbarProvider>
                                 </ErrorBoundary>
diff --git a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
index be797ea147ec..0b0b53a37120 100644
--- a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
@@ -1,10 +1,8 @@
-import { useCallback } from 'react'
 import { ExternalLink } from 'react-feather'
 import classNames from 'classnames'
 import { ProviderType } from '@masknet/web3-shared-evm'
 import { Button, Link, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import {
     useAccount,
     useWeb3State,
@@ -16,10 +14,7 @@ import {
     useWallet,
 } from '@masknet/plugin-infra/web3'
 import { FormattedAddress, WalletIcon } from '@masknet/shared'
-import { WalletMessages } from '../../../plugins/Wallet/messages'
 import { useI18N } from '../../../utils'
-import Services from '../../../extension/service'
-import { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
 
 const useStyles = makeStyles()((theme) => ({
     currentAccount: {
@@ -109,34 +104,6 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
 
     const { value: domain } = useReverseAddress(account)
 
-    // #region change provider
-    const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
-        WalletMessages.events.selectProviderDialogUpdated,
-    )
-    // #endregion
-
-    // #region walletconnect
-    const { setDialog: setWalletConnectDialog } = useRemoteControlledDialog(
-        WalletMessages.events.walletConnectQRCodeDialogUpdated,
-    )
-    // #endregion
-
-    const onDisconnect = useCallback(async () => {
-        switch (providerType) {
-            case ProviderType.WalletConnect:
-                setWalletConnectDialog({
-                    open: true,
-                    uri: await Services.Ethereum.createConnectionURI(),
-                })
-                break
-            case ProviderType.Fortmatic:
-                await Services.Ethereum.disconnectFortmatic(chainId)
-                break
-        }
-    }, [chainId, providerType, setWalletConnectDialog])
-
-    const onChange = props.changeWallet
-
     return account ? (
         <section className={classNames(classes.currentAccount)}>
             <WalletIcon
@@ -181,25 +148,11 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
             </div>
             {!props.disableChange && (
                 <section>
-                    {providerType === ProviderType.WalletConnect || providerType === ProviderType.Fortmatic ? (
-                        <ActionButtonPromise
-                            className={classes.actionButton}
-                            size="small"
-                            variant="contained"
-                            init={t('wallet_status_button_disconnect')}
-                            waiting={t('wallet_status_button_disconnecting')}
-                            failed={t('failed')}
-                            complete={t('done')}
-                            executor={onDisconnect}
-                            completeIcon={<></>}
-                            failIcon={<></>}
-                        />
-                    ) : null}
                     <Button
                         className={classNames(classes.actionButton)}
                         variant="contained"
                         size="small"
-                        onClick={onChange}>
+                        onClick={props.changeWallet}>
                         {t('wallet_status_button_change')}
                     </Button>
                 </section>
@@ -207,7 +160,11 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
         </section>
     ) : (
         <section className={classes.connectButtonWrapper}>
-            <Button className={classNames(classes.actionButton)} variant="contained" size="small" onClick={onChange}>
+            <Button
+                className={classNames(classes.actionButton)}
+                variant="contained"
+                size="small"
+                onClick={props.changeWallet}>
                 {t('plugin_wallet_on_connect')}
             </Button>
         </section>
diff --git a/packages/mask/src/components/shared/WalletStatusBox.tsx b/packages/mask/src/components/shared/WalletStatusBox.tsx
index f75f919884b7..cdb3d9f92c4e 100644
--- a/packages/mask/src/components/shared/WalletStatusBox.tsx
+++ b/packages/mask/src/components/shared/WalletStatusBox.tsx
@@ -1,4 +1,3 @@
-import { useCallback } from 'react'
 import { useCopyToClipboard } from 'react-use'
 import { Copy, ExternalLink } from 'react-feather'
 import classNames from 'classnames'
@@ -20,8 +19,6 @@ import {
 import { FormattedAddress, useSnackbarCallback, WalletIcon } from '@masknet/shared'
 import { WalletMessages } from '../../plugins/Wallet/messages'
 import { useI18N } from '../../utils'
-import Services from '../../extension/service'
-import { ActionButtonPromise } from '../../extension/options-page/DashboardComponents/ActionButton'
 
 const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }) => ({
     content: {
@@ -130,26 +127,6 @@ export function WalletStatusBox(props: WalletStatusBox) {
     )
     // #endregion
 
-    // #region walletconnect
-    const { setDialog: setWalletConnectDialog } = useRemoteControlledDialog(
-        WalletMessages.events.walletConnectQRCodeDialogUpdated,
-    )
-    // #endregion
-
-    const onDisconnect = useCallback(async () => {
-        switch (providerType) {
-            case ProviderType.WalletConnect:
-                setWalletConnectDialog({
-                    open: true,
-                    uri: await Services.Ethereum.createConnectionURI(),
-                })
-                break
-            case ProviderType.Fortmatic:
-                await Services.Ethereum.disconnectFortmatic(chainId)
-                break
-        }
-    }, [chainId, providerType, setWalletConnectDialog])
-
     return account ? (
         <section className={classNames(classes.currentAccount, props.isDashboard ? classes.dashboardBackground : '')}>
             <WalletIcon
@@ -201,21 +178,6 @@ export function WalletStatusBox(props: WalletStatusBox) {
             </div>
             {!props.disableChange && (
                 <section>
-                    {providerType === ProviderType.WalletConnect || providerType === ProviderType.Fortmatic ? (
-                        <ActionButtonPromise
-                            className={classes.actionButton}
-                            color="primary"
-                            size="small"
-                            variant="contained"
-                            init={t('wallet_status_button_disconnect')}
-                            waiting={t('wallet_status_button_disconnecting')}
-                            failed={t('failed')}
-                            complete={t('done')}
-                            executor={onDisconnect}
-                            completeIcon={<></>}
-                            failIcon={<></>}
-                        />
-                    ) : null}
                     <Button
                         className={classNames(classes.actionButton)}
                         variant="contained"
diff --git a/packages/mask/src/extension/background-script/EthereumServices/provider.ts b/packages/mask/src/extension/background-script/EthereumServices/provider.ts
index 32d8cd321bcd..9e35700ecfb8 100644
--- a/packages/mask/src/extension/background-script/EthereumServices/provider.ts
+++ b/packages/mask/src/extension/background-script/EthereumServices/provider.ts
@@ -1,6 +1,6 @@
 import { first } from 'lodash-unified'
 import { defer } from '@dimensiondev/kit'
-import type { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
+import type { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import * as MaskWallet from './providers/MaskWallet'
 import * as MetaMask from './providers/MetaMask'
 import * as WalletConnect from './providers/WalletConnect'
@@ -50,8 +50,8 @@ export async function cancelWalletConnect() {
 }
 // #endregion
 
-export async function connectMaskWallet(networkType: NetworkType) {
-    const { accounts, chainId } = await MaskWallet.requestAccounts(networkType)
+export async function connectMaskWallet(expectedChainId: ChainId) {
+    const { accounts, chainId } = await MaskWallet.requestAccounts(expectedChainId)
     return {
         account: first(accounts),
         chainId,
diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts
index 4a3c2f369097..39ed6db6b0f1 100644
--- a/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts
+++ b/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts
@@ -1,10 +1,10 @@
 import MaskWallet from 'web3'
 import type { HttpProvider } from 'web3-core'
 import { PopupRoutes } from '@masknet/shared-base'
-import { ChainId, getChainIdFromNetworkType, getChainRPC, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
+import { ChainId, getChainRPC, ProviderType } from '@masknet/web3-shared-evm'
 import { currentChainIdSettings } from '../../../../plugins/Wallet/settings'
-import { getWallets, selectAccountPrepare } from '../../../../plugins/Wallet/services'
 import { openPopupWindow } from '../../../../../background/services/helper'
+import { WalletRPC } from '../../../../plugins/Wallet/messages'
 
 // #region providers
 const providerPool = new Map<string, HttpProvider>()
@@ -66,21 +66,21 @@ export function createWeb3({
 }
 // #endregion
 
-export async function requestAccounts(networkType: NetworkType) {
-    const wallets = await getWallets(ProviderType.MaskWallet)
+export async function requestAccounts(chainId: ChainId) {
+    const wallets = await WalletRPC.getWallets(ProviderType.MaskWallet)
     return new Promise<{
         chainId: ChainId
         accounts: string[]
     }>(async (resolve, reject) => {
         try {
-            await selectAccountPrepare((accounts, chainId) => {
+            await WalletRPC.selectAccountPrepare((accounts, chainId) => {
                 resolve({
                     chainId,
                     accounts,
                 })
             })
             await openPopupWindow(wallets.length > 0 ? PopupRoutes.SelectWallet : undefined, {
-                chainId: getChainIdFromNetworkType(networkType),
+                chainId,
             })
         } catch {
             reject(new Error('Failed to connect to Mask Network.'))
diff --git a/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx
index 5f83eefca5d2..af42df45f982 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { first } from 'lodash-unified'
 import { makeStyles } from '@masknet/theme'
 import {
@@ -14,6 +14,7 @@ import {
 import { Button, List, Typography } from '@mui/material'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { currentProviderSettings } from '../../../../../plugins/Wallet/settings'
+import { useSelectAccount } from '../../../../../plugins/Wallet/hooks/useSelectAccount'
 import { useI18N } from '../../../../../utils'
 import Services from '../../../../service'
 import { WalletItem } from './WalletItem'
@@ -87,28 +88,42 @@ const SelectWallet = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
     const location = useLocation()
+    const navigate = useNavigate()
     const wallet = useAccount()
     const wallets = useWallets(ProviderType.MaskWallet)
 
     const [selected, setSelected] = useState(wallet)
+    const [, onSelectAccount] = useSelectAccount()
 
     const search = new URLSearchParams(location.search)
 
     const chainIdSearched = search.get('chainId')
-    const chainId = chainIdSearched ? (Number.parseInt(chainIdSearched, 10) as ChainId) : undefined
+    // The previous page is popup page
+    const isPopup = search.get('popup')
     // Swap page also uses SelectWallet, but changing wallet in Swap page
     // should not affect other pages, for example, dashboard.
     // So we make Swap page 'internal' for popups
     const isInternal = search.get('internal')
 
+    const chainId = chainIdSearched ? (Number.parseInt(chainIdSearched, 10) as ChainId) : ChainId.Mainnet
     const chainIdValid = useChainIdValid()
 
     const handleCancel = useCallback(async () => {
-        await WalletRPC.selectAccount([], ChainId.Mainnet)
-        await Services.Helper.removePopupWindow()
-    }, [])
+        if (isPopup) {
+            onSelectAccount([], ChainId.Mainnet)
+        } else {
+            await WalletRPC.selectAccount([], ChainId.Mainnet)
+            await Services.Helper.removePopupWindow()
+        }
+    }, [isPopup, navigate])
 
     const handleConfirm = useCallback(async () => {
+        if (isPopup) {
+            onSelectAccount([selected], chainId)
+            navigate(-1)
+            return
+        }
+
         await WalletRPC.updateMaskAccount({
             chainId,
             account: selected,
@@ -120,17 +135,15 @@ const SelectWallet = memo(() => {
                 providerType: ProviderType.MaskWallet,
             })
         }
-        if (chainId) {
-            await WalletRPC.selectAccount([selected], chainId)
-        }
+        await WalletRPC.selectAccount([selected], chainId)
         return Services.Helper.removePopupWindow()
-    }, [chainId, selected, isInternal])
+    }, [chainId, selected, isPopup, isInternal, navigate])
 
     useEffect(() => {
         if (!selected && wallets.length) setSelected(first(wallets)?.address ?? '')
-    }, [selected, wallets])
+    }, [selected, wallets, location.state])
 
-    return chainId && chainIdValid ? (
+    return chainIdValid ? (
         <>
             <div className={classes.content}>
                 <div className={classes.header}>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
index 36fd0399b416..29e85eb3b1ae 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/VerifyWallet/index.tsx
@@ -1,16 +1,17 @@
+import { memo, useState } from 'react'
+import { useLocation } from 'react-use'
+import { useNavigate } from 'react-router-dom'
 import { NextIDAction, NextIDPayload, NextIDPlatform, PopupRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { NextIDProof } from '@masknet/web3-providers'
-import { memo, useState } from 'react'
+import { ChainId, isSameAddress, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
+import type { Web3Plugin } from '@masknet/plugin-infra/src/web3-types'
 import { SignSteps, Steps } from '../../../../../components/shared/VerifyWallet/Steps'
 import Services from '../../../../service'
 import { PersonaContext } from '../../Personas/hooks/usePersonaContext'
 import { useTitle } from '../../../hook/useTitle'
 import { useI18N } from '../../../../../utils'
 import { useQueryIsBound } from '../../../hook/useQueryIsBound'
-import { useNavigate } from 'react-router-dom'
-import { useLocation } from 'react-use'
-import { isSameAddress } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -32,7 +33,7 @@ const VerifyWallet = memo(() => {
     const navigate = useNavigate()
     useTitle(t('popups_add_wallet'))
     const location = useLocation()
-    const wallet = location.state.usr
+    const wallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType> = location.state.usr
 
     const bounds = useQueryIsBound(wallet.account)
     if (bounds && bounds.length > 0 && !isBound) {
@@ -72,7 +73,10 @@ const VerifyWallet = memo(() => {
     const walletSign = async () => {
         if (!payload) throw new Error('payload error')
         try {
-            const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.account)
+            const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.account, '', {
+                chainId: wallet.chainId,
+                providerType: wallet.providerType,
+            })
             if (!walletSig) throw new Error('Wallet sign failed')
             await NextIDProof.bindProof(
                 payload.uuid,
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx
index a8d61e61bad3..87277ebce9fe 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx
@@ -1,5 +1,8 @@
 import { useCallback, useState } from 'react'
 import { useAsyncRetry } from 'react-use'
+import urlcat from 'urlcat'
+import { useNavigate } from 'react-router-dom'
+import { first } from 'lodash-unified'
 import { DialogContent } from '@mui/material'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { safeUnreachable, delay } from '@dimensiondev/kit'
@@ -12,11 +15,13 @@ import {
     resolveNetworkName,
     resolveProviderName,
 } from '@masknet/web3-shared-evm'
+import { isPopupPage, PopupRoutes } from '@masknet/shared-base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
 import { WalletMessages } from '../../messages'
 import { ConnectionProgress } from './ConnectionProgress'
 import Services from '../../../../extension/service'
+import { useSelectAccount } from '../../hooks/useSelectAccount'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -29,6 +34,9 @@ export interface ConnectWalletDialogProps {}
 export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
     const classes = useStylesExtends(useStyles(), props)
 
+    const navigate = useNavigate()
+    const [onSelectAccountPrepare] = useSelectAccount()
+
     const [providerType, setProviderType] = useState<ProviderType | undefined>()
     const [networkType, setNetworkType] = useState<NetworkType | undefined>()
 
@@ -68,7 +76,26 @@ export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
 
         switch (providerType) {
             case ProviderType.MaskWallet:
-                ;({ account, chainId } = await Services.Ethereum.connectMaskWallet(networkType))
+                if (isPopupPage()) {
+                    ;({ account, chainId } = await new Promise<{
+                        account: string
+                        chainId: ChainId
+                    }>(async (resolve) => {
+                        onSelectAccountPrepare(async (accounts, chainId) => {
+                            resolve({
+                                chainId,
+                                account: first(accounts) ?? '',
+                            })
+                        })
+                        navigate(
+                            urlcat(PopupRoutes.SelectWallet, {
+                                popup: true,
+                            }),
+                        )
+                    }))
+                } else {
+                    ;({ account, chainId } = await Services.Ethereum.connectMaskWallet(expectedChainId))
+                }
                 break
             case ProviderType.MetaMask:
                 ;({ account, chainId } = await Services.Ethereum.connectMetaMask())
@@ -141,7 +168,7 @@ export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
             networkType,
             providerType,
         }
-    }, [networkType, providerType])
+    }, [networkType, providerType, onSelectAccountPrepare])
 
     const connection = useAsyncRetry<true>(async () => {
         if (!open) return true
@@ -156,6 +183,9 @@ export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
 
     if (!providerType) return null
 
+    // The connection state is transferring between pages when we connect Mask Wallet on the popup page
+    if (isPopupPage() && providerType === ProviderType.MaskWallet) return null
+
     return (
         <InjectedDialog title={`Connect to ${resolveProviderName(providerType)}`} open={open} onClose={onClose}>
             <DialogContent className={classes.content}>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/index.tsx
index 7de9b3a09cc9..bec9a9ba05e9 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useAsync } from 'react-use'
 import { Button, DialogActions, DialogContent } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
@@ -35,6 +36,12 @@ export const WalletConnectQRCodeDialog: React.FC = () => {
     )
     // #endregion
 
+    useAsync(async () => {
+        if (!open) return
+        await Services.Ethereum.connectWalletConnect()
+        closeDialog()
+    }, [open])
+
     let mode: QRCodeDialogProps['mode'] = 'qrcode'
     if (process.env.architecture === 'app' && process.env.engine === 'firefox') {
         mode = 'firefox'
diff --git a/packages/mask/src/plugins/Wallet/hooks/useSelectAccount.ts b/packages/mask/src/plugins/Wallet/hooks/useSelectAccount.ts
new file mode 100644
index 000000000000..96ae005e274b
--- /dev/null
+++ b/packages/mask/src/plugins/Wallet/hooks/useSelectAccount.ts
@@ -0,0 +1,25 @@
+import { useCallback } from 'react'
+import type { ChainId } from '@masknet/web3-shared-evm'
+
+interface SelectAccountCallback {
+    (accounts: string[], chainId: ChainId): Promise<void>
+}
+
+let globalCallback: SelectAccountCallback | undefined
+
+export function useSelectAccount() {
+    const onSelectAccountPrepare = useCallback((callback: SelectAccountCallback) => {
+        if (callback) {
+            globalCallback = callback
+        }
+    }, [])
+
+    const onSelectAccount = useCallback((accounts: string[], chainId: ChainId) => {
+        if (globalCallback) {
+            globalCallback(accounts, chainId)
+            globalCallback = undefined
+        }
+    }, [])
+
+    return [onSelectAccountPrepare, onSelectAccount] as const
+}
diff --git a/packages/mask/src/social-network/defaults/inject/PageInspector.tsx b/packages/mask/src/social-network/defaults/inject/PageInspector.tsx
index 415e765425c3..24c2691d74e8 100644
--- a/packages/mask/src/social-network/defaults/inject/PageInspector.tsx
+++ b/packages/mask/src/social-network/defaults/inject/PageInspector.tsx
@@ -1,9 +1,12 @@
 import { memo } from 'react'
+import { HashRouter } from 'react-router-dom'
 import { makeStyles } from '@masknet/theme'
 import { PageInspector, PageInspectorProps } from '../../../components/InjectedComponents/PageInspector'
 import { createReactRootShadowed } from '../../../utils/shadow-root/renderInShadowRoot'
 import { Flags } from '../../../../shared'
 
+export interface InjectPageInspectorDefaultConfig {}
+
 export function injectPageInspectorDefault<T extends string>(
     config: InjectPageInspectorDefaultConfig = {},
     additionalPropsToPageInspector: (classes: Record<T, string>) => Partial<PageInspectorProps> = () => ({}),
@@ -20,8 +23,10 @@ export function injectPageInspectorDefault<T extends string>(
             .appendChild(document.createElement('div'))
             .attachShadow({ mode: Flags.using_ShadowDOM_attach_mode })
 
-        createReactRootShadowed(dom, { signal, key: 'page-inspector' }).render(<PageInspectorDefault />)
+        createReactRootShadowed(dom, { signal, key: 'page-inspector' }).render(
+            <HashRouter>
+                <PageInspectorDefault />
+            </HashRouter>,
+        )
     }
 }
-
-interface InjectPageInspectorDefaultConfig {}