Remove img alts

.eslintrc

@@ -29,6 +29,7 @@
     "@typescript-eslint/no-explicit-any": ["off"],
     "@typescript-eslint/no-floating-promises": ["error"],
     "@typescript-eslint/no-non-null-assertion": ["off"],
-    "@typescript-eslint/no-require-imports": ["warn"]
+    "@typescript-eslint/no-require-imports": ["warn"],
+    "jsx-a11y/alt-text": ["off"]
   }
 }

src/components/icons/ChainToChain.tsx

@@ -17,7 +17,7 @@ function _ChainToChain({
   return (
     <div className="flex items-center justify-center sm:space-x-1 md:space-x-2">
       <ChainIcon chainId={originChainId} size={size} />
-      <Image src={ArrowRightIcon} alt="right" width={32} height={32} />
+      <Image src={ArrowRightIcon} width={32} height={32} />
       <ChainIcon chainId={destinationChainId} size={size} />
     </div>
   );

src/components/nav/Footer.tsx

@@ -14,7 +14,7 @@ export function Footer() {
       <div className="flex justify-between items-center">
         <div className="flex items-center">
           <div className="flex scale-90 sm:scale-100">
-            <Image src={Abacus} alt="Abacus" width={52} height={52} />
+            <Image src={Abacus} width={52} height={52} />
           </div>
           <div className="flex flex-col ml-3">
             <p className="text-sm font-light">

src/components/nav/Header.tsx

@@ -12,6 +12,9 @@ import Logo from '../../images/logos/abacus-with-name.svg';
 
 export function Header() {
   const { buttonProps, itemProps, isOpen, setIsOpen } = useDropdownMenu(4);
+  const closeDropdown = () => {
+    setIsOpen(false);
+  };
   const isMainnet = config.environment === Environment.Mainnet;
 
   return (
@@ -20,13 +23,7 @@ export function Header() {
         <Link href="/">
           <a className="flex items-center">
             <div className="flex scale-90 sm:scale-100">
-              <Image
+              <Image src={Logo} quality={100} width={130} height={35} />
-                src={Logo}
-                alt="Abacus"
-                quality={100}
-                width={130}
-                height={35}
-              />
             </div>
             <div className="font-serif text-[1.9rem] text-green-600 sm:ml-2 pt-px">
               Explorer
@@ -57,7 +54,7 @@ export function Header() {
         </div>
         <div className="relative flex item-center sm:hidden mr-2">
           <button className="hover:opactiy-70 transition-all" {...buttonProps}>
-            <Image src={HamburgerIcon} alt="Nav" width={22} height={22} />
+            <Image src={HamburgerIcon} width={22} height={22} />
           </button>
         </div>
       </div>
@@ -70,14 +67,14 @@ export function Header() {
           <a
             {...itemProps[0]}
             className={styles.dropdownOption}
-            onClick={() => setIsOpen(false)}
+            onClick={closeDropdown}
           >
             <DropdownItemContent icon={HouseIcon} text="Home" />
           </a>
         </Link>
         <a
           {...itemProps[1]}
-          onClick={() => setIsOpen(false)}
+          onClick={closeDropdown}
           className={styles.dropdownOption}
           target="_blank"
           href="https://docs.useabacus.network"
@@ -87,7 +84,7 @@ export function Header() {
         </a>
         <a
           {...itemProps[2]}
-          onClick={() => setIsOpen(false)}
+          onClick={closeDropdown}
           className={styles.dropdownOption}
           target="_blank"
           href="https://www.useabacus.network"
@@ -97,7 +94,7 @@ export function Header() {
         </a>
         <a
           {...itemProps[3]}
-          onClick={() => setIsOpen(false)}
+          onClick={closeDropdown}
           className={styles.dropdownOption}
           href={isMainnet ? allConfigs.testnet2.url : allConfigs.mainnet.url}
           target="_blank"
@@ -116,13 +113,7 @@ export function Header() {
 function DropdownItemContent({ icon, text }: { icon: any; text: string }) {
   return (
     <>
-      <Image
+      <Image src={icon} width={18} height={18} className="opacity-70 mr-2.5" />
-        src={icon}
-        alt=""
-        width={18}
-        height={18}
-        className="opacity-70 mr-2.5"
-      />
       <span>{text}</span>
     </>
   );
@@ -136,13 +127,7 @@ function NetworkSelector() {
         className="flex items-center pb-px hover:opacity-60 transition-all"
         {...buttonProps}
       >
-        <Image
+        <Image src={HubIcon} width={20} height={20} className="opacity-70" />
-          src={HubIcon}
-          alt="Hub"
-          width={20}
-          height={20}
-          className="opacity-70"
-        />
       </button>
       <div
         className={`${styles.dropdownContainer} ${!isOpen && 'hidden'} right-0`}

src/features/search/MessageDetails.tsx

@@ -93,7 +93,7 @@ export function MessageDetails({ messageId }: { messageId: string }) {
         )}
         {isMessageFound && status === MessageStatus.Delivered && (
           <StatusHeader text="Status: Delivered" fetching={fetching}>
-            <Image src={CheckmarkIcon} alt="checkmark" width={24} height={24} />
+            <Image src={CheckmarkIcon} width={24} height={24} />
           </StatusHeader>
         )}
         {isMessageFound && status === MessageStatus.Failing && (
@@ -333,13 +333,7 @@ function ValueRow({
 
 function ErrorIcon() {
   return (
-    <Image
+    <Image src={ErrorCircleIcon} width={24} height={24} className="invert" />
-      src={ErrorCircleIcon}
-      alt="failure"
-      width={24}
-      height={24}
-      className="invert"
-    />
   );
 }
 

src/features/search/MessageSearch.tsx

@@ -87,7 +87,7 @@ export function MessageSearch() {
         <div className="bg-beige-500 h-10 sm:h-12 w-10 sm:w-12 flex items-center justify-center rounded">
           {fetching && <Spinner classes="scale-[30%] mr-2.5" />}
           {!fetching && !searchInput && (
-            <Image src={SearchIcon} alt="Search" width={20} height={20} />
+            <Image src={SearchIcon} width={20} height={20} />
           )}
           {!fetching && searchInput && (
             <IconButton
@@ -110,7 +110,6 @@ export function MessageSearch() {
             <div className="w-px h-8 bg-gray-100"></div>
             <Image
               src={FunnelIcon}
-              alt="Filter"
               width={22}
               height={22}
               className="opacity-50"
@@ -123,7 +122,6 @@ export function MessageSearch() {
             />
             <Image
               src={ArrowRightIcon}
-              alt="Right"
               width={30}
               height={30}
               className="opacity-50"