Merge branch 'dev' into dappworld

Author: tomasgrusz

.all-contributorsrc

@@ -4810,7 +4810,8 @@
       "profile": "http://www.technobunnies.com",
       "contributions": [
         "doc",
-        "maintenance"
+        "maintenance",
+        "content"
       ]
     },
     {

.storybook/i18next.ts

@@ -13,6 +13,7 @@ export const baseLocales = {
 export const ns = [
   "common",
   "glossary",
+  "glossary-tooltip",
   "learn-quizzes",
   "page-about",
   "page-index",

README.md

@@ -837,7 +837,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://o.zgur.org"><img src="https://avatars.githubusercontent.com/u/375834?v=4?s=100" width="100px;" alt="Ozgur"/><br /><sub><b>Ozgur</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=rootqa" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/adilanchian"><img src="https://avatars.githubusercontent.com/u/13204620?v=4?s=100" width="100px;" alt="Alec Dilanchian"/><br /><sub><b>Alec Dilanchian</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=adilanchian" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://horacio.eth"><img src="https://avatars.githubusercontent.com/u/7662728?v=4?s=100" width="100px;" alt="Horacio Bertorello"/><br /><sub><b>Horacio Bertorello</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=horacio" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="http://www.technobunnies.com"><img src="https://avatars.githubusercontent.com/u/20266893?v=4?s=100" width="100px;" alt="m4sterbunny"/><br /><sub><b>m4sterbunny</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=m4sterbunny" title="Documentation">📖</a> <a href="#maintenance-m4sterbunny" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.technobunnies.com"><img src="https://avatars.githubusercontent.com/u/20266893?v=4?s=100" width="100px;" alt="m4sterbunny"/><br /><sub><b>m4sterbunny</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=m4sterbunny" title="Documentation">📖</a> <a href="#maintenance-m4sterbunny" title="Maintenance">🚧</a> <a href="#content-m4sterbunny" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://yutingzhao1991.github.io/"><img src="https://avatars.githubusercontent.com/u/1061968?v=4?s=100" width="100px;" alt="愚指导"/><br /><sub><b>愚指导</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=yutingzhao1991" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/rayjasson98"><img src="https://avatars.githubusercontent.com/u/48130098?v=4?s=100" width="100px;" alt="Ray Jasson"/><br /><sub><b>Ray Jasson</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=rayjasson98" title="Documentation">📖</a></td>
     </tr>

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

@@ -135,12 +135,12 @@ This table summarizes the different clients. All of them pass [client tests](htt
 
 | Client                                                                   | Language   | Operating systems     | Networks                  | Sync strategies                    | State pruning   |
 | ------------------------------------------------------------------------ | ---------- | --------------------- | ------------------------- | ---------------------------------- | --------------- |
-| [Geth](https://geth.ethereum.org/)                                       | Go         | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | Snap, Full                         | Archive, Pruned |
-| [Nethermind](http://nethermind.io/)                                      | C#, .NET   | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | Snap (without serving), Fast, Full | Archive, Pruned |
-| [Besu](https://besu.hyperledger.org/en/stable/)                          | Java       | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | Snap, Fast, Full                   | Archive, Pruned |
-| [Erigon](https://github.com/ledgerwatch/erigon)                          | Go         | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | Full                               | Archive, Pruned |
-| [Reth](https://github.com/paradigmxyz/reth) _(beta)_                     | Rust       | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | Full                               | Archive, Pruned |
-| [EthereumJS](https://github.com/ethereumjs/ethereumjs-monorepo) _(beta)_ | TypeScript | Linux, Windows, macOS | Sepolia, Holesky          | Full                               | Pruned          |
+| [Geth](https://geth.ethereum.org/)                                       | Go         | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | [Snap](#snap-sync), [Full](#full-sync)                         | Archive, Pruned |
+| [Nethermind](http://nethermind.io/)                                      | C#, .NET   | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | [Snap](#snap-sync) (without serving), Fast, [Full](#full-sync) | Archive, Pruned |
+| [Besu](https://besu.hyperledger.org/en/stable/)                          | Java       | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | [Snap](#snap-sync), [Fast](#fast-sync), [Full](#full-sync)                  | Archive, Pruned |
+| [Erigon](https://github.com/ledgerwatch/erigon)                          | Go         | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | [Full](#full-sync)                               | Archive, Pruned |
+| [Reth](https://github.com/paradigmxyz/reth) _(beta)_                     | Rust       | Linux, Windows, macOS | Mainnet, Sepolia, Holesky | [Full](#full-sync)                               | Archive, Pruned |
+| [EthereumJS](https://github.com/ethereumjs/ethereumjs-monorepo) _(beta)_ | TypeScript | Linux, Windows, macOS | Sepolia, Holesky          | [Full](#full-sync)                               | Pruned          |
 
 For more on supported networks, read up on [Ethereum networks](/developers/docs/networks/).
 
@@ -234,21 +234,32 @@ Synchronization modes represent different approaches to this process with variou
 
 ### Execution layer sync modes {#execution-layer-sync-modes}
 
-#### Full archive sync {#full-sync}
+The execution layer may be run in different modes to suit different use cases, from re-executing the blockchain's world state to only syncing with the tip of the chain from a trusted checkpoint.
 
-Full sync downloads all blocks (including headers, transactions, and receipts) and generates the state of the blockchain incrementally by executing every block from genesis.
+#### Full sync {#full-sync}
+
+A full sync downloads all blocks (including headers and block bodies) and regenerates the state of the blockchain incrementally by executing every block from genesis. 
 
 - Minimizes trust and offers the highest security by verifying every transaction.
 - With an increasing number of transactions, it can take days to weeks to process all transactions.
 
-#### Full snap sync {#snap-sync}
+[Archive nodes](#archive-node) perform a full sync to build (and retain) a complete history of the state changes made by every transaction in every block.
+
+#### Fast sync {#fast-sync}
+
+Like a full sync, a fast sync downloads all blocks (including headers, transactions, and receipts). However, instead of re-processing the historical transactions, a fast sync relies on the receipts until it reaches a recent head, when it switches to importing and processing blocks to provide a full node. 
 
-Snap sync verifies the chain block-by-block, just like a full archive sync; however, instead of starting at the genesis block, it starts at a more recent 'trusted' checkpoint that is known to be part of the true blockchain. The node saves periodic checkpoints while deleting data older than a certain age. Those snapshots are used to regenerate state data when it is needed, rather than having to store it all forever.
+- Fast sync strategy.
+- Reduces processing demand in favor of bandwidth usage.
 
-- Fastest sync strategy, currently default in Ethereum mainnet
-- Saves a lot of disk usage and network bandwidth without sacrificing security
+#### Snap sync {#snap-sync}
 
-[More on snap sync](https://github.com/ethereum/devp2p/blob/master/caps/snap.md)
+Snap syncs also verify the chain block-by-block. However, instead of starting at the genesis block, a snap sync starts at a more recent 'trusted' checkpoint that is known to be part of the true blockchain. The node saves periodic checkpoints while deleting data older than a certain age. These snapshots are used to regenerate state data as needed, rather than storing it forever.
+
+- Fastest sync strategy, currently default in Ethereum Mainnet.
+- Saves a lot of disk usage and network bandwidth without sacrificing security.
+
+[More on snap sync](https://github.com/ethereum/devp2p/blob/master/caps/snap.md).
 
 #### Light sync {#light-sync}
 
@@ -271,16 +282,14 @@ Optimistic sync is a post-merge synchronization strategy designed to be opt-in a
 
 #### Checkpoint sync {#checkpoint-sync}
 
-Checkpoint sync, also known as weak subjectivity sync, creates a superior user experience for syncing Beacon Node. It's based on assumptions of [weak subjectivity](/developers/docs/consensus-mechanisms/pos/weak-subjectivity/) which enables syncing Beacon Chain from a recent weak subjectivity checkpoint instead of genesis. Checkpoint sync makes the initial sync time significantly faster with similar trust assumptions as syncing from [genesis](/glossary/#genesis-block).
+A checkpoint sync, also known as weak subjectivity sync, creates a superior user experience for syncing a Beacon Node. It's based on assumptions of [weak subjectivity](/developers/docs/consensus-mechanisms/pos/weak-subjectivity/) which enables syncing the Beacon Chain from a recent weak subjectivity checkpoint instead of genesis. Checkpoint syncs make the initial sync time significantly faster with similar trust assumptions as syncing from [genesis](/glossary/#genesis-block).
 
-In practice, this means your node connects to a remote service to download recent finalized states and continues verifying data from that point. Third party providing the data is trusted and should be picked carefully.
+In practice, this means your node connects to a remote service to download recent finalized states and continues verifying data from that point. The third party providing the data is trusted and should be picked carefully.
 
 More on [checkpoint sync](https://notes.ethereum.org/@djrtwo/ws-sync-in-practice)
 
 ## Further reading {#further-reading}
 
-There is a lot of information about Ethereum clients on the internet. Here are few resources that might be helpful.
-
 - [Ethereum 101 - Part 2 - Understanding Nodes](https://kauri.io/ethereum-101-part-2-understanding-nodes/48d5098292fd4f11b251d1b1814f0bba/a) _– Wil Barnes, 13 February 2019_
 - [Running Ethereum Full Nodes: A Guide for the Barely Motivated](https://medium.com/@JustinMLeroux/running-ethereum-full-nodes-a-guide-for-the-barely-motivated-a8a13e7a0d31) _– Justin Leroux, 7 November 2019_
 

public/images/dev-tools/atlas.png

@@ -1,9 +1,9 @@
 import { ComponentProps } from "react"
-import { Box, type HeadingProps, Text } from "@chakra-ui/react"
+import { Box, type HeadingProps, Text, VStack } from "@chakra-ui/react"
 
+import Heading from "@/components/Heading"
 import IdAnchor from "@/components/IdAnchor"
 import InlineLink from "@/components/Link"
-import OldHeading from "@/components/OldHeading"
 import Translation from "@/components/Translation"
 
 import { DEFAULT_GLOSSARY_NS } from "@/lib/constants"
@@ -36,27 +36,17 @@ const GlossaryDefinition = ({
       position: "relative",
     } as HeadingProps
   }
-  const commonHeadingProps = (id?: string): HeadingProps => ({
-    fontWeight: 700,
-    lineHeight: 1.4,
-    ...headingPropsForAnchor(id),
-  })
-  const Heading3 = ({ id, children, ...rest }: HeadingProps) => (
-    <OldHeading as="h3" {...commonHeadingProps(id)} fontSize="2xl" {...rest}>
-      <IdAnchor id={id} />
-      {children}
-    </OldHeading>
-  )
 
   return (
-    <Box textAlign="start">
-      <Heading3 id={term}>
+    <VStack spacing={4} align="stretch" textAlign="start" mb={8}>
+      <Heading size="md" {...headingPropsForAnchor(term)}>
+        <IdAnchor id={term} />
         <Translation
           id={term + "-term"}
           options={options}
           transform={components}
         />
-      </Heading3>
+      </Heading>
       {/**
        * `as="span"` prevents hydration warnings for strings that contain
        * elements that cannot be nested inside `p` tags, like `ul` tags
@@ -70,7 +60,7 @@ const GlossaryDefinition = ({
           transform={components}
         />
       </Text>
-    </Box>
+    </VStack>
   )
 }
 

src/components/Glossary/GlossaryDefinition/index.tsx

@@ -1,17 +1,33 @@
+import { Center } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
 import GlossaryTooltipComponent from "."
 
 const meta = {
   title: "Molecules / Overlay Content / Glossary Tooltip",
   component: GlossaryTooltipComponent,
+  args: {
+    termKey: "bridge",
+    children: "bridge",
+  },
+  decorators: [
+    (Story) => (
+      <Center boxSize="md">
+        <Story />
+      </Center>
+    ),
+  ],
 } satisfies Meta<typeof GlossaryTooltipComponent>
 
 export default meta
 
-export const GlossaryTooltip: StoryObj<typeof meta> = {
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {}
+
+// for chromatic story snapshot showing the rendered popover
+export const OnOpen: Story = {
   args: {
-    termKey: "big-endian",
-    children: "big-endian",
+    isOpen: true,
   },
 }

src/components/Glossary/GlossaryTooltip/GlossaryTooltip.stories.tsx

@@ -1,30 +1,58 @@
 import React, { ReactNode } from "react"
 import { useRouter } from "next/router"
-import { Box, Text } from "@chakra-ui/react"
+import { Box, Text, VStack } from "@chakra-ui/react"
 
-import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
-import Tooltip from "@/components/Tooltip"
+import Heading from "@/components/Heading"
+import InlineLink from "@/components/Link"
+import Tooltip, { type TooltipProps } from "@/components/Tooltip"
+import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { cleanPath } from "@/lib/utils/url"
 
-type GlossaryTooltipProps = {
+type GlossaryTooltipProps = Omit<TooltipProps, "content"> & {
   children: ReactNode
   termKey: string
 }
 
-const GlossaryTooltip = ({ children, termKey }: GlossaryTooltipProps) => {
+const components = {
+  a: InlineLink,
+}
+
+const GlossaryTooltip = ({
+  children,
+  termKey,
+  ...props
+}: GlossaryTooltipProps) => {
   const { asPath } = useRouter()
 
   return (
     <Box as="span" display="inline-block">
       <Tooltip
+        {...props}
         content={
-          <GlossaryDefinition
-            term={termKey}
-            size="sm"
-            options={{ ns: "glossary-tooltip" }}
-          />
+          <VStack spacing={2} align="stretch" textAlign="start">
+            <Heading as="h6">
+              <Translation
+                id={termKey + "-term"}
+                options={{ ns: "glossary-tooltip" }}
+                transform={components}
+              />
+            </Heading>
+            {/**
+             * `as="span"` prevents hydration warnings for strings that contain
+             * elements that cannot be nested inside `p` tags, like `ul` tags
+             * (found in some Glossary definition).
+             * TODO: Develop a better solution to handle this case.
+             */}
+            <Text as="span">
+              <Translation
+                id={termKey + "-definition"}
+                options={{ ns: "glossary-tooltip" }}
+                transform={components}
+              />
+            </Text>
+          </VStack>
         }
         onBeforeOpen={() => {
           trackCustomEvent({

src/components/Glossary/GlossaryTooltip/index.tsx

@@ -6,23 +6,26 @@ import { EthHomeIcon } from "@/components/icons"
 import { BaseLink } from "@/components/Link"
 import Search from "@/components/Search"
 
-import { isMobile } from "@/lib/utils/isMobile"
+import { isDesktop } from "@/lib/utils/isDesktop"
 
 import { NAV_PY } from "@/lib/constants"
 
 import DesktopNavMenu from "./Desktop"
 import Menu from "./Menu"
 import { useNav } from "./useNav"
 
+import { useIsClient } from "@/hooks/useIsClient"
+
 const MobileNavMenu = lazy(() => import("./Mobile"))
 
 // TODO display page title on mobile
 const Nav = () => {
   const { toggleColorMode, linkSections, mobileNavProps } = useNav()
   const { t } = useTranslation("common")
-  const isDesktop = !isMobile()
   const searchModalDisclosure = useDisclosure()
   const navWrapperRef = useRef(null)
+  const isClient = useIsClient()
+  const isDesktopFlag = isDesktop()
 
   return (
     <Box position="sticky" top={0} zIndex="sticky" width="full">
@@ -60,7 +63,12 @@ const Nav = () => {
             ms={{ base: 3, xl: 8 }}
           >
             {/* avoid rendering desktop Menu version on mobile */}
-            {isDesktop && <Menu hideBelow="md" sections={linkSections} />}
+
+            {isClient && isDesktopFlag ? (
+              <Menu hideBelow="md" sections={linkSections} />
+            ) : (
+              <Box />
+            )}
 
             <Flex alignItems="center" /*  justifyContent="space-between" */>
               {/* Desktop */}

src/components/Nav/index.tsx

@@ -30,10 +30,12 @@
   "page-learning-tools-game-tutorials-desc": "Learn while you play. These tutorials get you through the basics using gameplay.",
   "page-learning-tools-meta-desc": "Web-based coding tools and interactive learning experiences to help you experiment with Ethereum development.",
   "page-learning-tools-meta-title": "Developer learning tools",
+  "page-learning-tools-atlas-logo-alt": "Atlas logo",
+  "page-learning-tools-atlas-description": "Write, test, and deploy smart contracts in minutes with the Atlas IDE.",
   "page-learning-tools-questbook-description": "Self paced tutorials to learn Web 3.0 by building",
   "page-learning-tools-questbook-logo-alt": "Questbook logo",
   "page-learning-tools-remix-description": "Develop, deploy and administer smart contracts for Ethereum. Follow tutorials with the LearnEth plugin.",
-  "page-learning-tools-remix-description-2": "Remix, Replit, and ChainIDE aren't just sandboxes—developers can write, compile and deploy their smart contracts using them.",
+  "page-learning-tools-remix-description-2": "Remix, Replit, ChainIDE, and Atlas aren't just sandboxes—developers can write, compile and deploy their smart contracts using them.",
   "page-learning-tools-replit-description": "A customizable development environment for Ethereum with hot reloading, error checking, and first-class testnet support.",
   "page-learning-tools-chainIDE-description": "Get started on your journey to Web3 by writing smart contracts for Ethereum with ChainIDE. Use the built-in templates to learn and save time.",
   "page-learning-tools-chainIDE-logo-alt": "ChainIDE logo",