Release candidate v10.5.0

.all-contributorsrc

@@ -12730,7 +12730,10 @@
       "name": "João Paulo Hotequil",
       "avatar_url": "https://avatars.githubusercontent.com/u/46814712?v=4",
       "profile": "https://github.com/hotequil",
-      "contributions": ["code", "translation"]
+      "contributions": [
+        "code",
+        "translation"
+      ]
     },
     {
       "login": "microHoffman",
@@ -12749,6 +12752,24 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "aolson078",
+      "name": "Alex Olson",
+      "avatar_url": "https://avatars.githubusercontent.com/u/69769089?v=4",
+      "profile": "https://github.com/aolson078",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "adminsuci",
+      "name": "SUCI - Blockchain Hub Team",
+      "avatar_url": "https://avatars.githubusercontent.com/u/155696196?v=4",
+      "profile": "https://www.suci.io/",
+      "contributions": [
+        "maintenance"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/labeler.yml

@@ -12,6 +12,7 @@
 "dependencies 📦":
   - package.json
   - yarn.lock
+  - pnpm-lock.yaml
 
 "config ⚙️":
   - i18n.config.json

.github/workflows/chromatic.yml

@@ -31,9 +31,18 @@ jobs:
         uses: actions/checkout@v2
         with:
           fetch-depth: 0 # 👈 Required to retrieve git history
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'pnpm'
       - name: Install deps
         # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
-        run: yarn
+        run: pnpm install
       - name: Publish to Chromatic
         # 👇 Adds Chromatic as a step in the workflow
         uses: chromaui/action@v1

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.pnpm-store/
 
 # testing
 /coverage
@@ -23,6 +24,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log
+
+pnpm-lock.yaml.bak
 
 # local env files
 .env*.local
@@ -60,4 +64,3 @@ src/data/crowdin/bucketsAwaitingReviewReport.csv
 # Storybook
 build-storybook.log
 storybook-static
-

.prettierignore

@@ -4,3 +4,4 @@ yarn.lock
 package-lock.json
 public
 build
+pnpm-lock.yaml

.storybook/main.ts

@@ -4,17 +4,10 @@ import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
 import type { StorybookConfig } from "@storybook/nextjs"
 
 /**
- * Note regarding package.json settings related to Storybook:
- *
- * There is a resolutions option set for the package `jackspeak`. This is related to a
- * workaround provided to make sure storybook ( as of v7.5.2) works correctly with
- * Yarn v1
- *
- * Reference: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092
- *
- * The primary recommendation is to upgrade to Yarn 3 if possible
+ * Storybook configuration for the ethereum.org website
+ * This loads our components as stories and configures the necessary
+ * webpack settings for proper rendering
  */
-
 const config: StorybookConfig = {
   stories: [
     "../src/components/**/*.stories.{ts,tsx}",

.storybook/modes.ts

@@ -1,4 +1,4 @@
-import pickBy from "lodash/pickBy"
+import { pickBy } from "lodash"
 
 import { baseLocales } from "./next-intl"
 import { breakpointSet } from "./preview"

README.md

@@ -70,14 +70,52 @@ git fetch upstream
 git merge upstream/dev
 ```
 
-2. Install dependencies
+2. Prepare package manager
 
-We recommend using a node manager to use multiple node versions in your system. We use [Volta](https://volta.sh/). In case you don't use a manager or you use `nvm`, you can check the currently supported versions under the `"volta"` section on our `package.json` file.
+We've upgraded to pnpm to speed up development experience and improve dependency management.
+
+We recommend using a [node manager such as nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#intro) to use multiple node versions in your system. We have a `.nvmrc` file that declares the canonical Node.js version for this project. If you use `nvm`, you can run `nvm use` to automatically switch to the correct version.
+
+**Use current node version (recommended)**
+
+```sh
+nvm use
+```
+
+Corepack is a tool that allows you to use package managers like pnpm, yarn, and npm without needing to install them globally. It ensures that the correct version of the package manager is used for your project.
+
+**Enable corepack (recommended):**
+
+```sh
+corepack enable
+```
+
+3. Install dependencies
+
+```sh
+pnpm install
+```
+
+#### Migrating from yarn to pnpm
+
+If you previously used `yarn` to install dependencies, you can safely migrate to `pnpm` by running the following commands:
 
 ```sh
-yarn
+# Remove yarn.lock file
+rm yarn.lock
+
+# Remove node_modules directory
+rm -rf node_modules
+
+# Clean yarn cache (optional)
+yarn cache clean
+
+# Install dependencies with pnpm
+pnpm install
 ```
 
+This will cleanly switch the project working directory from yarn to pnpm without leaving any residual yarn configuration.
+
 ### 4. Make awesome changes!
 
 1. Create new branch for your changes
@@ -89,7 +127,7 @@ git checkout -b new_branch_name
 2. Start developing!
 
 ```sh
-yarn dev
+pnpm dev
 ```
 
 - Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:3000` from your browser
@@ -1947,8 +1985,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/JJOptimist"><img src="https://avatars.githubusercontent.com/u/86833563?v=4?s=100" width="100px;" alt="JJOptimist"/><br /><sub><b>JJOptimist</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AJJOptimist" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/hotequil"><img src="https://avatars.githubusercontent.com/u/46814712?v=4?s=100" width="100px;" alt="João Paulo Hotequil"/><br /><sub><b>João Paulo Hotequil</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=hotequil" title="Code">💻</a> <a href="#translation-hotequil" title="Translation">🌍</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://pwn.xyz"><img src="https://avatars.githubusercontent.com/u/61500778?v=4?s=100" width="100px;" alt="microHoffman"/><br /><sub><b>microHoffman</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AmicroHoffman" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/smithrashell"><img src="https://avatars.githubusercontent.com/u/36465023?v=4?s=100" width="100px;" alt="Rashell Smith"/><br /><sub><b>Rashell Smith</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Asmithrashell" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/aolson078"><img src="https://avatars.githubusercontent.com/u/69769089?v=4?s=100" width="100px;" alt="Alex Olson"/><br /><sub><b>Alex Olson</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Aaolson078" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.suci.io/"><img src="https://avatars.githubusercontent.com/u/155696196?v=4?s=100" width="100px;" alt="SUCI - Blockchain Hub Team"/><br /><sub><b>SUCI - Blockchain Hub Team</b></sub></a><br /><a href="#maintenance-adminsuci" title="Maintenance">🚧</a></td>
     </tr>
   </tbody>
 </table>

app/[locale]/10years/_components/AdoptionSwiper.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { Image } from "@/components/Image"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import {
+  Swiper,
+  SwiperContainer,
+  SwiperNavigation,
+  SwiperSlide,
+} from "@/components/ui/swiper"
+
+import { cn } from "@/lib/utils/cn"
+
+import { adoptionCards, adoptionStyles } from "./data"
+
+const AdoptionSwiper = () => {
+  return (
+    <div className="flex flex-1 flex-col gap-6 md:hidden">
+      <SwiperContainer className="mx-auto w-full max-w-[550px]">
+        <Swiper>
+          {adoptionCards.map((card, index) => (
+            <SwiperSlide key={card.title}>
+              <div
+                className={cn("h-full rounded-2xl p-8", adoptionStyles[index])}
+              >
+                <Image
+                  src={card.image}
+                  alt={card.title}
+                  className="mx-auto mb-4 h-36 object-contain"
+                />
+                <h3 className="mb-4 text-2xl font-bold">{card.title}</h3>
+                {card.description}
+                <ButtonLink href={card.href} hideArrow variant="outline">
+                  {card.linkText}
+                </ButtonLink>
+              </div>
+            </SwiperSlide>
+          ))}
+          <SwiperNavigation />
+        </Swiper>
+      </SwiperContainer>
+    </div>
+  )
+}
+
+export default AdoptionSwiper

app/[locale]/10years/_components/CountDown.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { cn } from "@/lib/utils/cn"
+
+interface CountDownProps {
+  className?: string
+}
+
+const CountDown = ({ className }: CountDownProps) => {
+  const [timeLeft, setTimeLeft] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  })
+  const [isExpired, setIsExpired] = useState(false)
+
+  useEffect(() => {
+    const targetDate = new Date("2025-07-30T15:44:00Z")
+
+    const calculateTimeLeft = () => {
+      const now = new Date()
+      const difference = targetDate.getTime() - now.getTime()
+
+      if (difference > 0) {
+        setIsExpired(false)
+        setTimeLeft({
+          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+          minutes: Math.floor((difference / 1000 / 60) % 60),
+          seconds: Math.floor((difference / 1000) % 60),
+        })
+      } else {
+        setIsExpired(true)
+      }
+    }
+
+    calculateTimeLeft()
+
+    // Update every second
+    const timer = setInterval(calculateTimeLeft, 1000)
+
+    return () => clearInterval(timer)
+  }, [])
+
+  if (isExpired) {
+    return (
+      <div className="text-center text-2xl font-bold">
+        Ethereum is 10 years old! 🚀
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center gap-10">
+      <div
+        className={cn(
+          "flex h-20 w-20 flex-col items-center justify-center rounded-2xl border text-center [box-shadow:-2.372px_2.372px_14.234px_1.186px_rgba(52,43,64,0.02),-18.979px_18.979px_14.234px_-3.559px_rgba(52,43,64,0.02),-37.958px_37.958px_28.469px_-7.117px_rgba(52,43,64,0.02),-47.448px_47.448px_47.448px_-14.234px_rgba(88,55,131,0.04)] dark:bg-[#171717]",
+          className
+        )}
+      >
+        <div className="font-mono text-4xl font-bold text-accent-a">
+          {timeLeft.days}
+        </div>
+        <div className="font-mono text-xs text-accent-a">days</div>
+      </div>
+      <div
+        className={cn(
+          "flex h-20 w-20 flex-col items-center justify-center rounded-2xl border text-center [box-shadow:-2.372px_2.372px_14.234px_1.186px_rgba(52,43,64,0.02),-18.979px_18.979px_14.234px_-3.559px_rgba(52,43,64,0.02),-37.958px_37.958px_28.469px_-7.117px_rgba(52,43,64,0.02),-47.448px_47.448px_47.448px_-14.234px_rgba(88,55,131,0.04)] dark:bg-[#171717]",
+          className
+        )}
+      >
+        <div className="font-mono text-4xl font-bold text-accent-a">
+          {timeLeft.hours}
+        </div>
+        <div className="font-mono text-xs text-accent-a">hours</div>
+      </div>
+      <div
+        className={cn(
+          "flex h-20 w-20 flex-col items-center justify-center rounded-2xl border text-center [box-shadow:-2.372px_2.372px_14.234px_1.186px_rgba(52,43,64,0.02),-18.979px_18.979px_14.234px_-3.559px_rgba(52,43,64,0.02),-37.958px_37.958px_28.469px_-7.117px_rgba(52,43,64,0.02),-47.448px_47.448px_47.448px_-14.234px_rgba(88,55,131,0.04)] dark:bg-[#171717]",
+          className
+        )}
+      >
+        <div className="font-mono text-4xl font-bold text-accent-a">
+          {timeLeft.minutes}
+        </div>
+        <div className="font-mono text-xs text-accent-a">minutes</div>
+      </div>
+      <div
+        className={cn(
+          "hidden h-20 w-20 flex-col items-center justify-center rounded-2xl border text-center [box-shadow:-2.372px_2.372px_14.234px_1.186px_rgba(52,43,64,0.02),-18.979px_18.979px_14.234px_-3.559px_rgba(52,43,64,0.02),-37.958px_37.958px_28.469px_-7.117px_rgba(52,43,64,0.02),-47.448px_47.448px_47.448px_-14.234px_rgba(88,55,131,0.04)] lg:flex dark:bg-[#171717]",
+          className
+        )}
+      >
+        <div className="font-mono text-4xl font-bold text-accent-a">
+          {timeLeft.seconds}
+        </div>
+        <div className="font-mono text-xs text-accent-a">seconds</div>
+      </div>
+    </div>
+  )
+}
+
+export default CountDown

app/[locale]/10years/_components/InnovationSwiper.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Image } from "@/components/Image"
+import {
+  Swiper,
+  SwiperContainer,
+  SwiperNavigation,
+  SwiperSlide,
+} from "@/components/ui/swiper"
+
+import { innovationCards } from "./data"
+
+export default function InnovationSwiper() {
+  return (
+    <div className="w-[100%]">
+      <SwiperContainer className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
+        <Swiper className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
+          {innovationCards.map((card, index) => (
+            <SwiperSlide
+              key={index}
+              className="mx-auto flex w-full max-w-[550px] flex-col gap-4 rounded-lg bg-card-gradient-secondary p-4 sm:p-6 xl:max-w-[700px]"
+            >
+              <Image
+                src={card.image}
+                alt={card.title}
+                className="mx-auto my-4 h-auto max-w-full"
+              />
+              <div>
+                <h3 className="mb-4">{card.title}</h3>
+                <p className="text-body-secondary mb-4">{card.date}</p>
+              </div>
+              {card.description.map((description, index) => (
+                <p key={index} className="mb-4">
+                  {description}
+                </p>
+              ))}
+            </SwiperSlide>
+          ))}
+          <SwiperNavigation />
+        </Swiper>
+      </SwiperContainer>
+    </div>
+  )
+}