feat: redesign (external) links

src/components/address-book/ExportDialog/index.tsx

@@ -1,7 +1,6 @@
 import DialogContent from '@mui/material/DialogContent'
 import DialogActions from '@mui/material/DialogActions'
 import Button from '@mui/material/Button'
-import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 import { useCSVDownloader } from 'react-papaparse'
 import type { SyntheticEvent } from 'react'
@@ -11,6 +10,7 @@ import ModalDialog from '@/components/common/ModalDialog'
 import { type AddressBookState, selectAllAddressBooks } from '@/store/addressBookSlice'
 import { useAppSelector } from '@/store'
 import { trackEvent, ADDRESS_BOOK_EVENTS } from '@/services/analytics'
+import ExternalLink from '@/components/common/ExternalLink'
 
 const COL_1 = 'address'
 const COL_2 = 'name'
@@ -65,14 +65,12 @@ const ExportDialog = ({ handleClose }: { handleClose: () => void }): ReactElemen
         </Typography>
 
         <Typography mt={1}>
-          <Link
-            href="https://help.gnosis-safe.io/en/articles/5299068-address-book-export-and-import"
-            target="_blank"
-            rel="noreferrer"
+          <ExternalLink
+            href="https://help.safe.global/en/articles/5299068-address-book-export-and-import"
             title="Learn about the address book import and export"
           >
             Learn about the address book import and export
-          </Link>
+          </ExternalLink>
         </Typography>
       </DialogContent>
 

src/components/address-book/ImportDialog/index.tsx

@@ -1,7 +1,6 @@
 import DialogContent from '@mui/material/DialogContent'
 import DialogActions from '@mui/material/DialogActions'
 import Button from '@mui/material/Button'
-import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 import { useCSVReader, formatFileSize } from 'react-papaparse'
 import type { ParseResult } from 'papaparse'
@@ -17,6 +16,7 @@ import { abCsvReaderValidator, abOnUploadValidator } from './validation'
 import ErrorMessage from '@/components/tx/ErrorMessage'
 import { Errors, logError } from '@/services/exceptions'
 import FileUpload, { FileTypes, type FileInfo } from '@/components/common/FileUpload'
+import ExternalLink from '@/components/common/ExternalLink'
 
 type AddressBookCSVRow = ['address', 'name', 'chainId']
 
@@ -153,14 +153,12 @@ const ImportDialog = ({ handleClose }: { handleClose: () => void }): ReactElemen
         <Typography>
           Only CSV files exported from a Safe can be imported.
           <br />
-          <Link
-            href="https://help.gnosis-safe.io/en/articles/5299068-address-book-export-and-import"
-            target="_blank"
-            rel="noreferrer"
+          <ExternalLink
+            href="https://help.safe.global/en/articles/5299068-address-book-export-and-import"
             title="Learn about the address book import and export"
           >
             Learn about the address book import and export
-          </Link>
+          </ExternalLink>
         </Typography>
       </DialogContent>
       <DialogActions>

src/components/common/CookieBanner/index.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react'
 import { useEffect } from 'react'
-import { Button, Checkbox, FormControlLabel, Link, Typography, Paper, SvgIcon } from '@mui/material'
+import { Button, Checkbox, FormControlLabel, Typography, Paper, SvgIcon } from '@mui/material'
 import WarningIcon from '@/public/images/notifications/warning.svg'
 import { useForm } from 'react-hook-form'
 
@@ -9,6 +9,7 @@ import { selectCookies, CookieType, saveCookieConsent } from '@/store/cookiesSli
 import { selectCookieBanner, openCookieBanner, closeCookieBanner } from '@/store/popupSlice'
 
 import css from './styles.module.css'
