Merge remote-tracking branch 'upstream/dev' into migrate/contributors

Author: Baystef

package.json

@@ -39,13 +39,15 @@
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-compose-refs": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-portal": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@socialgouv/matomo-next": "^1.8.0",

public/content/developers/docs/nodes-and-clients/index.md

@@ -194,13 +194,13 @@ Learn more about it by reading its [documentation](https://github.com/ethereumjs
 There are multiple consensus clients (previously known as 'Eth2' clients) to support the [consensus upgrades](/roadmap/beacon-chain/). They are responsible for all consensus-related logic including the fork-choice algorithm, processing attestations and managing [proof-of-stake](/developers/docs/consensus-mechanisms/pos) rewards and penalties.
 
 | Client                                                        | Language   | Operating systems     | Networks                                                          |
-| ------------------------------------------------------------- | ---------- | --------------------- | ----------------------------------------------------------------- |                        |
+| ------------------------------------------------------------- | ---------- | --------------------- | ----------------------------------------------------------------- |
 | [Lighthouse](https://lighthouse.sigmaprime.io/)               | Rust       | Linux, Windows, macOS | Beacon Chain, Goerli, Pyrmont, Sepolia, Ropsten, and more         |
 | [Lodestar](https://lodestar.chainsafe.io/)                    | TypeScript | Linux, Windows, macOS | Beacon Chain, Goerli, Sepolia, Ropsten, and more                  |
 | [Nimbus](https://nimbus.team/)                                | Nim        | Linux, Windows, macOS | Beacon Chain, Goerli, Sepolia, Ropsten, and more                  |
 | [Prysm](https://docs.prylabs.network/docs/getting-started/)   | Go         | Linux, Windows, macOS | Beacon Chain, Gnosis, Goerli, Pyrmont, Sepolia, Ropsten, and more |
 | [Teku](https://consensys.net/knowledge-base/ethereum-2/teku/) | Java       | Linux, Windows, macOS | Beacon Chain, Gnosis, Goerli, Sepolia, Ropsten, and more          |
-| [Grandine](https://docs.grandine.io/) (beta)                  | Rust       | Linux, Windows, macOS | Beacon Chain, Goerli, Sepolia, and more   
+| [Grandine](https://docs.grandine.io/) (beta)                  | Rust       | Linux, Windows, macOS | Beacon Chain, Goerli, Sepolia, and more                           |
 
 ### Lighthouse {#lighthouse}
 

src/components/AssetDownload/AssetDownloadArtist.tsx

@@ -1,9 +1,11 @@
 import { useTranslation } from "next-i18next"
-import { Flex } from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
-import Link from "@/components/Link"
-import Text from "@/components/OldText"
+
+import { cn } from "@/lib/utils/cn"
+
+import { Flex } from "../ui/flex"
+import { BaseLink } from "../ui/Link"
 
 type AssetDownloadArtistProps = {
   artistName: string
@@ -16,21 +18,13 @@ const AssetDownloadArtist = ({
 }: AssetDownloadArtistProps) => {
   const { t } = useTranslation("page-assets")
   return (
-    <Flex
-      mb="4"
-      border="1px"
-      borderTop="none"
-      borderColor="white700"
-      py="2"
-      px="4"
-      borderRadius="0 0 4px 4px"
-    >
-      <Flex me="2" fontSize="md" textColor="text300">
+    <Flex className={cn("mb-4 border border-t-0", "rounded-b px-4 py-2")}>
+      <Flex className="me-2">
         <Emoji text=":artist_palette:" className="me-2 text-2xl" />
         {t("page-assets-download-artist")}
       </Flex>
-      {artistUrl && <Link href={artistUrl}>{artistName}</Link>}
-      {!artistUrl && <Text m="0">{artistName}</Text>}
+      {artistUrl && <BaseLink href={artistUrl}>{artistName}</BaseLink>}
+      {!artistUrl && <p>{artistName}</p>}
     </Flex>
   )
 }

src/components/AssetDownload/AssetDownloadImage.tsx

@@ -1,15 +1,16 @@
-import { Center } from "@chakra-ui/react"
+import { ImageProps } from "next/image"
 
-import { Image, type ImageProps } from "@/components/Image"
+import { TwImage } from "../Image"
+import { Center } from "../ui/flex"
 
 interface AssetDownloadImageProps {
   image: ImageProps["src"]
   alt: string
 }
 
 const AssetDownloadImage = ({ image, alt }: AssetDownloadImageProps) => (
-  <Center border="1px" borderColor="white700" p="8" w="full">
-    <Image src={image} alt={alt} w="full" alignSelf="center" />
+  <Center className="w-full border p-8">
+    <TwImage src={image} alt={alt} className="w-full self-center" />
   </Center>
 )
 

src/components/AssetDownload/index.tsx

@@ -1,25 +1,26 @@
 import { extname } from "path"
 
-import type { StaticImageData } from "next/image"
+import { BaseHTMLAttributes } from "react"
+import type { ImageProps, StaticImageData } from "next/image"
 import { useTranslation } from "next-i18next"
-import { Box, Flex, type FlexProps } from "@chakra-ui/react"
 
 import AssetDownloadArtist from "@/components/AssetDownload/AssetDownloadArtist"
 import AssetDownloadImage from "@/components/AssetDownload/AssetDownloadImage"
-import { ButtonLink } from "@/components/Buttons"
-import type { ImageProps } from "@/components/Image"
-import OldHeading from "@/components/OldHeading"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import { ButtonLink } from "../ui/buttons/Button"
+import { Flex, Stack } from "../ui/flex"
+
 type AssetDownloadProps = {
   title: string
   alt: string
   artistName?: string
   artistUrl?: string
   image: ImageProps["src"]
   svgUrl?: string
-} & FlexProps
+} & BaseHTMLAttributes<HTMLDivElement>
 
 const AssetDownload = ({
   alt,
@@ -28,6 +29,7 @@ const AssetDownload = ({
   image,
   svgUrl,
   title,
+  className,
   ...props
 }: AssetDownloadProps) => {
   const { t } = useTranslation(["page-assets"])
@@ -41,23 +43,18 @@ const AssetDownload = ({
   const imgSrc = (image as StaticImageData).src
 
   return (
-    <Flex
-      flexDirection="column"
-      justifyContent="space-between"
-      m={4}
-      p={0}
+    <Stack
+      className={cn("m-4 justify-between gap-0 p-0", className)}
       {...props}
     >
-      <OldHeading as="h4" fontSize={{ base: "md", md: "xl" }} fontWeight="500">
-        {title}
-      </OldHeading>
-      <Box>
+      <h4 className="my-8 text-md font-medium md:text-xl">{title}</h4>
+      <div>
         <AssetDownloadImage image={image} alt={alt} />
         {artistName && (
           <AssetDownloadArtist artistName={artistName} artistUrl={artistUrl} />
         )}
-      </Box>
-      <Flex gap={5} mt={4}>
+      </div>
+      <Flex className="mt-4 gap-5">
         <ButtonLink
           href={imgSrc}
           onClick={matomoHandler}
@@ -73,7 +70,7 @@ const AssetDownload = ({
           </ButtonLink>
         )}
       </Flex>
-    </Flex>
+    </Stack>
   )
 }
 

src/components/BeaconChainActions.tsx

@@ -1,46 +1,38 @@
 import { useTranslation } from "next-i18next"
-import { Box, Flex } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
-import { ButtonLink } from "@/components/Buttons"
 import Card from "@/components/Card"
 import CardList, { type CardListItem } from "@/components/CardList"
-import OldHeading from "@/components/OldHeading"
 import Translation from "@/components/Translation"
 
+import { ButtonLink } from "./ui/buttons/Button"
+import { Flex } from "./ui/flex"
+
 import beaconchain from "@/public/images/upgrades/beaconchainemoji.png"
 import beaconscan from "@/public/images/upgrades/etherscan.png"
 
 const H3 = ({ children }: ChildOnlyProp) => (
-  <OldHeading
-    as="h3"
-    fontSize="2xl"
-    fontWeight="bold"
-    mb={8}
-    sx={{ a: { display: "none" } }}
-  >
-    {children}
-  </OldHeading>
+  <h3 className="mb-8 mt-10 text-2xl font-bold [&_a]:hidden">{children}</h3>
 )
 
 const BeaconChainActions = () => {
   const { t } = useTranslation(["page-upgrades-index", "page-upgrades"])
 
   const datapoints: CardListItem[] = [
     {
-      title: t("consensus-beaconscan-title"),
+      title: t("page-upgrades:consensus-beaconscan-title"),
       image: beaconscan,
       alt: "",
       link: "https://beaconscan.com",
-      description: t("consensus-beaconscan-desc"),
+      description: t("page-upgrades:consensus-beaconscan-desc"),
     },
     {
-      title: t("consensus-beaconscan-in-title"),
+      title: t("page-upgrades:consensus-beaconscan-in-title"),
       image: beaconchain,
       alt: "",
       link: "https://beaconcha.in",
-      description: t("consensus-beaconcha-in-desc"),
+      description: t("page-upgrades:consensus-beaconcha-in-desc"),
     },
   ]
 
@@ -64,35 +56,35 @@ const BeaconChainActions = () => {
   ]
 
   return (
-    <Box mb={16}>
-      <Flex flexDir={{ base: "column", md: "row" }} pt={4}>
+    <div className="mb-16">
+      <Flex className="flex-col pt-4 md:flex-row">
         <Card
           w="full"
           ms={0}
           me={{ base: 0, md: 4 }}
           mb={{ base: 8, md: 0 }}
           emoji=":money_with_wings:"
-          title={t("consensus-become-staker")}
-          description={t("consensus-become-staker-desc")}
+          title={t("page-upgrades:consensus-become-staker")}
+          description={t("page-upgrades:consensus-become-staker-desc")}
         >
-          <ButtonLink mb={3} href="https://launchpad.ethereum.org">
+          <ButtonLink className="mb-3" href="https://launchpad.ethereum.org">
             <Translation id="get-started" />
           </ButtonLink>
           <ButtonLink variant="outline" href="/staking/">
-            <Translation id="page-upgrades-index-staking-learn" />
+            <Translation id="page-upgrades-index:page-upgrades-index-staking-learn" />
           </ButtonLink>
         </Card>
       </Flex>
       <H3>
-        <Translation id="consensus-explore" />
+        <Translation id="page-upgrades:consensus-explore" />
       </H3>
 
       <CardList items={datapoints} />
       <H3>
-        <Translation id="read-more" />
+        <Translation id="page-upgrades:read-more" />
       </H3>
       <CardList items={reads} />
-    </Box>
+    </div>
   )
 }