Merge branch 'dev' into side-nav-fixes

Author: corwintines

src/components/Codeblock.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react"
+import React, { useState } from "react"
+import { useTranslation } from "next-i18next"
 import Highlight, {
   defaultProps,
   Language,
@@ -9,9 +10,9 @@ import { Box, BoxProps, Flex, useColorModeValue } from "@chakra-ui/react"
 
 import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
-
 // https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
-;(typeof global !== "undefined" ? global : window).Prism = Prism
+;
+(typeof global !== "undefined" ? global : window).Prism = Prism
 require("prismjs/components/prism-solidity")
 
 const LINES_BEFORE_COLLAPSABLE = 8
@@ -217,6 +218,7 @@ const Codeblock: React.FC<IProps> = ({
   codeLanguage,
   fromHomepage = false,
 }) => {
+  const { t } = useTranslation('common')
   const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)
 
   const codeText = React.Children.toArray(children)
@@ -321,13 +323,9 @@ const Codeblock: React.FC<IProps> = ({
                     totalLines - 1 > LINES_BEFORE_COLLAPSABLE && (
                       <TopBarItem onClick={() => setIsCollapsed(!isCollapsed)}>
                         {isCollapsed ? (
-                          // TODO: Implement after intl
-                          // <Translation id="show-all" />
-                          <>Show all</>
+                          t("show-all")
                         ) : (
-                          // TODO: Implement after intl
-                          // <Translation id="show-less" />
-                          <>Show less</>
+                          t("show-less")
                         )}
                       </TopBarItem>
                     )}
@@ -338,16 +336,12 @@ const Codeblock: React.FC<IProps> = ({
                           {!isCopied ? (
                             <>
                               <Emoji text=":clipboard:" fontSize="md" />{" "}
-                              {/* TODO: Implement after intl */}
-                              {/* <Translation id="copy" /> */}
-                              Copy
+                               {t("copy")}
                             </>
                           ) : (
                             <>
                               <Emoji text=":white_check_mark:" fontSize="md" />{" "}
-                              {/* TODO: Implement after intl */}
-                              {/* <Translation id="copied" /> */}
-                              Copied
+                              {t("copied")}
                             </>
                           )}
                         </TopBarItem>

src/components/ExpandableCard.tsx

@@ -34,7 +34,7 @@ const ExpandableCard = ({
   eventName = "",
 }: ExpandableCardProps) => {
   const [isVisible, setIsVisible] = useState(false)
-  const { t } = useTranslation("common") // TODO: Double-check namespace
+  const { t } = useTranslation("common")
   const matomo = {
     eventAction,
     eventCategory: `ExpandableCard${eventCategory}`,

src/components/Staking/StakingProductsCardGrid.tsx

@@ -25,7 +25,6 @@ import {
   UnknownProductGlyphIcon,
   WarningProductGlyphIcon,
 } from "@/components/icons/staking"
-import Translation from "@/components/Translation"
 
 import { MatomoEventOptions } from "@/lib/utils/matomo"
 
@@ -276,8 +275,7 @@ const StakingProductCard: React.FC<ICardProps> = ({
         </List>
       </Box>
       <Box {...PADDED_DIV_STYLE}>
-        {/* TODO: Matomo - re-enable */}
-        <ButtonLink to={url} /* customEventOptions={matomo} */ width="100%">
+        <ButtonLink to={url} customEventOptions={matomo} width="100%">
           {t("page-staking-products-get-started")}
         </ButtonLink>
       </Box>

src/components/TranslationBanner.tsx

@@ -9,14 +9,12 @@ import Emoji from "./Emoji"
 
 export interface IProps {
   shouldShow: boolean
-  isPageRightToLeft: boolean
   originalPagePath: string
   isPageContentEnglish: boolean
 }
 
 const TranslationBanner: React.FC<IProps> = ({
   shouldShow,
-  isPageRightToLeft,
   originalPagePath,
   isPageContentEnglish,
 }) => {
@@ -60,7 +58,6 @@ const TranslationBanner: React.FC<IProps> = ({
       >
         <Flex
           flexDirection="column"
-          alignItems={isPageRightToLeft ? "flex-end" : "flex-start"}
           m={4}
           mt={{ base: 10, sm: 4 }}
         >
@@ -115,7 +112,7 @@ const TranslationBanner: React.FC<IProps> = ({
         <CloseButton
           position="absolute"
           top="0"
-          insetInlineEnd={isPageRightToLeft ? "auto" : 0}
+          insetInlineEnd="0"
           margin={2}
           color="secondary"
           _hover={{

src/components/TranslationBannerLegal.tsx

@@ -14,14 +14,12 @@ import Translation from "./Translation"
 
 export interface IProps {
   shouldShow: boolean
-  isPageRightToLeft: boolean
   originalPagePath: string
 }
 
 const TranslationBannerLegal: React.FC<IProps> = ({
   shouldShow,
   originalPagePath,
-  isPageRightToLeft,
 }) => {
   // Default to isOpen being false, and let the useEffect set this.
   const [isOpen, setIsOpen] = useState(false)
@@ -61,12 +59,7 @@ const TranslationBannerLegal: React.FC<IProps> = ({
           md: "rgba(0, 0, 0, 0.16) 0px 2px 4px 0px",
         }}
       >
-        <Flex
-          direction="column"
-          align={isPageRightToLeft ? "flex-end" : "flex-start"}
-          m={4}
-          mt={{ base: 10, sm: 4 }}
-        >
+        <Flex direction="column" m={4} mt={{ base: 10, sm: 4 }}>
           <Flex
             align={{ base: "flex-start", sm: "center" }}
             flexDirection={{ base: "column-reverse", sm: "row" }}
@@ -111,7 +104,7 @@ const TranslationBannerLegal: React.FC<IProps> = ({
         <CloseButton
           position="absolute"
           top={0}
-          insetInlineEnd={isPageRightToLeft ? "auto" : 0}
+          insetInlineEnd="0"
           margin={4}
           color="secondary"
           _hover={{

src/components/UpcomingEventsList.tsx

@@ -3,16 +3,15 @@ import { Box } from "@chakra-ui/react"
 
 import Translation from "@/components/Translation"
 
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
 import events from "../data/community-events.json"
 
 import { Button } from "./Buttons"
 import EventCard from "./EventCard"
 import InfoBanner from "./InfoBanner"
 import InlineLink from "./Link"
 
-// TODO: add trackCustomEvent when util is migrated
-// import { trackCustomEvent } from "../utils/matomo"
-
 interface ICommunityEventData {
   title: string
   to: string
@@ -88,12 +87,11 @@ const UpcomingEventsList: React.FC = () => {
   const loadMoreEvents = () => {
     setMaxRange((counter) => counter + eventsPerLoad)
     setIsVisible(maxRange + eventsPerLoad <= orderedUpcomingEvents.length)
-    // TODO: add trackCustomEvent when util is migrated
-    // trackCustomEvent({
-    //   eventCategory: "more events button",
-    //   eventAction: "click",
-    //   eventName: "load more",
-    // })
+    trackCustomEvent({
+      eventCategory: "more events button",
+      eventAction: "click",
+      eventName: "load more",
+    })
   }
 
   if (orderedUpcomingEvents.length === 0) {

src/layouts/RootLayout.tsx

@@ -3,7 +3,6 @@ import { join } from "path"
 import { useRouter } from "next/router"
 import { Container } from "@chakra-ui/react"
 
-import { Lang } from "@/lib/types"
 import { Root } from "@/lib/interfaces"
 
 import FeedbackWidget from "@/components/FeedbackWidget"
@@ -13,7 +12,6 @@ import TranslationBanner from "@/components/TranslationBanner"
 import TranslationBannerLegal from "@/components/TranslationBannerLegal"
 
 import { toPosixPath } from "@/lib/utils/relativePath"
-import { isLangRightToLeft } from "@/lib/utils/translations"
 
 import { DEFAULT_LOCALE } from "@/lib/constants"
 
@@ -47,8 +45,6 @@ export const RootLayout = ({
       (contentNotTranslated && !isPageLanguageEnglish)) &&
     !isLegal
   const shouldShowLegalTranslationBanner = isLegal && !isPageLanguageEnglish
-
-  const isPageRightToLeft = isLangRightToLeft(locale as Lang)
   const originalPagePath = toPosixPath(join(DEFAULT_LOCALE, asPath))
 
   return (
@@ -58,13 +54,11 @@ export const RootLayout = ({
       <TranslationBanner
         shouldShow={shouldShowTranslationBanner}
         isPageContentEnglish={contentNotTranslated}
-        isPageRightToLeft={isPageRightToLeft}
         originalPagePath={originalPagePath}
       />
 
       <TranslationBannerLegal
         shouldShow={shouldShowLegalTranslationBanner}
-        isPageRightToLeft={isPageRightToLeft}
         originalPagePath={originalPagePath}
       />