Merge pull request #14022 from ethereum/fix-dropdown-intl

fix: dropdown intl bugs

Author: corwintines

src/hooks/useStakingConsiderations.ts

@@ -389,8 +389,8 @@ export const useStakingConsiderations = ({
     pageData[activeIndex]
 
   const dropdownLinks: ButtonDropdownList = {
-    text: "Staking Considerations",
-    ariaLabel: "Dropdown menu for staking considerations",
+    text: t("page-staking-considerations-dropdown-text"),
+    ariaLabel: t("page-staking-considerations-dropdown-aria-label"),
     items: pageData.map(({ title, matomo }) => ({
       text: title,
       callback: setActiveIndex,

src/intl/en/page-staking.json

@@ -89,6 +89,8 @@
   "page-staking-comparison-saas-pools": "These are similar in that you're generally relying on someone else to run the validator client, but unlike SaaS, pooled staking allows you to participate with smaller amounts of ETH. If you're looking to stake with less than 32 ETH, consider checking these out.",
   "page-staking-comparison-pools-solo": "Pooled staking has a significantly lower barrier to entry when compared to home staking, but comes with additional risk by delegating all node operations to a third-party, and with a fee. Home staking gives full sovereignty and control over the choices that go into choosing a staking setup. Stakers never have to hand over their keys, and they earn full rewards without any middlemen taking a cut.",
   "page-staking-comparison-pools-saas": "These are similar in that stakers do not run the validator software themselves, but unlike pooling options, SaaS requires a full 32 ETH deposit to activate a validator. Rewards accumulate to the staker, and usually involve a monthly fee or other stake to use the service. If you'd prefer your own validator keys and are looking to stake at least 32 ETH, using a SaaS provider may be a good option for you.",
+  "page-staking-considerations-dropdown-text": "Staking Considerations",
+  "page-staking-considerations-dropdown-aria-label": "Dropdown menu for staking considerations",
   "page-staking-considerations-solo-1-title": "Open source",
   "page-staking-considerations-solo-1-description": "Essential code is 100% open source and available to the public to fork and use",
   "page-staking-considerations-solo-1-warning": "Closed source",

src/layouts/md/Roadmap.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from "next-i18next"
+
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, RoadmapFrontmatter } from "@/lib/interfaces"
 
@@ -34,12 +36,14 @@ export const RoadmapLayout = ({
   tocItems,
   contentNotTranslated,
 }: RoadmapLayoutProps) => {
+  const { t } = useTranslation("common")
+
   const dropdownLinks: ButtonDropdownList = {
-    text: "nav-roadmap-options",
-    ariaLabel: "nav-roadmap-options-alt",
+    text: t("common:nav-roadmap-options"),
+    ariaLabel: t("common:nav-roadmap-options-alt"),
     items: [
       {
-        text: "nav-roadmap-home",
+        text: t("common:nav-roadmap-home"),
         href: "/roadmap/",
         matomo: {
           eventCategory: `Roadmap dropdown`,
@@ -48,7 +52,7 @@ export const RoadmapLayout = ({
         },
       },
       {
-        text: "nav-roadmap-security",
+        text: t("common:nav-roadmap-security"),
         href: "/roadmap/security",
         matomo: {
           eventCategory: `Roadmap security dropdown`,
@@ -57,7 +61,7 @@ export const RoadmapLayout = ({
         },
       },
       {
-        text: "nav-roadmap-scaling",
+        text: t("common:nav-roadmap-scaling"),
         href: "/roadmap/scaling",
         matomo: {
           eventCategory: `Roadmap scaling dropdown`,
@@ -66,7 +70,7 @@ export const RoadmapLayout = ({
         },
       },
       {
-        text: "nav-roadmap-user-experience",
+        text: t("common:nav-roadmap-user-experience"),
         href: "/roadmap/user-experience/",
         matomo: {
           eventCategory: `Roadmap user experience dropdown`,
@@ -75,7 +79,7 @@ export const RoadmapLayout = ({
         },
       },
       {
-        text: "nav-roadmap-future-proofing",
+        text: t("common:nav-roadmap-future-proofing"),
         href: "/roadmap/future-proofing",
         matomo: {
           eventCategory: `Roadmap future-proofing dropdown`,