From e2915e31f062af1ba35d56e706d936c10d81a6d4 Mon Sep 17 00:00:00 2001 From: Septs Date: Mon, 28 Mar 2022 17:48:40 +0800 Subject: [PATCH 1/5] refactor: open window --- .../PageFrame/FeaturePromotions/index.tsx | 4 +- .../components/Welcome/index.tsx | 5 +-- packages/dashboard/src/pages/Labs/index.tsx | 7 +--- .../components/PostHistory/Placeholder.tsx | 3 +- .../dashboard/src/pages/Welcome/index.tsx | 5 +-- .../components/shared/ApplicationBoard.tsx | 8 ++-- .../popups/pages/Wallet/TokenDetail/index.tsx | 34 +++++++--------- .../plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 3 +- .../UI/components/ProviderIconClickBait.tsx | 4 +- .../plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx | 4 +- .../src/plugins/ITO/SNSAdaptor/SwapDialog.tsx | 4 +- .../NextID/components/Tip/TipDialog.tsx | 3 +- .../RedPacket/SNSAdaptor/RedPacketNft.tsx | 7 +--- .../Trader/SNSAdaptor/trending/PriceChart.tsx | 5 +-- .../facebook.com/shared.ts | 14 ++++--- .../minds.com/shared.ts | 10 +++-- .../injection/NFT/NFTAvatarInTwitter.tsx | 3 +- .../twitter.com/shared.ts | 20 ++++++++-- .../mask/src/social-network-adaptor/utils.ts | 15 ------- packages/shared-base-ui/src/bom/index.ts | 1 + .../shared-base-ui/src/bom/open-window.ts | 40 +++++++++++++++++++ packages/shared-base-ui/src/index.ts | 1 + pnpm-lock.yaml | 8 ++-- 23 files changed, 122 insertions(+), 86 deletions(-) create mode 100644 packages/shared-base-ui/src/bom/index.ts create mode 100644 packages/shared-base-ui/src/bom/open-window.ts diff --git a/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx b/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx index a8b8a77321f6..1dd049428263 100644 --- 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 (
diff --git a/packages/dashboard/src/pages/CreateMaskWallet/components/Welcome/index.tsx b/packages/dashboard/src/pages/CreateMaskWallet/components/Welcome/index.tsx index f5616814e83b..bb1065d382b4 100644 --- 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 index 082e0ce68b52..4375ecc1cd72 100644 --- 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 index 7b8cb9115e1c..c532fe947d6d 100644 --- 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(({ network }) => { const t = useDashboardI18N() const url = urlcat('https://www.:network', { network: network }) - const handleClick = () => window.open(url) + const handleClick = () => openWindow(url) return ( diff --git a/packages/dashboard/src/pages/Welcome/index.tsx b/packages/dashboard/src/pages/Welcome/index.tsx index bd4987db60bc..9e4893222ee7 100644 --- 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 ( window.open('https://bridge.mask.io/#/', '_blank', 'noopener noreferrer'), + () => openWindow('https://bridge.mask.io'), undefined, isNotEvm, false, @@ -277,7 +277,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, 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 index 42840cfa30f6..ef3bd91b5fa8 100644 --- 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 index be85dd024b92..42a0d94f1b07 100644 --- 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)) }}> { - 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 index 0863d75fc0b1..c8eb83b16790 100644 --- 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 index dda7272cba7a..d77d4901b239 100644 --- 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 index 81fbde4d68bc..996f2814db13 100644 --- 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 index 3c15c3c6464b..bd58072d5ddc 100644 --- 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 index 18a3e5fa00c0..305dcbc30890 100644 --- 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 index bbc72b7a3382..ab4e841712e5 100644 --- 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 index debe79e92c43..530a742310ca 100644 --- 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) diff --git a/packages/mask/src/social-network-adaptor/twitter.com/shared.ts b/packages/mask/src/social-network-adaptor/twitter.com/shared.ts index de652947450b..f42d809f4784 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/shared.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/shared.ts @@ -1,8 +1,9 @@ import { PostIdentifier, ProfileIdentifier } 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' -import { createCenterWindowConfig } from '../utils' import { twitterBase } from './base' import { twitterEncoding } from './encoding' import { usernameValidator } from './utils/user' @@ -27,12 +28,23 @@ export const twitterShared: SocialNetwork.Shared & SocialNetwork.Base = { }, getPostURL, share(text) { - const config = createCenterWindowConfig(700, 520) const url = this.getShareLinkURL!(text) - window.open(url, 'share', config) || window.location.assign(url) + const width = 700 + const height = 520 + const openedWindow = openWindow(url, 'share', { + width, + height, + screenX: window.screenX + (window.innerWidth - width) / 2, + screenY: window.screenY + (window.innerHeight - height) / 2, + behaviors: { toolbar: true, status: true, resizeable: true, scrollbars: true }, + }) + if (openedWindow === null) { + location.assign(url) + } }, getShareLinkURL(message) { - return new URL(`https://twitter.com/intent/tweet?text=${encodeURIComponent(message)}`) + const url = urlcat('https://twitter.com/intent/tweet', { text: message }) + return new URL(url) }, createPostContext: createSNSAdaptorSpecializedPostContext({ payloadParser: deconstructPayload, diff --git a/packages/mask/src/social-network-adaptor/utils.ts b/packages/mask/src/social-network-adaptor/utils.ts index a0e6273f3514..1349c4980437 100644 --- a/packages/mask/src/social-network-adaptor/utils.ts +++ b/packages/mask/src/social-network-adaptor/utils.ts @@ -23,18 +23,3 @@ export const getCurrentIdentifier = () => { globalUIState.profiles.value[0] ) } - -export const createCenterWindowConfig = (width: number, height: number) => { - const x = window.screenX + (window.innerWidth - width) / 2 - const y = window.screenY + (window.innerHeight - height) / 2 - return [ - `screenX=${x}`, - `screenY=${y}`, - 'toolbar=1', - 'status=1', - 'resizable=1', - 'scrollbars=1', - `height=${height}`, - `width=${width}`, - ].join(',') -} diff --git a/packages/shared-base-ui/src/bom/index.ts b/packages/shared-base-ui/src/bom/index.ts new file mode 100644 index 000000000000..d2a7cce6f930 --- /dev/null +++ b/packages/shared-base-ui/src/bom/index.ts @@ -0,0 +1 @@ +export { openWindow } from './open-window' diff --git a/packages/shared-base-ui/src/bom/open-window.ts b/packages/shared-base-ui/src/bom/open-window.ts new file mode 100644 index 000000000000..395ec01d7522 --- /dev/null +++ b/packages/shared-base-ui/src/bom/open-window.ts @@ -0,0 +1,40 @@ +type WindowTarget = '_top' | '_self' | '_parent' | '_blank' | string + +interface BehaviorFlags { + popup?: boolean + toolbar?: boolean + status?: boolean + resizeable?: boolean + scrollbars?: boolean +} + +interface WindowFeatureFlags { + // Behavior + behaviors: BehaviorFlags + opener?: boolean + referrer?: boolean + // Dimension + width?: number + height?: number + screenX?: number + screenY?: number +} + +export function openWindow( + url: string | URL | undefined | null, + target: WindowTarget = '_blank', + features?: WindowFeatureFlags, +): Window | null { + if (!url) return null + const flags = [] + for (const [name, value] of Object.entries(features?.behaviors ?? {})) { + if (value) flags.push(`${name}=1`) + } + if (!features?.opener) flags.push('noopener') + if (!features?.referrer) flags.push('noopener') + if (Number.isFinite(features?.width)) flags.push(`width=${features?.width}`) + if (Number.isFinite(features?.height)) flags.push(`height=${features?.height}`) + if (Number.isFinite(features?.screenX)) flags.push(`screenX=${features?.screenX}`) + if (Number.isFinite(features?.screenY)) flags.push(`screenY=${features?.screenY}`) + return window.open(url, target, flags.join(' ')) +} diff --git a/packages/shared-base-ui/src/index.ts b/packages/shared-base-ui/src/index.ts index 7aea380be8cc..a28a3c5e7b2d 100644 --- a/packages/shared-base-ui/src/index.ts +++ b/packages/shared-base-ui/src/index.ts @@ -1,2 +1,3 @@ +export * from './bom' export * from './components' export * from './hooks' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d32041caf43..a2c1778c6909 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27802,7 +27802,7 @@ packages: dev: true github.com/ProjectOpenSea/wyvern-js/6f85f1b42f0962d2cc8e97b7e7f680865e3f26c1: - resolution: {tarball: https://codeload.github.com/ProjectOpenSea/wyvern-js/tar.gz/6f85f1b42f0962d2cc8e97b7e7f680865e3f26c1} + resolution: {commit: 6f85f1b42f0962d2cc8e97b7e7f680865e3f26c1, repo: git+ssh://git@github.com/ProjectOpenSea/wyvern-js.git, type: git} name: wyvern-js version: 3.2.0 dependencies: @@ -27878,7 +27878,7 @@ packages: dev: false github.com/ahultgren/async-eventemitter/fa06e39e56786ba541c180061dbf2c0a5bbf951c: - resolution: {tarball: https://codeload.github.com/ahultgren/async-eventemitter/tar.gz/fa06e39e56786ba541c180061dbf2c0a5bbf951c} + resolution: {commit: fa06e39e56786ba541c180061dbf2c0a5bbf951c, repo: git+ssh://git@github.com/ahultgren/async-eventemitter.git, type: git} name: async-eventemitter version: 0.2.3 dependencies: @@ -27886,7 +27886,7 @@ packages: dev: false github.com/ethereumjs/ethereumjs-abi/ee3994657fa7a427238e6ba92a84d0b529bbcde0: - resolution: {tarball: https://codeload.github.com/ethereumjs/ethereumjs-abi/tar.gz/ee3994657fa7a427238e6ba92a84d0b529bbcde0} + resolution: {commit: ee3994657fa7a427238e6ba92a84d0b529bbcde0, repo: git+ssh://git@github.com/ethereumjs/ethereumjs-abi.git, type: git} name: ethereumjs-abi version: 0.6.8 dependencies: @@ -27895,7 +27895,7 @@ packages: dev: false github.com/frozeman/bignumber.js-nolookahead/57692b3ecfc98bbdd6b3a516cb2353652ea49934: - resolution: {tarball: https://codeload.github.com/frozeman/bignumber.js-nolookahead/tar.gz/57692b3ecfc98bbdd6b3a516cb2353652ea49934} + resolution: {commit: 57692b3ecfc98bbdd6b3a516cb2353652ea49934, repo: git+ssh://git@github.com/frozeman/bignumber.js-nolookahead.git, type: git} name: bignumber.js version: 2.0.7 dev: false From d11cf6ec4d5311ba56ee408d3924a394354804e8 Mon Sep 17 00:00:00 2001 From: Septs Date: Mon, 28 Mar 2022 17:53:29 +0800 Subject: [PATCH 2/5] fix: typo --- packages/shared-base-ui/src/bom/open-window.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared-base-ui/src/bom/open-window.ts b/packages/shared-base-ui/src/bom/open-window.ts index 395ec01d7522..217628aa6937 100644 --- a/packages/shared-base-ui/src/bom/open-window.ts +++ b/packages/shared-base-ui/src/bom/open-window.ts @@ -31,7 +31,7 @@ export function openWindow( if (value) flags.push(`${name}=1`) } if (!features?.opener) flags.push('noopener') - if (!features?.referrer) flags.push('noopener') + if (!features?.referrer) flags.push('noreferrer') if (Number.isFinite(features?.width)) flags.push(`width=${features?.width}`) if (Number.isFinite(features?.height)) flags.push(`height=${features?.height}`) if (Number.isFinite(features?.screenX)) flags.push(`screenX=${features?.screenX}`) From be9ae4384866d06946985a16a5429f6902e1232e Mon Sep 17 00:00:00 2001 From: Septs Date: Mon, 28 Mar 2022 17:54:00 +0800 Subject: [PATCH 3/5] revert: pnpm-lock --- pnpm-lock.yaml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a2c1778c6909..9d32041caf43 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27802,7 +27802,7 @@ packages: dev: true github.com/ProjectOpenSea/wyvern-js/6f85f1b42f0962d2cc8e97b7e7f680865e3f26c1: - resolution: {commit: 6f85f1b42f0962d2cc8e97b7e7f680865e3f26c1, repo: git+ssh://git@github.com/ProjectOpenSea/wyvern-js.git, type: git} + resolution: {tarball: https://codeload.github.com/ProjectOpenSea/wyvern-js/tar.gz/6f85f1b42f0962d2cc8e97b7e7f680865e3f26c1} name: wyvern-js version: 3.2.0 dependencies: @@ -27878,7 +27878,7 @@ packages: dev: false github.com/ahultgren/async-eventemitter/fa06e39e56786ba541c180061dbf2c0a5bbf951c: - resolution: {commit: fa06e39e56786ba541c180061dbf2c0a5bbf951c, repo: git+ssh://git@github.com/ahultgren/async-eventemitter.git, type: git} + resolution: {tarball: https://codeload.github.com/ahultgren/async-eventemitter/tar.gz/fa06e39e56786ba541c180061dbf2c0a5bbf951c} name: async-eventemitter version: 0.2.3 dependencies: @@ -27886,7 +27886,7 @@ packages: dev: false github.com/ethereumjs/ethereumjs-abi/ee3994657fa7a427238e6ba92a84d0b529bbcde0: - resolution: {commit: ee3994657fa7a427238e6ba92a84d0b529bbcde0, repo: git+ssh://git@github.com/ethereumjs/ethereumjs-abi.git, type: git} + resolution: {tarball: https://codeload.github.com/ethereumjs/ethereumjs-abi/tar.gz/ee3994657fa7a427238e6ba92a84d0b529bbcde0} name: ethereumjs-abi version: 0.6.8 dependencies: @@ -27895,7 +27895,7 @@ packages: dev: false github.com/frozeman/bignumber.js-nolookahead/57692b3ecfc98bbdd6b3a516cb2353652ea49934: - resolution: {commit: 57692b3ecfc98bbdd6b3a516cb2353652ea49934, repo: git+ssh://git@github.com/frozeman/bignumber.js-nolookahead.git, type: git} + resolution: {tarball: https://codeload.github.com/frozeman/bignumber.js-nolookahead/tar.gz/57692b3ecfc98bbdd6b3a516cb2353652ea49934} name: bignumber.js version: 2.0.7 dev: false From 22aefae10a9294d0ae9f818a22a2cee024fffa27 Mon Sep 17 00:00:00 2001 From: Septs Date: Mon, 28 Mar 2022 17:55:04 +0800 Subject: [PATCH 4/5] fix: typo --- packages/shared-base-ui/src/bom/open-window.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/shared-base-ui/src/bom/open-window.ts b/packages/shared-base-ui/src/bom/open-window.ts index 217628aa6937..ddce285fefb7 100644 --- a/packages/shared-base-ui/src/bom/open-window.ts +++ b/packages/shared-base-ui/src/bom/open-window.ts @@ -10,9 +10,9 @@ interface BehaviorFlags { interface WindowFeatureFlags { // Behavior - behaviors: BehaviorFlags opener?: boolean referrer?: boolean + behaviors?: BehaviorFlags // Dimension width?: number height?: number @@ -23,18 +23,18 @@ interface WindowFeatureFlags { export function openWindow( url: string | URL | undefined | null, target: WindowTarget = '_blank', - features?: WindowFeatureFlags, + features: WindowFeatureFlags = {}, ): Window | null { if (!url) return null const flags = [] - for (const [name, value] of Object.entries(features?.behaviors ?? {})) { + for (const [name, value] of Object.entries(features.behaviors ?? {})) { if (value) flags.push(`${name}=1`) } - if (!features?.opener) flags.push('noopener') - if (!features?.referrer) flags.push('noreferrer') - if (Number.isFinite(features?.width)) flags.push(`width=${features?.width}`) - if (Number.isFinite(features?.height)) flags.push(`height=${features?.height}`) - if (Number.isFinite(features?.screenX)) flags.push(`screenX=${features?.screenX}`) - if (Number.isFinite(features?.screenY)) flags.push(`screenY=${features?.screenY}`) + if (!features.opener) flags.push('noopener') + if (!features.referrer) flags.push('noreferrer') + if (Number.isFinite(features.width)) flags.push(`width=${features.width}`) + if (Number.isFinite(features.height)) flags.push(`height=${features.height}`) + if (Number.isFinite(features.screenX)) flags.push(`screenX=${features.screenX}`) + if (Number.isFinite(features.screenY)) flags.push(`screenY=${features.screenY}`) return window.open(url, target, flags.join(' ')) } From 20f93c1c6345450a4fa27e929c869380f3d3d7c4 Mon Sep 17 00:00:00 2001 From: Septs Date: Mon, 28 Mar 2022 17:57:24 +0800 Subject: [PATCH 5/5] fix: typo --- packages/mask/src/social-network-adaptor/twitter.com/shared.ts | 2 +- packages/shared-base-ui/src/bom/open-window.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/twitter.com/shared.ts b/packages/mask/src/social-network-adaptor/twitter.com/shared.ts index f42d809f4784..1b1ce5795335 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/shared.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/shared.ts @@ -36,7 +36,7 @@ export const twitterShared: SocialNetwork.Shared & SocialNetwork.Base = { height, screenX: window.screenX + (window.innerWidth - width) / 2, screenY: window.screenY + (window.innerHeight - height) / 2, - behaviors: { toolbar: true, status: true, resizeable: true, scrollbars: true }, + behaviors: { toolbar: true, status: true, resizable: true, scrollbars: true }, }) if (openedWindow === null) { location.assign(url) diff --git a/packages/shared-base-ui/src/bom/open-window.ts b/packages/shared-base-ui/src/bom/open-window.ts index ddce285fefb7..cf573c57b1b6 100644 --- a/packages/shared-base-ui/src/bom/open-window.ts +++ b/packages/shared-base-ui/src/bom/open-window.ts @@ -4,7 +4,7 @@ interface BehaviorFlags { popup?: boolean toolbar?: boolean status?: boolean - resizeable?: boolean + resizable?: boolean scrollbars?: boolean }