TS migrate layer-2, stablecoins, and run-a-node pages

src/components/DataProductCard.tsx

@@ -105,6 +105,7 @@ export interface IProps {
   url: string
   background: string
   image: string
+  alt?: string
   name: string
   description?: string
   data?: Array<DataRow>
@@ -114,13 +115,14 @@ const DataProductCard: React.FC<IProps> = ({
   url,
   background,
   image,
+  alt,
   name,
   description,
   data,
 }) => (
   <Card hideArrow={true} to={url}>
     <ImageWrapper background={background}>
-      <Image image={image} alt={`${name} logo`} />
+      <Image image={image} alt={alt ? alt : `${name} logo`} />
     </ImageWrapper>
     <Content>
       <div>

src/components/ExpandableCard.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, { ComponentType, SVGProps, useState } from "react"
+import React, { ComponentType, ReactNode, SVGProps, useState } from "react"
 import styled from "styled-components"
 import { motion } from "framer-motion"
 
@@ -90,8 +90,8 @@ const ButtonLink = styled.button`
 `
 
 export interface IProps {
-  contentPreview?: string
-  title: string
+  contentPreview?: ReactNode
+  title: ReactNode
   svg?: ComponentType<SVGProps<SVGElement>>
   eventCategory?: string
   eventName?: string

src/components/ExpandableInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { ReactNode, useState } from "react"
 import styled from "styled-components"
 import { motion } from "framer-motion"
 import { GatsbyImage } from "gatsby-plugin-image"
@@ -99,8 +99,8 @@ const ButtonContainer = styled(motion.div)`
 
 export interface IProps {
   image?: string
-  title: string
-  contentPreview: string
+  title: ReactNode
+  contentPreview: ReactNode
   background: string
   forceOpen: boolean
   className?: string

src/components/Layer2/Layer2Onboard.tsx

@@ -165,22 +165,31 @@ const RightSelected = styled.div`
 `
 
 interface Exchange {
-  label?: string
-  value?: string
   name: string
   supports_deposits: Array<string>
   supports_withdrawals: Array<string>
   url: string
 }
 
 interface Layer2 {
-  label: string
   name: string
-  value: string
   bridgeWallets: Array<string>
   bridge: string
 }
 
+interface Option {
+  value: string
+  label: string
+}
+
+interface Layer2Option extends Option {
+  l2: Layer2
+}
+
+interface ExchangeOption extends Option {
+  cex: Exchange
+}
+
 export interface IProps {
   layer2DataCombined: Array<Layer2>
   ethIcon: string
@@ -197,6 +206,24 @@ const Layer2Onboard: React.FC<IProps> = ({
   const [selectedExchange, setSelectedExchange] = useState<Exchange>()
   const [selectedL2, setSelectedL2] = useState<Layer2>()
 
+  const layer2Options: Array<Layer2Option> = layer2DataCombined.map((l2) => {
+    return {
+      label: l2.name,
+      value: l2.name,
+      l2,
+    }
+  })
+
+  const cexSupportOptions: Array<ExchangeOption> = cexSupport.map(
+    (cex: Exchange) => {
+      return {
+        label: cex.name,
+        value: cex.name,
+        cex,
+      }
+    }
+  )
+
   return (
     <Content>
       <Description>
@@ -225,19 +252,15 @@ const Layer2Onboard: React.FC<IProps> = ({
           <StyledSelect
             className="react-select-container"
             classNamePrefix="react-select"
-            options={layer2DataCombined.map((l2) => {
-              l2.label = l2.name
-              l2.value = l2.name
-              return l2
-            })}
-            onChange={(selectedOption: Layer2) => {
+            options={layer2Options}
+            onChange={(selectedOption: Layer2Option) => {
               trackCustomEvent({
                 eventCategory: `Selected layer 2 to bridge to`,
                 eventAction: `Clicked`,
-                eventName: `${selectedOption.name} bridge selected`,
-                eventValue: `${selectedOption.name}`,
+                eventName: `${selectedOption.l2.name} bridge selected`,
+                eventValue: `${selectedOption.l2.name}`,
               })
-              setSelectedL2(selectedOption)
+              setSelectedL2(selectedOption.l2)
             }}
             placeholder={translateMessageId(
               "layer-2-onboard-wallet-input-placeholder",
@@ -285,19 +308,15 @@ const Layer2Onboard: React.FC<IProps> = ({
           <StyledSelect
             className="react-select-container"
             classNamePrefix="react-select"
-            options={cexSupport.map((cex: Exchange) => {
-              cex.label = cex.name
-              cex.value = cex.name
-              return cex
-            })}
-            onChange={(selectedOption: Exchange) => {
+            options={cexSupportOptions}
+            onChange={(selectedOption: ExchangeOption) => {
               trackCustomEvent({
                 eventCategory: `Selected cex to onboard`,
                 eventAction: `Clicked`,
-                eventName: `${selectedOption.name} selected`,
-                eventValue: `${selectedOption.name}`,
+                eventName: `${selectedOption.cex.name} selected`,
+                eventValue: `${selectedOption.cex.name}`,
               })
-              setSelectedExchange(selectedOption)
+              setSelectedExchange(selectedOption.cex)
             }}
             placeholder={translateMessageId(
               "layer-2-onboard-exchange-input-placeholder",
@@ -318,7 +337,7 @@ const Layer2Onboard: React.FC<IProps> = ({
                   </H3>
                   <ul>
                     {selectedExchange.supports_deposits.map((l2) => (
-                      <li>{l2}</li>
+                      <li key={l2}>{l2}</li>
                     ))}
                   </ul>
                 </Flex50>
@@ -328,7 +347,7 @@ const Layer2Onboard: React.FC<IProps> = ({
                   </H3>
                   <ul>
                     {selectedExchange.supports_withdrawals.map((l2) => (
-                      <li>{l2}</li>
+                      <li key={l2}>{l2}</li>
                     ))}
                   </ul>
                 </Flex50>

src/components/PageHero.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"
 import ButtonLink, { IProps as IButtonLinkProps } from "./ButtonLink"
@@ -94,22 +94,22 @@ const StyledButtonLink = styled(ButtonLink)`
 `
 
 export interface IButton extends Partial<IButtonLinkProps> {
-  content: string
+  content: ReactNode
 }
 
 export interface IContent {
   buttons?: Array<IButton>
-  title: string
-  header: string
-  subtitle: string
+  title: ReactNode
+  header: ReactNode
+  subtitle: ReactNode
   image: string
   alt: string
 }
 
 export interface IProps {
   content: IContent
   isReverse?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   className?: string
 }
 

src/components/SimpleTable.tsx

@@ -118,7 +118,7 @@ export interface TableRow {
 }
 
 export interface IProps {
-  columns: Array<TranslationKey>
+  columns: Array<string>
   content: Array<TableRow>
   hasError: boolean
 }

src/components/StablecoinBoxGrid.tsx

@@ -152,7 +152,7 @@ interface ILink {
   text: string
 }
 
-export interface IPropsGridItem {
+interface IPropsGridItem {
   description: string
   columnNumber: number
   rowNumber: number
@@ -259,8 +259,17 @@ const GridItem: React.FC<IPropsGridItem> = ({
   )
 }
 
+export interface IPropsBoxItem {
+  description: string
+  emoji: string
+  title: string
+  pros?: Array<string>
+  cons?: Array<string>
+  links: Array<ILink>
+}
+
 export interface IProps {
-  items: Array<IPropsGridItem>
+  items: Array<IPropsBoxItem>
 }
 
 const StablecoinBoxGrid: React.FC<IProps> = ({ items }) => {