fix: allow external link with url: /pathname

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() {
             <Text color={theme.subText}>
               <Trans>
                 By connecting a wallet, you accept{' '}
-                <a href={TERM_FILES_PATH.KYBERSWAP_TERMS} onClick={e => e.stopPropagation()}>
+                <ExternalLink href={TERM_FILES_PATH.KYBERSWAP_TERMS} onClick={e => e.stopPropagation()}>
                   KyberSwap&lsquo;s Terms of Use
-                </a>{' '}
+                </ExternalLink>{' '}
                 and consent to its{' '}
-                <a href={TERM_FILES_PATH.PRIVACY_POLICY} onClick={e => e.stopPropagation()}>
+                <ExternalLink href={TERM_FILES_PATH.PRIVACY_POLICY} onClick={e => e.stopPropagation()}>
                   Privacy Policy
-                </a>
+                </ExternalLink>
                 . Last updated: {dayjs(TERM_FILES_PATH.VERSION).format('DD MMM YYYY')}
               </Trans>
             </Text>

src/components/Menu/index.tsx

@@ -473,7 +473,7 @@ export default function Menu() {
             )}
 
             <MenuItem>
-              <a
+              <ExternalLink
                 href={TERM_FILES_PATH.KYBERSWAP_TERMS}
                 onClick={() => {
                   toggle()
@@ -482,10 +482,10 @@ export default function Menu() {
               >
                 <FileText />
                 <Trans>Terms</Trans>
-              </a>
+              </ExternalLink>
             </MenuItem>
             <MenuItem>
-              <a
+              <ExternalLink
                 href={TERM_FILES_PATH.PRIVACY_POLICY}
                 onClick={() => {
                   toggle()
@@ -494,7 +494,7 @@ export default function Menu() {
               >
                 <FileText />
                 <Trans>Privacy Policy</Trans>
-              </a>
+              </ExternalLink>
             </MenuItem>
             <MenuItem>
               <ExternalLink

src/pages/KyberDAO/KNCUtility/index.tsx

@@ -279,8 +279,8 @@ export default function KNCUtility() {
                   <Text fontSize={14} fontWeight={400} lineHeight="20px">
                     <Trans>
                       These Terms and Conditions should be read in conjunction with the KyberSwap{' '}
-                      <a href={TERM_FILES_PATH.KYBERSWAP_TERMS}>Terms of Use</a>, which lay out the terms and conditions
-                      that apply to all KyberSwap activities.
+                      <ExternalLink href={TERM_FILES_PATH.KYBERSWAP_TERMS}>Terms of Use</ExternalLink>, which lay out
+                      the terms and conditions that apply to all KyberSwap activities.
                     </Trans>
                   </Text>
                 </li>
@@ -290,7 +290,7 @@ export default function KNCUtility() {
                     <Trans>
                       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{' '}
-                      <a href={TERM_FILES_PATH.KYBERSWAP_TERMS}>Terms of Use</a>.
+                      <ExternalLink href={TERM_FILES_PATH.KYBERSWAP_TERMS}>Terms of Use</ExternalLink>.
                     </Trans>
                   </Text>
                 </li>
@@ -308,9 +308,10 @@ export default function KNCUtility() {
                   <Text fontSize={14} fontWeight={400} lineHeight="20px">
                     <Trans>
                       KyberSwap maintains the right, at its sole discretion, to take action or remove rewards against
-                      the User who violates the KyberSwap <a href={TERM_FILES_PATH.KYBERSWAP_TERMS}>Terms of Use</a>{' '}
-                      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{' '}
+                      <ExternalLink href={TERM_FILES_PATH.KYBERSWAP_TERMS}>Terms of Use</ExternalLink> 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.
                     </Trans>
                   </Text>
                 </li>

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 (
-    <Tab id="limit-button" data-testid="limit-button" onClick={onClick} isActive={isLimitPage}>
-      <Text fontSize={20} fontWeight={500}>
-        <Trans>Limit</Trans>{' '}
-        {numberOfInsufficientFundOrders ? (
-          <MouseoverTooltip
-            placement="top"
-            text={
-              <Trans>
-                You have {numberOfInsufficientFundOrders} active orders that don&apos;t have sufficient funds
-              </Trans>
-            }
-          >
-            <WarningBadge>{numberOfInsufficientFundOrders}</WarningBadge>
-          </MouseoverTooltip>
-        ) : null}
-      </Text>
+    <Tab
+      id="limit-button"
+      data-testid="limit-button"
+      onClick={onClick}
+      isActive={isLimitPage}
+      style={{ display: 'flex', gap: '4px', fontSize: '20px', fontWeight: '500' }}
+    >
+      <Trans>Limit</Trans>{' '}
+      {!!numberOfInsufficientFundOrders && (
+        <MouseoverTooltip
+          placement="top"
+          text={
+            <Trans>You have {numberOfInsufficientFundOrders} active orders that don&apos;t have sufficient funds</Trans>
+          }
+        >
+          <WarningBadge>{numberOfInsufficientFundOrders}</WarningBadge>
+        </MouseoverTooltip>
+      )}
     </Tab>
   )
 }

src/theme/components.tsx

@@ -193,7 +193,7 @@ export function ExternalLink({
 }: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref'> & { href: string }) {
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement>) => {
-      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 (
-    <StyledLink target={target} rel={rel} href={validateRedirectURL(href, false)} onClick={handleClick} {...rest} />
+    <StyledLink
+      target={target}
+      rel={rel}
+      href={validateRedirectURL(href, { _dangerousSkipCheckWhitelist: true, allowRelativePath: true })}
+      onClick={handleClick}
+      {...rest}
+    />
   )
 }
 
@@ -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 (
-    <LinkIconWrapper target={target} rel={rel} href={validateRedirectURL(href, false)} onClick={handleClick} {...rest}>
+    <LinkIconWrapper
+      target={target}
+      rel={rel}
+      href={validateRedirectURL(href, { _dangerousSkipCheckWhitelist: true, allowRelativePath: true })}
+      onClick={handleClick}
+      {...rest}
+    >
       <LinkIcon color={color} />
     </LinkIconWrapper>
   )

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 {