package updates

jest/testRender.ts

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import { ReactElement } from 'react'
 
-const testRender = (component: ReactElement) => {
+const testRender = (component: ReactElement): void => {
   it('renders without crashing', () => {
     const { container } = render(component)
 

package.json

@@ -41,18 +41,18 @@
     "fast-exif": "^1.0.1",
     "feather-icons": "^4.28.0",
     "fraction.js": "^4.0.12",
-    "gatsby": "^2.22.4",
+    "gatsby": "^2.22.9",
-    "gatsby-image": "^2.4.4",
+    "gatsby-image": "^2.4.5",
-    "gatsby-plugin-catch-links": "^2.3.1",
+    "gatsby-plugin-catch-links": "^2.3.2",
-    "gatsby-plugin-feed": "^2.5.1",
+    "gatsby-plugin-feed": "^2.5.3",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^2.4.6",
+    "gatsby-plugin-manifest": "^2.4.9",
     "gatsby-plugin-matomo": "^0.8.3",
     "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-offline": "^3.2.6",
+    "gatsby-plugin-offline": "^3.2.7",
-    "gatsby-plugin-react-helmet": "^3.3.1",
+    "gatsby-plugin-react-helmet": "^3.3.2",
-    "gatsby-plugin-sass": "^2.3.1",
+    "gatsby-plugin-sass": "^2.3.2",
-    "gatsby-plugin-sharp": "^2.6.8",
+    "gatsby-plugin-sharp": "^2.6.9",
     "gatsby-plugin-sitemap": "^2.4.3",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-plugin-use-dark-mode": "^1.1.2",
@@ -60,14 +60,14 @@
     "gatsby-redirect-from": "^0.2.2",
     "gatsby-remark-autolink-headers": "^2.3.3",
     "gatsby-remark-breaks": "^1.0.0",
-    "gatsby-remark-copy-linked-files": "^2.3.2",
+    "gatsby-remark-copy-linked-files": "^2.3.3",
-    "gatsby-remark-images": "^3.3.5",
+    "gatsby-remark-images": "^3.3.8",
     "gatsby-remark-images-medium-zoom": "^1.7.0",
     "gatsby-remark-smartypants": "^2.3.2",
     "gatsby-remark-vscode": "^2.1.1",
-    "gatsby-source-filesystem": "^2.3.7",
+    "gatsby-source-filesystem": "^2.3.8",
-    "gatsby-source-graphql": "^2.5.1",
+    "gatsby-source-graphql": "^2.5.2",
-    "gatsby-transformer-remark": "^2.8.10",
+    "gatsby-transformer-remark": "^2.8.13",
     "gatsby-transformer-sharp": "^2.5.3",
     "graphql": "^14.6.0",
     "intersection-observer": "^0.10.0",
@@ -98,15 +98,15 @@
     "@types/jest": "^25.2.3",
     "@types/loadable__component": "^5.10.0",
     "@types/lunr": "^2.3.3",
-    "@types/node": "^14.0.3",
+    "@types/node": "^14.0.5",
     "@types/node-fetch": "^2.5.7",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
     "@types/react-helmet": "^6.0.0",
     "@types/react-transition-group": "^4.4.0",
-    "@types/shortid": "0.0.29",
+    "@types/shortid": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^3.0.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/parser": "^3.0.0",
     "@welldone-software/why-did-you-render": "^4.2.2",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.0.0",

src/components/atoms/Ad.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Ad.module.scss'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-export default function Ad() {
+export default function Ad(): ReactElement {
   const { ad } = useSiteMetadata()
 
   return (

src/components/atoms/Changelog.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import remark from 'remark'
 import remarkReact from 'remark-react'
@@ -11,7 +11,7 @@ export function PureChangelog({
 }: {
   repo: string
   repos: [{ node: GitHubRepo }]
-}) {
+}): ReactElement {
   const repoFilteredArray = repos
     .map(({ node }: { node: GitHubRepo }) => {
       if (node.name === repo) return node
@@ -75,7 +75,7 @@ const queryGithub = graphql`
   }
 `
 
-export default function Changelog({ repo }: { repo: string }) {
+export default function Changelog({ repo }: { repo: string }): ReactElement {
   const data: GitHub = useStaticQuery(queryGithub)
   const repos: [{ node: GitHubRepo }] = data.github.viewer.repositories.edges
   return <PureChangelog repo={repo} repos={repos} />

src/components/atoms/Copy.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import loadable from '@loadable/component'
 import styles from './Copy.module.scss'
 import Icon from './Icon'
@@ -9,7 +9,7 @@ const onCopySuccess = (e: any) => {
   e.trigger.classList.add(styles.copied)
 }
 
-export default function Copy({ text }: { text: string }) {
+export default function Copy({ text }: { text: string }): ReactElement {
   return (
     <Clipboard
       data-clipboard-text={text}

src/components/atoms/Exif.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import ExifMap from './ExifMap'
 import styles from './Exif.module.scss'
 import { Exif as ExifMeta } from '../../@types/Image'
@@ -19,7 +19,7 @@ const ExifData = ({
   </span>
 )
 
-export default function Exif({ exif }: { exif: ExifMeta }) {
+export default function Exif({ exif }: { exif: ExifMeta }): ReactElement {
   const {
     iso,
     model,

src/components/atoms/ExifMap.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import Map from 'pigeon-maps'
 import Marker from 'pigeon-marker'
 import useDarkMode from 'use-dark-mode'
@@ -22,7 +22,7 @@ export default function ExifMap({
   gps
 }: {
   gps: { latitude: string; longitude: string }
-}) {
+}): ReactElement {
   const { value } = useDarkMode(false, {
     classNameDark: 'dark',
     classNameLight: 'light'

src/components/atoms/Hamburger.tsx

@@ -1,7 +1,11 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Hamburger.module.scss'
 
-export default function Hamburger({ onClick }: { onClick(): void }) {
+export default function Hamburger({
+  onClick
+}: {
+  onClick(): void
+}): ReactElement {
   return (
     <button
       type="button"

src/components/atoms/Icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 
 // https://featherstyles.com
 // import * as Feather from 'react-feather'
@@ -55,7 +55,7 @@ const components: any = {
   Crosshair
 }
 
-const Icon = ({ name }: { name: string }) => {
+const Icon = ({ name }: { name: string }): ReactElement => {
   const IconMapped = components[name]
   // const IconFeather = (Feather as any)[name]
   if (!IconMapped) return null

src/components/atoms/Image.tsx

@@ -1,10 +1,16 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
 import { ImageProps } from '../../@types/Image'
 import styles from './Image.module.scss'
 
-export const Image = ({ title, fluid, fixed, alt, original }: ImageProps) => (
+export const Image = ({
+  title,
+  fluid,
+  fixed,
+  alt,
+  original
+}: ImageProps): ReactElement => (
   <figure className={styles.image} data-original={original && original.src}>
     <Img backgroundColor="transparent" fluid={fluid} fixed={fixed} alt={alt} />
     {title && <figcaption className={styles.imageTitle}>{title}</figcaption>}

src/components/atoms/Input.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Input.module.scss'
 
-export default function Input(props: any) {
+export default function Input(props: any): ReactElement {
   return <input className={styles.input} {...props} />
 }

src/components/atoms/Qr.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { QRCode } from 'react-qr-svg'
 import styles from './Qr.module.scss'
 import Copy from './Copy'
@@ -9,7 +9,7 @@ export default function Qr({
 }: {
   address: string
   title?: string
-}) {
+}): ReactElement {
   return (
     <>
       {title && <h4>{title}</h4>}

src/components/atoms/SEO/MetaTags.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Helmet } from 'react-helmet'
 import { useSiteMetadata } from '../../../hooks/use-site-metadata'
 import schemaOrg from './schemaOrg'
@@ -30,7 +30,7 @@ export default function MetaTags({
   title: string
   datePublished: string
   dateModified: string
-}) {
+}): ReactElement {
   const { siteTitle, siteDescription, siteUrl, author } = useSiteMetadata()
 
   return (

src/components/atoms/SEO/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 
 import { useSiteMetadata } from '../../../hooks/use-site-metadata'
@@ -25,7 +25,7 @@ export default function SEO({
   post?: Post
   slug?: string
   postSEO?: boolean
-}) {
+}): ReactElement {
   const data = useStaticQuery(query)
   const logo = data.logo.edges[0].node.relativePath
   const { siteTitle, siteUrl, siteDescription } = useSiteMetadata()

src/components/atoms/SEO/schemaOrg.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 
 export default function schemaOrg(
   blogURL: string,
@@ -10,7 +10,7 @@ export default function schemaOrg(
   author: string,
   datePublished: string,
   dateModified: string
-) {
+): ReactElement {
   const schemaOrgJSONLD: any = [
     {
       '@context': 'http://schema.org',

src/components/atoms/Tag.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import styles from './Tag.module.scss'
 
@@ -12,7 +12,7 @@ export default function Tag({
   url: string
   count?: number
   style?: any
-}) {
+}): ReactElement {
   return (
     <Link className={styles.tag} to={url} style={style}>
       {name}

src/components/atoms/Time.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import loadable from '@loadable/component'
 
 const LazyDate = loadable.lib(() => import('date-fns'))
@@ -24,7 +24,7 @@ function TimeMarkup({
   )
 }
 
-export default function Time({ date }: { date: string }) {
+export default function Time({ date }: { date: string }): ReactElement {
   const dateNew = new Date(date)
 
   return (

src/components/atoms/Typekit.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Helmet } from 'react-helmet'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
@@ -17,7 +17,7 @@ const TypekitScript = (typekitID: string) => (
   </script>
 )
 
-export default function Typekit() {
+export default function Typekit(): ReactElement {
   const { typekitID } = useSiteMetadata()
 
   return typekitID ? (

src/components/molecules/Featured.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link, graphql, useStaticQuery } from 'gatsby'
 import { Image } from '../atoms/Image'
 import styles from './Featured.module.scss'
@@ -19,7 +19,7 @@ const query = graphql`
   }
 `
 
-export default function Featured() {
+export default function Featured(): ReactElement {
   const data = useStaticQuery(query)
   return (
     <div className={styles.featured}>

src/components/molecules/Menu.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { Link } from 'gatsby'
 import Hamburger from '../atoms/Hamburger'
@@ -6,7 +6,7 @@ import styles from './Menu.module.scss'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 import { MenuItem } from '../../@types/Site'
 
-export default function Menu() {
+export default function Menu(): ReactElement {
   const [menuOpen, setMenuOpen] = useState(false)
   const { menu } = useSiteMetadata()
 

src/components/molecules/Networks.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Icon from '../atoms/Icon'
 import styles from './Networks.module.scss'
 
@@ -20,7 +20,11 @@ function NetworkIcon({ link }: { link: string }) {
   return IconComp
 }
 
-export default function IconLinks({ links }: { links: string[] }) {
+export default function IconLinks({
+  links
+}: {
+  links: string[]
+}): ReactElement {
   return (
     <p>
       {links.map((link: string) => (

src/components/molecules/Pagination.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import styles from './Pagination.module.scss'
 import shortid from 'shortid'
@@ -50,7 +50,7 @@ export default function Pagination({
     prevPagePath?: string
     nextPagePath?: string
   }
-}) {
+}): ReactElement {
   const {
     slug,
     currentPageNumber,

src/components/molecules/PostTeaser.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link, graphql } from 'gatsby'
 import { Image } from '../atoms/Image'
 import styles from './PostTeaser.module.scss'
@@ -33,7 +33,7 @@ export default function PostTeaser({
 }: {
   post: Post
   toggleSearch?: () => void
-}) {
+}): ReactElement {
   const { image, title } = post.frontmatter
   const { slug } = post.fields
 

src/components/molecules/RelatedPosts.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import PostTeaser from './PostTeaser'
 import styles from './RelatedPosts.module.scss'
@@ -51,7 +51,7 @@ export default function RelatedPosts({
 }: {
   tags: string[]
   photos?: boolean
-}) {
+}): ReactElement {
   const data = useStaticQuery(query)
   const posts = data.allMarkdownRemark.edges
 

src/components/molecules/Search/SearchButton.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './SearchButton.module.scss'
 import Icon from '../../atoms/Icon'
 
-const SearchButton = (props: any) => (
+const SearchButton = (props: any): ReactElement => (
   <button
     type="button"
     title="Search"

src/components/molecules/Search/SearchInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Input from '../../atoms/Input'
 import Icon from '../../atoms/Icon'
 import styles from './SearchInput.module.scss'
@@ -11,7 +11,7 @@ export default function SearchInput({
   value: string
   onToggle(): void
   onChange(e: Event): void
-}) {
+}): ReactElement {
   return (
     <>
       <Input

src/components/molecules/Search/SearchResults.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import ReactDOM from 'react-dom'
 import { graphql, useStaticQuery } from 'gatsby'
 import Container from '../../atoms/Container'
@@ -67,7 +67,7 @@ export default function SearchResults({
   searchQuery: string
   results: Results[]
   toggleSearch(): void
-}) {
+}): ReactElement {
   const data = useStaticQuery(query)
   const posts = data.allMarkdownRemark.edges
 

src/components/molecules/Search/SearchResultsEmpty.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './SearchResultsEmpty.module.scss'
 import { Results } from './SearchResults'
 
@@ -8,7 +8,7 @@ const SearchResultsEmpty = ({
 }: {
   searchQuery: string
   results: Results[]
-}) => (
+}): ReactElement => (
   <div className={styles.empty}>
     <header className={styles.emptyMessage}>
       <p className={styles.emptyMessageText}>

src/components/molecules/Search/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, ReactElement } from 'react'
 import { Helmet } from 'react-helmet'
 import { CSSTransition } from 'react-transition-group'
 import SearchInput from './SearchInput'
@@ -7,7 +7,7 @@ import SearchResults from './SearchResults'
 
 import styles from './index.module.scss'
 
-export default function Search() {
+export default function Search(): ReactElement {
   const [searchOpen, setSearchOpen] = useState(false)
   const [query, setQuery] = useState('')
   const [results, setResults] = useState([])

src/components/molecules/ThemeSwitch.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Helmet } from 'react-helmet'
 import useDarkMode from 'use-dark-mode'
 import styles from './ThemeSwitch.module.scss'
@@ -32,7 +32,7 @@ const HeadMarkup = ({ themeColor }: { themeColor: string }) => (
   </Helmet>
 )
 
-export default function ThemeSwitch() {
+export default function ThemeSwitch(): ReactElement {
   const { darkModeConfig } = useSiteMetadata()
   const darkMode = useDarkMode(false, darkModeConfig)
   const themeColor = darkMode.value ? '#1d2224' : '#e7eef4'

src/components/molecules/Vcard.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import Img from 'gatsby-image'
 import IconLinks from './Networks'
@@ -21,7 +21,7 @@ const query = graphql`
   }
 `
 
-export default function Vcard() {
+export default function Vcard(): ReactElement {
   const data = useStaticQuery(query)
   const { author, rss, jsonfeed } = useSiteMetadata()
   const { twitter, github, name, uri } = author

src/components/molecules/Web3Donation/Account.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { toDataUrl } from 'ethereum-blockies'
 import { formatEther } from '@ethersproject/units'
 import styles from './Account.module.scss'
 import useWeb3, { getBalance } from '../../../hooks/use-web3'
 
-export default function Account() {
+export default async function Account(): Promise<ReactElement> {
   const { library, account } = useWeb3()
-  const ethBalance = account && getBalance(account, library)
+  const ethBalance = account && (await getBalance(account, library))
   const blockies = account && toDataUrl(account)
 
   const accountDisplay =

src/components/molecules/Web3Donation/Alert.tsx

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Alert.module.scss'
 
-export function getTransactionMessage(transactionHash?: string) {
+export function getTransactionMessage(
+  transactionHash?: string
+): { [key: string]: string } {
   return {
     transaction: `<a href="https://etherscan.io/tx/${transactionHash}" target="_blank">See your transaction on etherscan.io.</a>`,
     waitingForUser: 'Waiting for your confirmation',
@@ -34,7 +36,7 @@ export default function Alert({
 }: {
   transactionHash: string
   message?: { text?: string; status?: string }
-}) {
+}): ReactElement {
   return (
     <div
       className={classes(message.status)}

src/components/molecules/Web3Donation/Conversion.tsx

@@ -1,8 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, ReactElement } from 'react'
 import fetch from 'node-fetch'
 import styles from './Conversion.module.scss'
 
-export async function getFiat(amount: number) {
+export async function getFiat(
+  amount: number
+): Promise<{ [key: string]: string }> {
   const url =
     'https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=eur%2Cusd'
   const response = await fetch(url)
@@ -16,7 +18,11 @@ export async function getFiat(amount: number) {
   return { dollar, euro }
 }
 
-export default function Conversion({ amount }: { amount: number }) {
+export default function Conversion({
+  amount
+}: {
+  amount: number
+}): ReactElement {
   const [conversion, setConversion] = useState({
     euro: '0.00',
     dollar: '0.00'

src/components/molecules/Web3Donation/InputGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import Input from '../../atoms/Input'
 import Account from './Account'
 import Conversion from './Conversion'
@@ -8,7 +8,7 @@ export default function InputGroup({
   sendTransaction
 }: {
   sendTransaction(amount: number): void
-}) {
+}): ReactElement {
   const [amount, setAmount] = useState(0.03)
 
   const onAmountChange = ({ target }: { target: any }) => {

src/components/molecules/Web3Donation/index.tsx

@@ -1,11 +1,15 @@
-import React, { useState, useEffect } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import { parseEther } from '@ethersproject/units'
 import useWeb3, { connectors, getErrorMessage } from '../../../hooks/use-web3'
 import InputGroup from './InputGroup'
 import Alert, { getTransactionMessage } from './Alert'
 import styles from './index.module.scss'
 
-export default function Web3Donation({ address }: { address: string }) {
+export default function Web3Donation({
+  address
+}: {
+  address: string
+}): ReactElement {
   const {
     connector,
     library,

src/components/organisms/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React, { ReactElement, PureComponent } from 'react'
 import { Link } from 'gatsby'
 import Container from '../atoms/Container'
 import Icon from '../atoms/Icon'
@@ -32,7 +32,7 @@ function Copyright() {
 }
 
 export default class Footer extends PureComponent {
-  render() {
+  render(): ReactElement {
     return (
       <footer role="contentinfo" className={styles.footer}>
         <Container>

src/components/organisms/Header.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React, { ReactElement, PureComponent } from 'react'
 import { Link } from 'gatsby'
 import Container from '../atoms/Container'
 import Search from '../molecules/Search'
@@ -9,7 +9,7 @@ import { ReactComponent as Logo } from '../../images/logo.svg'
 import styles from './Header.module.scss'
 
 export default class Header extends PureComponent {
-  render() {
+  render(): ReactElement {
     return (
       <header role="banner" className={styles.header}>
         <Container>

src/components/templates/Page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Helmet } from 'react-helmet'
 import { Post } from '../../@types/Post'
 import SEO from '../atoms/SEO'
@@ -16,7 +16,7 @@ export default function Page({
   section?: string
   location: Location
   post?: Post
-}) {
+}): ReactElement {
   return (
     <>
       <Helmet title={title} />

src/components/templates/Post/Actions.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { useSiteMetadata } from '../../../hooks/use-site-metadata'
 import styles from './Actions.module.scss'
 import Icon from '../../atoms/Icon'
@@ -35,7 +35,7 @@ export default function PostActions({
 }: {
   slug: string
   githubLink: string
-}) {
+}): ReactElement {
   const { siteUrl } = useSiteMetadata()
   const urlTwitter = `https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}`
 

src/components/templates/Post/Content.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Changelog from '../../atoms/Changelog'
 import { Post } from '../../../@types/Post'
 import PostToc from './Toc'
 
 // Remove lead paragraph from content
-const PostContent = ({ post }: { post: Post }) => {
+const PostContent = ({ post }: { post: Post }): ReactElement => {
   const separator = '<!-- more -->'
   const changelog = post.frontmatter.changelog
 

src/components/templates/Post/Lead.tsx

@@ -1,10 +1,16 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Lead.module.scss'
 import { Post } from '../../../@types/Post'
 
 // Extract lead paragraph from content
 // Grab everything before more tag, or just first paragraph
-const PostLead = ({ post, index }: { post: Post; index?: boolean }) => {
+const PostLead = ({
+  post,
+  index
+}: {
+  post: Post
+  index?: boolean
+}): ReactElement => {
   let lead
   const content = post.html
   const separator = '<!-- more -->'

src/components/templates/Post/LinkActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import stylesPostMore from './More.module.scss'
 import styles from './LinkActions.module.scss'
@@ -10,7 +10,7 @@ const PostLinkActions = ({
 }: {
   linkurl?: string
   slug: string
-}) => (
+}): ReactElement => (
   <aside className={styles.postLinkActions}>
     <a className={stylesPostMore.postMore} href={linkurl}>
       Go to source <Icon name="ExternalLink" />

src/components/templates/Post/Meta.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import slugify from 'slugify'
 import Time from '../../atoms/Time'
@@ -8,7 +8,7 @@ import styles from './Meta.module.scss'
 import { Post } from '../../../@types/Post'
 import shortid from 'shortid'
 
-export default function PostMeta({ post }: { post: Post }) {
+export default function PostMeta({ post }: { post: Post }): ReactElement {
   const siteMeta = useSiteMetadata()
   const { author, updated, tags, type } = post.frontmatter
   const { date } = post.fields

src/components/templates/Post/More.tsx

@@ -1,9 +1,15 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import Icon from '../../atoms/Icon'
 import styles from './More.module.scss'
 
-const PostMore = ({ to, children }: { to: string; children: string }) => (
+const PostMore = ({
+  to,
+  children
+}: {
+  to: string
+  children: string
+}): ReactElement => (
   <Link className={styles.postMore} to={to}>
     {children}
     <Icon name="ChevronRight" />

src/components/templates/Post/PrevNext.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import Icon from '../../atoms/Icon'
 import styles from './PrevNext.module.scss'
@@ -13,7 +13,7 @@ interface PrevNextProps {
   next: Node
 }
 
-const PrevNext = ({ prev, next }: PrevNextProps) => (
+const PrevNext = ({ prev, next }: PrevNextProps): ReactElement => (
   <nav className={styles.prevnext}>
     <div>
       {prev && (

src/components/templates/Post/Title.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import styles from './Title.module.scss'
 import Icon from '../../atoms/Icon'
@@ -13,7 +13,7 @@ export default function PostTitle({
   slug?: string
   linkurl?: string
   title: string
-}) {
+}): ReactElement {
   const linkHostname = linkurl ? new URL(linkurl).hostname : null
 
   return type === 'link' ? (

src/components/templates/Post/Toc.tsx

@@ -1,7 +1,11 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Toc.module.scss'
 
-const PostToc = ({ tableOfContents }: { tableOfContents: string }) => {
+const PostToc = ({
+  tableOfContents
+}: {
+  tableOfContents: string
+}): ReactElement => {
   return (
     <nav
       className={styles.toc}

src/components/templates/Post/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Helmet } from 'react-helmet'
 import { graphql } from 'gatsby'
 import { Post as PostMetadata } from '../../../@types/Post'
@@ -25,7 +25,7 @@ export default function Post({
     next: { title: string; slug: string }
     prev: { title: string; slug: string }
   }
-}) {
+}): ReactElement {
   const { post } = data
   const { title, image, type, linkurl, style, tags } = post.frontmatter
   const { slug, githubLink } = post.fields

src/components/templates/Posts.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link, graphql } from 'gatsby'
 import { Post } from '../../@types/Post'
 import Pagination from '../molecules/Pagination'
@@ -25,7 +25,7 @@ export default function Posts({
     currentPageNumber: number
     numPages: number
   }
-}) {
+}): ReactElement {
   const edges = data.allMarkdownRemark.edges
   const { tag, currentPageNumber, numPages } = pageContext
 

src/helpers/wrapPageElement.tsx

@@ -1,8 +1,12 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Layout from '../components/Layout'
 
-const wrapPageElement = ({ element, props }: { element: any; props: any }) => (
+const wrapPageElement = ({
-  <Layout {...props}>{element}</Layout>
+  element,
-)
+  props
+}: {
+  element: any
+  props: any
+}): ReactElement => <Layout {...props}>{element}</Layout>
 
 export default wrapPageElement

src/hooks/use-web3/index.tsx

@@ -11,7 +11,7 @@ import {
 
 export { connectors, getLibrary, getNetworkName, getErrorMessage, getBalance }
 
-export function useEagerConnect() {
+export function useEagerConnect(): boolean {
   const { MetaMask } = connectors
   const { activate, active } = useWeb3React()
   const [tried, setTried] = useState(false)
@@ -38,7 +38,7 @@ export function useEagerConnect() {
   return tried
 }
 
-export function useInactiveListener(suppress = false) {
+export function useInactiveListener(suppress = false): void {
   const { active, error, activate } = useWeb3React()
   const { MetaMask } = connectors
 

src/hooks/use-web3/utils.tsx

@@ -4,15 +4,15 @@ import {
   NoEthereumProviderError,
   UserRejectedRequestError
 } from '@web3-react/injected-connector'
-import { Web3Provider } from '@ethersproject/providers'
+import { Web3Provider, ExternalProvider } from '@ethersproject/providers'
 
-export function getLibrary(provider: any): Web3Provider {
+export function getLibrary(provider: ExternalProvider): Web3Provider {
   const library = new Web3Provider(provider)
   library.pollingInterval = 10000
   return library
 }
 
-export function getNetworkName(netId: number) {
+export function getNetworkName(netId: number): string {
   let networkName
 
   switch (netId) {
@@ -38,7 +38,7 @@ export function getNetworkName(netId: number) {
   return networkName
 }
 
-export function getErrorMessage(error: Error, chainId: number) {
+export function getErrorMessage(error: Error, chainId: number): string {
   if (error instanceof NoEthereumProviderError) {
     return 'No Ethereum browser extension detected, install <a href="https://metamask.io">MetaMask</a> or <a href="https://brave.com">Brave</a>.'
   } else if (error instanceof UnsupportedChainIdError) {
@@ -52,7 +52,10 @@ export function getErrorMessage(error: Error, chainId: number) {
   }
 }
 
-export function getBalance(account: string, library: any) {
+export function getBalance(
+  account: string,
+  library: Web3Provider
+): Promise<number> {
   const [ethBalance, setEthBalance] = useState()
 
   useEffect((): any => {

src/pages/404.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import Page from '../components/templates/Page'
 import styles from './404.module.scss'
@@ -9,7 +9,7 @@ const page = {
   }
 }
 
-const NotFound = ({ location }: { location: Location }) => (
+const NotFound = ({ location }: { location: Location }): ReactElement => (
   <Page title={page.frontmatter.title} post={page} location={location}>
     <div className={styles.hal9000} />
 

src/pages/photos.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { graphql, Link } from 'gatsby'
 import Page from '../components/templates/Page'
 import { Post } from '../@types/Post'
@@ -12,7 +12,7 @@ const page = {
   }
 }
 
-const PhotoThumb = ({ photo }: { photo: Post }) => {
+const PhotoThumb = ({ photo }: { photo: Post }): ReactElement => {
   const { title, image } = photo.frontmatter
   const { slug } = photo.fields
   const { fluid } = image.childImageSharp
@@ -34,7 +34,7 @@ export default function Photos({
 }: {
   data: any
   location: Location
-}) {
+}): ReactElement {
   return (
     <Page
       title={page.frontmatter.title}

src/pages/tags.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { graphql } from 'gatsby'
 import Page from '../components/templates/Page'
 import Tag from '../components/atoms/Tag'
@@ -23,7 +23,7 @@ interface TagsPageProps {
   location: Location
 }
 
-const TagsPage = ({ data, location }: TagsPageProps) => (
+const TagsPage = ({ data, location }: TagsPageProps): ReactElement => (
   <Page title={page.frontmatter.title} location={location} post={page}>
     <ul className={styles.tags}>
       {data.allMarkdownRemark.group

src/pages/thanks.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import loadable from '@loadable/component'
 import shortid from 'shortid'
 import { Helmet } from 'react-helmet'
@@ -29,7 +29,7 @@ const BackButton = () => (
   </button>
 )
 
-export default function Thanks() {
+export default function Thanks(): ReactElement {
   const { author } = useSiteMetadata()
   const coins = Object.keys(author).filter(
     (key) => key === 'bitcoin' || key === 'ether'