Merge branch 'staging' into updateGrants

Author: wackerow

app/[locale]/roadmap/_components/ReleaseCarousel.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useLocale } from "next-intl"
 
 import { Image } from "@/components/Image"
 import { ButtonLink } from "@/components/ui/buttons/Button"
@@ -16,45 +17,39 @@ import {
 import { cn } from "@/lib/utils/cn"
 import { formatDate } from "@/lib/utils/date"
 
-import { releasesData } from "@/data/roadmap/releases"
+import { Release, releasesData } from "@/data/roadmap/releases"
 
-const findLatestReleaseIndex = () => {
-  const today = new Date()
-  const twoMonthsFromNow = new Date()
-  twoMonthsFromNow.setMonth(today.getMonth() + 2)
+const ReleaseCarousel = () => {
+  const locale = useLocale()
 
-  // First try to find a release within the next 2 months
-  const upcomingReleaseIndex = releasesData.findIndex((release) => {
-    const releaseDate = new Date(release.releaseDate)
-    return releaseDate > today && releaseDate <= twoMonthsFromNow
-  })
+  const [api1, setApi1] = useState<CarouselApi>()
+  const [api2, setApi2] = useState<CarouselApi>()
 
-  // If no upcoming release found, find the most recent release up to today
-  if (upcomingReleaseIndex === -1) {
-    const pastReleases = releasesData.filter(
-      (release) => new Date(release.releaseDate) <= today
-    )
-    if (pastReleases.length > 0) {
-      const mostRecentRelease = pastReleases[pastReleases.length - 1]
-      return releasesData.findIndex(
-        (release) => release.releaseDate === mostRecentRelease.releaseDate
-      )
-    }
-  }
+  const startIndex = useMemo(() => {
+    const now = new Date()
 
-  return upcomingReleaseIndex
-}
+    // Production: has a releaseDate in the past
+    const productionReleases = releasesData.filter((release) => {
+      if (!("releaseDate" in release) || !release.releaseDate) return false
+      const releaseDate = new Date(release.releaseDate)
+      return releaseDate <= now
+    })
 
-const ReleaseCarousel = () => {
-  const todayDate = new Date()
-  const twoMonthsFromNow = new Date()
-  twoMonthsFromNow.setMonth(todayDate.getMonth() + 2)
+    // Upcoming: has a releaseDate, but is in the future
+    const upcomingReleases = releasesData.filter((release) => {
+      if (!("releaseDate" in release) || !release.releaseDate) return false
+      const releaseDate = new Date(release.releaseDate)
+      return releaseDate > now
+    })
 
-  const [api1, setApi1] = useState<CarouselApi>()
-  const [api2, setApi2] = useState<CarouselApi>()
-  const [currentIndex, setCurrentIndex] = useState(() =>
-    findLatestReleaseIndex()
-  )
+    // If upcoming releases exist, start index after production releases
+    if (upcomingReleases.length > 0) return productionReleases.length
+
+    // If no upcoming releases, start at the last production release
+    return productionReleases.length - 1
+  }, [])
+
+  const [currentIndex, setCurrentIndex] = useState(startIndex)
 
   useEffect(() => {
     if (!api1 || !api2) {
@@ -72,6 +67,27 @@ const ReleaseCarousel = () => {
     })
   }, [api1, api2])
 
+  const getStatus = useCallback((release: Release) => {
+    if (!("releaseDate" in release) || !release.releaseDate) return "dev"
+    if (new Date(release.releaseDate) <= new Date()) return "prod"
+    return "soon"
+  }, [])
+
+  const getDisplayDate = (release: Release): string => {
+    if (!("releaseDate" in release || "plannedReleaseYear" in release))
+      return ""
+
+    if ("plannedReleaseYear" in release && release.plannedReleaseYear)
+      return new Intl.DateTimeFormat(locale, {
+        year: "numeric",
+      }).format(new Date(Number(release.plannedReleaseYear), 0, 1))
+
+    if ("releaseDate" in release && release.releaseDate)
+      return formatDate(release.releaseDate)
+
+    return ""
+  }
+
   return (
     <div className="w-full max-w-[100vw] overflow-hidden">
       <div className="mx-auto w-full max-w-screen-2xl px-4 sm:px-6">
@@ -85,29 +101,21 @@ const ReleaseCarousel = () => {
                 align: "center",
                 containScroll: false,
                 loop: false,
-                startIndex: findLatestReleaseIndex(),
+                startIndex,
               }}
             >
               <CarouselContent>
                 {releasesData.map((release, index) => {
-                  const releaseDate = new Date(release.releaseDate)
-                  const nextRelease =
-                    releaseDate > todayDate && releaseDate <= twoMonthsFromNow
-                  const labelType =
-                    releaseDate < todayDate
-                      ? 1
-                      : releaseDate < twoMonthsFromNow
-                        ? 2
-                        : 3
-
+                  const status = getStatus(release)
+                  const displayDate = getDisplayDate(release)
                   return (
                     <CarouselItem
                       key={release.releaseName}
                       className="w-full md:basis-1/3"
                     >
                       <div className="flex w-full flex-col items-center justify-center gap-3">
                         <div className="mb-3 !h-6">
-                          {labelType === 1 && (
+                          {status === "prod" && (
                             <div
                               className={cn(
                                 "w-fit rounded-lg bg-primary-low-contrast px-2 py-1",
@@ -117,7 +125,7 @@ const ReleaseCarousel = () => {
                               <p className="text-sm font-bold">In production</p>
                             </div>
                           )}
-                          {labelType === 2 && (
+                          {status === "soon" && (
                             <div
                               className={cn(
                                 "w-fit rounded-lg bg-warning-light px-2 py-1",
@@ -129,7 +137,7 @@ const ReleaseCarousel = () => {
                               </p>
                             </div>
                           )}
-                          {labelType === 3 && (
+                          {status === "dev" && (
                             <div
                               className={cn(
                                 "w-fit rounded-lg bg-card-gradient-secondary-hover px-2 py-1",
@@ -142,14 +150,15 @@ const ReleaseCarousel = () => {
                             </div>
                           )}
                         </div>
+                        {/* Line-circle-line decoration —•— */}
                         <div className="flex w-full items-center justify-center text-center">
                           <div
                             className={cn(
                               "flex h-1 flex-1",
                               index !== 0
-                                ? nextRelease
+                                ? status === "soon"
                                   ? "bg-gradient-to-r from-primary to-primary-low-contrast"
-                                  : releaseDate.getTime() < todayDate.getTime()
+                                  : status === "prod"
                                     ? "bg-primary"
                                     : "bg-primary-low-contrast"
                                 : "bg-transparent"
@@ -158,21 +167,21 @@ const ReleaseCarousel = () => {
                           <div
                             className={cn(
                               "h-7 w-7 rounded-full",
-                              releaseDate.getTime() < todayDate.getTime()
+                              status === "prod"
                                 ? "bg-primary"
                                 : "bg-primary-low-contrast",
-                              nextRelease &&
+                              status === "soon" &&
                                 "border-2 border-primary bg-background"
                             )}
                           />
                           <div
                             className={cn(
                               "flex h-1 flex-1",
-                              index !== releasesData.length - 1
-                                ? index < findLatestReleaseIndex()
-                                  ? "bg-primary"
-                                  : "bg-primary-low-contrast"
-                                : "bg-transparent"
+                              index < startIndex
+                                ? "bg-primary"
+                                : "bg-primary-low-contrast",
+                              index === releasesData.length - 1 &&
+                                "bg-transparent"
                             )}
                           />
                         </div>
@@ -181,7 +190,7 @@ const ReleaseCarousel = () => {
                             {release.releaseName}
                           </p>
                           <p className="font-mono text-sm text-body-medium">
-                            {formatDate(release.releaseDate)}
+                            {displayDate}
                           </p>
                         </div>
                       </div>
@@ -203,7 +212,7 @@ const ReleaseCarousel = () => {
                 align: "center",
                 containScroll: false,
                 loop: false,
-                startIndex: findLatestReleaseIndex(),
+                startIndex,
               }}
             >
               <CarouselContent>
@@ -225,9 +234,7 @@ const ReleaseCarousel = () => {
                           <h2 className="text-4xl font-bold lg:text-6xl">
                             {release.releaseName}
                           </h2>
-                          <p className="text-md">
-                            {formatDate(release.releaseDate)}
-                          </p>
+                          <p className="text-md">{getDisplayDate(release)}</p>
                         </div>
 
                         <div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "10.3.0",
+  "version": "10.4.0",
   "license": "MIT",
   "private": true,
   "scripts": {

public/content/ai-agents/index.md

@@ -19,7 +19,7 @@ buttons:
     isSecondary: false
 ---
 
-Imagine navigating Ethereum with an AI assistant that studies on-chain market trends 24/7, answers questions, and even executes transactions on your behalf. Welcome to the world of AI Agents—intelligent systems designed to simplify your digital life.
+Imagine navigating Ethereum with an AI assistant that studies onchain market trends 24/7, answers questions, and even executes transactions on your behalf. Welcome to the world of AI Agents—intelligent systems designed to simplify your digital life.
 
 On Ethereum, we’re seeing innovations of AI agents ranging from virtual influencers and autonomous content creators to real-time market analysis platforms, empowering users by delivering insights, entertainment, and operational efficiency.
 

public/content/enterprise/index.md

@@ -86,7 +86,7 @@ Here are some of the enterprise applications that have been built on top of the
 - [ABN AMRO](https://tokeny.com/tokeny-fuels-abn-amro-bank-in-tokenizing-green-bonds-on-polygon/) - _with Tokeny, tokenized green bonds_
 - [Anvil](https://anvil.xyz/) - _a system of Ethereum-based smart contracts that manages collateral and issues fully secured credit_
 - [Mata Capital](https://consensys.io/blockchain-use-cases/finance/mata-capital) - _real estate investment tokenization_ 
-- [Obligate](https://www.obligate.com/) - _regulated and KYC'd on-chain bonds and commercial paper_
+- [Obligate](https://www.obligate.com/) - _regulated and KYC'd onchain bonds and commercial paper_
 - [Siemens](https://press.siemens.com/global/en/pressrelease/siemens-remains-pioneer-another-digital-bond-successfully-issued-blockchain) - _bond issuance_
 - [Sila](https://silamoney.com/) - _banking and ACH payments infrastructure-as-a-service, using a stablecoin_
 - [Societe Generale FORGE](https://www.sgforge.com/product/bonds/) - _bond issuance_

public/content/roadmap/pectra/7702/index.md

@@ -57,7 +57,7 @@ For more information:
 
 **Avoiding Vendor Lock-In**: In line with the above, a good implementation is vendor-neutral and interoperable. This often means adhering to emerging standards for smart accounts. For instance, [Alchemy’s Modular Account](https://github.com/alchemyplatform/modular-account) uses the ERC-6900 standard for modular smart accounts and is designed with “permissionless interoperable usage” in mind. 
 
-**Privacy Preservation**: While on-chain privacy is limited, a delegation contract should strive to minimize data exposure and linkability. This can be achieved by supporting features like gas payments in ERC-20 tokens (so users need not maintain a public ETH balance, which improves privacy and UX) and one-time session keys (which reduce reliance on a single long-term key). For example, EIP-7702 enables paying gas in tokens via sponsored transactions, and a good implementation will make it easy to integrate such paymasters without leaking more information than necessary. Additionally, off-chain delegation of certain approvals (using signatures that are verified on-chain) means fewer on-chain transactions with the user’s primary key, aiding privacy. Accounts that require using a relayer force users to reveal their IP addresses. PublicMempools improves this, when a transaction/UserOp propagates through the mempool you can't tell whether it originated from the IP that sent it, or just relayed through it via the p2p protocol.
+**Privacy Preservation**: While onchain privacy is limited, a delegation contract should strive to minimize data exposure and linkability. This can be achieved by supporting features like gas payments in ERC-20 tokens (so users need not maintain a public ETH balance, which improves privacy and UX) and one-time session keys (which reduce reliance on a single long-term key). For example, EIP-7702 enables paying gas in tokens via sponsored transactions, and a good implementation will make it easy to integrate such paymasters without leaking more information than necessary. Additionally, off-chain delegation of certain approvals (using signatures that are verified onchain) means fewer onchain transactions with the user’s primary key, aiding privacy. Accounts that require using a relayer force users to reveal their IP addresses. PublicMempools improves this, when a transaction/UserOp propagates through the mempool you can't tell whether it originated from the IP that sent it, or just relayed through it via the p2p protocol.
 
 **Extensibility and Modular Security**: Account implementations should be extensible so they can evolve with new features and security improvements. Upgradability is inherently possible with EIP-7702 (since an EOA can always delegate to a new contract in the future to upgrade its logic). Beyond upgradability, a good design allows modularity – e.g. plug-in modules for different signature schemes or spending policies – without needing to redeploy entirely. Alchemy’s Account Kit is a prime example, allowing developers to install validation modules (for different signature types like ECDSA, BLS, etc.) and execution modules for custom logic. To achieve greater flexibility and security in EIP-7702-enabled accounts, developers are encouraged to delegate to a proxy contract rather than directly to a specific implementation. This approach allows for seamless upgrades and modularity without requiring additional EIP-7702 authorizations for each change.
 
@@ -108,7 +108,7 @@ By adopting these solutions, developers can enhance the security of EIP-7702 del
 
 When users perform delegated signatures, the target contract receiving the delegation should be clearly and prominently displayed to help mitigate phishing risks.
 
-**Minimal Trusted Surface & Security**: While offering flexibility, a delegation contract should keep its core logic minimal and auditable. The contract is effectively an extension of the user’s EOA, so any flaw can be catastrophic. Implementations should follow best practices from the smart contract security community. For instance, constructor or initializer functions must be carefully secured – as highlighted by Alchemy, if using a proxy pattern under 7702, an unprotected initializer could let an attacker take over the account. Teams should aim to keep the on-chain code simple: Ambire’s 7702 contract is only ~200 lines of Solidity, deliberately minimizing complexity to reduce bugs. A balance must be struck between feature-rich logic and the simplicity that eases auditing. 
+**Minimal Trusted Surface & Security**: While offering flexibility, a delegation contract should keep its core logic minimal and auditable. The contract is effectively an extension of the user’s EOA, so any flaw can be catastrophic. Implementations should follow best practices from the smart contract security community. For instance, constructor or initializer functions must be carefully secured – as highlighted by Alchemy, if using a proxy pattern under 7702, an unprotected initializer could let an attacker take over the account. Teams should aim to keep the onchain code simple: Ambire’s 7702 contract is only ~200 lines of Solidity, deliberately minimizing complexity to reduce bugs. A balance must be struck between feature-rich logic and the simplicity that eases auditing. 
 
 ### Known implementations {#known-implementations}
 

src/components/Content/ai-agents/AiAgentProductLists.tsx

@@ -12,7 +12,7 @@ import heyanon from "@/public/images/ai-agents/heyanon.png"
 import luna from "@/public/images/ai-agents/luna.png"
 
 const AiAgentProductLists = ({ list }: { list: string }) => {
-  // TODO: LOGOS
+  // TODO: LOGOS, extract intl strings
   const productListSets = {
     "ai-agents": [
       {
@@ -40,7 +40,7 @@ const AiAgentProductLists = ({ list }: { list: string }) => {
             Luna engages with users constantly through own X account and live
             stream. You might receive an X reply if you tag her handle or a
             voice message if you comment on her stream and own her token! Luna
-            controls own on-chain wallet.
+            controls own onchain wallet.
           </p>,
           <div key="luna-button">
             <ButtonLink

src/components/Homepage/useHome.ts

@@ -7,10 +7,10 @@ import type { CodeExample } from "@/lib/interfaces"
 
 import { useBentoBox } from "@/components/Homepage/useBentoBox"
 import BlockHeap from "@/components/icons/block-heap.svg"
+import BuildAppsIcon from "@/components/icons/build-apps.svg"
 import EthGlyphIcon from "@/components/icons/eth-glyph.svg"
 import EthTokenIcon from "@/components/icons/eth-token.svg"
 import PickWalletIcon from "@/components/icons/eth-wallet.svg"
-import ChooseNetworkIcon from "@/components/icons/network-layers.svg"
 import TryAppsIcon from "@/components/icons/phone-homescreen.svg"
 import RoadmapSign from "@/components/icons/roadmap-sign.svg"
 import Whitepaper from "@/components/icons/whitepaper.svg"
@@ -103,14 +103,6 @@ export const useHome = () => {
       className: "text-accent-a hover:text-accent-a-hover",
       eventName: "get eth",
     },
-    {
-      label: t("page-index:page-index-cta-networks-label"),
-      description: t("page-index:page-index-cta-networks-description"),
-      href: "/layer-2/", // TODO: Update with new networks page when ready
-      Svg: ChooseNetworkIcon,
-      className: "text-accent-b hover:text-accent-b-hover",
-      eventName: "L2",
-    },
     {
       label: t("page-index:page-index-cta-dapps-label"),
       description: t("page-index:page-index-cta-dapps-description"),
@@ -122,6 +114,14 @@ export const useHome = () => {
       ),
       eventName: "dapps",
     },
+    {
+      label: t("page-index:page-index-cta-build-apps-label"),
+      description: t("page-index:page-index-cta-build-apps-description"),
+      href: "/developers/",
+      Svg: BuildAppsIcon,
+      className: "text-accent-b hover:text-accent-b-hover",
+      eventName: "build apps",
+    },
   ]
 
   const popularTopics = [