Merge branch 'dev' into tag-migration

Author: pettinarip

src/components/CardList.tsx

@@ -1,24 +1,17 @@
-import Image, { type ImageProps } from "next/image"
+import TwImage, { type ImageProps } from "next/image"
 import type { ReactNode } from "react"
-import {
-  Box,
-  type BoxProps,
-  Flex,
-  HStack,
-  LinkBox,
-  LinkOverlay,
-  type StackProps,
-  useColorModeValue,
-} from "@chakra-ui/react"
 
-import { BaseLink } from "@/components/Link"
+import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 
+import { cn } from "@/lib/utils/cn"
 import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 import * as url from "@/lib/utils/url"
 
+import { BaseLink } from "./ui/Link"
+
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
-export type CardListItem = {
+export type CardProps = {
   title?: ReactNode
   description?: ReactNode
   caption?: ReactNode
@@ -27,93 +20,77 @@ export type CardListItem = {
   image?: ImageProps["src"]
   imageWidth?: number
   alt?: string
+  className?: string
+  onClick?: () => void
 }
 
-const CardContainer = (props: StackProps) => (
-  <HStack
-    spacing={4}
-    p={4}
-    color="text"
-    border="1px solid"
-    borderColor="border"
-    _hover={{
-      borderRadius: "base",
-      boxShadow: "0 0 1px var(--eth-colors-primary)",
-      background: "tableBackgroundHover",
-    }}
-    {...props}
-  />
-)
-
-type CardProps = CardListItem & Omit<StackProps, "title" | "id">
-
 const Card = ({
   title,
   description,
   caption,
   link,
   image,
-  imageWidth = 20, // Set 20px as default image width, can be overridden if needed
+  className,
   alt,
+  onClick,
+  imageWidth = 20,
   ...props
 }: CardProps) => {
-  const { flipForRtl } = useRtlFlip()
+  const { twFlipForRtl } = useRtlFlip()
   const isLink = !!link
   const isExternal = url.isExternal(link || "")
 
-  const descriptionColor = useColorModeValue("gray.500", "gray.400")
-
   return (
-    <CardContainer {...props}>
-      {image && <Image src={image} alt={alt ?? ""} width={imageWidth} />}
-      <Flex flex="1 1 75%" direction="column">
+    <div
+      className={cn(
+        "text-text flex flex-row items-center gap-4 border p-4",
+        "transition-all duration-200",
+        "hover:bg-background-highlight",
+        className
+      )}
+      onClick={onClick}
+      {...props}
+    >
+      {image && <TwImage src={image} alt={alt ?? ""} width={imageWidth} />}
+      <div className="flex flex-1 basis-3/4 flex-col">
         {isLink ? (
-          <LinkOverlay
-            as={BaseLink}
-            href={link}
-            isExternal={isExternal}
-            hideArrow
-            color="text"
-            textDecoration="none"
-            _hover={{ textDecoration: "none" }}
-          >
-            {title}
+          <LinkOverlay asChild>
+            <BaseLink href={link} hideArrow className="text-body no-underline">
+              {title}
+            </BaseLink>
           </LinkOverlay>
         ) : (
-          <Box>{title}</Box>
+          <div>{title}</div>
         )}
 
-        <Box fontSize="sm" mb={0} color={descriptionColor}>
-          {description}
-        </Box>
-      </Flex>
+        <div className="mb-0 text-sm text-body-medium">{description}</div>
+      </div>
       {caption && (
-        <Flex flex="1 0 25%" align="center" wrap="wrap" me={4}>
-          <Box fontSize="sm" mb={0} opacity={0.6}>
-            {caption}
-          </Box>
-        </Flex>
+        <div className="me-4 flex flex-[1_0_25%] flex-wrap items-center">
+          <div className="mb-0 text-sm opacity-60">{caption}</div>
+        </div>
       )}
-      {isExternal && <Box transform={flipForRtl}>↗</Box>}
-    </CardContainer>
+      {isExternal && <span className={twFlipForRtl}>↗</span>}
+    </div>
   )
 }
 
-export type CardListProps = BoxProps & {
+export type CardListProps = {
   items: CardProps[]
   imageWidth?: number
   clickHandler?: (idx: string | number) => void
   customEventOptions?: MatomoEventOptions
+  className?: string
 }
 
 const CardList = ({
   items,
   imageWidth,
   clickHandler = () => null,
   customEventOptions,
-  ...props
+  className,
 }: CardListProps) => (
-  <Box bg="background.base" w="full" {...props}>
+  <div className={cn("w-full bg-background", className)}>
     {items.map((listItem, idx) => {
       const { link, id } = listItem
       const isLink = !!link
@@ -123,18 +100,19 @@ const CardList = ({
           <Card {...listItem} imageWidth={imageWidth} />
         </LinkBox>
       ) : (
-        <Card
-          key={idx}
-          onClick={() => {
-            customEventOptions && trackCustomEvent(customEventOptions)
-            clickHandler(idx)
-          }}
-          mb={4}
-          {...listItem}
-        />
+        <div key={idx}>
+          <Card
+            onClick={() => {
+              customEventOptions && trackCustomEvent(customEventOptions)
+              clickHandler(idx)
+            }}
+            className="mb-4"
+            {...listItem}
+          />
+        </div>
       )
     })}
-  </Box>
+  </div>
 )
 
 export default CardList

src/components/MergeArticleList.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from "next-i18next"
 
-import CardList, { type CardListItem } from "@/components/CardList"
+import CardList, { type CardProps } from "@/components/CardList"
 
 const MergeArticleList = () => {
   const { t } = useTranslation(["page-upgrades", "page-upgrades-index"])
 
-  const reads: CardListItem[] = [
+  const reads: CardProps[] = [
     {
       title: t("page-upgrades-index:page-upgrade-article-title-ethmerge"),
       description: t(

src/components/Simulator/ClickAnimation.tsx

@@ -1,21 +1,26 @@
-import React, { useEffect, useState } from "react"
+import { type ReactNode, useEffect, useState } from "react"
 import { motion, type Transition } from "framer-motion"
-import { createIcon, Flex, Text, TextProps } from "@chakra-ui/react"
+
+import { cn } from "@/lib/utils/cn"
+
+import { createIconBase } from "../icons/icon-base"
+import { Flex } from "../ui/flex"
 
 const MotionFlex = motion(Flex)
 
 const DownArrowLong = motion(
-  createIcon({
+  createIconBase({
     displayName: "DownArrowLong",
     viewBox: "0 0 8 24",
-    defaultProps: { fill: "currentColor" },
-    path: (
+    className: "fill-current",
+    children: (
       <path d="M3.64645 23.3536C3.84171 23.5488 4.15829 23.5488 4.35355 23.3536L7.53553 20.1716C7.7308 19.9763 7.7308 19.6597 7.53553 19.4645C7.34027 19.2692 7.02369 19.2692 6.82843 19.4645L4 22.2929L1.17157 19.4645C0.976312 19.2692 0.659729 19.2692 0.464467 19.4645C0.269205 19.6597 0.269205 19.9763 0.464467 20.1716L3.64645 23.3536ZM3.5 2.18557e-08L3.5 23L4.5 23L4.5 -2.18557e-08L3.5 2.18557e-08Z" />
     ),
   })
 )
 
-type ClickAnimationProps = Pick<TextProps, "children"> & {
+type ClickAnimationProps = {
+  children: ReactNode
   below?: boolean
   delay?: number
 }
@@ -34,33 +39,28 @@ export const ClickAnimation = ({
     times: [0, 0.25, 0.5],
     repeat: Infinity,
   }
-  const top = below ? "calc(100% + 0.5rem)" : "auto"
-  const bottom = below ? "auto" : "calc(100% + 1rem)"
+  const topClass = below ? "top-[calc(100%_+_0.5rem)]" : "top-auto"
+  const bottomClass = below ? "bottom-auto" : "bottom-[calc(100%_+_1rem)]"
   const y = below ? [0, 20, 0] : [0, -20, 0]
-  const direction = below ? "column-reverse" : "column"
-  const transformOrigin = below ? { bottom: 0 } : { top: 0 }
+  const directionClass = below ? "flex-col-reverse" : "flex-col"
   const rotate = below ? 180 : 0
   return visible ? (
     <MotionFlex
+      className={cn(
+        "absolute inset-x-0 justify-center text-primary",
+        topClass,
+        bottomClass
+      )}
       animate={{ opacity: [0, 1] }} // Fade in once
-      position="absolute"
-      top={top}
-      justify="center"
-      bottom={bottom}
-      insetInline={0}
-      color="primary.base"
+      data-testid="click-animation-el"
     >
       <MotionFlex
-        direction={direction}
-        alignItems="center"
+        className={cn("items-center", directionClass)}
         animate={{ y }} // Slide up and down
         transition={transition}
       >
-        <Text fontSize="xs" fontStyle="italic" textTransform="lowercase" m={0}>
-          {children}
-        </Text>
+        <p className="m-0 text-xs lowercase italic">{children}</p>
         <DownArrowLong
-          transformOrigin={transformOrigin}
           initial={{ scaleY: 1, rotate }}
           animate={{ scaleY: [1, 1.25, 1] }} // Arrow scales up and down
           transition={transition}

src/components/Simulator/Explanation.tsx

@@ -1,11 +1,13 @@
 import React from "react"
 import { motion } from "framer-motion"
 import { MdArrowBack } from "react-icons/md"
-import { Box, Flex, Grid, Heading, Text } from "@chakra-ui/react"
 
 import type { SimulatorNavProps } from "@/lib/types"
 
-import { Button, ButtonLink } from "../Buttons"
+import { cn } from "@/lib/utils/cn"
+
+import { Button, ButtonLink } from "../ui/buttons/Button"
+import { Flex } from "../ui/flex"
 
 import type {
   LabelHref,
@@ -43,74 +45,51 @@ export const Explanation = ({
     hidden: { opacity: 0 },
   }
   return (
-    <Flex direction="column" flex={1} zIndex={1}>
+    <Flex className="z-[1] flex-1 flex-col">
       {/* Back button */}
       <Button
-        as={motion.button}
         variant="ghost"
-        leftIcon={<MdArrowBack size="18px" />}
-        sx={{ paddingInlineStart: 0 }}
-        mt={{ base: -6, md: 0 }}
-        mb={{ base: 2, md: 8 }}
+        className={cn(
+          "-mt-6 mb-2 w-fit ps-0 [transition-duration:10ms] md:mb-8 md:mt-0",
+          step === 0 ? "pointer-events-none" : "pointer-events-auto"
+        )}
         onClick={regressStepper}
-        pointerEvents={step === 0 ? "none" : "all"}
-        variants={backButtonVariants}
-        initial="hidden"
-        animate={step === 0 ? "hidden" : "visible"}
-        transitionDuration="10ms"
-        w="fit-content"
+        asChild
       >
-        Back
+        <motion.button
+          initial="hidden"
+          variants={backButtonVariants}
+          animate={step === 0 ? "hidden" : "visible"}
+        >
+          <MdArrowBack size="18px" />
+          Back
+        </motion.button>
       </Button>
-      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 3, md: 2 }}>
+      <Flex className="gap-3 md:flex-col md:gap-2">
         {/* Step counter */}
-        <Grid
-          placeItems="center"
-          bg="body.light"
-          borderRadius="lg"
-          p={2}
-          w={9}
-          h={8}
-          fontSize="xs"
-        >
-          <Text as="span" lineHeight={1} fontWeight="bold" m={0}>
+        <div className="grid h-8 w-9 place-items-center rounded-lg bg-body-light p-2 text-xs">
+          <span className="font-bold leading-none">
             {step + 1}/{totalSteps}
-          </Text>
-        </Grid>
+          </span>
+        </div>
         {/* Header and description */}
-        <Box>
-          <Heading
-            as="h3"
-            fontSize={{ base: "xl", sm: "2xl", md: "3xl", lg: "4xl" }}
-            lineHeight={{ base: 8, md: 10 }}
-            mt={0}
-            mb={{ base: 4, md: 8 }}
-          >
+        <div>
+          <h3 className="mb-4 mt-0 text-xl leading-8 sm:text-2xl md:mb-8 md:text-3xl md:leading-10 lg:text-4xl">
             {header}
-          </Heading>
+          </h3>
           {description && (
-            <Box display={{ base: "block", md: "none" }} position="relative">
+            <div className="relative md:hidden">
               <MoreInfoPopover isFirstStep={nav.step === 0}>
-                <Box>{description}</Box>
+                <div>{description}</div>
               </MoreInfoPopover>
-            </Box>
+            </div>
           )}
-        </Box>
+        </div>
       </Flex>
-      {description && (
-        <Box display={{ base: "none", md: "block" }}>{description}</Box>
-      )}
+      {description && <div className="max-md:hidden">{description}</div>}
       {/* Last step navigation buttons */}
       {isLastStep && (
-        <Flex
-          direction="column"
-          gap={4}
-          maxW="300px"
-          w="full"
-          mx={{ base: "auto", md: 0 }}
-          mt={4}
-          zIndex={-1}
-        >
+        <Flex className="z-[-1] mx-auto mt-4 w-full max-w-[300px] flex-col gap-4 md:mx-0">
           {nextPathSummary && openPath && nextPathId && (
             <PathButton
               pathSummary={nextPathSummary}