Merge branch 'dev' into what-is-ethereum-stats

Author: corwintines

src/components/CalloutBanner.tsx

@@ -10,8 +10,8 @@ import Text from "@/components/OldText"
 export type CalloutBannerProps = FlexProps & {
   children?: React.ReactNode
   image: ImageProps["src"]
-  imageWidth?: ImageProps["width"]
-  maxImageWidth?: number
+  imageWidth?: number
+  maxImageWidth?: ImageProps["width"]
   titleKey: TranslationKey
   descriptionKey: TranslationKey
   alt: string
@@ -43,7 +43,8 @@ const CalloutBanner = ({
           <Image
             src={image}
             alt={alt}
-            w={imageWidth}
+            width={imageWidth}
+            maxW={{ base: "auto", md: maxImageWidth }}
             style={{
               objectFit: "contain",
             }}

src/components/CardList.tsx

@@ -24,6 +24,7 @@ export type CardListItem = {
   link?: string
   id?: string
   image?: ImageProps["src"]
+  imageWidth?: number
   alt?: string
 }
 
@@ -51,6 +52,7 @@ const Card = ({
   caption,
   link,
   image,
+  imageWidth = 20, // Set 20px as default image width, can be overrided if needed
   alt,
   ...props
 }: CardProps) => {
@@ -62,7 +64,7 @@ const Card = ({
 
   return (
     <CardContainer {...props}>
-      {image && <Image src={image} alt={alt ?? ""} width={20} />}
+      {image && <Image src={image} alt={alt ?? ""} width={imageWidth} />}
       <Flex flex="1 1 75%" direction="column">
         {isLink ? (
           <LinkOverlay
@@ -97,11 +99,13 @@ const Card = ({
 
 export type CardListProps = BoxProps & {
   items: CardProps[]
+  imageWidth?: number
   clickHandler?: (idx: string | number) => void
 }
 
 const CardList = ({
   items,
+  imageWidth,
   clickHandler = () => null,
   ...props
 }: CardListProps) => (
@@ -112,7 +116,7 @@ const CardList = ({
 
       return isLink ? (
         <LinkBox key={id || idx}>
-          <Card {...listItem} />
+          <Card {...listItem} imageWidth={imageWidth} />
         </LinkBox>
       ) : (
         <Card

src/components/DataProductCard.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { IGatsbyImageData } from "gatsby-plugin-image"
+import { StaticImageData } from "next/image"
 import {
   Box,
   Flex,
@@ -9,19 +9,21 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react"
 
-import GatsbyImage from "./GatsbyImage"
+import { Image } from "@/components/Image"
+
 import Text from "./OldText"
 
 export interface DataRow {
-  logo: IGatsbyImageData
+  logo: StaticImageData
   coin: string
   apy: string
 }
 
 export interface IProps {
   url: string
   background: string
-  image: IGatsbyImageData
+  image: StaticImageData
+  imgWidth: string
   alt?: string
   name: string
   description?: string
@@ -32,6 +34,7 @@ const DataProductCard: React.FC<IProps> = ({
   url,
   background,
   image,
+  imgWidth,
   alt,
   name,
   description,
@@ -64,11 +67,11 @@ const DataProductCard: React.FC<IProps> = ({
         minH="200px"
         bg={background}
       >
-        <GatsbyImage
-          image={image}
+        <Image
+          src={image}
           objectFit="cover"
           alt={alt ? alt : `${name} logo`}
-          width="100%"
+          w={imgWidth}
           alignSelf="center"
           maxWidth={{ base: "311px", sm: "372px" }}
           maxHeight="257px"
@@ -121,8 +124,8 @@ const DataProductCard: React.FC<IProps> = ({
               >
                 <Flex alignItems="center">
                   {logo && (
-                    <GatsbyImage
-                      image={logo}
+                    <Image
+                      src={logo}
                       objectFit="cover"
                       alt=""
                       minWidth="24px"

src/components/StablecoinAccordion/AccordionCustomItem.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from "react"
+import { ReactNode } from "react"
+import { useTranslation } from "next-i18next"
 import {
   AccordionButton,
   AccordionItem,
@@ -12,7 +13,6 @@ import {
 
 import Emoji from "../Emoji"
 import Pill from "../Pill"
-import Translation from "../Translation"
 
 import { accordionButtonContent, CategoryNameType } from "./utils"
 import { ChildOnlyType } from "."
@@ -26,13 +26,13 @@ export const RightColumnPanel = (props: ChildOnlyType) => (
 )
 
 const MoreOrLessLink = ({ isOpen }: { isOpen: boolean }) => {
+  const { t } = useTranslation("page-stablecoins")
+
   return (
     <Box me={6} color="primary.base">
-      {isOpen ? (
-        <Translation id="page-stablecoins-accordion-less" />
-      ) : (
-        <Translation id="page-stablecoins-accordion-more" />
-      )}
+      {isOpen
+        ? t("page-stablecoins-accordion-less")
+        : t("page-stablecoins-accordion-more")}
     </Box>
   )
 }
@@ -47,6 +47,7 @@ interface AccordionCustomItemProps {
 
 export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
   const { category, children } = props
+  const { t } = useTranslation("page-stablecoins")
 
   const contentObj = accordionButtonContent[category]
 
@@ -80,16 +81,16 @@ export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
                     fontSize={{ base: "1.25rem", md: "1.5rem" }}
                     lineHeight={1.4}
                   >
-                    <Translation id={contentObj.title} />
+                    {t(contentObj.title)}
                   </Heading>
                   {!!contentObj.pill && (
                     <Pill ms={4} background={contentObj.pill.color}>
-                      <Translation id={contentObj.pill.name} />
+                      {t(contentObj.pill.name)}
                     </Pill>
                   )}
                 </Flex>
                 <Text color="text200" textAlign="start">
-                  <Translation id={contentObj.textPreview} />
+                  {t(contentObj.textPreview)}
                 </Text>
               </Box>
             </Flex>