Feat/convert ts d files

overrides.d.ts

@@ -2,3 +2,15 @@
 // errors.
 // TODO: create issue in Gatsby repo
 declare module "gatsby-plugin-image"
+
+declare module "*developer-docs-links.yaml" {
+  export interface DeveloperDocsLink {
+    id: string
+    to: string
+    path: string
+    description: string
+    items: Array<DeveloperDocsLink>
+  }
+  const content: Array<DeveloperDocsLink>
+  export default content
+}

src/components/DataProductCard.js → src/components/DataProductCard.tsx

@@ -4,7 +4,9 @@ import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"
 
-const ImageWrapper = styled.div`
+const ImageWrapper = styled.div<{
+  background: string
+}>`
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -93,7 +95,22 @@ const Logo = styled(GatsbyImage)`
   margin-right: 0.5rem;
 `
 
-const DataProductCard = ({
+export interface DataRow {
+  logo: string
+  coin: string
+  apy: string
+}
+
+export interface IProps {
+  url: string
+  background: string
+  image: string
+  name: string
+  description?: string
+  data?: Array<DataRow>
+}
+
+const DataProductCard: React.FC<IProps> = ({
   url,
   background,
   image,

src/components/DeveloperDocsLinks.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+import { ListItem } from "./SharedStyledComponents"
+import Translation from "./Translation"
+import Link from "./Link"
+import docLinks from "../data/developer-docs-links.yaml"
+
+export interface IProps {
+  headerId: string
+}
+
+const DeveloperDocsLinks: React.FC<IProps> = ({ headerId }) => (
+  <React.Fragment>
+    {docLinks
+      .filter(({ id }) => id.includes(headerId))
+      .map(({ items, id }) => (
+        <ul key={id}>
+          {items &&
+            items.map(({ id, to, path, description, items }) => (
+              <ListItem key={id}>
+                {to || path ? (
+                  <Link to={to || path}>
+                    <Translation id={id} />
+                  </Link>
+                ) : (
+                  <Translation id={id} />
+                )}
+                <i>
+                  {" – "}
+                  <Translation id={description} />
+                </i>
+                <ul>
+                  {items &&
+                    items.map(({ id, to, path }) => (
+                      <ListItem key={id}>
+                        <Link to={to || path}>
+                          <Translation id={id} />
+                        </Link>
+                      </ListItem>
+                    ))}
+                </ul>
+              </ListItem>
+            ))}
+        </ul>
+      ))}
+  </React.Fragment>
+)
+
+export default DeveloperDocsLinks

src/components/DismissibleCard.js → src/components/DismissibleCard.tsx

@@ -3,7 +3,9 @@ import styled from "styled-components"
 
 import Icon from "./Icon"
 
-const Card = styled.div`
+const Card = styled.div<{
+  shouldShow: boolean
+}>`
   display: ${(props) => (props.shouldShow ? `block` : `none`)};
   position: relative;
   background: ${(props) => props.theme.colors.warning};
@@ -26,7 +28,11 @@ const CloseIconContainer = styled.span`
   }
 `
 
-const DismissibleCard = ({ children, storageKey }) => {
+export interface IProps {
+  storageKey: string
+}
+
+const DismissibleCard: React.FC<IProps> = ({ children, storageKey }) => {
   const [shouldShow, setshouldShow] = useState(false)
 
   useEffect(() => {
@@ -39,7 +45,7 @@ const DismissibleCard = ({ children, storageKey }) => {
 
   const handleClose = () => {
     if (localStorage) {
-      localStorage.setItem(storageKey, true)
+      localStorage.setItem(storageKey, "true")
     }
     setshouldShow(false)
   }

src/components/DocsNav.js → src/components/DocsNav.tsx

@@ -5,7 +5,7 @@ import Link from "./Link"
 import Emoji from "./Emoji"
 import Translation from "./Translation"
 
-import docLinks from "../data/developer-docs-links.yaml"
+import docLinks, { DeveloperDocsLink } from "../data/developer-docs-links.yaml"
 
 const Container = styled.div`
   display: flex;
@@ -78,10 +78,19 @@ const UppercaseSpan = styled.span`
   text-transform: uppercase;
 `
 
-const DocsNav = ({ relativePath }) => {
+export interface DocsArrayProps {
+  to: string
+  id: string
+}
+
+export interface IProps {
+  relativePath: string
+}
+
+const DocsNav: React.FC<IProps> = ({ relativePath }) => {
   // Construct array of all linkable documents in order recursively
-  const docsArray = []
-  const getDocs = (links) => {
+  const docsArray: DocsArrayProps[] = []
+  const getDocs = (links: Array<DeveloperDocsLink>): void => {
     for (let item of links) {
       // If object has 'items' key
       if (item.items) {

src/components/Icon.tsx

@@ -36,7 +36,7 @@ const socialColors = {
   stackExchange: "#48a2da",
 }
 
-interface IProps {
+export interface IProps {
   name?: string
   color?: string
   size?: string