DimensionDev · guanbinrui · Mar 28, 2022 · Mar 28, 2022 · Mar 28, 2022 · Mar 28, 2022
diff --git a/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx b/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { makeStyles } from '@masknet/theme'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { useAccount } from '@masknet/web3-shared-evm'
 import { PluginMessages, Services } from '../../../API'
 import { PersonaContext } from '../../../pages/Personas/hooks/usePersonaContext'
@@ -64,7 +64,7 @@ export const FeaturePromotions = memo(() => {
         connectPersona(currentPersona.identifier, EnhanceableSite.Twitter)
     }
 
-    const openMaskNetwork = () => window.open('https://twitter.com/realMaskNetwork')
+    const openMaskNetwork = () => openWindow('https://twitter.com/realMaskNetwork')
 
     return (
         <div className={classes.container}>

diff --git a/packages/dashboard/src/pages/CreateMaskWallet/components/Welcome/index.tsx b/packages/dashboard/src/pages/CreateMaskWallet/components/Welcome/index.tsx
@@ -6,6 +6,7 @@ import { useDashboardI18N } from '../../../../locales'
 import { Button } from '@mui/material'
 import { MaskNotSquareIcon } from '@masknet/icons'
 import urlcat from 'urlcat'
+import { openWindow } from '@masknet/shared-base-ui'
 
 const Content = styled('div')`
     width: 100%;
@@ -98,9 +99,7 @@ const Welcome = memo(() => {
         link?.addEventListener('click', handleLinkClick)
     }
 
-    const handleLinkClick = () => {
-        window.open(MASK_PRIVACY_POLICY)
-    }
+    const handleLinkClick = () => openWindow(MASK_PRIVACY_POLICY)
 
     useEffect(
         () => () => {

diff --git a/packages/dashboard/src/pages/Labs/index.tsx b/packages/dashboard/src/pages/Labs/index.tsx
@@ -23,7 +23,7 @@ import { useDashboardI18N } from '../../locales'
 import MarketTrendSettingDialog from './components/MarketTrendSettingDialog'
 import { useAccount } from '@masknet/web3-shared-evm'
 import { Messages, Services, PluginMessages } from '../../API'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { TUTORIAL_URLS_EN } from './constants'
 import { ContentContainer } from '../../components/ContentContainer'
 import { WalletStateBar } from '../Wallets/components/WalletStateBar'
@@ -230,10 +230,7 @@ export default function Plugins() {
     }
 
     function onTutorial(id: string) {
-        const url = TUTORIAL_URLS_EN[id]
-        if (url) {
-            window.open(url, '_blank', 'noopener noreferrer')
-        }
+        openWindow(TUTORIAL_URLS_EN[id])
     }
 
     function onTutorialDialogClose(checked: boolean) {

diff --git a/packages/dashboard/src/pages/Personas/components/PostHistory/Placeholder.tsx b/packages/dashboard/src/pages/Personas/components/PostHistory/Placeholder.tsx
@@ -4,6 +4,7 @@ import { EmptyIcon } from '@masknet/icons'
 import { useDashboardI18N } from '../../../../locales'
 import urlcat from 'urlcat'
 import { MaskColorVar } from '@masknet/theme'
+import { openWindow } from '@masknet/shared-base-ui'
 
 interface PlaceholderProps {
     network: string
@@ -13,7 +14,7 @@ export const Placeholder = memo<PlaceholderProps>(({ network }) => {
     const t = useDashboardI18N()
     const url = urlcat('https://www.:network', { network: network })
 
-    const handleClick = () => window.open(url)
+    const handleClick = () => openWindow(url)
 
     return (
         <Stack height="100%" alignItems="center" justifyContent="center" mt={-3.5}>

diff --git a/packages/dashboard/src/pages/Welcome/index.tsx b/packages/dashboard/src/pages/Welcome/index.tsx
@@ -6,6 +6,7 @@ import { styled } from '@mui/material/styles'
 import { memo, MutableRefObject, useEffect, useMemo, useRef } from 'react'
 import { useDashboardI18N } from '../../locales'
 import links from '../../components/FooterLine/links.json'
+import { openWindow } from '@masknet/shared-base-ui'
 
 const Content = styled('div')(({ theme }) => ({
     padding: `${theme.spacing(1)} ${theme.spacing(4)}`,
@@ -71,9 +72,7 @@ export default function Welcome() {
         link?.addEventListener('click', handleLinkClick)
     }
 
-    const handleLinkClick = () => {
-        window.open(links.MASK_PRIVACY_POLICY)
-    }
+    const handleLinkClick = () => openWindow(links.MASK_PRIVACY_POLICY)
 
     return (
         <WelcomeUI

diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { ChainId, useChainId, useAccount, useWallet } from '@masknet/web3-shared-evm'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { CrossIsolationMessages } from '@masknet/shared-base'
 import { useControlledDialog } from '../../utils/hooks/useControlledDialog'
 import { RedPacketPluginID } from '../../plugins/RedPacket/constants'
@@ -269,15 +269,15 @@ export function ApplicationBoard({ secondEntries, secondEntryChainTabs }: MaskAp
         createEntry(
             'Mask Bridge',
             new URL('./assets/bridge.png', import.meta.url).toString(),
-            () => window.open('https://bridge.mask.io/#/', '_blank', 'noopener noreferrer'),
+            () => openWindow('https://bridge.mask.io'),
             undefined,
             isNotEvm,
             false,
         ),
         createEntry(
             'MaskBox',
             new URL('./assets/mask_box.png', import.meta.url).toString(),
-            () => window.open('https://box.mask.io/#/', '_blank', 'noopener noreferrer'),
+            () => openWindow('https://box.mask.io'),
             undefined,
             isNotEvm,
             false,
@@ -314,7 +314,7 @@ export function ApplicationBoard({ secondEntries, secondEntryChainTabs }: MaskAp
                         createEntry(
                             'MaskBox',
                             new URL('./assets/mask_box.png', import.meta.url).toString(),
-                            () => window.open('https://box.mask.io/#/', '_blank', 'noopener noreferrer'),
+                            () => openWindow('https://box.mask.io'),
                             undefined,
                             false,
                             false,

diff --git a/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx
@@ -23,6 +23,7 @@ import Services from '../../../../service'
 import { compact, intersectionWith } from 'lodash-unified'
 import urlcat from 'urlcat'
 import { ActivityList } from '../components/ActivityList'
+import { openWindow } from '@masknet/shared-base-ui'
 
 const useStyles = makeStyles()({
     content: {
@@ -93,30 +94,25 @@ const TokenDetail = memo(() => {
                 open: 'Transak',
                 code: currentToken?.token.symbol ?? currentToken?.token.name,
             })
-            window.open(browser.runtime.getURL(url), 'BUY_DIALOG', 'noopener noreferrer')
+            openWindow(browser.runtime.getURL(url), 'BUY_DIALOG')
         }
     }, [wallet?.address, isActiveSocialNetwork, currentToken])
 
     const openSwapDialog = useCallback(async () => {
-        window.open(
-            browser.runtime.getURL(
-                urlcat(
-                    'popups.html#/',
-                    PopupRoutes.Swap,
-                    !isSameAddress(nativeToken?.address, currentToken?.token.address)
-                        ? {
-                              id: currentToken?.token.address,
-                              name: currentToken?.token.name,
-                              symbol: currentToken?.token.symbol,
-                              contract_address: currentToken?.token.address,
-                              decimals: currentToken?.token.decimals,
-                          }
-                        : {},
-                ),
-            ),
-            'SWAP_DIALOG',
-            'noopener noreferrer',
+        const url = urlcat(
+            'popups.html#/',
+            PopupRoutes.Swap,
+            !isSameAddress(nativeToken?.address, currentToken?.token.address)
+                ? {
+                      id: currentToken?.token.address,
+                      name: currentToken?.token.name,
+                      symbol: currentToken?.token.symbol,
+                      contract_address: currentToken?.token.address,
+                      decimals: currentToken?.token.decimals,
+                  }
+                : {},
         )
+        openWindow(browser.runtime.getURL(url), 'SWAP_DIALOG')
     }, [currentToken, nativeToken])
 
     if (!currentToken) return null

diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx
@@ -1,3 +1,4 @@
+import { openWindow } from '@masknet/shared-base-ui'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { resolveOpenSeaLink } from '@masknet/web3-shared-evm'
 import Link from '@mui/material/Link'
@@ -42,7 +43,7 @@ export function NFTBadge(props: NFTBadgeProps) {
             className={classes.root}
             onClick={(e) => {
                 e.preventDefault()
-                window.open(resolveOpenSeaLink(avatar.address, avatar.tokenId), '_blank')
+                openWindow(resolveOpenSeaLink(avatar.address, avatar.tokenId))
             }}>
             <Link href={resolveOpenSeaLink(avatar.address, avatar.tokenId)} target="_blank" rel="noopener noreferrer">
                 <NFTAvatarRing

diff --git a/packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx b/packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx
@@ -1,7 +1,7 @@
 import { useCallback, cloneElement, isValidElement } from 'react'
 import { unreachable } from '@dimensiondev/kit'
 import type { Web3Plugin } from '@masknet/plugin-infra'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { isDashboardPage } from '@masknet/shared-base'
 import {
     getChainIdFromNetworkType,
@@ -47,7 +47,7 @@ export function ProviderIconClickBait({
 
             if (!isProviderAvailable) {
                 const downloadLink = resolveProviderDownloadLink(providerType)
-                if (downloadLink) window.open(downloadLink, '_blank', 'noopener noreferrer')
+                openWindow(downloadLink)
                 return
             }
         }

diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
@@ -4,7 +4,7 @@ import { flatten, uniq } from 'lodash-unified'
 import formatDateTime from 'date-fns/format'
 import { SnackbarProvider, makeStyles } from '@masknet/theme'
 import { FormattedBalance } from '@masknet/shared'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { DialogContent, CircularProgress, Typography, List, ListItem, useTheme } from '@mui/material'
 import {
     formatBalance,
@@ -301,7 +301,7 @@ export function ClaimAllDialog(props: ClaimAllDialogProps) {
         if (claimState.type === TransactionStateType.HASH) {
             const { hash } = claimState
             setTimeout(() => {
-                window.open(resolveTransactionLinkOnExplorer(chainId, hash), '_blank', 'noopener noreferrer')
+                openWindow(resolveTransactionLinkOnExplorer(chainId, hash))
             }, 2000)
             return
         }

diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx
@@ -4,7 +4,7 @@ import { v4 as uuid } from 'uuid'
 import { CircularProgress, Slider, Typography } from '@mui/material'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { useI18N } from '../../../utils'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import {
     ChainId,
@@ -239,7 +239,7 @@ export function SwapDialog(props: SwapDialogProps) {
         if (swapState.type === TransactionStateType.HASH) {
             const { hash } = swapState
             setTimeout(() => {
-                window.open(resolveTransactionLinkOnExplorer(chainId, hash), '_blank', 'noopener noreferrer')
+                openWindow(resolveTransactionLinkOnExplorer(chainId, hash))
             }, 2000)
             return
         }

diff --git a/packages/mask/src/plugins/NextID/components/Tip/TipDialog.tsx b/packages/mask/src/plugins/NextID/components/Tip/TipDialog.tsx
@@ -2,6 +2,7 @@ import { SuccessIcon } from '@masknet/icons'
 import { PluginId, useActivatedPlugin, usePluginIDContext } from '@masknet/plugin-infra'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { EMPTY_LIST } from '@masknet/shared-base'
+import { openWindow } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
 import { TransactionStateType, useChainId, useERC721TokenDetailed } from '@masknet/web3-shared-evm'
 import { DialogContent, Typography } from '@mui/material'
@@ -140,7 +141,7 @@ export function TipDialog({ open = false, onClose }: TipDialogProps) {
     }, [sendState.type])
 
     const handleConfirm = useCallback(() => {
-        window.open(shareLink)
+        openWindow(shareLink)
         openConfirmModal(false)
         onClose?.()
     }, [shareLink, onClose])

diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
@@ -22,6 +22,7 @@ import { activatedSocialNetworkUI } from '../../../social-network'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { openWindow } from '@masknet/shared-base-ui'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -261,11 +262,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
     const isClaiming = claimState.type === TransactionStateType.WAIT_FOR_CONFIRMING
 
     const openAddressLinkOnExplorer = useCallback(() => {
-        window.open(
-            resolveAddressLinkOnExplorer(payload.chainId, payload.contractAddress),
-            '_blank',
-            'noopener noreferrer',
-        )
+        openWindow(resolveAddressLinkOnExplorer(payload.chainId, payload.contractAddress))
     }, [payload])
 
     const [sourceType, setSourceType] = useState('')

diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChart.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChart.tsx
@@ -7,6 +7,7 @@ import { useI18N } from '../../../../utils'
 import type { Coin, Currency, Stat } from '../../types'
 import { useDimension, Dimension } from '../../../hooks/useDimension'
 import { usePriceLineChart } from '../../../hooks/usePriceLineChart'
+import { openWindow } from '@masknet/shared-base-ui'
 
 const DEFAULT_DIMENSION: Dimension = {
     top: 32,
@@ -110,9 +111,7 @@ export function PriceChart(props: PriceChartProps) {
                         viewBox={`0 0 ${dimension.width} ${dimension.height}`}
                         preserveAspectRatio="xMidYMid meet"
                         onClick={() => {
-                            props.stats.length &&
-                                props.coin?.platform_url &&
-                                window.open(props.coin.platform_url, '_blank', 'noopener noreferrer')
+                            props.stats.length && openWindow(props.coin?.platform_url)
                         }}
                     />
                 </>

diff --git a/packages/mask/src/social-network-adaptor/facebook.com/shared.ts b/packages/mask/src/social-network-adaptor/facebook.com/shared.ts
@@ -4,6 +4,8 @@ import { getPostUrlAtFacebook, isValidFacebookUsername } from './utils/parse-use
 import { PostIdentifier, ProfileIdentifier } from '@masknet/shared-base'
 import { deconstructPayload } from '../../utils'
 import { createSNSAdaptorSpecializedPostContext } from '../../social-network/utils/create-post-context'
+import { openWindow } from '@masknet/shared-base-ui'
+import urlcat from 'urlcat'
 
 const getPostURL = (post: PostIdentifier): URL | null => {
     if (post.identifier instanceof ProfileIdentifier)
@@ -19,14 +21,14 @@ export const facebookShared: SocialNetwork.Shared & SocialNetwork.Base = {
         textPayloadPostProcessor: undefined,
         getPostURL,
         share(message) {
-            const url = this.getShareLinkURL!(message)
-            window.open(url, '_blank', 'noopener noreferrer')
+            openWindow(this.getShareLinkURL?.(message))
         },
         getShareLinkURL(message) {
-            const url = new URL('https://www.facebook.com/sharer/sharer.php')
-            url.searchParams.set('quote', message)
-            url.searchParams.set('u', 'mask.io')
-            return url
+            const url = urlcat('https://www.facebook.com/sharer/sharer.php', {
+                quote: message,
+                u: 'mask.io',
+            })
+            return new URL(url)
         },
         createPostContext: createSNSAdaptorSpecializedPostContext({
             payloadParser: deconstructPayload,

diff --git a/packages/mask/src/social-network-adaptor/minds.com/shared.ts b/packages/mask/src/social-network-adaptor/minds.com/shared.ts
@@ -1,4 +1,6 @@
 import type { PostIdentifier } from '@masknet/shared-base'
+import { openWindow } from '@masknet/shared-base-ui'
+import urlcat from 'urlcat'
 import type { SocialNetwork } from '../../social-network/types'
 import { createSNSAdaptorSpecializedPostContext } from '../../social-network/utils/create-post-context'
 import { deconstructPayload } from '../../utils'
@@ -17,11 +19,13 @@ export const mindsShared: SocialNetwork.Shared & SocialNetwork.Base = {
         textPayloadPostProcessor: undefined,
         getPostURL,
         share(message) {
-            const url = this.getShareLinkURL!(message)
-            window.open(url, '_blank', 'noopener noreferrer')
+            openWindow(this.getShareLinkURL?.(message))
         },
         getShareLinkURL(message) {
-            return new URL(`https://www.minds.com/newsfeed/subscriptions?intentUrl=${encodeURIComponent(message)}`)
+            const url = urlcat('https://www.minds.com/newsfeed/subscriptions', {
+                intentUrl: message,
+            })
+            return new URL(url)
         },
         createPostContext: createSNSAdaptorSpecializedPostContext({
             payloadParser: deconstructPayload,

diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
@@ -15,6 +15,7 @@ import { useAsync, useLocation, useUpdateEffect, useWindowSize } from 'react-use
 import { rainbowBorderKeyFrames } from '../../../../plugins/Avatar/SNSAdaptor/RainbowBox'
 import { trim } from 'lodash-unified'
 import { RSS3_KEY_SNS } from '../../../../plugins/Avatar/constants'
+import { openWindow } from '@masknet/shared-base-ui'
 
 export function injectNFTAvatarInTwitter(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchTwitterAvatarSelector())
@@ -194,7 +195,7 @@ function NFTAvatarInTwitter() {
         if (!avatar || !linkParentDom || !showAvatar) return
 
         const handler = () => {
-            window.open(resolveOpenSeaLink(avatar.address, avatar.tokenId), '_blank')
+            openWindow(resolveOpenSeaLink(avatar.address, avatar.tokenId))
         }
 
         linkParentDom.addEventListener('click', handler)