removed dcl-gatsby intl

package.json

@@ -33,7 +33,8 @@
       "<rootDir>/src/"
     ],
     "moduleNameMapper": {
-      "\\.(css|less|sass|scss|gif|ttf|eot|svg)$": "<rootDir>/src/__mocks__/files.ts"
+      "\\.(css|less|sass|scss|gif|ttf|eot|svg)$": "<rootDir>/src/__mocks__/files.ts",
+      "^gatsby-page-utils/(.*)$": "gatsby-page-utils/dist/$1"
     }
   },
   "repository": {
@@ -64,6 +65,7 @@
     "ethers": "^5.7.1",
     "flickity": "^2.3.0",
     "gatsby": "^4.10.1",
+    "gatsby-link": "^4.23.0",
     "gatsby-plugin-image": "^2.10.0",
     "gatsby-plugin-manifest": "^4.10.1",
     "gatsby-plugin-offline": "^5.10.1",

src/components/Category/CategoryBanner.tsx

@@ -4,10 +4,10 @@ import classNames from 'classnames'
 import Link from 'decentraland-gatsby/dist/components/Text/Link'
 import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
 import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
-import { navigate } from 'decentraland-gatsby/dist/plugins/intl'
 
 import { HiringType, PoiType, ProposalType, isHiringType } from '../../entities/Proposal/types'
 import useFormatMessage from '../../hooks/useFormatMessage'
+import { navigate } from '../../utils/locations'
 import AddPoi from '../Icon/ProposalCategories/AddPoi'
 import BanName from '../Icon/ProposalCategories/BanName'
 import Catalyst from '../Icon/ProposalCategories/Catalyst'

src/components/Category/CategoryOption.tsx

@@ -3,7 +3,6 @@ import React, { Fragment, useEffect, useMemo, useState } from 'react'
 import { useLocation } from '@reach/router'
 import classNames from 'classnames'
 import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
-import { navigate } from 'decentraland-gatsby/dist/plugins/intl'
 import isNumber from 'lodash/isNumber'
 import toSnakeCase from 'lodash/snakeCase'
 
@@ -12,6 +11,7 @@ import { getNewGrantsCategoryIcon } from '../../entities/Grant/utils'
 import { ProposalType, toProposalType } from '../../entities/Proposal/types'
 import { CategoryIconVariant } from '../../helpers/styles'
 import useFormatMessage from '../../hooks/useFormatMessage'
+import { navigate } from '../../utils/locations'
 import Arrow from '../Icon/Arrow'
 import All from '../Icon/ProposalCategories/All'
 import Grant from '../Icon/ProposalCategories/Grant'

src/components/Category/CategoryPill.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import { Link } from '@reach/router'
 import classNames from 'classnames'
 import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media'
 
 import { ProposalType } from '../../entities/Proposal/types'
 import locations from '../../utils/locations'
+import Link from '../Common/Link'
 import Pill, { PillColor } from '../Common/Pill'
 
 const ColorsConfig: Record<ProposalType, PillColor> = {
@@ -45,14 +45,14 @@ const CategoryPill = ({ className, proposalType, size = 'default', isLink }: Pro
   return (
     <>
       <Mobile>
-        <Link to={href}>
+        <Link href={href}>
           <Pill style="light" color={colorsConfig} className={pillClassNames} size="small">
             {getProposalTypeShortLabel(proposalType)}
           </Pill>
         </Link>
       </Mobile>
       <NotMobile>
-        <Link to={href}>
+        <Link href={href}>
           <Pill style="light" color={colorsConfig} className={pillClassNames} size={size}>
             {getProposalTypeLabel(proposalType)}
           </Pill>

src/components/Common/Link.css

@@ -0,0 +1,14 @@
+.Link {
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--primary);
+}
+
+.Link.Link--pointer {
+  cursor: pointer;
+}
+
+.Link .icon {
+  font-size: 19px;
+  vertical-align: middle;
+}

src/components/Common/Link.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useMemo } from 'react'
+
+import classNames from 'classnames'
+
+import { isLocalLink, navigate } from '../../utils/locations'
+
+import './Link.css'
+
+export type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+export default React.memo(function Link({ target, rel, href, onClick, ...props }: LinkProps) {
+  const isLocal = useMemo(() => isLocalLink(href), [href])
+  const linkTarget = useMemo(() => (!target && !isLocal ? '_blank' : target || undefined), [isLocal, target])
+  const linkRel = useMemo(() => (!isLocal ? classNames(rel, 'noopener', 'noreferrer') : rel), [isLocal, rel])
+  const onClickHandler = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (onClick) {
+        onClick(e)
+      }
+      if (isLocal && href) {
+        e.preventDefault()
+        navigate(href)
+      }
+    },
+    [href, isLocal, onClick]
+  )
+
+  return (
+    <a
+      {...props}
+      className={classNames('Link', (onClick || href) && 'Link--pointer', props.className)}
+      target={linkTarget}
+      rel={linkRel}
+      href={href}
+      onClick={onClickHandler}
+    />
+  )
+})

src/components/Common/LinkWithTitle.tsx

