Merge branch 'dev' into feat/shadcn-input

Author: pettinarip

.all-contributorsrc

@@ -12353,6 +12353,15 @@
       "contributions": [
         "tool"
       ]
+    },
+    {
+      "login": "JoshDavisLight",
+      "name": "Josh Davis",
+      "avatar_url": "https://avatars.githubusercontent.com/u/82784104?v=4",
+      "profile": "https://github.com/JoshDavisLight",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1888,6 +1888,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/krishchvn"><img src="https://avatars.githubusercontent.com/u/58606754?v=4?s=100" width="100px;" alt="Krishnakumar Chavan"/><br /><sub><b>Krishnakumar Chavan</b></sub></a><br /><a href="#content-krishchvn" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/0xV4L3NT1N3"><img src="https://avatars.githubusercontent.com/u/33112835?v=4?s=100" width="100px;" alt="0xV4L3NT1N3"/><br /><sub><b>0xV4L3NT1N3</b></sub></a><br /><a href="#tool-0xV4L3NT1N3" title="Tools">🔧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/JoshDavisLight"><img src="https://avatars.githubusercontent.com/u/82784104?v=4?s=100" width="100px;" alt="Josh Davis"/><br /><sub><b>Josh Davis</b></sub></a><br /><a href="#content-JoshDavisLight" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

chromatic.config.json

@@ -1,5 +1,6 @@
 {
   "projectId": "Project:6629cd26b1440f2cc20b94c0",
   "zip": true,
-  "buildScriptName": "build-storybook:chromatic"
+  "buildScriptName": "build-storybook:chromatic",
+  "onlyChanged": true
 }

package.json

@@ -35,9 +35,11 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.8.0",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "@socialgouv/matomo-next": "^1.8.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",

public/content/community/get-involved/index.md

@@ -15,15 +15,17 @@ Start by reading about the ethereum.org mission and values in our [code of condu
 - Learn about and try Ethereum at [ethereum.org/developers/](/developers/)
 - Attend an [ETHGlobal](http://ethglobal.co/) hackathon near you!
 - Check out [projects related to your area of expertise or programming language of choice](/developers/docs/programming-languages/)
-- Watch or participate in the [Core Dev calls](https://www.youtube.com/@EthereumProtocol)
+- Watch or participate in the [Consensus and Execution Layer calls](https://www.youtube.com/@EthereumProtocol/streams)
 - [Ecosystem Support Program's wishlist](https://esp.ethereum.foundation/wishlist/) - tooling, documentation, and infrastructure areas where the Ethereum Ecosystem Support Program is actively seeking grant applications
 - [Web3Bridge](https://www.web3bridge.com/) - join the aspiring web3 community in their initiative to identify, train, and support hundreds of developers and community members throughout Africa
+- Join the [Eth R&D Discord](https://discord.com/invite/VmG7Uxc)
 - Join the [Ethereum Cat Herders Discord](https://discord.com/invite/Nz6rtfJ8Cu)
 
 ## Researchers & Academics <Emoji text=":mag:" size={1} />‍ {#researchers-and-academics}
 
 Do you have a background in mathematics, cryptography, or economics? You might be interested in some of the cutting-edge work being done within the Ethereum ecosystem:
 
+- Join the [Eth R&D Discord](https://discord.com/invite/VmG7Uxc)
 - Write or review an Ethereum Improvement Proposal
   - Write an EIP
     1. Submit your idea on [Ethereum Magicians](https://ethereum-magicians.org)

public/content/community/support/index.md

@@ -73,7 +73,6 @@ Here are some popular examples:
 - [ethers.js](https://discord.gg/6jyGVDK6Jx)
 - [web3.js](https://discord.gg/GsABYQu4sC)
 - [Hardhat](https://discord.gg/xtrMGhmbfZ)
-- [Truffle](https://discord.gg/8uKcsccEYE)
 - [Alchemy](http://alchemy.com/discord)
 - [Tenderly](https://discord.gg/fBvDJYR)
 

public/content/glossary/index.md

@@ -292,6 +292,8 @@ lang: en
 
 <GlossaryDefinition term="message-call" />
 
+<GlossaryDefinition term="mev" />
+
 <GlossaryDefinition term="mining" />
 
 <GlossaryDefinition term="miner" />

src/components/Footer.tsx

@@ -1,25 +1,18 @@
 import { useTranslation } from "next-i18next"
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa"
 import { IoChevronUpSharp } from "react-icons/io5"
-import {
-  Box,
-  Flex,
-  Heading,
-  Icon,
-  List,
-  ListItem,
-  SimpleGrid,
-  Text,
-} from "@chakra-ui/react"
 
 import type { FooterLink, FooterLinkSection } from "@/lib/types"
 
-import { BaseLink } from "@/components/Link"
 import Translation from "@/components/Translation"
 
+import { cn } from "@/lib/utils/cn"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
-import { Button } from "./Buttons"
+import { BaseLink } from "../../tailwind/Link"
+import { Button } from "../../tailwind/ui/buttons/Button"
+
+import { List, ListItem } from "./ui/list"
 
 const socialLinks = [
   {
@@ -306,132 +299,76 @@ const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
     },
   ]
 
-  const hoverStyles = {
-    textDecor: "none",
-    color: "primary.base",
-    _after: {
-      color: "primary.base",
-    },
-    "& svg": {
-      fill: "primary.base",
-    },
-  }
-
-  const linkProps = {
-    isPartiallyActive: false,
-    textDecor: "none",
-    color: "body.medium",
-    fontWeight: "normal",
-    _hover: hoverStyles,
-    sx: {
-      "& svg": {
-        fill: "body.medium",
-      },
-    },
-  }
+  const footerLinkClassName =
+    "text-body-medium no-underline hover:text-primary hover:after:text-primary"
 
   return (
-    <Box as="footer" py="4" px="8">
-      <Flex
-        justify={{ base: "center", md: "space-between" }}
-        alignItems="center"
-        flexWrap="wrap"
-        gap={8}
-        pt={4}
-        pb={4}
-        borderTop={"1px solid"}
-        borderColor={"body.light"}
-      >
-        <Text fontSize={"sm"} fontStyle={"italic"} color={"body.medium"}>
+    <footer className="px-8 py-4">
+      <div className="flex flex-wrap items-center justify-center gap-8 border-t border-body-light py-4 md:justify-between">
+        <p className="text-sm italic text-body-medium">
           <Translation id="website-last-updated" />: {lastDeployLocaleTimestamp}
-        </Text>
+        </p>
 
         <Button
-          leftIcon={<IoChevronUpSharp />}
           variant="outline"
           isSecondary
           onClick={() => scrollIntoView("__next")}
         >
-          {t("go-to-top")}
+          <IoChevronUpSharp /> Go to top
         </Button>
-      </Flex>
+      </div>
 
-      <SimpleGrid
-        gap={4}
-        justifyContent="space-between"
-        templateColumns={{
-          base: "auto",
-          sm: "repeat(2, auto)",
-          md: "repeat(3, auto)",
-          xl: "repeat(6, auto)",
-        }}
-      >
+      <div className="grid auto-cols-auto justify-between gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5">
         {linkSections.map((section: FooterLinkSection, idx) => (
-          <Box key={idx}>
-            <Heading as="h3" fontSize="sm" lineHeight="base" my="1.14em">
+          <div key={idx}>
+            <h3 className="my-5 text-sm font-bold">
               <Translation id={section.title} />
-            </Heading>
-            <List fontSize="sm" lineHeight="base" fontWeight="normal" m="0">
+            </h3>
+            <List className="m-0 mb-4 list-none text-sm">
               {section.links.map((link, linkIdx) => (
-                <ListItem key={linkIdx} mb={4}>
-                  <BaseLink href={link.href} {...linkProps}>
+                <ListItem key={linkIdx} className="mb-4">
+                  <BaseLink
+                    href={link.href}
+                    className={footerLinkClassName}
+                    isPartiallyActive={false}
+                  >
                     {link.text}
                   </BaseLink>
                 </ListItem>
               ))}
             </List>
-          </Box>
+          </div>
         ))}
-      </SimpleGrid>
-      <Flex
-        p={6}
-        flexDir="column"
-        alignItems="center"
-        justifyContent="center"
-        fontSize="sm"
-        bg="background.highlight"
-      >
-        <Box display="flex" gap={4}>
-          {socialLinks.map(({ href, ariaLabel, icon }) => (
+      </div>
+      <div className="flex flex-col items-center justify-center bg-background-highlight p-6 text-sm">
+        <div className="flex gap-4">
+          {socialLinks.map(({ href, ariaLabel, icon: Icon }) => (
             <BaseLink
               key={href}
               href={href}
               hideArrow
-              color="body.base"
               aria-label={ariaLabel}
-              _focus={{ color: "primary.base" }}
+              className="text-body hover:text-primary"
             >
-              <Icon
-                as={icon}
-                _hover={{
-                  transition:
-                    "color 0.2s ease-in-out, transform 0.2s ease-in-out",
-                }}
-                fontSize="4xl"
-              />
+              <Icon className="h-9 w-9 hover:transform hover:transition-colors" />
             </BaseLink>
           ))}
-        </Box>
-        <List
-          display="flex"
-          flexDir={{ base: "column", sm: "row" }}
-          flexWrap="wrap"
-          justifyContent={{ base: "center", sm: "space-between", md: "center" }}
-          fontWeight="normal"
-          fontSize="sm"
-          p={5}
-          m={0}
-        >
+        </div>
+        <List className="m-0 flex list-none flex-col flex-wrap justify-center p-5 text-sm font-normal sm:flex-row sm:justify-between md:justify-center">
           {dipperLinks.map(({ href, text }) => (
-            <ListItem key={text} textAlign="center" px="2">
-              <BaseLink href={href} w={["100%", null]} {...linkProps}>
+            <ListItem key={text} className="px-2 text-center">
+              <BaseLink
+                href={href}
+                className={cn("w-full sm:w-auto", footerLinkClassName)}
+                isPartiallyActive={false}
+              >
                 {text}
               </BaseLink>
             </ListItem>
           ))}
         </List>
-      </Flex>
-    </Box>
+      </div>
+    </footer>
   )
 }
 

src/components/SkipLink.tsx

@@ -1,27 +1,19 @@
 import { useTranslation } from "next-i18next"
-import { Box } from "@chakra-ui/react"
-
-import { BaseLink } from "@/components/Link"
 
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
+import { BaseLink } from "../../tailwind/Link"
+
 export const SkipLink = () => {
   const { t } = useTranslation()
   return (
-    <Box bg="primary.base">
+    <div className="bg-primary">
       <BaseLink
         href={"#" + MAIN_CONTENT_ID}
-        lineHeight="taller"
-        position="absolute"
-        top="-12"
-        ms="2"
-        color="background.base"
-        textDecorationLine="none"
-        _hover={{ textDecoration: "none" }}
-        _focus={{ position: "static" }}
+        className="absolute -top-12 ms-2 leading-8 text-background no-underline hover:no-underline focus:static"
       >
         {t("skip-to-main-content")}
       </BaseLink>
-    </Box>
+    </div>
   )
 }

src/components/ThemeProvider.tsx

@@ -33,7 +33,11 @@ const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => {
       disableTransitionOnChange
       storageKey={COLOR_MODE_STORAGE_KEY}
     >
-      <ChakraBaseProvider theme={theme} colorModeManager={colorModeManager}>
+      <ChakraBaseProvider
+        theme={theme}
+        colorModeManager={colorModeManager}
+        resetCSS={false}
+      >
         {/* TODO: Can these CSS Vars be moved to `global.css`? */}
         <style jsx global>
           {`