Merge pull request #14054 from ethereum/staging-update

Staging -> dev

Author: corwintines

src/components/Homepage/ValuesMarquee.tsx

@@ -19,13 +19,15 @@ import {
 } from "../ui/section"
 
 import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion"
+import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 type ItemProps = React.HTMLAttributes<HTMLButtonElement> & {
   pairing: Pairing
   separatorClass: string
   container?: HTMLElement | null
   label: string
   eventCategory: string
+  direction: HTMLDivElement["dir"]
 }
 
 const Item = ({
@@ -36,6 +38,7 @@ const Item = ({
   container,
   label,
   eventCategory,
+  direction,
 }: ItemProps) => (
   <>
     <Tooltip
@@ -86,6 +89,7 @@ const Item = ({
           "flex flex-nowrap items-center text-nowrap rounded-full px-4 py-1 font-bold uppercase",
           className
         )}
+        dir={direction}
       >
         {children}
       </div>
@@ -98,6 +102,7 @@ const Item = ({
     />
   </>
 )
+Item.displayName = "MarqueeItem"
 
 type RowProps = React.HTMLAttributes<HTMLDivElement> & {
   toRight?: boolean
@@ -106,12 +111,15 @@ type RowProps = React.HTMLAttributes<HTMLDivElement> & {
 const Row = forwardRef<HTMLDivElement, RowProps>(
   ({ className, children, toRight }, ref) => {
     const { prefersReducedMotion } = usePrefersReducedMotion()
+
     const fadeEdges = {
       mask: `linear-gradient(to right, transparent 1rem, white 15%, white 85%, transparent calc(100% - 1rem))`,
     }
 
     return (
-      <div ref={ref} className={cn("group", className)}>
+      // Note: dir="ltr" forced on parent to prevent "translateX" animation bugs
+      // Locale "direction" passed to marquee Item for correction
+      <div ref={ref} className={cn("group", className)} dir="ltr">
         <div
           className="flex max-w-full overflow-hidden motion-reduce:overflow-auto"
           style={prefersReducedMotion ? {} : fadeEdges}
@@ -137,7 +145,7 @@ const Row = forwardRef<HTMLDivElement, RowProps>(
     )
   }
 )
-Row.displayName = "Row"
+Row.displayName = "MarqueeRow"
 
 const ValuesMarquee = () => {
   const { t, pairings, eventCategory } = useValuesMarquee()
@@ -160,6 +168,8 @@ const ValuesMarquee = () => {
     }
   }, [])
 
+  const { direction, isRtl, twFlipForRtl } = useRtlFlip()
+
   return (
     <Section id="values" className="!sm:my-64 !my-48 scroll-m-48">
       <SectionContent className="flex flex-col items-center text-center">
@@ -185,6 +195,7 @@ const ValuesMarquee = () => {
               separatorClass="bg-accent-a"
               className="group/item bg-blue-100 text-blue-600 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700"
               eventCategory={eventCategory}
+              direction={direction}
             >
               <FaCheck className="me-1 text-success group-hover/item:text-white" />
               {pairing.ethereum.label}
@@ -206,13 +217,19 @@ const ValuesMarquee = () => {
               className="bg-gray-200/20 text-body-medium hover:bg-gray-600 hover:text-white dark:bg-gray-950 dark:text-body"
               separatorClass="bg-gray-200 dark:bg-gray-950"
               eventCategory={eventCategory}
+              direction={direction}
             >
               {pairing.legacy.label}
             </Item>
           ))}
         </Row>
 
-        <div className="absolute start-[50%] top-[50%] flex -translate-x-[50%] -translate-y-[50%] items-center overflow-hidden rounded-lg text-sm font-bold">
+        <div
+          className={cn(
+            "absolute start-[50%] top-[50%] flex -translate-y-[50%] items-center overflow-hidden rounded-lg text-sm font-bold",
+            isRtl ? "translate-x-[50%]" : "-translate-x-[50%]"
+          )}
+        >
           <p className="bg-gray-50 px-4 py-1 text-body-medium dark:bg-gray-800 dark:text-gray-200">
             {t("page-index-values-legacy")}
           </p>
@@ -222,7 +239,8 @@ const ValuesMarquee = () => {
               "border-t-[15px] border-t-blue-50 dark:border-t-blue-600",
               "border-r-8 border-r-blue-50 dark:border-r-blue-600",
               "border-b-[15px] border-b-gray-50 dark:border-b-gray-800",
-              "border-l-8 border-l-gray-50 dark:border-l-gray-800"
+              "border-l-8 border-l-gray-50 dark:border-l-gray-800",
+              twFlipForRtl
             )}
           />
 
@@ -234,5 +252,6 @@ const ValuesMarquee = () => {
     </Section>
   )
 }
+ValuesMarquee.displayName = "ValuesMarquee"
 
 export default ValuesMarquee

src/components/ui/tabs.tsx

@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-t border-b border-b-primary px-4 py-1.5 ring-offset-background transition-all focus-visible:outline focus-visible:outline-4 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-body-inverse",
+      "inline-flex items-center justify-center rounded-t border-b border-b-primary px-4 py-1.5 ring-offset-background transition-all focus-visible:outline focus-visible:outline-4 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-body-inverse",
       className
     )}
     {...props}

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`,

src/pages/get-eth.tsx

@@ -167,7 +167,7 @@ const GetEthPage = ({
             priority
           />
           <div className="my-8 flex flex-col items-center text-center lg:mx-0 lg:mb-0 lg:mt-24">
-            <h1 className="my-8 text-4xl leading-6 md:text-5xl">
+            <h1 className="my-8 text-4xl md:text-5xl">
               {t("page-get-eth-where-to-buy-title")}
             </h1>
             <p className="mb-0 max-w-[45ch] text-center text-xl leading-snug text-body-medium">