@@ -19,6 +19,7 @@ const fetchTitle = async (url: string) => {
     return response.title || ''
   } catch (error) {
     console.error(error)
+    return ''
   }
 }
 

src/components/Delegation/DelegatorCardProfile.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { useIntl } from 'react-intl'
 
-import { Link } from '@reach/router'
-
 import useFormatMessage from '../../hooks/useFormatMessage'
 import locations from '../../utils/locations'
+import Link from '../Common/Link'
 import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline'
 import Username from '../User/Username'
 
@@ -20,7 +19,7 @@ function DelegatorCardProfile({ address, vp }: Props) {
   const intl = useIntl()
 
   return (
-    <Link className="DelegatorCardProfile" to={locations.profile({ address })}>
+    <Link className="DelegatorCardProfile" href={locations.profile({ address })}>
       <div className="DelegatorCardProfile__Section">
         <Username className="DelegatorCardProfile__Avatar" address={address} variant="avatar" size="medium" />
         <div>

src/components/GrantRequest/GrantRequestSectionCard.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import Skeleton from 'react-loading-skeleton'
 
-import { Link } from '@reach/router'
 import classNames from 'classnames'
 
+import Link from '../Common/Link'
 import ExclamationCircle from '../Icon/ExclamationCircle'
 
 import './GrantRequestSectionCard.css'
@@ -35,7 +35,7 @@ export const GrantRequestSectionCard = ({
         error && 'GrantRequestSectionCard__Error',
         href && 'GrantRequestSectionCard__Hoverable'
       )}
-      to={href || ''}
+      href={href || ''}
     >
       <div className="GrantRequestSectionCard__Header">
         <div className="GrantRequestSectionCard__HeaderTitle">

src/components/Grants/GrantBeneficiaryItem.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { useIntl } from 'react-intl'
 
-import { Link } from '@reach/router'
 import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
 import { Card } from 'decentraland-ui/dist/components/Card/Card'
 import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media'
@@ -12,6 +11,7 @@ import { isProposalInCliffPeriod } from '../../entities/Proposal/utils'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import { abbreviateTimeDifference, formatDate } from '../../utils/date/Time'
 import locations from '../../utils/locations'
+import Link from '../Common/Link'
 import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline'
 import Username from '../User/Username'
 

src/components/Grants/GrantCard/GrantCard.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 
-import { Link } from '@reach/router'
 import classNames from 'classnames'
 
 import { GrantWithUpdate } from '../../../entities/Proposal/types'
 import { isProposalInCliffPeriod } from '../../../entities/Proposal/utils'
 import locations from '../../../utils/locations'
+import Link from '../../Common/Link'
 import ProposalUpdate from '../../Proposal/Update/ProposalUpdate'
 
 import CliffProgress from './CliffProgress'
@@ -26,7 +26,7 @@ const GrantCard = ({ grant, hoverable = false }: Props) => {
 
   return (
     <Link
-      to={locations.proposal(id)}
+      href={locations.proposal(id)}
       onMouseEnter={() => hoverable && setExpanded(true)}
       onMouseLeave={() => hoverable && setExpanded(false)}
       className={classNames('GrantCard', hoverable && 'GrantCard__Expanded')}

src/components/Grants/GrantsPastItem.tsx

@@ -1,13 +1,12 @@
 import React, { useCallback } from 'react'
 
-import { navigate } from 'decentraland-gatsby/dist/plugins/intl'
 import { Table } from 'decentraland-ui/dist/components/Table/Table'
 
 import { ProposalGrantCategory } from '../../entities/Grant/types'
 import { Grant } from '../../entities/Proposal/types'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import Time from '../../utils/date/Time'
-import locations from '../../utils/locations'
+import locations, { navigate } from '../../utils/locations'
 import ChevronRight from '../Icon/ChevronRight'
 
 import GrantPill from './GrantPill'

src/components/Grants/RequestBanner.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 
-import { navigate } from 'decentraland-gatsby/dist/plugins/intl/utils'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 
 import { ProposalType } from '../../entities/Proposal/types'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import locations from '../../utils/locations'
+import locations, { navigate } from '../../utils/locations'
 
 import './RequestBanner.css'
 

src/components/Home/MainBanner.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react'
 
-import { Link } from '@reach/router'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 
 import { DAO_DISCORD_URL, DOCS_URL } from '../../constants'
 import useFormatMessage from '../../hooks/useFormatMessage'
+import Link from '../Common/Link'
 import CloseCircle from '../Icon/CloseCircle'
 
 import './MainBanner.css'
@@ -40,10 +40,10 @@ const MainBanner = () => {
       <h2 className="MainBanner__Title">{t('page.home.main_banner.title')}</h2>
       <p className="MainBanner__Description">{t('page.home.main_banner.description')}</p>
       <div className="MainBanner__ButtonsContainer">
-        <Button as={Link} to={DAO_DISCORD_URL} className="MainBanner__Button MainBanner__DiscordButton">
+        <Button as={Link} href={DAO_DISCORD_URL} className="MainBanner__Button MainBanner__DiscordButton">
           {t('page.home.main_banner.discord_button')}
         </Button>
-        <Button as={Link} to={DOCS_URL} className="MainBanner__Button MainBanner__DocsButton">
+        <Button as={Link} href={DOCS_URL} className="MainBanner__Button MainBanner__DocsButton">
           {t('page.home.main_banner.docs_button')}
         </Button>
       </div>

src/components/Home/MetricsCard.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 
-import { Link } from '@reach/router'
 import { Card } from 'decentraland-ui/dist/components/Card/Card'
 
+import Link from '../Common/Link'
+
 import HomeLoader from './HomeLoader'
 import './MetricsCard.css'
 
@@ -17,7 +18,7 @@ interface Props {
 
 const MetricsCard = ({ href, category, title, description, isLoading, loadingLabel }: Props) => {
   return (
-    <Card as={Link} to={href} className="MetricsCard">
+    <Card as={Link} href={href} className="MetricsCard">
       {!isLoading && (
         <div className="MetricsCard__Container">
           <p className="MetricsCard__Category">{category}</p>

src/components/Home/OpenProposal.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react'
 
-import { Link } from '@reach/router'
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
 import { Mobile } from 'decentraland-ui/dist/components/Media/Media'
 import isEmpty from 'lodash/isEmpty'
@@ -13,6 +12,7 @@ import useProposalVotes from '../../hooks/useProposalVotes'
 import Time from '../../utils/date/Time'
 import locations from '../../utils/locations'
 import CategoryPill from '../Category/CategoryPill'
+import Link from '../Common/Link'
 import ChevronRight from '../Icon/ChevronRight'
 import Username from '../User/Username'
 
@@ -51,7 +51,7 @@ const OpenProposal = ({ proposal }: Props) => {
   })
 
   return (
-    <Link className="OpenProposal" to={locations.proposal(proposal.id)}>
+    <Link className="OpenProposal" href={locations.proposal(proposal.id)}>
       <div className="OpenProposal__Section">
         <Username className="OpenProposal__Avatar" address={user} variant="avatar" size="medium" />
         <div>

src/components/Layout/BurgerMenu/MobileNavigation.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 
 import Link from 'decentraland-gatsby/dist/components/Text/Link'
-import { navigate } from 'decentraland-gatsby/dist/plugins/intl'
 import prevent from 'decentraland-gatsby/dist/utils/react/prevent'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Header } from 'decentraland-ui/dist/components/Header/Header'
 
 import useFormatMessage from '../../../hooks/useFormatMessage'
-import locations from '../../../utils/locations'
+import locations, { navigate } from '../../../utils/locations'
 import { NavigationProps, NavigationTab } from '../Navigation'
 
 import './MobileNavigation.css'

src/components/Layout/ContentLayout.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
 
 import classNames from 'classnames'
-import { navigate } from 'decentraland-gatsby/dist/plugins/intl'
 import { Back } from 'decentraland-ui/dist/components/Back/Back'
 import { Container } from 'decentraland-ui/dist/components/Container/Container'
 
 import usePreventNavigation from '../../hooks/usePreventNavigation'
-import locations from '../../utils/locations'
+import locations, { navigate } from '../../utils/locations'
 
 import './ContentLayout.css'
 

src/components/Layout/Layout.tsx

@@ -4,7 +4,6 @@ import { ChainId } from '@dcl/schemas/dist/dapps/chain-id'
 // import WalletSelectorModal from 'decentraland-gatsby/dist/components/Modal/WalletSelectorModal'
 // import WrongNetworkModal from 'decentraland-gatsby/dist/components/Modal/WrongNetworkModal'
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
-import { DecentralandIntlContext } from 'decentraland-gatsby/dist/plugins/intl/types'
 import env from 'decentraland-gatsby/dist/utils/env'
 import { Footer } from 'decentraland-ui/dist/components/Footer/Footer'
 import { Locale } from 'decentraland-ui/dist/components/LanguageIcon/LanguageIcon'
@@ -25,15 +24,10 @@ export function getSupportedChainIds(): ChainId[] {
 
 export type LayoutProps = Omit<PageProps, 'children'> & {
   rightMenu: NavbarProps['rightMenu']
-  pageContext?: {
-    intl?: DecentralandIntlContext
-  }
   children?: React.ReactNode
 }
 
-export default function Layout({ children, pageContext, ...props }: LayoutProps) {
-  const locale = pageContext?.intl?.locale || 'en'
-  const locales = pageContext?.intl?.locales || ['en']
+export default function Layout({ children, ...props }: LayoutProps) {
   const [, state] = useAuthContext()
 
   const handleChangeLocal = function (_: React.SyntheticEvent<HTMLElement>, data: DropdownProps) {
@@ -70,12 +64,7 @@ export default function Layout({ children, pageContext, ...props }: LayoutProps)
         onConnect={(providerType, chainId) => state.connect(providerType, chainId)}
         onClose={() => state.select(false)}
       /> */}
-      <Footer
-        locale={locale as Locale}
-        locales={locales as Locale[]}
-        isFullWidth={false}
-        onChange={handleChangeLocal}
-      />
+      <Footer locale="en" locales={['en']} isFullWidth={false} onChange={handleChangeLocal} />
     </>
   )
 }