Merge pull request #11133 from TylerAPfledderer/feat/chakra-gatsby-image

feat: create Chakra `GatsbyImage` component

Author: pettinarip

docs/best-practices.md

@@ -229,3 +229,11 @@ export const query = graphql`
 `
 // These query results get passed as an object `props.data` to your component
 ```
+
+### Using custom `GatsbyImage`
+
+[GatsbyImage](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) is the component of choice to handle responsive images processed through graphql. However, we use a custom version of this component that is properly optimized with Chakra. This way we can use style props from Chakra but still be able to forward common or GatsbyImage-specific props to the Gatsby component for correct usage and rendering.
+
+```tsx
+import GatsbyImage from "./components/GatsbyImage"
+```

src/components/ActionCard.tsx

@@ -10,10 +10,11 @@ import {
   useColorModeValue,
   LinkBoxProps,
 } from "@chakra-ui/react"
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
+import { IGatsbyImageData } from "gatsby-plugin-image"
 
 import Text from "./OldText"
 import { BaseLink } from "./Link"
+import GatsbyImage from "./GatsbyImage"
 
 const linkBoxFocusStyles: BoxProps = {
   borderRadius: "base",
@@ -77,9 +78,8 @@ const ActionCard: React.FC<IProps> = ({
         boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
       >
         {!isImageURL && (
-          <Image
+          <GatsbyImage
             alt={alt || ""}
-            as={GatsbyImage}
             maxH="257px"
             maxW={{ base: "311px", sm: "372px" }}
             minW="100px"

src/components/AssetDownload/AssetDownloadImage.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { Center, Img } from "@chakra-ui/react"
-import { GatsbyImage } from "gatsby-plugin-image"
+import { Center } from "@chakra-ui/react"
+import GatsbyImage from "../GatsbyImage"
 
 import { getImage, ImageDataLike } from "../../utils/image"
 
@@ -13,8 +13,7 @@ const AssetDownloadImage = ({ image, alt }: Props) => {
   return (
     <Center border="1px" borderColor="white700" p={8} w="100%">
       {image && (
-        <Img
-          as={GatsbyImage}
+        <GatsbyImage
           image={getImage(image)!}
           alt={alt}
           w="100%"

src/components/BugBountyPoints.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { useTheme } from "@emotion/react"
 import { useStaticQuery, graphql } from "gatsby"
-import { GatsbyImage } from "gatsby-plugin-image"
 import { Box, Flex, Icon } from "@chakra-ui/react"
 import axios from "axios"
 
@@ -11,6 +10,7 @@ import InlineLink from "./Link"
 import Tooltip from "./Tooltip"
 import Text from "./OldText"
 import OldHeading from "./OldHeading"
+import GatsbyImage from "./GatsbyImage"
 
 import { getImage } from "../utils/image"
 import { MdInfoOutline } from "react-icons/md"
@@ -175,21 +175,13 @@ const BugBountyPoints: React.FC<IProps> = () => {
             </Text>
           </Flex>
           <Flex align="center" wrap="wrap">
-            <GatsbyImage
-              image={getImage(data.dai)!}
-              style={{ marginRight: "0.5rem" }}
-              alt=""
-            />
+            <GatsbyImage image={getImage(data.dai)!} alt="" me="2" />
             <Text fontSize="xl" m={0} mr={4}>
               {pointsInDAI} DAI
             </Text>
           </Flex>
           <Flex align="center" wrap="wrap">
-            <GatsbyImage
-              image={getImage(ethImage)!}
-              style={{ marginRight: "0.5rem" }}
-              alt=""
-            />
+            <GatsbyImage image={getImage(ethImage)!} alt="" me="2" />
             <Text fontSize="xl" m={0} mr={4}>
               {pointsInETH} ETH
             </Text>

src/components/Callout.tsx

@@ -1,12 +1,13 @@
 // Libraries
 import React from "react"
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
-import { Flex, FlexProps, Image } from "@chakra-ui/react"
+import { IGatsbyImageData } from "gatsby-plugin-image"
+import { Flex, FlexProps } from "@chakra-ui/react"
 
 // Components
 import Translation from "./Translation"
 import Emoji from "./Emoji"
 import Text from "./OldText"
+import GatsbyImage from "./GatsbyImage"
 import OldHeading from "./OldHeading"
 
 import type { TranslationKey } from "../utils/translations"
@@ -49,8 +50,7 @@ const Callout: React.FC<IProps> = ({
     {...rest}
   >
     {image && (
-      <Image
-        as={GatsbyImage}
+      <GatsbyImage
         image={image}
         alt={alt || ""}
         mt={-40}

src/components/CalloutBanner.tsx

@@ -1,10 +1,11 @@
 import React from "react"
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
+import { IGatsbyImageData } from "gatsby-plugin-image"
 import { Flex, FlexProps, Image } from "@chakra-ui/react"
 
 import Translation from "./Translation"
 import Text from "./OldText"
 import OldHeading from "./OldHeading"
+import GatsbyImage from "./GatsbyImage"
 import { TranslationKey } from "../utils/translations"
 
 export interface IProps extends FlexProps {
@@ -33,8 +34,7 @@ const CalloutBanner: React.FC<IProps> = ({
     borderRadius="base"
     {...restProps}
   >
-    <Image
-      as={GatsbyImage}
+    <GatsbyImage
       image={image}
       alt={alt}
       objectFit="contain"

src/components/CardList.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
+import { IGatsbyImageData } from "gatsby-plugin-image"
 import {
   Box,
   BoxProps,
@@ -11,8 +11,9 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react"
 
-import * as url from "../utils/url"
 import { BaseLink } from "./Link"
+import GatsbyImage from "./GatsbyImage"
+import * as url from "../utils/url"
 
 export type CardListItem = {
   title?: ReactNode
@@ -57,9 +58,7 @@ const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
 
   return (
     <CardContainer {...rest}>
-      {image && (
-        <Box as={GatsbyImage} image={image} alt={alt || ""} minW="20px" />
-      )}
+      {image && <GatsbyImage image={image} alt={alt || ""} minW="20px" />}
       <Flex flex="1 1 75%" direction="column">
         {isLink ? (
           <LinkOverlay

src/components/DataProductCard.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
+import { IGatsbyImageData } from "gatsby-plugin-image"
 import {
   Box,
   Flex,
@@ -12,6 +12,7 @@ import {
 } from "@chakra-ui/react"
 
 import Text from "./OldText"
+import GatsbyImage from "./GatsbyImage"
 
 export interface DataRow {
   logo: IGatsbyImageData
@@ -65,8 +66,7 @@ const DataProductCard: React.FC<IProps> = ({
         minH="200px"
         bg={background}
       >
-        <Image
-          as={GatsbyImage}
+        <GatsbyImage
           image={image}
           objectFit="cover"
           alt={alt ? alt : `${name} logo`}
@@ -123,8 +123,7 @@ const DataProductCard: React.FC<IProps> = ({
               >
                 <Flex alignItems="center">
                   {logo && (
-                    <Image
-                      as={GatsbyImage}
+                    <GatsbyImage
                       image={logo}
                       objectFit="cover"
                       alt=""

src/components/ExpandableInfo.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
+import { IGatsbyImageData } from "gatsby-plugin-image"
 import {
   BackgroundProps,
   Box,
@@ -17,6 +17,7 @@ import { motion } from "framer-motion"
 import { MdExpandMore } from "react-icons/md"
 
 import Text from "./OldText"
+import GatsbyImage from "./GatsbyImage"
 
 export interface IProps extends ChakraProps {
   children?: React.ReactNode

src/components/FindWallet/WalletTable/index.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, { ReactNode } from "react"
-import { GatsbyImage } from "gatsby-plugin-image"
 import { useTranslation } from "gatsby-plugin-react-i18next"
 import Select from "react-select"
 import { MdExpandLess, MdExpandMore } from "react-icons/md"
@@ -26,6 +25,7 @@ import {
 // Components
 import InlineLink, { IProps as LinkProps } from "../../Link"
 import { WalletMoreInfo } from "./WalletMoreInfo"
+import GatsbyImage from "../../GatsbyImage"
 import Text from "../../OldText"
 
 // Icons
@@ -432,8 +432,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
               <Td lineHeight="revert">
                 <FlexInfo>
                   <Box>
-                    <Img
-                      as={GatsbyImage}
+                    <GatsbyImage
                       image={getImage(data[wallet.image_name])!}
                       alt=""
                       objectFit="contain"