Fix hydration and pre-load english translation

ensdomains · Nov 10, 2024 · 1f43589 · 1f43589
1 parent c6d94c2
commit 1f43589
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/src/components/pages/AnnouncementBanner.tsx b/src/components/pages/AnnouncementBanner.tsx
@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components'
 
 import { Button, Typography } from '@ensdomains/thorin'
 
-const Container = styled(Link)(
+const Container = styled.div(
   ({ theme }) => css`
     display: flex;
     flex-direction: column;
@@ -51,19 +51,21 @@ export const AnnouncementBanner = () => {
   const { t } = useTranslation('ensv2')
 
   return (
-    <Container href="/ens-v2">
-      <TextContainer>
-        <img src="/migrate/confetti.png" alt="" height={33} width={33} />
-        <Text>
-          <Typography fontVariant="largeBold">{t('banner.title')}</Typography>
-          <Typography fontVariant="small" color="grey">
-            {t('banner.caption')}
-          </Typography>
-        </Text>
-      </TextContainer>
-      <Button as="a" href="/ens-v2" colorStyle="greenPrimary" width="max">
-        {t('banner.cta')}
-      </Button>
-    </Container>
+    <Link href="/ens-v2" legacyBehavior passHref>
+      <Container>
+        <TextContainer>
+          <img src="/migrate/confetti.png" alt="" height={33} width={33} />
+          <Text>
+            <Typography fontVariant="largeBold">{t('banner.title')}</Typography>
+            <Typography fontVariant="small" color="grey">
+              {t('banner.caption')}
+            </Typography>
+          </Text>
+        </TextContainer>
+        <Button as="a" href="/ens-v2" colorStyle="greenPrimary" width="max">
+          {t('banner.cta')}
+        </Button>
+      </Container>
+    </Link>
   )
 }
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -6,6 +6,7 @@ import { initReactI18next } from 'react-i18next'
 import address from '../public/locales/en/address.json'
 import common from '../public/locales/en/common.json'
 import dnssec from '../public/locales/en/dnssec.json'
+import ensv2 from '../public/locales/en/ensv2.json'
 import names from '../public/locales/en/names.json'
 import profile from '../public/locales/en/profile.json'
 import register from '../public/locales/en/register.json'
@@ -33,6 +34,7 @@ i18n
       'register',
       'settings',
       'transactionFlow',
+      'ensv2',
     ],
     react: {
       useSuspense: false,
@@ -48,5 +50,6 @@ i18n.addResourceBundle('en', 'profile', profile)
 i18n.addResourceBundle('en', 'register', register)
 i18n.addResourceBundle('en', 'settings', settings)
 i18n.addResourceBundle('en', 'transactionFlow', transactionFlow)
+i18n.addResourceBundle('en', 'ensv2', ensv2)
 
 export default i18n
diff --git a/src/pages/ens-v2.tsx b/src/pages/ens-v2.tsx
@@ -296,10 +296,10 @@ export default function ENSv2() {
           {t('announcement.title')}
         </Typography>
         <Carousel>
-          <AnnouncementSlide
+          {/* <AnnouncementSlide
             title={t('announcement.l2.title')}
             text={t('announcement.l2.caption')}
-          />
+          /> */}
           <AnnouncementSlide
             title={t('announcement.ensv2.title')}
             text={t('announcement.ensv2.caption')}