Merge branch 'dev' into get-eth-page

Author: corwintines

public/favicon.ico

@@ -1,3 +1,5 @@
+import { extname } from "path"
+
 import { Flex } from "@chakra-ui/react"
 
 import { Image, type ImageProps } from "@/components/Image"
@@ -34,6 +36,9 @@ const MarkdownImage = ({
     imageHeight = CONTENT_IMAGES_MAX_WIDTH / imageAspectRatio
   }
 
+  const fileExt = extname(transformedSrc).toLowerCase()
+  const isAnimated = [".gif", ".apng", ".webp"].includes(fileExt)  
+
   return (
     // display the wrapper as a `span` to avoid dom nesting warnings as mdx
     // sometimes wraps images in `p` tags
@@ -45,6 +50,7 @@ const MarkdownImage = ({
           height={imageHeight}
           loading="lazy"
           src={transformedSrc}
+          unoptimized={isAnimated}
           {...rest}
         />
       </Link>

src/components/MarkdownImage.tsx

@@ -98,10 +98,6 @@ const PageMetadata: React.FC<IProps> = ({
         />
       ))}
       <link rel="canonical" key={canonical} href={canonical} />
-      {/* favicon */}
-      <link rel="icon" type="image/x-icon" href="favicon.ico" />
-      {/* TODO: Add manifest */}
-      {/* <link rel="manifest" href="/manifest.json" /> */}
     </Head>
   )
 }

src/components/PageMetadata.tsx

@@ -1,38 +1,29 @@
-import { useContext } from "react"
 import { useTranslation } from "next-i18next"
 import { Box, Flex, ListItem, Stack, Text } from "@chakra-ui/react"
 
-import allQuizzesData from "../../data/quizzes"
-import { QuizzesListItem } from "../../types"
-import { trackCustomEvent } from "../../utils/matomo"
+import type { QuizzesSection } from "@/lib/types"
+
 import { Button } from "../Buttons"
 import { GreenTickIcon } from "../icons/quiz"
 import Tag from "../Tag"
 import Translation from "../Translation"
 
-import { QuizzesHubContext } from "./context"
-
-const QuizItem: React.FC<QuizzesListItem> = (props) => {
-  const { id, level, quizHandler, modalHandler } = props
-  const {
-    userStats: { completed },
-  } = useContext(QuizzesHubContext)
-  const numberOfQuestions = allQuizzesData[id].questions.length
-  const isCompleted = JSON.parse(completed)[id][0]
+export type QuizzesListItemProps = Omit<QuizzesSection, "id"> & {
+  isCompleted: boolean
+  numberOfQuestions: number
+  titleId: string
+  handleStart: () => void
+}
 
+const QuizItem = ({
+  level,
+  isCompleted = false,
+  titleId,
+  numberOfQuestions,
+  handleStart,
+}: QuizzesListItemProps) => {
   const { t } = useTranslation("learn-quizzes")
 
-  const handleStart = () => {
-    quizHandler(id)
-    modalHandler(true)
-
-    trackCustomEvent({
-      eventCategory: "quiz_hub_events",
-      eventAction: "quizzes click",
-      eventName: `${id}`,
-    })
-  }
-
   return (
     <ListItem
       color={isCompleted ? "body.medium" : "text"}
@@ -57,7 +48,7 @@ const QuizItem: React.FC<QuizzesListItem> = (props) => {
                 content: 'counter(list-counter) ". "',
               }}
             >
-              <Translation id={allQuizzesData[id].title} />
+              <Translation id={titleId} />
             </Text>
 
             {/* Show green tick if quizz was completed only */}
@@ -84,7 +75,7 @@ const QuizItem: React.FC<QuizzesListItem> = (props) => {
             w={{ base: "full", lg: "auto" }}
             onClick={handleStart}
           >
-            <Translation id="start" />
+            <Translation id="learn-quizzes:start" />
           </Button>
         </Box>
       </Flex>