+import ExternalLink from '../ExternalLink'
 
 const COOKIE_WARNING: Record<CookieType, string> = {
   [CookieType.NECESSARY]: '',
@@ -53,12 +54,9 @@ const CookieBannerPopup = ({ warningKey }: { warningKey?: CookieType }): ReactEl
 
       <Typography align="center">
         We use cookies to provide you with the best experience and to help improve our website and application. Please
-        read our{' '}
-        <Link href="https://gnosis-safe.io/cookie" target="_blank" rel="noopener noreferrer">
-          Cookie Policy
-        </Link>{' '}
-        for more information. By clicking &quot;Accept all&quot;, you agree to the storing of cookies on your device to
-        enhance site navigation, analyze site usage and provide customer support.
+        read our <ExternalLink href="https://safe.global/cookie">Cookie Policy</ExternalLink> for more information. By
+        clicking &quot;Accept all&quot;, you agree to the storing of cookies on your device to enhance site navigation,
+        analyze site usage and provide customer support.
       </Typography>
 
       <form className={css.grid}>

src/components/common/ErrorBoundary/index.tsx

@@ -8,6 +8,7 @@ import WarningIcon from '@/public/images/notifications/warning.svg'
 
 import css from '@/components/common/ErrorBoundary/styles.module.css'
 import CircularIcon from '../icons/CircularIcon'
+import ExternalLink from '../ExternalLink'
 
 const ErrorBoundary: FallbackRender = ({ error, componentStack }) => {
   return (
@@ -24,8 +25,8 @@ const ErrorBoundary: FallbackRender = ({ error, componentStack }) => {
         {IS_PRODUCTION ? (
           <Typography color="text.primary">
             In case the problem persists, please reach out to us via our{' '}
-            <Link href="https://help.gnosis-safe.io" passHref target="_blank" rel="noopener noreferrer">
-              <MuiLink>Help Center</MuiLink>
+            <Link href="https://help.safe.global" passHref target="_blank" rel="noopener noreferrer">
+              <ExternalLink>Help Center</ExternalLink>
             </Link>
           </Typography>
         ) : (

src/components/common/ExternalLink/index.tsx

@@ -0,0 +1,23 @@
+import { OpenInNewRounded } from '@mui/icons-material'
+import { Box, Link, type LinkProps } from '@mui/material'
+
+/**
+ * Renders an external Link which always sets the noopener and noreferrer rel attribute and the target to _blank.
+ * It also always adds the external link icon as end adornment.
+ */
+const ExternalLink = ({
+  suppressIcon = false,
+  children,
+  ...props
+}: Omit<LinkProps, 'target' | 'rel'> & { suppressIcon?: boolean }) => {
+  return (
+    <Link rel="noreferrer noopener" target="_blank" {...props}>
+      <Box display="inline-flex" alignItems="center" gap={0.2}>
+        {children}
+        {!suppressIcon && <OpenInNewRounded fontSize="small" />}
+      </Box>
+    </Link>
+  )
+}
+
+export default ExternalLink

src/components/common/Footer/index.tsx

@@ -7,6 +7,7 @@ import { openCookieBanner } from '@/store/popupSlice'
 import { AppRoutes } from '@/config/routes'
 import packageJson from '../../../../package.json'
 import AppstoreButton from '../AppStoreButton'
+import ExternalLink from '../ExternalLink'
 
 const footerPages = [AppRoutes.welcome, AppRoutes.settings.index]
 
@@ -30,42 +31,38 @@ const Footer = (): ReactElement | null => {
           <Typography variant="caption">&copy;2022 Safe Ecosystem Foundation</Typography>
         </li>
         <li>
-          <Link rel="noopener noreferrer" target="_blank" href="https://gnosis-safe.io/terms">
+          <ExternalLink suppressIcon href="https://safe.global/terms">
             Terms
-          </Link>
+          </ExternalLink>
         </li>
         <li>
-          <Link rel="noopener noreferrer" target="_blank" href="https://gnosis-safe.io/privacy">
+          <ExternalLink suppressIcon href="https://safe.global/privacy">
             Privacy
-          </Link>
+          </ExternalLink>
         </li>
         <li>
-          <Link rel="noopener noreferrer" target="_blank" href="https://gnosis-safe.io/licenses">
+          <ExternalLink suppressIcon href="https://safe.global/licenses">
             Licenses
-          </Link>
+          </ExternalLink>
         </li>
         <li>
-          <Link rel="noopener noreferrer" target="_blank" href="https://gnosis-safe.io/imprint">
+          <ExternalLink suppressIcon href="https://safe.global/imprint">
             Imprint
-          </Link>
+          </ExternalLink>
         </li>
         <li>
-          <Link rel="noopener noreferrer" target="_blank" href="https://gnosis-safe.io/cookie">
+          <ExternalLink suppressIcon href="https://safe.global/cookie">
             Cookie Policy
-          </Link>
+          </ExternalLink>
           &nbsp;&mdash;&nbsp;
           <Link href="#" onClick={onCookieClick}>
             Preferences
           </Link>
         </li>
         <li>
-          <Link
-            rel="noopener noreferrer"
-            target="_blank"
-            href={`${packageJson.homepage}/releases/tag/v${packageJson.version}`}
-          >
+          <ExternalLink suppressIcon href={`${packageJson.homepage}/releases/tag/v${packageJson.version}`}>
             v{packageJson.version}
-          </Link>
+          </ExternalLink>
         </li>
         <li>
           <AppstoreButton placement="footer" />

src/components/common/PairingDetails/PairingDescription.tsx

@@ -1,19 +1,20 @@
-import { Typography, Link } from '@mui/material'
+import { Typography } from '@mui/material'
 import type { ReactElement } from 'react'
 
 import AppStoreButton from '@/components/common/AppStoreButton'
+import ExternalLink from '../ExternalLink'
 
-const HELP_ARTICLE = 'https://help.gnosis-safe.io/en/articles/5584901-desktop-pairing'
+const HELP_ARTICLE = 'https://help.safe.global/en/articles/5584901-desktop-pairing'
 
 const PairingDescription = (): ReactElement => {
   return (
     <>
       <Typography variant="caption" align="center">
         Scan this code in the Safe Mobile app to sign transactions with your mobile device.
         <br />
-        <Link href={HELP_ARTICLE} target="_blank" rel="noreferrer" title="Learn more about mobile pairing.">
+        <ExternalLink href={HELP_ARTICLE} title="Learn more about mobile pairing.">
           Learn more about this feature.
-        </Link>
+        </ExternalLink>
       </Typography>
 
       <AppStoreButton placement="pairing" />

src/components/create-safe/steps/SetNameStep.tsx

@@ -7,6 +7,7 @@ import { Box, Button, Divider, FormControl, Grid, Paper, Typography } from '@mui
 import { FormProvider, useForm } from 'react-hook-form'
 import type { SafeFormData } from '@/components/create-safe/types'
 import { trackEvent, CREATE_SAFE_EVENTS } from '@/services/analytics'
+import ExternalLink from '@/components/common/ExternalLink'
 
 type Props = {
   params: SafeFormData
@@ -72,7 +73,15 @@ const SetNameStep = ({ params, onSubmit, onBack, setStep }: Props) => {
             </FormControl>
 
             <Typography mt={2}>
-              By continuing you consent to the <a href="#">terms of use</a> and <a href="#">privacy policy</a>.
+              By continuing you consent to the{' '}
+              <ExternalLink href="https://safe.global/terms" fontWeight={700}>
+                terms of use
+              </ExternalLink>{' '}
+              and{' '}
+              <ExternalLink href="https://safe.global/privacy" fontWeight={700}>
+                privacy policy
+              </ExternalLink>
+              .
             </Typography>
           </Box>
 

src/components/load-safe/steps/SetAddressStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Button, CircularProgress, Divider, Grid, InputAdornment, Link, Paper, Typography } from '@mui/material'
+import { Box, Button, CircularProgress, Divider, Grid, InputAdornment, Paper, Typography } from '@mui/material'
 import { useForm, FormProvider } from 'react-hook-form'
 import type { StepRenderProps } from '@/components/tx/TxStepper/useTxStepper'
 import ChainIndicator from '@/components/common/ChainIndicator'
@@ -13,6 +13,7 @@ import { useAddressResolver } from '@/hooks/useAddressResolver'
 import { useMnemonicSafeName } from '@/hooks/useMnemonicName'
 import type { SafeFormData } from '@/components/create-safe/types'
 import { trackEvent, LOAD_SAFE_EVENTS } from '@/services/analytics'
+import ExternalLink from '@/components/common/ExternalLink'
 
 type Props = {
   params: SafeFormData
@@ -90,13 +91,9 @@ const SetAddressStep = ({ params, onSubmit, onBack }: Props) => {
 
             <Typography mb={3}>
               Don&apos;t have the address of the Safe you created?{' '}
-              <Link
-                href="https://help.gnosis-safe.io/en/articles/4971293-i-don-t-remember-my-safe-address-where-can-i-find-it"
-                target="_blank"
-                rel="noreferrer"
-              >
+              <ExternalLink href="https://help.safe.globaL/en/articles/4971293-i-don-t-remember-my-safe-address-where-can-i-find-it">
                 This article explains how to find it.
-              </Link>
+              </ExternalLink>
             </Typography>
 
             <Box marginBottom={2} paddingRight={6} width={{ lg: '70%' }}>
@@ -121,14 +118,8 @@ const SetAddressStep = ({ params, onSubmit, onBack }: Props) => {
 
             <Typography mt={2}>
               By continuing you consent to the{' '}
-              <Link href="https://gnosis-safe.io/terms" target="_blank" rel="noreferrer">
-                terms of use
-              </Link>{' '}
-              and{' '}
-              <Link href="https://gnosis-safe.io/privacy" target="_blank" rel="noreferrer">
-                privacy policy
-              </Link>
-              .
+              <ExternalLink href="https://safe.global/terms">terms of use</ExternalLink> and{' '}
+              <ExternalLink href="https://safe.global/privacy">privacy policy</ExternalLink>.
             </Typography>
           </Box>
 

src/components/new-safe/CreateSafe/index.tsx

@@ -1,4 +1,4 @@
-import { Container, Typography, Grid, Link, SvgIcon } from '@mui/material'
+import { Container, Typography, Grid } from '@mui/material'
 import { useRouter } from 'next/router'
 
 import useWallet from '@/hooks/wallets/useWallet'
@@ -18,7 +18,7 @@ import type { AlertColor } from '@mui/material'
 import type { CreateSafeInfoItem } from '../CreateSafeInfos'
 import CreateSafeInfos from '../CreateSafeInfos'
 import { type ReactElement, useMemo, useState } from 'react'
-import LinkIcon from '@/public/images/sidebar/link.svg'
+import ExternalLink from '@/components/common/ExternalLink'
 
 export type NewSafeFormData = {
   name: string
@@ -64,18 +64,12 @@ const staticHints: Record<
           <>
             Not sure how many owners and confirmations you need for your Safe?
             <br />
-            <Link
+            <ExternalLink
               href="https://help.gnosis-safe.io/en/articles/4772567-what-safe-setup-should-i-use"
-              target="_blank"
-              rel="noopener noreferrer"
               fontWeight="bold"
-              display="flex"
-              alignItems="center"
-              sx={{ '&:hover svg path': { fill: 'inherit' } }}
             >
               Learn more about setting up your Safe.
-              <SvgIcon component={LinkIcon} inheritViewBox />
-            </Link>
+            </ExternalLink>
           </>
         ),
       },

src/components/new-safe/steps/Step1/index.tsx

@@ -1,4 +1,4 @@
-import { InputAdornment, Tooltip, SvgIcon, Typography, Link, Box, Divider, Button, Grid } from '@mui/material'
+import { InputAdornment, Tooltip, SvgIcon, Typography, Box, Divider, Button, Grid } from '@mui/material'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useMnemonicSafeName } from '@/hooks/useMnemonicName'
 import InfoIcon from '@/public/images/notifications/info.svg'
@@ -13,6 +13,7 @@ import useIsWrongChain from '@/hooks/useIsWrongChain'
 import NetworkWarning from '@/components/new-safe/NetworkWarning'
 import NameInput from '@/components/common/NameInput'
 import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
+import ExternalLink from '@/components/common/ExternalLink'
 
 type CreateSafeStep1Form = {
   name: string
@@ -92,13 +93,13 @@ function CreateSafeStep1({
           </Grid>
           <Typography variant="body2" mt={2}>
             By continuing, you agree to our{' '}
-            <Link href="https://safe.global/terms" target="_blank" rel="noopener noreferrer" fontWeight={700}>
+            <ExternalLink href="https://safe.global/terms" fontWeight={700}>
               terms of use
-            </Link>{' '}
+            </ExternalLink>{' '}
             and{' '}
-            <Link href="https://safe.global/privacy" target="_blank" rel="noopener noreferrer" fontWeight={700}>
+            <ExternalLink href="https://safe.global/privacy" fontWeight={700}>
               privacy policy
-            </Link>
+            </ExternalLink>
             .
           </Typography>