Remove chain image warning

components/chain-list/all-chains-item.tsx

@@ -4,7 +4,6 @@ import { Dispatch, FunctionComponent, SetStateAction } from "react";
 import { ChainImage } from "./chain-image";
 import { Flex1 } from "../../styles/flex-1";
 import {
-  ChainImageContainer,
   ChainInfoContainer,
   ChainItemContainer,
   ChainName,
@@ -35,13 +34,11 @@ export const AllChainsItem: FunctionComponent<Props> = (props) => {
         checked={allChecked}
         onClick={checkHandler}
       >
-        <ChainImageContainer width="3rem" height="3rem">
-          <ChainImage
-            src={chainItem.chainImageUrl}
-            fill={true}
-            alt={`${chainItem.prefix} chain image`}
-          />
-        </ChainImageContainer>
+        <ChainImage
+          src={chainItem.chainImageUrl}
+          fill={true}
+          alt={`${chainItem.prefix} chain image`}
+        />
         <ChainInfoContainer>
           <ChainName>{`.${chainItem.prefix}`}</ChainName>
           <WalletAddress>{chainItem.address}</WalletAddress>

components/chain-list/chain-image.tsx

@@ -21,6 +21,10 @@ export const ChainImage = ({ src, ...props }: ImageProps) => {
 };
 
 const ImageWrapper = styled.div`
+  position: relative;
+  width: 3rem;
+  height: 3rem;
+
   img {
     border-radius: 50%;
   }

components/chain-list/chain-item.tsx

@@ -1,4 +1,4 @@
-import { ChainItemType, WidthHeightProps } from "../../types";
+import { ChainItemType } from "../../types";
 import { FunctionComponent, useEffect, useState } from "react";
 
 import color from "../../styles/color";
@@ -39,13 +39,11 @@ export const ChainItem: FunctionComponent<Props> = (props) => {
       checked={checked}
       onClick={checkHandler}
     >
-      <ChainImageContainer width="3rem" height="3rem">
-        <ChainImage
-          src={chainItem.chainImageUrl}
-          fill={true}
-          alt={`${chainItem.prefix} chain image`}
-        />
-      </ChainImageContainer>
+      <ChainImage
+        src={chainItem.chainImageUrl}
+        fill={true}
+        alt={`${chainItem.prefix} chain image`}
+      />
       <ChainInfoContainer>
         <ChainName>{`.${chainItem.prefix}`}</ChainName>
         <WalletAddress>{chainItem.address}</WalletAddress>
@@ -90,13 +88,6 @@ export const ChainItemContainer = styled.div<{
   }
 `;
 
-export const ChainImageContainer = styled.div<WidthHeightProps>`
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-
-  position: relative;
-`;
-
 export const ChainInfoContainer = styled.div`
   display: flex;
   flex-direction: column;

components/skeleton/skeleton-chain-list.tsx

@@ -21,7 +21,6 @@ import {
 } from "../twitter-profile";
 import {
   ChainContainer,
-  ChainImageContainer,
   ChainInfoContainer,
   ChainItemContainer,
 } from "../chain-list";
@@ -60,9 +59,9 @@ export const SkeletonChainList: FunctionComponent = () => (
         .map((_, index) => (
           <div key={index}>
             <ChainItemContainer isLoading={true} isSkeleton={true}>
-              <ChainImageContainer width="3rem" height="3rem">
+              <SkeletonImageContainer>
                 <SkeletonCircle width="3rem" height="3rem" />
-              </ChainImageContainer>
+              </SkeletonImageContainer>
               <ChainInfoContainer>
                 <SkeletonText width="4rem" height="1rem" />
                 <SkeletonText width="12rem" height="1rem" />
@@ -93,6 +92,13 @@ const SkeletonTitle = styled.div`
   background-color: ${color.grey["800"]};
 `;
 
+const SkeletonImageContainer = styled.div`
+  width: 3rem;
+  height: 3rem;
+
+  position: relative;
+`;
+
 const SkeletonButtonContainer = styled.div`
   margin-top: 1.5rem;
 `;