Merge pull request #221 from ethereum/remaining-todos

Remaining small TODOs

Author: nhsz

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/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) {