Merge pull request #16137 from ethereum/dev

Release candidate v10.11.0

Author: corwintines

.all-contributorsrc

@@ -11267,7 +11267,7 @@
       "login": "konopkja",
       "name": "Jakub",
       "avatar_url": "https://avatars.githubusercontent.com/u/100724231?v=4",
-      "profile": "http://ethereum.org",
+      "profile": "https://ethereum.org",
       "contributions": [
         "doc",
         "content",
@@ -13115,6 +13115,15 @@
       "contributions": [
         "maintenance"
       ]
+    },
+    {
+      "login": "haouvw",
+      "name": "haouvw",
+      "avatar_url": "https://avatars.githubusercontent.com/u/171421479?v=4",
+      "profile": "https://github.com/haouvw",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1778,7 +1778,7 @@ 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/enjoyooor"><img src="https://avatars.githubusercontent.com/u/147568088?v=4?s=100" width="100px;" alt="enjoyooor"/><br /><sub><b>enjoyooor</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=enjoyooor" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="http://ethereum.org"><img src="https://avatars.githubusercontent.com/u/100724231?v=4?s=100" width="100px;" alt="Jakub"/><br /><sub><b>Jakub</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=konopkja" title="Documentation">📖</a> <a href="#content-konopkja" title="Content">🖋</a> <a href="#design-konopkja" title="Design">🎨</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://ethereum.org"><img src="https://avatars.githubusercontent.com/u/100724231?v=4?s=100" width="100px;" alt="Jakub"/><br /><sub><b>Jakub</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=konopkja" title="Documentation">📖</a> <a href="#content-konopkja" title="Content">🖋</a> <a href="#design-konopkja" title="Design">🎨</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://www.ymusleh.com"><img src="https://avatars.githubusercontent.com/u/6829768?v=4?s=100" width="100px;" alt="Yusuf Musleh"/><br /><sub><b>Yusuf Musleh</b></sub></a><br /><a href="#content-yusuf-musleh" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/acceptacross"><img src="https://avatars.githubusercontent.com/u/150119116?v=4?s=100" width="100px;" alt="acceptacross"/><br /><sub><b>acceptacross</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=acceptacross" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/pdelagrave"><img src="https://avatars.githubusercontent.com/u/17990895?v=4?s=100" width="100px;" alt="Pierre Delagrave"/><br /><sub><b>Pierre Delagrave</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Apdelagrave" title="Bug reports">🐛</a></td>
@@ -2039,6 +2039,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="http://abel.fr"><img src="https://avatars.githubusercontent.com/u/5216201?v=4?s=100" width="100px;" alt="Abel Derderian"/><br /><sub><b>Abel Derderian</b></sub></a><br /><a href="#maintenance-abeldotam" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/haouvw"><img src="https://avatars.githubusercontent.com/u/171421479?v=4?s=100" width="100px;" alt="haouvw"/><br /><sub><b>haouvw</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Ahaouvw" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

app/[locale]/10years/_components/NFTMintCard/index.tsx

@@ -1,3 +1,5 @@
+import { useTranslations } from "next-intl"
+
 import { Alert, AlertContent, AlertTitle } from "@/components/ui/alert"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
@@ -10,6 +12,8 @@ interface NFTMintCardProps {
 }
 
 const NFTMintCard = ({ className }: NFTMintCardProps) => {
+  const t = useTranslations("page-10-year-anniversary")
+
   return (
     <Card
       className={cn(
@@ -25,7 +29,7 @@ const NFTMintCard = ({ className }: NFTMintCardProps) => {
               <video
                 className="pointer-events-none h-full w-full select-none rounded-full object-cover"
                 src="/videos/10y-video.mp4"
-                aria-label="10th anniversary video"
+                aria-label={t("page-10-year-video-aria-label")}
                 autoPlay
                 loop
                 muted
@@ -46,13 +50,14 @@ const NFTMintCard = ({ className }: NFTMintCardProps) => {
           />
         </div>
 
-        <CardTitle className="text-center">Mint the moment</CardTitle>
+        <CardTitle className="text-center">
+          {t("page-10-year-mint-card-title")}
+        </CardTitle>
       </CardHeader>
 
       <CardContent className="space-y-6 p-6 text-center">
         <p className="text-body-medium">
-          Celebrate a decade of decentralization with a free, limited-time 10th
-          anniversary NFT. Mint yours before time runs out.
+          {t("page-10-year-mint-card-description")}
         </p>
 
         <Alert
@@ -61,10 +66,10 @@ const NFTMintCard = ({ className }: NFTMintCardProps) => {
         >
           <AlertContent>
             <AlertTitle className="!text-primary">
-              The claim period has ended
+              {t("page-10-year-mint-card-ended-title")}
             </AlertTitle>
             <p className="text-primary">
-              Thank you all for joining the celebration
+              {t("page-10-year-mint-card-ended-description")}
             </p>
           </AlertContent>
         </Alert>

app/[locale]/10years/page.tsx

@@ -139,12 +139,14 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
       <div className="w-full px-4 py-8 md:px-8">
         <div className="flex flex-col items-center gap-4 rounded-4xl bg-radial-a px-4 pt-8 lg:px-14 lg:pt-14">
           <div className="flex flex-col gap-4 text-center">
-            <h2 className="text-4xl font-black">Join the livestream</h2>
+            <h2 className="text-4xl font-black">
+              {t("page-10-year-livestream-title")}
+            </h2>
           </div>
           <YouTube
             className="w-full max-w-none"
             id="igPIMF1p5Bo"
-            title="Livestream 10 years of Ethereum"
+            title={t("page-10-year-livestream-video-title")}
             poster="maxresdefault"
           />
         </div>
@@ -284,37 +286,27 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
         <div className="flex flex-col gap-12 px-8 pb-24 pt-12 text-body-inverse sm:px-16 md:flex-row dark:text-body">
           <div className="flex flex-1 flex-col gap-8">
             <p>
-              To commemorate this historic milestone, we&apos;re introducing the{" "}
-              <strong>Ethereum Torch NFT</strong> a NFT that embodies the spirit
-              of decentralization and community that has defined Ethereum&apos;s
-              first decade.
+              <Translation
+                id="page-10-year-torch-nft-intro"
+                ns="page-10-year-anniversary"
+              />
             </p>
 
-            <p>
-              Like a ceremonial flame that travels from community to community,
-              the Ethereum Torch will journey across the global Ethereum
-              ecosystem. This special NFT will be passed from wallet to wallet
-              among carefully selected community members, developers, and
-              builders who have shaped Ethereum&apos;s story over the past 10
-              years.
-            </p>
+            <p>{t("page-10-year-torch-nft-description")}</p>
           </div>
           <div className="flex flex-1 flex-col gap-8">
             <div>
-              <h3 className="text-lg font-bold">One-of-a-kind:</h3>
-              <p>
-                Only one Ethereum Torch NFT exists, making each holder a
-                temporary guardian of Ethereum&apos;s legacy
-              </p>
+              <h3 className="text-lg font-bold">
+                {t("page-10-year-torch-one-of-kind-title")}
+              </h3>
+              <p>{t("page-10-year-torch-one-of-kind-description")}</p>
             </div>
 
             <div>
-              <h3 className="text-lg font-bold">Time-limited custody:</h3>
-              <p>
-                Each holder keeps the torch for 24hours before passing it to the
-                next guardian. On July 30 this NFT wil be burned to celebrate
-                the anniversary.
-              </p>
+              <h3 className="text-lg font-bold">
+                {t("page-10-year-torch-time-limited-title")}
+              </h3>
+              <p>{t("page-10-year-torch-time-limited-description")}</p>
             </div>
           </div>
         </div>

app/[locale]/apps/[application]/page.tsx

@@ -1,6 +1,10 @@
 import { pick } from "lodash"
 import { notFound } from "next/navigation"
-import { getMessages, setRequestLocale } from "next-intl/server"
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server"
 
 import { ChainName } from "@/lib/types"
 
@@ -58,6 +62,9 @@ const Page = async ({
   const { locale, application } = await params
   setRequestLocale(locale)
 
+  // Get translations
+  const t = await getTranslations({ locale, namespace: "page-apps" })
+
   // Get i18n messages
   const allMessages = await getMessages({ locale })
   const requiredNamespaces = getRequiredNamespacesForPage("/apps")
@@ -115,9 +122,9 @@ const Page = async ({
     const diffInMs = now.getTime() - date.getTime()
     const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24))
 
-    if (diffInDays === 0) return "Today"
-    if (diffInDays === 1) return "1 day ago"
-    return `${diffInDays} days ago`
+    if (diffInDays === 0) return t("page-apps-today")
+    if (diffInDays === 1) return t("page-apps-one-day-ago")
+    return t("page-apps-days-ago", { days: diffInDays })
   }
 
   return (
@@ -194,7 +201,7 @@ const Page = async ({
                       eventName: "visit",
                     }}
                   >
-                    Visit {app.name}
+                    {t("page-apps-visit-app", { appName: app.name })}
                   </ButtonLink>
                   <div className="flex flex-row justify-between gap-4">
                     <div className="flex h-fit flex-row flex-wrap gap-4">
@@ -250,13 +257,15 @@ const Page = async ({
                     {nextApp && (
                       <LinkBox className="group flex flex-row items-center rounded-lg hover:bg-background-highlight sm:hidden">
                         <div className="mr-2 flex flex-col text-right">
-                          <p className="text-sm text-gray-500">See next</p>
+                          <p className="text-sm text-gray-500">
+                            {t("page-apps-see-next")}
+                          </p>
                           <p className="text-primary group-hover:text-primary-hover">
                             {nextApp.name}
                           </p>
                           <LinkOverlay
                             href={`/apps/${slugify(nextApp.name)}`}
-                            matomoEvent={{
+                            customEventOptions={{
                               eventCategory: "detail",
                               eventAction: `app name ${app.name}`,
                               eventName: "see_next",
@@ -275,13 +284,15 @@ const Page = async ({
             {nextApp && (
               <LinkBox className="group hidden flex-row items-center rounded-lg p-3 hover:bg-background-highlight sm:flex">
                 <div className="mr-2 flex flex-col text-right">
-                  <p className="text-nowrap text-sm text-gray-500">See next</p>
+                  <p className="text-nowrap text-sm text-gray-500">
+                    {t("page-apps-see-next")}
+                  </p>
                   <p className="text-primary group-hover:text-primary-hover">
                     {nextApp.name}
                   </p>
                   <LinkOverlay
                     href={`/apps/${slugify(nextApp.name)}`}
-                    matomoEvent={{
+                    customEventOptions={{
                       eventCategory: "detail",
                       eventAction: `app name ${app.name}`,
                       eventName: "see_next",
@@ -299,25 +310,31 @@ const Page = async ({
         <div className="grid grid-cols-1 grid-rows-[auto_1fr] gap-10 bg-background-highlight px-4 py-10 md:grid-cols-[minmax(0,1fr)_auto] md:px-8">
           <p className="max-w-3xl">{app.description}</p>
           <div className="flex h-fit w-full flex-col gap-4 rounded-2xl border bg-background p-8 md:row-span-2 md:w-44">
-            <h3 className="text-lg">Info</h3>
+            <h3 className="text-lg">{t("page-apps-info-title")}</h3>
             <div>
-              <p className="text-sm text-body-medium">Founded</p>
+              <p className="text-sm text-body-medium">
+                {t("page-apps-info-founded")}
+              </p>
               <p className="text-sm">
                 {new Date(app.dateOfLaunch).getFullYear()}
               </p>
             </div>
             <div>
-              <p className="text-sm text-body-medium">Creator</p>
+              <p className="text-sm text-body-medium">
+                {t("page-apps-info-creator")}
+              </p>
               <p className="text-sm">{app.parentCompany}</p>
             </div>
             <div>
-              <p className="text-sm text-body-medium">Last updated</p>
+              <p className="text-sm text-body-medium">
+                {t("page-apps-info-last-updated")}
+              </p>
               <p className="text-sm">{getTimeAgo(app.lastUpdated)}</p>
             </div>
           </div>
           {app.screenshots.length > 0 && (
             <div className="flex flex-col gap-4">
-              <h3 className="text-2xl">Gallery</h3>
+              <h3 className="text-2xl">{t("page-apps-gallery-title")}</h3>
               <ScreenshotSwiper
                 screenshots={app.screenshots}
                 appName={app.name}
@@ -329,7 +346,7 @@ const Page = async ({
         {relatedApps.length > 0 && (
           <div className="flex flex-col px-4 py-10 md:px-8">
             <div className="flex w-full flex-col items-center gap-8 rounded-2xl bg-gradient-to-t from-blue-500/20 from-10% to-blue-500/5 to-90% p-12 px-4 md:px-8">
-              <h2>More apps like this</h2>
+              <h2>{t("page-apps-more-apps-like-this")}</h2>
               <div className="flex w-full flex-col gap-4 lg:flex-row">
                 {relatedApps.map((relatedApp) => (
                   <div

app/[locale]/apps/_components/AppCard.tsx

@@ -99,7 +99,7 @@ const AppCard = ({
       <LinkOverlay
         href={`/apps/${slugify(app.name)}`}
         className="no-underline"
-        matomoEvent={{
+        customEventOptions={{
           eventCategory: matomoCategory,
           eventAction: `${matomoAction}`,
           eventName: `app name ${app.name}`,

app/[locale]/apps/_components/AppsHighlight.tsx

@@ -23,7 +23,7 @@ const AppsHighlight = ({ apps, matomoCategory }: AppsHighlightProps) => {
       <LinkOverlay
         href={`/apps/${slugify(app.name)}`}
         className="no-underline"
-        matomoEvent={{
+        customEventOptions={{
           eventCategory: matomoCategory,
           eventAction: "highlights",
           eventName: `app name ${app.name}`,

app/[locale]/apps/_components/AppsTable.tsx

@@ -16,7 +16,10 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import AppCard from "./AppCard"
 
+import useTranslation from "@/hooks/useTranslation"
+
 const AppsTable = ({ apps }: { apps: AppData[] }) => {
+  const { t } = useTranslation("page-apps")
   const [filterBy, setFilterBy] = useState("All")
 
   const subCategories = useMemo(
@@ -41,7 +44,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
     <div className="flex flex-col gap-7">
       <div className="flex flex-row items-end justify-between border-b pb-2 sm:items-center">
         <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
-          <p className="whitespace-nowrap">Filter by</p>
+          <p className="whitespace-nowrap">{t("page-apps-filter-by")}</p>
           <Select
             value={filterBy}
             onValueChange={(value) => {
@@ -61,7 +64,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
                 value="All"
                 className="cursor-pointer hover:bg-primary-low-contrast"
               >
-                All
+                {t("page-apps-filter-all")}
               </SelectItem>
               {subCategories.map((subCategory) => (
                 <SelectItem
@@ -77,7 +80,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
         </div>
         <div>
           <p className="text-body-medium">
-            Showing{" "}
+            {t("page-apps-showing")}{" "}
             <span className="text-body">
               (
               {filteredApps.length === apps.length

app/[locale]/apps/_components/CategoriesNav.tsx

@@ -1,12 +1,22 @@
+import { getTranslations } from "next-intl/server"
+
 import TabNav from "@/components/ui/TabNav"
 
+import { slugify } from "@/lib/utils/url"
+
 import { appsCategories } from "@/data/apps/categories"
 
-const CategoriesNav = ({ activeCategory = "" }: { activeCategory: string }) => {
+const CategoriesNav = async ({
+  activeCategory = "",
+}: {
+  activeCategory: string
+}) => {
+  const t = await getTranslations("page-apps")
+
   const items = Object.values(appsCategories).map(
     ({ name, icon: Icon, slug }) => ({
-      key: name,
-      label: name,
+      key: slug,
+      label: t(name),
       href: `/apps/categories/${slug}`,
       icon: <Icon className="h-4 w-4" />,
     })
@@ -15,7 +25,7 @@ const CategoriesNav = ({ activeCategory = "" }: { activeCategory: string }) => {
   return (
     <TabNav
       items={items}
-      activeKey={activeCategory}
+      activeKey={slugify(activeCategory)}
       customEventOptions={{
         eventCategory: "categories_page",
         eventAction: "navigation",