Remove next image warning

components/chain-list/chain-image.tsx

@@ -6,5 +6,12 @@ import KeplrIcon from "../../public/images/svg/keplr-icon.svg";
 export const ChainImage = (props: ImageProps) => {
   const [src, setSrc] = useState(props.src);
 
-  return <Image {...props} src={src} onError={() => setSrc(KeplrIcon)} />;
+  return (
+    <Image
+      {...props}
+      src={src}
+      sizes="3rem"
+      onError={() => setSrc(KeplrIcon)}
+    />
+  );
 };

components/connect-wallet-modal/wallet-item.tsx

@@ -52,7 +52,12 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
   return (
     <WalletContainer isReady={wallet.isReady} onClick={onClickWalletItem}>
       <WalletIcon>
-        <Image src={wallet.image} fill={true} alt="wallet Icon" />
+        <Image
+          src={wallet.image}
+          fill={true}
+          sizes="3.75rem"
+          alt="wallet Icon"
+        />
       </WalletIcon>
       <WalletContentContainer>
         <WalletName>{wallet.name}</WalletName>

components/logo/index.tsx

@@ -6,15 +6,35 @@ import Link from "next/link";
 import LogoIcon from "../../public/images/svg/logo.svg";
 
 // Styles
-import { LogoContainer } from "./styled";
+import styled from "styled-components";
 import { FunctionComponent } from "react";
 
 export const Logo: FunctionComponent = () => {
   return (
     <Link href="/">
       <LogoContainer>
-        <Image src={LogoIcon} fill={true} alt="Home Logo" />
+        <Image
+          src={LogoIcon}
+          fill={true}
+          sizes="10rem"
+          alt="Home Logo"
+          priority
+        />
       </LogoContainer>
     </Link>
   );
 };
+
+export const LogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+
+  width: 10rem;
+  height: 5rem;
+
+  margin-top: 80px;
+  margin-left: 80px;
+`;

components/logo/styled.ts

@@ -1,16 +0,0 @@
-// Styles
-import styled from "styled-components";
-
-export const LogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-
-  width: 160px;
-  height: 80px;
-
-  margin-top: 80px;
-  margin-left: 80px;
-`;

components/search-input/index.tsx

@@ -1,10 +1,4 @@
-import {
-  Dispatch,
-  FunctionComponent,
-  SetStateAction,
-  useRef,
-  useState,
-} from "react";
+import { Dispatch, FunctionComponent, SetStateAction } from "react";
 
 import Image from "next/image";
 
@@ -24,7 +18,7 @@ export const SearchInput: FunctionComponent<Props> = (props) => {
   return (
     <SearchContainer>
       <SearchIconContainer>
-        <Image src={SearchIcon} fill={true} alt="search icon" />
+        <Image src={SearchIcon} fill={true} sizes="1.3rem" alt="search icon" />
       </SearchIconContainer>
 
       <SearchText

components/twitter-profile/index.tsx

@@ -17,6 +17,7 @@ export const TwitterProfile: FunctionComponent<Props> = (props) => {
         <Image
           src={twitterProfileInformation?.profile_image_url ?? ""}
           fill={true}
+          sizes="5rem"
           alt="twitter profile image"
         />
       </ProfileImageContainer>

pages/index.tsx

@@ -36,7 +36,13 @@ export default function Home() {
         <MainTitleContainer>
           <MainTitleImageBackground>
             <MainTitleImageContainer>
-              <Image src={MainTitle} fill={true} alt="Main Title" />
+              <Image
+                src={MainTitle}
+                fill={true}
+                sizes="60rem"
+                alt="Main Title"
+                priority
+              />
             </MainTitleImageContainer>
           </MainTitleImageBackground>
 
@@ -48,14 +54,24 @@ export default function Home() {
           <SubContainer>
             <CheckContainer>
               <CheckIconContainer>
-                <Image src={CheckIcon} fill={true} alt="Check Icon" />
+                <Image
+                  src={CheckIcon}
+                  fill={true}
+                  sizes="1.6rem"
+                  alt="Check Icon"
+                />
               </CheckIconContainer>
               You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText> user.
               if not, you can install here
             </CheckContainer>
             <CheckContainer>
               <CheckIconContainer>
-                <Image src={CheckIcon} fill={true} alt="Check Icon" />
+                <Image
+                  src={CheckIcon}
+                  fill={true}
+                  sizes="1.6rem"
+                  alt="Check Icon"
+                />
               </CheckIconContainer>
               <CheckBoldText>Osmo&nbsp;</CheckBoldText> is required for this
               transaction
@@ -64,7 +80,7 @@ export default function Home() {
         </MainTitleContainer>
 
         <MainLogoContainer>
-          <Image src={MainLogo} layout="fixed" fill={true} alt="Main Logo" />
+          <Image src={MainLogo} fill={true} sizes="25rem" alt="Main Logo" />
         </MainLogoContainer>
       </MainContainer>