From f02b1d0f06a3359b11589acb3fce7581cabffa45 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Tue, 26 Jul 2022 19:46:34 -0300
Subject: [PATCH] migrate upgrade pages to ts

---
 src/components/ActionCard.tsx                |  6 +++---
 src/pages/upgrades/{index.js => index.tsx}   | 16 +++++++++-------
 src/pages/upgrades/{vision.js => vision.tsx} | 15 ++++++++++-----
 3 files changed, 22 insertions(+), 15 deletions(-)
 rename src/pages/upgrades/{index.js => index.tsx} (98%)
 rename src/pages/upgrades/{vision.js => vision.tsx} (97%)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index df1c95d7f33..89c6aeec1d1 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { ReactNode } from "react"
 import styled from "styled-components"
 import { GatsbyImage } from "gatsby-plugin-image"
 
@@ -69,8 +69,8 @@ export interface IProps {
   to: string
   alt?: string
   image: string
-  title: string
-  description?: string
+  title: ReactNode
+  description?: ReactNode
   className?: string
   isRight?: boolean
   isBottom?: boolean
diff --git a/src/pages/upgrades/index.js b/src/pages/upgrades/index.tsx
similarity index 98%
rename from src/pages/upgrades/index.js
rename to src/pages/upgrades/index.tsx
index 072c39c40d8..1bed03d987e 100644
--- a/src/pages/upgrades/index.js
+++ b/src/pages/upgrades/index.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import styled from "styled-components"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { graphql } from "gatsby"
+import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 
 import ButtonLink from "../../components/ButtonLink"
@@ -16,7 +16,9 @@ import InfoBanner from "../../components/InfoBanner"
 import Link from "../../components/Link"
 import PageMetadata from "../../components/PageMetadata"
 import Translation from "../../components/Translation"
-import PageHero from "../../components/PageHero"
+import PageHero, {
+  IContent as IPageHeroContent,
+} from "../../components/PageHero"
 import {
   CardContainer,
   Content,
@@ -221,10 +223,10 @@ const paths = [
   },
 ]
 
-const Eth2IndexPage = ({ data }) => {
+const Eth2IndexPage = ({ data }: PageProps<Queries.UpgradesPageQuery>) => {
   const intl = useIntl()
 
-  const heroContent = {
+  const heroContent: IPageHeroContent = {
     title: translateMessageId("page-upgrades-upgrades", intl),
     header: translateMessageId("page-upgrades-upgrading", intl),
     subtitle: translateMessageId("page-upgrades-upgrade-desc", intl),
@@ -233,12 +235,12 @@ const Eth2IndexPage = ({ data }) => {
     buttons: [
       {
         content: translateMessageId("page-upgrades-explore-btn", intl),
-        path: "/upgrades/beacon-chain/",
+        to: "/upgrades/beacon-chain/",
       },
       {
         content: translateMessageId("page-upgrades-whats-ethereum", intl),
-        path: "/what-is-ethereum/",
-        isSecondary: "isSecondary",
+        to: "/what-is-ethereum/",
+        isSecondary: true,
       },
     ],
   }
diff --git a/src/pages/upgrades/vision.js b/src/pages/upgrades/vision.tsx
similarity index 97%
rename from src/pages/upgrades/vision.js
rename to src/pages/upgrades/vision.tsx
index d33de1e1ea5..6f01c0c11be 100644
--- a/src/pages/upgrades/vision.js
+++ b/src/pages/upgrades/vision.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "styled-components"
-import { graphql } from "gatsby"
+import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 import { getImage } from "gatsby-plugin-image"
 
@@ -11,7 +11,9 @@ import ActionCard from "../../components/ActionCard"
 import Link from "../../components/Link"
 import Emoji from "../../components/Emoji"
 import Trilemma from "../../components/Trilemma"
-import PageHero from "../../components/PageHero"
+import PageHero, {
+  IContent as IPageHeroContent,
+} from "../../components/PageHero"
 import Breadcrumbs from "../../components/Breadcrumbs"
 import ButtonLink from "../../components/ButtonLink"
 import PageMetadata from "../../components/PageMetadata"
@@ -87,10 +89,13 @@ const paths = [
   },
 ]
 
-const VisionPage = ({ data, location }) => {
+const VisionPage = ({
+  data,
+  location,
+}: PageProps<Queries.UpgradesVisionPageQuery>) => {
   const intl = useIntl()
 
-  const heroContent = {
+  const heroContent: IPageHeroContent = {
     title: translateMessageId("page-upgrades-vision-title", intl),
     header: translateMessageId("page-upgrades-vision-future", intl),
     subtitle: translateMessageId("page-upgrades-vision-subtitle", intl),
@@ -297,7 +302,7 @@ const VisionPage = ({ data, location }) => {
           {upgrades.map((upgrade, idx) => (
             <ActionCard
               isRight
-              key={upgrade.title}
+              key={idx}
               image={upgrade.image}
               title={upgrade.title}
               description={upgrade.description}