Merge pull request #177 from ethereum/vision-page

Add vision page, update associated components

Author: pettinarip

src/components/PageHero.tsx

@@ -22,7 +22,7 @@ type ButtonType = Omit<ButtonProps, "content"> & {
   matomo: MatomoEventOptions
 }
 
-type ContentType = {
+export type ContentType = {
   buttons?: (ButtonLinkType | ButtonType)[]
   title: ReactNode
   header: ReactNode

src/components/Trilemma/index.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { useTranslation } from "next-i18next"
 import {
   Drawer,
   DrawerCloseButton,
@@ -9,17 +9,16 @@ import {
   useToken,
 } from "@chakra-ui/react"
 
-import Card from "../Card"
-import OldHeading from "../OldHeading"
-import Text from "../OldText"
-import Translation from "../Translation"
+import Card from "@/components/Card"
+import OldHeading from "@/components/OldHeading"
+import Text from "@/components/OldText"
 
-import { IProps as TriangleSVGProps,TriangleSVG } from "./Triangle"
+import { IProps as TriangleSVGProps, TriangleSVG } from "./Triangle"
 import { useTrilemma } from "./useTrilemma"
 
-export interface IProps {}
+const Trilemma = () => {
+  const { t } = useTranslation("page-roadmap-vision")
 
-const Trilemma: React.FC<IProps> = () => {
   const {
     trilemmaChecks,
     mobileModalOpen,
@@ -53,19 +52,19 @@ const Trilemma: React.FC<IProps> = () => {
         }}
       >
         <OldHeading fontSize="2rem" mt={0}>
-          <Translation id="page-roadmap-vision-trilemma-h2" />
+          {t("page-roadmap-vision-trilemma-h2")}
         </OldHeading>
         <Text>
-          <Translation id="page-roadmap-vision-trilemma-p" />
+          {t("page-roadmap-vision-trilemma-p")}
         </Text>
         <Text>
-          <Translation id="page-roadmap-vision-trilemma-p-1" />
+          {t("page-roadmap-vision-trilemma-p-1")}
         </Text>
         <Text>
-          <Translation id="page-roadmap-vision-trilemma-p-2" />
+          {t("page-roadmap-vision-trilemma-p-2")}
         </Text>
         <Text fontWeight={600} hideFrom={lgBp}>
-          <Translation id="page-roadmap-vision-trilemma-modal-tip" />:
+          {t("page-roadmap-vision-trilemma-modal-tip")}:
         </Text>
         <Card {...cardDetail} mt={8} minH="300px" hideBelow={lgBp} />
       </Flex>

src/components/Trilemma/useTrilemma.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react"
+import { useState } from "react"
+import { useTranslation } from "next-i18next"
 
 import { IProps as CardProps } from "../Card"
-import Translation from "../Translation"
 
 /**
  * The `selection` param accepted values for the click handler
@@ -13,6 +13,8 @@ export type HandleClickParam =
   | "isScalableAndSecure"
 
 export const useTrilemma = () => {
+  const { t } = useTranslation("page-roadmap-vision")
+
   const [state, setState] = useState({
     isDecentralizedAndSecure: false,
     isDecentralizedAndScalable: false,
@@ -73,20 +75,20 @@ export const useTrilemma = () => {
     })
   }
 
-  let cardTitle = <Translation id="page-roadmap-vision-trilemma-title-1" />
-  let cardText = <Translation id="page-roadmap-vision-trilemma-press-button" />
+  let cardTitle = t("page-roadmap-vision-trilemma-title-1")
+  let cardText = t("page-roadmap-vision-trilemma-press-button")
   if (isEthereum) {
-    cardTitle = <Translation id="page-roadmap-vision-trilemma-title-2" />
-    cardText = <Translation id="page-roadmap-vision-trilemma-cardtext-1" />
+    cardTitle = t("page-roadmap-vision-trilemma-title-2")
+    cardText = t("page-roadmap-vision-trilemma-cardtext-1")
   } else if (state.isDecentralizedAndSecure) {
-    cardTitle = <Translation id="page-roadmap-vision-trilemma-title-3" />
-    cardText = <Translation id="page-roadmap-vision-trilemma-cardtext-2" />
+    cardTitle = t("page-roadmap-vision-trilemma-title-3")
+    cardText = t("page-roadmap-vision-trilemma-cardtext-2")
   } else if (state.isDecentralizedAndScalable) {
-    cardTitle = <Translation id="page-roadmap-vision-trilemma-title-4" />
-    cardText = <Translation id="page-roadmap-vision-trilemma-cardtext-3" />
+    cardTitle = t("page-roadmap-vision-trilemma-title-4")
+    cardText = t("page-roadmap-vision-trilemma-cardtext-3")
   } else if (state.isScalableAndSecure) {
-    cardTitle = <Translation id="page-roadmap-vision-trilemma-title-5" />
-    cardText = <Translation id="page-roadmap-vision-trilemma-cardtext-4" />
+    cardTitle = t("page-roadmap-vision-trilemma-title-5")
+    cardText = t("page-roadmap-vision-trilemma-cardtext-4")
   }
 
   return {

src/lib/utils/translations.ts

@@ -113,6 +113,14 @@ const getRequiredNamespacesForPath = (path: string) => {
     requiredNamespaces = [...requiredNamespaces, "page-languages"]
   }
 
+  if (path.startsWith("/roadmap/vision")) {
+    requiredNamespaces = [
+      ...requiredNamespaces,
+      "page-roadmap-vision",
+      "page-upgrades-index",
+    ]
+  }
+
   if (path.startsWith("/gas")) {
     requiredNamespaces = [...requiredNamespaces, "page-gas", "page-community"]
   }