Merge branch 'dev' into ts-strict

ethereum · Sep 8, 2022 · 3481e9e · 3481e9e
2 parents 931b151 + cdd812e
commit 3481e9e
Show file tree

Hide file tree

Showing 189 changed files with 8,297 additions and 3,133 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -8649,6 +8649,63 @@
         "doc",
         "bug"
       ]
+    },
+    {
+      "login": "Batxent",
+      "name": "tommy",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7824431?v=4",
+      "profile": "https://github.com/Batxent",
+      "contributions": [
+        "doc",
+        "translation"
+      ]
+    },
+    {
+      "login": "martinyung",
+      "name": "Martin Yung",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8136256?v=4",
+      "profile": "https://medium.com/@martinyce",
+      "contributions": [
+        "code",
+        "translation"
+      ]
+    },
+    {
+      "login": "pankajjagtapp",
+      "name": "Pankaj Jagtap",
+      "avatar_url": "https://avatars.githubusercontent.com/u/89507661?v=4",
+      "profile": "https://github.com/pankajjagtapp",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "hannsu",
+      "name": "nulun",
+      "avatar_url": "https://avatars.githubusercontent.com/u/20453231?v=4",
+      "profile": "https://github.com/hannsu",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Denllay",
+      "name": "Denllay",
+      "avatar_url": "https://avatars.githubusercontent.com/u/75447714?v=4",
+      "profile": "https://github.com/Denllay",
+      "contributions": [
+        "doc",
+        "translation"
+      ]
+    },
+    {
+      "login": "yalexis-eth",
+      "name": "yalexis.eth",
+      "avatar_url": "https://avatars.githubusercontent.com/u/96504224?v=4",
+      "profile": "http://yalexis.eth.xyz",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

diff --git a/README.md b/README.md
diff --git a/overrides.d.ts b/overrides.d.ts
@@ -1,7 +1,3 @@
-// temporary override until we figure out how to solve the `getImage` type
-// error. https://github.com/gatsbyjs/gatsby/issues/35748
-declare module "gatsby-plugin-image"
-
 // temporary deactivate this lib since they didn't release the correct types to
 // support react 18
 declare module "react-helmet"

diff --git a/src/@chakra-ui/gatsby-plugin/components/Tag.ts b/src/@chakra-ui/gatsby-plugin/components/Tag.ts
@@ -0,0 +1,40 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+export const Tag: ComponentStyleConfig = {
+  baseStyle: {
+    container: {
+      display: "flex",
+      alignItems: "center",
+      bgImage:
+        "radial-gradient(46.28% 66.31% at 66.95% 58.35%,rgba(127, 127, 213, 0.2) 0%,rgba(134, 168, 231, 0.2) 50%,rgba(145, 234, 228, 0.2) 100%)",
+      mb: 2,
+      mr: 2,
+      p: 2,
+      borderRadius: "base",
+      textTransform: "uppercase",
+      fontSize: "sm",
+      fontWeight: "normal",
+      boxShadow: "table",
+      border: "1px solid",
+      borderColor: "white800",
+      cursor: "pointer",
+      opacity: "0.7",
+      color: "text",
+      _hover: {
+        color: "primary",
+        borderColor: "text200",
+        opacity: "1",
+      },
+    },
+  },
+  variants: {
+    active: {
+      container: {
+        borderColor: "primary300",
+        opacity: "1",
+        boxShadow: "none",
+      },
+    },
+    custom: {}, // empty variant
+  },
+}
diff --git a/src/@chakra-ui/gatsby-plugin/components/index.ts b/src/@chakra-ui/gatsby-plugin/components/index.ts
@@ -1,2 +1,3 @@
 export * from "./Link"
 export * from "./Button"
+export * from "./Tag"
diff --git a/src/@chakra-ui/gatsby-plugin/foundations/shadows.ts b/src/@chakra-ui/gatsby-plugin/foundations/shadows.ts
@@ -2,6 +2,8 @@ const shadows = {
   // using css variables bc shadows do not support color tokens yet
   primary: "4px 4px 0px 0px var(--eth-colors-primaryLight)",
   outline: "0 0 0 4px var(--eth-colors-primaryHover)",
+  table:
+    "0 14px 66px rgba(0,0,0,.07), 0 10px 17px rgba(0,0,0,.03), 0 4px 7px rgba(0,0,0,.05)",
 }
 
 export default shadows
diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react"
 import styled from "@emotion/styled"
-import { GatsbyImage } from "gatsby-plugin-image"
+import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
 import Link from "./Link"
 
@@ -70,7 +70,7 @@ export interface IProps {
   children?: React.ReactNode
   to: string
   alt?: string
-  image: string
+  image: IGatsbyImageData | string
   title: ReactNode
   description?: ReactNode
   className?: string
@@ -89,15 +89,16 @@ const ActionCard: React.FC<IProps> = ({
   isRight,
   isBottom = true,
 }) => {
-  const isImageURL = typeof image === "string" && image.includes("http")
+  const isImageURL = typeof image === "string"
+
   return (
     <Card to={to} className={className} hideArrow={true}>
       <ImageWrapper
         isRight={isRight}
         isBottom={isBottom}
         className="action-card-image-wrapper"
       >
-        {!isImageURL && <Image image={image} alt={alt} />}
+        {!isImageURL && <Image image={image} alt={alt || ""} />}
         {isImageURL && (
           <img src={image} alt={alt} className="action-card-image" />
         )}

diff --git a/src/components/AssetDownload.tsx b/src/components/AssetDownload.tsx
@@ -1,12 +1,14 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 
 import Translation from "../components/Translation"
 import ButtonLink from "./ButtonLink"
 import Emoji from "./OldEmoji"
 import Link from "./Link"
 
+import { getImage, getSrc, ImageDataLike } from "../utils/image"
+
 export interface IHide {
   shouldHide: boolean
 }
@@ -27,7 +29,7 @@ interface IPropsWithSVG extends IPropsBase {
 }
 interface IPropsWithImage extends IPropsBase {
   svg?: never
-  image: any
+  image: ImageDataLike | null
 }
 
 export type IProps = IPropsWithImage | IPropsWithSVG
@@ -95,7 +97,7 @@ const AssetDownload: React.FC<IProps> = ({
   svg,
 }) => {
   const baseUrl = `https://ethereum.org`
-  const downloadUri = src ? src : getSrc(image)
+  const downloadUri = src ? src : image ? getSrc(image) : ""
   const downloadUrl = `${baseUrl}${downloadUri}`
   const Svg = svg
 
@@ -106,11 +108,8 @@ const AssetDownload: React.FC<IProps> = ({
         {children && <ImageContainer>{children}</ImageContainer>}
         {!children && (
           <ImageContainer>
-            {Svg ? (
-              <Svg alt={alt} />
-            ) : (
-              <Image image={getImage(image)} alt={alt} />
-            )}
+            {Svg && <Svg alt={alt} />}
+            {image && <Image image={getImage(image)!} alt={alt} />}
           </ImageContainer>
         )}
         {artistName && (

diff --git a/src/components/BeaconChainActions.tsx b/src/components/BeaconChainActions.tsx
@@ -1,10 +1,10 @@
 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
-import { getImage } from "gatsby-plugin-image"
 import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import { translateMessageId } from "../utils/translations"
+import { getImage, ImageDataLike } from "../utils/image"
 
 import CardList from "./CardList"
 import Card from "./Card"
@@ -71,12 +71,6 @@ export const DataLogo = graphql`
   }
 `
 
-type ChildImage = {
-  childImageSharp: {
-    gatsbyImageData: Record<string, unknown>
-  }
-}
-
 const BeaconStaticQuery = graphql`
   query {
     beaconscan: file(relativePath: { eq: "upgrades/etherscan.png" }) {
@@ -89,8 +83,8 @@ const BeaconStaticQuery = graphql`
 `
 
 type BeaconQueryTypes = {
-  beaconscan: ChildImage
-  beaconchain: ChildImage
+  beaconscan: ImageDataLike | null
+  beaconchain: ImageDataLike | null
 }
 
 const BeaconChainActions: React.FC = () => {
@@ -100,14 +94,14 @@ const BeaconChainActions: React.FC = () => {
   const datapoints: Array<CardListItem> = [
     {
       title: "beaconscan",
-      image: getImage(data.beaconscan),
+      image: getImage(data.beaconscan)!,
       alt: "",
       link: "https://beaconscan.com",
       description: translateMessageId("consensus-beaconscan-desc", intl),
     },
     {
       title: "beaconcha.in",
-      image: getImage(data.beaconchain),
+      image: getImage(data.beaconchain)!,
       alt: "",
       link: "https://beaconcha.in",
       description: translateMessageId("consensus-beaconcha-in-desc", intl),

diff --git a/src/components/BugBountyPoints.tsx b/src/components/BugBountyPoints.tsx
@@ -1,7 +1,7 @@
-import React, { useContext, useState, useEffect } from "react"
+import React, { useState, useEffect } from "react"
 import { useTheme } from "@emotion/react"
 import { useStaticQuery, graphql } from "gatsby"
-import { GatsbyImage, getImage } from "gatsby-plugin-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 import styled from "@emotion/styled"
 import axios from "axios"
 
@@ -11,6 +11,8 @@ import Icon from "./Icon"
 import Link from "./Link"
 import Tooltip from "./Tooltip"
 
+import { getImage } from "../utils/image"
+
 const PointsExchange = styled.div`
   flex: 1 1 560px;
   padding: 1.5rem;
@@ -196,11 +198,11 @@ const BugBountyPoints: React.FC<IProps> = () => {
             </TokenValue>
           </Row>
           <Row>
-            <Token image={getImage(data.dai)} />
+            <Token image={getImage(data.dai)!} alt="" />
             <TokenValue>{pointsInDAI} DAI</TokenValue>
           </Row>
           <Row>
-            <Token image={getImage(ethImage)} />
+            <Token image={getImage(ethImage)!} alt="" />
             <TokenValue>{pointsInETH} ETH</TokenValue>
           </Row>
         </ValueRow>

diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx
@@ -1,9 +1,10 @@
 // Libraries
 import React from "react"
 import styled from "@emotion/styled"
-import { GatsbyImage } from "gatsby-plugin-image"
+import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 import Translation from "./Translation"
 import { TranslationKey } from "../utils/translations"
+
 // Components
 import Emoji from "./OldEmoji"
 
@@ -48,7 +49,7 @@ const Content = styled.div`
 
 export interface IProps {
   children?: React.ReactNode
-  image?: string
+  image?: IGatsbyImageData
   emoji?: string
   alt?: string
   titleKey: TranslationKey
@@ -66,7 +67,7 @@ const Callout: React.FC<IProps> = ({
   className,
 }) => (
   <StyledCard className={className}>
-    {image && <Image image={image} alt={alt} />}
+    {image && <Image image={image} alt={alt || ""} />}
     <Content>
       <div>
         {emoji && <Emoji text={emoji} size={3} />}

diff --git a/src/components/CalloutBanner.tsx b/src/components/CalloutBanner.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { GatsbyImage } from "gatsby-plugin-image"
+import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
 import Translation from "./Translation"
 import { TranslationKey } from "../utils/translations"
@@ -68,7 +68,7 @@ const H2 = styled.h2`
 
 export interface IProps {
   children?: React.ReactNode
-  image: string
+  image: IGatsbyImageData
   maxImageWidth?: number
   titleKey: TranslationKey
   descriptionKey: TranslationKey

diff --git a/src/components/DataProductCard.tsx b/src/components/DataProductCard.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { GatsbyImage } from "gatsby-plugin-image"
+import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
 import Link from "./Link"
 
@@ -97,15 +97,15 @@ const Logo = styled(GatsbyImage)`
 `
 
 export interface DataRow {
-  logo: string
+  logo: IGatsbyImageData
   coin: string
   apy: string
 }
 
 export interface IProps {
   url: string
   background: string
-  image: string
+  image: IGatsbyImageData
   alt?: string
   name: string
   description?: string
@@ -135,7 +135,7 @@ const DataProductCard: React.FC<IProps> = ({
           {data.map(({ logo, coin, apy }, idx) => (
             <DataRow key={idx}>
               <Box>
-                {logo && <Logo image={logo} />}
+                {logo && <Logo image={logo} alt="" />}
                 {coin}
               </Box>
               <div>{apy}% APY</div>