refactor(components): replace and remove old image component

Author: TylerAPfledderer

src/components/ActionCard.tsx

@@ -1,7 +1,7 @@
 import { StaticImageData } from "next/image"
 import type { BaseHTMLAttributes, ElementType, ReactNode } from "react"
 
-import { TwImage } from "@/components/Image"
+import { Image } from "@/components/Image"
 import InlineLink from "@/components/ui/Link"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 
@@ -53,7 +53,7 @@ const ActionCard = ({
           isRight ? "justify-end" : "justify-center"
         )}
       >
-        <TwImage
+        <Image
           src={image}
           alt={alt || ""}
           width={imageWidth}

src/components/AssetDownload/AssetDownloadImage.tsx

@@ -1,6 +1,6 @@
 import { ImageProps } from "next/image"
 
-import { TwImage } from "../Image"
+import { Image } from "../Image"
 import { Center } from "../ui/flex"
 
 interface AssetDownloadImageProps {
@@ -10,7 +10,7 @@ interface AssetDownloadImageProps {
 
 const AssetDownloadImage = ({ image, alt }: AssetDownloadImageProps) => (
   <Center className="w-full border p-8">
-    <TwImage src={image} alt={alt} className="w-full self-center" />
+    <Image src={image} alt={alt} className="w-full self-center" />
   </Center>
 )
 

src/components/Banners/ContributorsQuizBanner.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils/cn"
 
-import { TwImage } from "../Image"
+import { Image } from "../Image"
 import { ButtonLink } from "../ui/buttons/Button"
 import { Flex, Stack } from "../ui/flex"
 
@@ -29,7 +29,7 @@ function ContributorsQuizBanner({
           "px-8 md:px-0"
         )}
       >
-        <TwImage
+        <Image
           className="absolute max-h-[120%] w-full object-contain"
           src={PeopleLearning}
           alt="People learning about Ethereum"

src/components/Callout.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next"
 import type { TranslationKey } from "@/lib/types"
 
 import Emoji from "@/components/Emoji"
-import { type ImageProps, TwImage } from "@/components/Image"
+import { Image, type ImageProps } from "@/components/Image"
 
 import { cn } from "@/lib/utils/cn"
 
@@ -43,7 +43,7 @@ const Callout = ({
     >
       {image && (
         <div className="-mt-40 self-center">
-          <TwImage
+          <Image
             src={image}
             alt={alt || ""}
             className="max-h-[263px] min-h-[200px] max-w-[263px] object-contain"

src/components/CalloutBanner.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "next-i18next"
 
 import type { TranslationKey } from "@/lib/types"
 
-import { type ImageProps, TwImage } from "@/components/Image"
+import { Image, type ImageProps } from "@/components/Image"
 
 import { cn } from "@/lib/utils/cn"
 
@@ -36,7 +36,7 @@ const CalloutBanner = ({
       {...props}
     >
       <div className="flex">
-        <TwImage
+        <Image
           src={image}
           alt={alt}
           width={imageWidth}

src/components/DataProductCard.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { StaticImageData } from "next/image"
 
-import { TwImage } from "@/components/Image"
+import { Image } from "@/components/Image"
 import { Flex } from "@/components/ui/flex"
 
 import InlineLink from "./ui/Link"
@@ -42,7 +42,7 @@ const DataProductCard = ({
         }
         style={{ background }}
       >
-        <TwImage
+        <Image
           alt={alt ? alt : `${name} logo`}
           className="max-h-[257px] max-w-[311px] self-center object-cover sm:max-w-[372px]"
           src={image}
@@ -69,7 +69,7 @@ const DataProductCard = ({
               >
                 <Flex className="items-center">
                   {logo && (
-                    <TwImage
+                    <Image
                       className="me-2 min-w-6 object-cover"
                       src={logo}
                       alt=""

src/components/EventCard.tsx

@@ -10,7 +10,7 @@ import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 
 import { cn } from "@/lib/utils/cn"
 
-import { TwImage } from "./Image"
+import { Image } from "./Image"
 
 import EventFallback from "@/public/images/events/event-placeholder.png"
 
@@ -55,7 +55,7 @@ const EventCard: React.FC<EventCardProps> = ({
             className="max-h-[224px] w-full object-cover xl:h-[124px]"
           />
         ) : (
-          <TwImage src={EventFallback} alt="" />
+          <Image src={EventFallback} alt="" />
         )}
       </div>
       <CardContent className="flex-grow p-4">

src/components/FindWalletProductTable/WalletInfo.tsx

@@ -5,7 +5,7 @@ import { Wallet } from "@/lib/types"
 
 import { SupportedLanguagesTooltip } from "@/components/FindWalletProductTable/SupportedLanguagesTooltip"
 import { DevicesIcon, LanguagesIcon } from "@/components/icons/wallets"
-import { TwImage } from "@/components/Image"
+import { Image } from "@/components/Image"
 import Tooltip from "@/components/Tooltip"
 import { Tag } from "@/components/ui/tag"
 
@@ -39,7 +39,7 @@ const WalletInfo = ({ wallet, isExpanded }: WalletInfoProps) => {
       <div className="flex flex-row items-center justify-between gap-4">
         <div className="flex flex-col gap-4">
           <div className="hidden flex-row gap-4 lg:flex">
-            <TwImage
+            <Image
               src={wallet.image}
               alt=""
               style={{ objectFit: "contain", width: "56px", height: "56px" }}
@@ -70,7 +70,7 @@ const WalletInfo = ({ wallet, isExpanded }: WalletInfoProps) => {
                       className="-ml-1.5 overflow-hidden rounded-full"
                     >
                       <Tooltip content={chainData?.name || ""}>
-                        <TwImage
+                        <Image
                           src={chainData?.logo || ""}
                           alt=""
                           className="rounded-full"
@@ -89,7 +89,7 @@ const WalletInfo = ({ wallet, isExpanded }: WalletInfoProps) => {
           </div>
           <div className="flex flex-col gap-4 lg:hidden">
             <div className="flex flex-row items-center gap-4">
-              <TwImage
+              <Image
                 src={wallet.image}
                 alt=""
                 style={{ objectFit: "contain", width: "24px", height: "24px" }}
@@ -122,7 +122,7 @@ const WalletInfo = ({ wallet, isExpanded }: WalletInfoProps) => {
                     className="-ml-1.5 overflow-hidden rounded-full"
                   >
                     <Tooltip content={chainData?.name || ""}>
-                      <TwImage
+                      <Image
                         src={chainData?.logo || ""}
                         alt=""
                         className="rounded-full"

src/components/Hero/ContentHero/index.tsx

@@ -1,7 +1,7 @@
 import type { CommonHeroProps } from "@/lib/types"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
-import { TwImage } from "@/components/Image"
+import { Image } from "@/components/Image"
 import { Stack } from "@/components/ui/flex"
 
 import { CallToAction } from "../CallToAction"
@@ -15,7 +15,7 @@ const ContentHero = (props: ContentHeroProps) => {
     <div className="bg-gradient-main">
       <div className="mx-auto grid max-w-screen-2xl grid-cols-1 items-center lg:grid-cols-2">
         <div className="h-[300px] md:h-[400px] lg:order-1 lg:h-full">
-          <TwImage
+          <Image
             className="box h-full max-h-[451px] w-full flex-auto object-contain md:flex-none"
             src={heroImg}
             alt=""

src/components/Hero/HomeHero/index.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "next-i18next"
 
 import type { ClassNameProp, CommonHeroProps } from "@/lib/types"
 
-import { TwImage } from "@/components/Image"
+import { Image } from "@/components/Image"
 import Morpher from "@/components/Morpher"
 
 export type HomeHeroProps = Pick<CommonHeroProps, "heroImg"> & ClassNameProp
@@ -13,7 +13,7 @@ const HomeHero = ({ heroImg, className }: HomeHeroProps) => {
   return (
     <div className={className}>
       <div className="h-[240px] md:h-[380px] lg:h-[480px]">
-        <TwImage
+        <Image
           src={heroImg}
           alt={t("page-index:page-index-hero-image-alt")}
           // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)