From 985cfa2ef04eedc238bcbd9a274d6b2945677533 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0i=20Danh?= <33005392+nguyenhoaidanh@users.noreply.github.com> Date: Mon, 16 Oct 2023 13:53:32 +0700 Subject: [PATCH] fix: allow external link with url: /pathname (#2299) --- .../Header/web3/WalletModal/index.tsx | 9 ++--- src/components/Menu/index.tsx | 8 ++--- src/pages/KyberDAO/KNCUtility/index.tsx | 13 +++---- src/pages/SwapV3/Tabs/LimitTab.tsx | 35 ++++++++++--------- src/theme/components.tsx | 20 ++++++++--- src/utils/redirect.ts | 20 ++++++----- 6 files changed, 62 insertions(+), 43 deletions(-) diff --git a/src/components/Header/web3/WalletModal/index.tsx b/src/components/Header/web3/WalletModal/index.tsx index 67e7834b65..0986a50436 100644 --- a/src/components/Header/web3/WalletModal/index.tsx +++ b/src/components/Header/web3/WalletModal/index.tsx @@ -32,6 +32,7 @@ import { useWalletModalToggle, } from 'state/application/hooks' import { useIsConnectingWallet } from 'state/authen/hooks' +import { ExternalLink } from 'theme' import { isEVMWallet, isOverriddenWallet, isSolanaWallet } from 'utils' import Option from './Option' @@ -316,13 +317,13 @@ export default function WalletModal() { By connecting a wallet, you accept{' '} - e.stopPropagation()}> + e.stopPropagation()}> KyberSwap‘s Terms of Use - {' '} + {' '} and consent to its{' '} - e.stopPropagation()}> + e.stopPropagation()}> Privacy Policy - + . Last updated: {dayjs(TERM_FILES_PATH.VERSION).format('DD MMM YYYY')} diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 87115a075a..44796e4579 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -473,7 +473,7 @@ export default function Menu() { )} - { toggle() @@ -482,10 +482,10 @@ export default function Menu() { > Terms - + - { toggle() @@ -494,7 +494,7 @@ export default function Menu() { > Privacy Policy - + These Terms and Conditions should be read in conjunction with the KyberSwap{' '} - Terms of Use, which lay out the terms and conditions - that apply to all KyberSwap activities. + Terms of Use, which lay out + the terms and conditions that apply to all KyberSwap activities. @@ -290,7 +290,7 @@ export default function KNCUtility() { By visiting KyberSwap and participating in the program, the User is deemed to have read, understood, and agreed to these Terms and Conditions and the KyberSwap{' '} - Terms of Use. + Terms of Use. @@ -308,9 +308,10 @@ export default function KNCUtility() { KyberSwap maintains the right, at its sole discretion, to take action or remove rewards against - the User who violates the KyberSwap Terms of Use{' '} - and/or violates, cheats, or exploits the program, including but not limited to, any suspicious - activities, or any attempts to circumvent these Terms and Conditions. + the User who violates the KyberSwap{' '} + Terms of Use and/or violates, + cheats, or exploits the program, including but not limited to, any suspicious activities, or any + attempts to circumvent these Terms and Conditions. diff --git a/src/pages/SwapV3/Tabs/LimitTab.tsx b/src/pages/SwapV3/Tabs/LimitTab.tsx index c46bd4b04c..59fe4c6cce 100644 --- a/src/pages/SwapV3/Tabs/LimitTab.tsx +++ b/src/pages/SwapV3/Tabs/LimitTab.tsx @@ -1,7 +1,6 @@ import { Trans } from '@lingui/macro' import { rgba } from 'polished' import { useLocation } from 'react-router-dom' -import { Text } from 'rebass' import { useGetNumberOfInsufficientFundOrdersQuery } from 'services/limitOrder' import styled from 'styled-components' @@ -45,22 +44,24 @@ export default function LimitTab({ onClick }: Props) { } return ( - - - Limit{' '} - {numberOfInsufficientFundOrders ? ( - - You have {numberOfInsufficientFundOrders} active orders that don't have sufficient funds - - } - > - {numberOfInsufficientFundOrders} - - ) : null} - + + Limit{' '} + {!!numberOfInsufficientFundOrders && ( + You have {numberOfInsufficientFundOrders} active orders that don't have sufficient funds + } + > + {numberOfInsufficientFundOrders} + + )} ) } diff --git a/src/theme/components.tsx b/src/theme/components.tsx index 5fb445e175..7afcfc381a 100644 --- a/src/theme/components.tsx +++ b/src/theme/components.tsx @@ -193,7 +193,7 @@ export function ExternalLink({ }: Omit, 'as' | 'ref'> & { href: string }) { const handleClick = useCallback( (event: React.MouseEvent) => { - onClick && onClick(event) + onClick?.(event) // don't prevent default, don't redirect if it's a new tab if (target === '_blank' || event.ctrlKey || event.metaKey) { } else { @@ -203,7 +203,13 @@ export function ExternalLink({ [target, onClick], ) return ( - + ) } @@ -221,13 +227,19 @@ export function ExternalLinkIcon({ console.debug('Fired outbound link event', href) } else { event.preventDefault() - navigateToUrl(href, false) + navigateToUrl(href, { _dangerousSkipCheckWhitelist: true, allowRelativePath: true }) } }, [href, target], ) return ( - + ) diff --git a/src/utils/redirect.ts b/src/utils/redirect.ts index 4dec7f623a..d472a54b66 100644 --- a/src/utils/redirect.ts +++ b/src/utils/redirect.ts @@ -6,15 +6,19 @@ import { useActiveWeb3React } from 'hooks' import { useChangeNetwork } from 'hooks/web3/useChangeNetwork' const whiteListDomains = [/https:\/\/(.+?\.)?kyberswap\.com$/, /https:\/\/(.+)\.kyberengineering\.io$/] -export const validateRedirectURL = (url: string | undefined, whitelistKyberSwap = true) => { + +type Options = { _dangerousSkipCheckWhitelist?: boolean; allowRelativePath?: boolean } +export const validateRedirectURL = ( + url: string | undefined, + { _dangerousSkipCheckWhitelist = false, allowRelativePath = false }: Options = {}, +) => { try { - if (!url) throw new Error() - const newUrl = new URL(url) // valid url + if (!url || url.endsWith('.js')) throw new Error() + const newUrl = allowRelativePath && url.startsWith('/') ? new URL(`${window.location.origin}${url}`) : new URL(url) if ( - url.endsWith('.js') || newUrl.pathname.endsWith('.js') || !['https:', 'http:'].includes(newUrl.protocol) || - (whitelistKyberSwap && !whiteListDomains.some(regex => newUrl.origin.match(regex))) + (!_dangerousSkipCheckWhitelist && !whiteListDomains.some(regex => newUrl.origin.match(regex))) ) { throw new Error() } @@ -24,8 +28,8 @@ export const validateRedirectURL = (url: string | undefined, whitelistKyberSwap } } -export const navigateToUrl = (url: string | undefined, whitelistKyberSwap = true) => { - const urlFormatted = validateRedirectURL(url, whitelistKyberSwap) +export const navigateToUrl = (url: string | undefined, options?: Options) => { + const urlFormatted = validateRedirectURL(url, options) if (urlFormatted) window.location.href = urlFormatted } @@ -46,7 +50,7 @@ export const useNavigateToUrl = () => { return } const { pathname, host, search } = new URL(actionURL) - if (!validateRedirectURL(actionURL, false)) return + if (!validateRedirectURL(actionURL, { _dangerousSkipCheckWhitelist: true })) return if (window.location.host === host) { navigate(`${pathname}${search}`) } else {