chore: Use external link for docs (#10821)

--- ## PR-Codex overview This PR focuses on updating the `Link` components throughout the application to use the `external` prop instead of `target="_blank"` for better accessibility and security practices. ### Detailed summary - Changed `target="_blank"` to `external` in multiple `Link` components across various files. - Updated `Link` imports to use `LinkExternal` in `apps/web/src/views/Home/components/CakeSection/index.tsx`. - Adjusted `Link` components in `DisclaimerCheckBox.tsx`, `BuyCryptoForm.tsx`, `LockedVeCakeStatus.tsx`, and others to reflect the new prop. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
pancakeswap · Oct 15, 2024 · 504857f · 504857f
1 parent a0e17e0
commit 504857f
Show file tree

Hide file tree

Showing 15 changed files with 24 additions and 37 deletions.
diff --git a/apps/web/src/index.tsx b/apps/web/src/index.tsx
@@ -53,11 +53,7 @@ export function Blocklist() {
             <Text style={{ wordBreak: 'break-word' }}>{address}</Text>
             <Text>
               {t('We have detected that this address is associated with a Prohibited Activity')}{' '}
-              <Link
-                style={{ display: 'inline-block' }}
-                href="https://pancakeswap.finance/terms-of-service"
-                target="_blank"
-              >
+              <Link style={{ display: 'inline-block' }} href="https://pancakeswap.finance/terms-of-service" external>
                 {t('Learn more')}
               </Link>
             </Text>

diff --git a/apps/web/src/views/BuyCrypto/containers/BuyCryptoForm.tsx b/apps/web/src/views/BuyCrypto/containers/BuyCryptoForm.tsx
@@ -264,8 +264,7 @@ export function BuyCryptoForm({ providerAvailabilities }: { providerAvailabiliti
               display="flex"
               fontSize="14px"
               href="https://pancakeswap.finance/terms-of-service"
-              referrerPolicy="no-referrer"
-              target="_blank"
+              external
             >
               {t('terms of service')}
             </Link>

diff --git a/apps/web/src/views/CakeStaking/components/LockedVeCakeStatus.tsx b/apps/web/src/views/CakeStaking/components/LockedVeCakeStatus.tsx
@@ -40,7 +40,7 @@ const LearnMore: React.FC<{ href?: string }> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <Link href={href} color="text" target="_blank">
+    <Link href={href} color="text" external>
       {t('Learn More >>')}
     </Link>
   )

diff --git a/apps/web/src/views/CakeStaking/components/SyrupPool/LearnMoreLink.tsx b/apps/web/src/views/CakeStaking/components/SyrupPool/LearnMoreLink.tsx
@@ -17,8 +17,7 @@ export const LearnMoreLink: React.FC<{ withArrow?: boolean }> = ({ withArrow })
         marginLeft: 3,
       }}
       href="https://docs.pancakeswap.finance/products/vecake/migrate-from-cake-pool"
-      target="_blank"
-      rel="noreferrer noopener"
+      external
     >
       {t('Learn more')}
       {withArrow && '»'}

diff --git a/apps/web/src/views/Farms/components/FarmCard/CardHeading.tsx b/apps/web/src/views/Farms/components/FarmCard/CardHeading.tsx
@@ -126,13 +126,7 @@ const CardHeading: React.FC<React.PropsWithChildren<ExpandableSectionProps>> = (
                 <Box>
                   <Text lineHeight="110%" as="span">
                     {t('Stake CAKE, Earn PEPE in our')}
-                    <Link
-                      ml="4px"
-                      lineHeight="110%"
-                      display="inline !important"
-                      href="/pools?chain=bsc"
-                      target="_blank"
-                    >
+                    <Link ml="4px" lineHeight="110%" display="inline !important" href="/pools?chain=bsc" external>
                       PEPE Syrup Pool
                     </Link>
                   </Text>

diff --git a/apps/web/src/views/Farms/components/FarmTable/Farm.tsx b/apps/web/src/views/Farms/components/FarmTable/Farm.tsx
@@ -59,7 +59,7 @@ export const FarmCell: React.FunctionComponent<
           <Box>
             <Text lineHeight="110%" as="span">
               {t('Stake CAKE, Earn PEPE in our')}
-              <Link ml="4px" lineHeight="110%" display="inline !important" href="/pools?chain=bsc" target="_blank">
+              <Link ml="4px" lineHeight="110%" display="inline !important" href="/pools?chain=bsc" external>
                 PEPE Syrup Pool
               </Link>
               .

diff --git a/apps/web/src/views/Farms/components/YieldBooster/components/bCakeV3/BCakeBoosterCard.tsx b/apps/web/src/views/Farms/components/YieldBooster/components/bCakeV3/BCakeBoosterCard.tsx
@@ -77,7 +77,7 @@ export const useBCakeTooltipContent = () => {
       </Box>
       <Box>
         {t('To learn more, check out the')}
-        <Link target="_blank" href="https://medium.com/pancakeswap/introducing-bcake-farm-yield-boosters-b27b7a6f0f84">
+        <Link external href="https://medium.com/pancakeswap/introducing-bcake-farm-yield-boosters-b27b7a6f0f84">
           {t('Medium Article')}
         </Link>
       </Box>

diff --git a/apps/web/src/views/FixedStaking/components/DisclaimerCheckBox.tsx b/apps/web/src/views/FixedStaking/components/DisclaimerCheckBox.tsx
@@ -22,7 +22,7 @@ export function DisclaimerCheckBox({
             fontSize: '14px',
           }}
           href="https://docs.pancakeswap.finance/products/simple-staking/terms-and-conditions"
-          target="_blank"
+          external
         >
           the Terms & Conditions.
         </Link>

diff --git a/apps/web/src/views/FixedStaking/components/WithdrawalMessage.tsx b/apps/web/src/views/FixedStaking/components/WithdrawalMessage.tsx
@@ -27,7 +27,7 @@ export default function WithdrawalMessage({ lockPeriod }: { lockPeriod: number }
             fontSize: '14px',
           }}
           href="https://docs.pancakeswap.finance/products/simple-staking#when-can-i-claim-my-rewards"
-          target="_blank"
+          external
         >
           {t('Click here for more information')}
         </Link>

diff --git a/apps/web/src/views/FixedStaking/hooks/useHandleWithdrawSubmission.tsx b/apps/web/src/views/FixedStaking/hooks/useHandleWithdrawSubmission.tsx
@@ -32,8 +32,8 @@ export function useHandleWithdrawSubmission({
       <>
         {t('Please come back to check later at a certain amount of time')}
         <Link
+          external
           href="https://docs.pancakeswap.finance/products/simple-staking/faq#what-happens-in-the-withdrawal-process-when-withdrawal-approval-is-pending"
-          target="_blank"
         >
           {t('Learn more')}
         </Link>

diff --git a/apps/web/src/views/Home/components/CakeSection/index.tsx b/apps/web/src/views/Home/components/CakeSection/index.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from '@pancakeswap/localization'
-import { Button, Flex, Link, OpenNewIcon, StyledLink, Text, useMatchBreakpoints } from '@pancakeswap/uikit'
+import { Button, Flex, LinkExternal, StyledLink, Text, useMatchBreakpoints } from '@pancakeswap/uikit'
 import { ASSET_CDN } from 'config/constants/endpoints'
 import useTheme from 'hooks/useTheme'
 import React, { memo, useCallback, useLayoutEffect, useRef } from 'react'
@@ -482,11 +482,9 @@ const CakeSection: React.FC = () => {
         <NextLink href="/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82&chainId=56">
           <Button variant="primary">{t('Buy CAKE')}</Button>
         </NextLink>
-        <Link href="https://docs.pancakeswap.finance/governance-and-tokenomics/cake-tokenomics">
-          <Button pl="0" endIcon={<OpenNewIcon color="primary" />} variant="text">
-            {t('Learn')}
-          </Button>
-        </Link>
+        <LinkExternal href="https://docs.pancakeswap.finance/governance-and-tokenomics/cake-tokenomics">
+          {t('Learn')}
+        </LinkExternal>
       </Flex>
       <Flex flexDirection={['column']} mb="40px">
         <CakeSectionMainBox>

diff --git a/apps/web/src/views/Lottery/components/HowToPlay.tsx b/apps/web/src/views/Lottery/components/HowToPlay.tsx
@@ -332,7 +332,7 @@ const HowToPlay: React.FC<React.PropsWithChildren> = () => {
                 {t(
                   'An average total of 35,000 CAKE from the treasury is added to lottery rounds over the course of a week. This CAKE is of course also included in rollovers! Read more in our guide to ',
                 )}
-                <InlineLink href="https://docs.pancakeswap.finance/tokenomics/cake/cake-tokenomics">
+                <InlineLink external href="https://docs.pancakeswap.finance/tokenomics/cake/cake-tokenomics">
                   {t('CAKE Tokenomics')}
                 </InlineLink>
               </Text>
@@ -352,7 +352,7 @@ const HowToPlay: React.FC<React.PropsWithChildren> = () => {
           </Heading>
           <Text>
             {t('Check our in-depth guide on')}{' '}
-            <InlineLink href="https://docs.pancakeswap.finance/products/lottery/lottery-guide">
+            <InlineLink external href="https://docs.pancakeswap.finance/products/lottery/lottery-guide">
               {t('how to play the PancakeSwap lottery!')}
             </InlineLink>
           </Text>

diff --git a/apps/web/src/views/Pools/components/PoolsTable/PoolRow.tsx b/apps/web/src/views/Pools/components/PoolsTable/PoolRow.tsx
@@ -113,8 +113,8 @@ const PoolRow: React.FC<React.PropsWithChildren<{ sousId: number; account: strin
         <Box>
           <Text lineHeight="110%" as="span">
             {t("Enjoying the APR? Get more PEPE rewards in next month's Syrup Pool by staking more PEPE-BNB LP in our")}
-            <Link ml="4px" lineHeight="110%" display="inline !important" href="/farms?chain=bsc" target="_blank">
-              Farms
+            <Link ml="4px" lineHeight="110%" display="inline !important" href="/farms?chain=bsc" external>
+              {t('Farms')}
             </Link>
           </Text>
         </Box>

diff --git a/packages/uikit/src/components/Footer/Footer.tsx b/packages/uikit/src/components/Footer/Footer.tsx
@@ -64,8 +64,7 @@ const MenuItem: React.FC<React.PropsWithChildren<FooterProps>> = ({
                     <Link
                       data-theme="dark"
                       href={href}
-                      target="_blank"
-                      rel="noreferrer noopener"
+                      external
                       color={isHighlighted ? vars.colors.warning : "text"}
                       bold={false}
                       style={{ textTransform: "none" }}

diff --git a/packages/widgets-internal/ifo/Tips.tsx b/packages/widgets-internal/ifo/Tips.tsx
@@ -1,8 +1,7 @@
 import BigNumber from "bignumber.js";
 import { useMemo } from "react";
 import { SpaceProps } from "styled-system";
-import { FlexGap, Message, MessageText, InfoFilledIcon, Box, MessageProps } from "@pancakeswap/uikit";
-import Link from "next/link";
+import { FlexGap, Message, MessageText, InfoFilledIcon, Box, MessageProps, Link } from "@pancakeswap/uikit";
 import { useTranslation } from "@pancakeswap/localization";
 import styled from "styled-components";
 
@@ -84,7 +83,10 @@ export function InsufficientNativeVeCakeTips(props: SpaceProps) {
             )}
           </MessageText>
           <LinkMessageText bold>
-            <Link href="https://docs.pancakeswap.finance/products/vecake/migrate-from-cake-pool#10ffc408-be58-4fa8-af56-be9f74d03f42">
+            <Link
+              external
+              href="https://docs.pancakeswap.finance/products/vecake/migrate-from-cake-pool#10ffc408-be58-4fa8-af56-be9f74d03f42"
+            >
               {t("Learn more")} {">>"}
             </Link>
           </LinkMessageText>