mirror of
https://github.com/kremalicious/blog.git
synced 2025-02-03 15:47:37 +01:00
package updates
This commit is contained in:
parent
5547446535
commit
2405b6c617
@ -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)
|
||||
|
||||
|
623
package-lock.json
generated
623
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
36
package.json
36
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-image": "^2.4.4",
|
||||
"gatsby-plugin-catch-links": "^2.3.1",
|
||||
"gatsby-plugin-feed": "^2.5.1",
|
||||
"gatsby": "^2.22.9",
|
||||
"gatsby-image": "^2.4.5",
|
||||
"gatsby-plugin-catch-links": "^2.3.2",
|
||||
"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-react-helmet": "^3.3.1",
|
||||
"gatsby-plugin-sass": "^2.3.1",
|
||||
"gatsby-plugin-sharp": "^2.6.8",
|
||||
"gatsby-plugin-offline": "^3.2.7",
|
||||
"gatsby-plugin-react-helmet": "^3.3.2",
|
||||
"gatsby-plugin-sass": "^2.3.2",
|
||||
"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-images": "^3.3.5",
|
||||
"gatsby-remark-copy-linked-files": "^2.3.3",
|
||||
"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-graphql": "^2.5.1",
|
||||
"gatsby-transformer-remark": "^2.8.10",
|
||||
"gatsby-source-filesystem": "^2.3.8",
|
||||
"gatsby-source-graphql": "^2.5.2",
|
||||
"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",
|
||||
"@typescript-eslint/eslint-plugin": "^2.34.0",
|
||||
"@typescript-eslint/parser": "^2.34.0",
|
||||
"@types/shortid": "^0.0.29",
|
||||
"@typescript-eslint/eslint-plugin": "^3.0.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",
|
||||
|
@ -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 (
|
||||
|
@ -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} />
|
||||
|
@ -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}
|
||||
|
@ -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,
|
||||
|
@ -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'
|
||||
|
@ -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"
|
||||
|
@ -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
|
||||
|
@ -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>}
|
||||
|
@ -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} />
|
||||
}
|
||||
|
@ -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>}
|
||||
|
@ -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 (
|
||||
|
@ -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()
|
||||
|
@ -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',
|
||||
|
@ -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}
|
||||
|
@ -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 (
|
||||
|
@ -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 ? (
|
||||
|
@ -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}>
|
||||
|
@ -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()
|
||||
|
||||
|
@ -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) => (
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
@ -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"
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
@ -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}>
|
||||
|
@ -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([])
|
||||
|
@ -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'
|
||||
|
@ -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
|
||||
|
@ -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 =
|
||||
|
@ -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)}
|
||||
|
@ -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'
|
||||
|
@ -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 }) => {
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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} />
|
||||
|
@ -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}`
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
@ -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 -->'
|
||||
|
@ -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" />
|
||||
|
@ -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
|
||||
|
@ -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" />
|
||||
|
@ -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 && (
|
||||
|
@ -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' ? (
|
||||
|
@ -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}
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
@ -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 }) => (
|
||||
<Layout {...props}>{element}</Layout>
|
||||
)
|
||||
const wrapPageElement = ({
|
||||
element,
|
||||
props
|
||||
}: {
|
||||
element: any
|
||||
props: any
|
||||
}): ReactElement => <Layout {...props}>{element}</Layout>
|
||||
|
||||
export default wrapPageElement
|
||||
|
@ -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
|
||||
|
||||
|
@ -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 => {
|
||||
|
@ -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} />
|
||||
|
||||
|
@ -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}
|
||||
|
@ -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
|
||||
|
@ -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'
|
||||
|
Loading…
Reference in New Issue
Block a user