Chore/fix lint errors

src/components/swap/parts/FirstTimeWarning.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
 
+import { makeAccessibleKeysHandler } from "~/utils/react";
+
 export const FirstTimeWarning = () => {
   const [hasMounted, setHasMounted] = useState(false);
   const [showFirstTimeWarning, setShowFirstTimeWarning] = useLocalStorage(
@@ -20,12 +22,12 @@ export const FirstTimeWarning = () => {
   return (
     <div className="fixed z-50 w-full max-w-screen-md bottom-10 left-10">
       <div className="relative block w-7/12 p-4 shadow-lg alert bg-base-100/50 backdrop-blur-lg">
-        <label
+        <button
           className="absolute btn btn-sm btn-circle right-2 top-2"
           onClick={() => setShowFirstTimeWarning(false)}
         >
           ✕
-        </label>
+        </button>
         <div>
           <div>
             <h3 className="mb-2 text-lg font-bold">New to Satellite?</h3>
@@ -41,7 +43,9 @@ export const FirstTimeWarning = () => {
             href="https://testnet.satellite.money"
             rel="noopener noreferrer"
             target="_blank"
-            onClick={() => setShowFirstTimeWarning(false)}
+            {...makeAccessibleKeysHandler(
+              setShowFirstTimeWarning.bind(null, false)
+            )}
           >
             Go to testnet
           </a>

src/components/swap/parts/GenerateDepositAddressButton.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import BigNumber from "bignumber.js";
+import { pick } from "rambda";
 import toast from "react-hot-toast";
 
 import { ENVIRONMENT, RESERVED_ADDRESSES } from "~/config/constants";
@@ -31,7 +32,16 @@ export const GenerateDepositAddressButton: React.FC<Props> = ({
     asset,
     setSwapStatus,
     tokensToTransfer,
-  } = useSwapStore((state) => state);
+  } = useSwapStore(
+    pick([
+      "srcChain",
+      "destChain",
+      "destAddress",
+      "asset",
+      "setSwapStatus",
+      "tokensToTransfer",
+    ])
+  );
 
   const reservedAddresses = useSwapStore(getReservedAddresses);
   const selectedAssetSymbol = useSwapStore(getSelectedAssetSymbol);
@@ -49,7 +59,7 @@ export const GenerateDepositAddressButton: React.FC<Props> = ({
   }
 
   async function handleOnGenerateDepositAddress() {
-    if ((srcChain as any).id === "terra") {
+    if (srcChain.id === "terra") {
       return toast.error(
         "Only the transfers to Terra Classic are allowed for uluna and uusd"
       );
@@ -132,13 +142,13 @@ export const GenerateDepositAddressButton: React.FC<Props> = ({
   }
 
   return (
-    <div
+    <button
       className="w-full btn btn-primary"
       onClick={handleOnGenerateDepositAddress}
     >
       <div className="flex items-center gap-3">
         <span>Generate Deposit Address</span>
       </div>
-    </div>
+    </button>
   );
 };

src/components/swap/parts/StopButton.tsx

@@ -18,12 +18,12 @@ export const StopButton = () => {
   }
 
   return (
-    <div
-      onClick={handleOnClick}
+    <button
       className="relative tooltip px-2 py-1 rounded-lg border border-[#00a7ff] bg-[#003556] text-[#00a7ff] text-xs cursor-pointer font-semibold"
       data-tip="Refresh and make another transfer"
+      onClick={handleOnClick}
     >
       Start Over
-    </div>
+    </button>
   );
 };

src/components/swap/parts/TopFlows.tsx

@@ -8,6 +8,7 @@ import { useSwapStore } from "~/store";
 
 import { AssetConfigExtended } from "~/types";
 import { SwapStatus } from "~/utils/enums";
+import { makeAccessibleKeysHandler } from "~/utils/react";
 
 export const Arrow = () => (
   <svg
@@ -47,16 +48,12 @@ export const TopFlows = () => {
     swapStatus,
   } = useSwapStore();
   const [menuOpened, setMenuOpened] = useState(false);
-  const menu = useRef(null);
+  const menu = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const el = document;
     if (!menuOpened) {
-      (el?.activeElement as any)?.blur();
-    } else if (
-      menuOpened &&
-      !(menu?.current as any)?.contains(el.activeElement)
-    ) {
+      (document?.activeElement as HTMLElement)?.blur();
+    } else if (menuOpened && !menu?.current?.contains(document.activeElement)) {
       setMenuOpened(false);
     }
   }, [menuOpened]);
@@ -135,22 +132,21 @@ export const TopFlows = () => {
 
   return (
     <div ref={menu} className="dropdown dropdown-end">
-      <label
-        tabIndex={0}
+      <button
         onBlur={(e) => setMenuOpened(false)}
         className="px-3 py-1 rounded-lg border border-[#00a7ff] bg-[#003556] text-[#00a7ff] text-xs cursor-pointer font-semibold"
         onClick={(e) => setMenuOpened(menuOpened)}
       >
         Top Flows
-      </label>
+      </button>
       <ul
         tabIndex={0}
         className="z-50 p-2 shadow-lg gap-y-2 dropdown-content menu bg-neutral rounded-box w-52 top-8"
         onFocus={(e) => setMenuOpened(true)}
       >
         <li
-          onClick={handleOnFlow0}
           className="border rounded-lg border-[#00b0f4]"
+          {...makeAccessibleKeysHandler(handleOnFlow0)}
         >
           <div className="flex">
             <Image
@@ -179,8 +175,8 @@ export const TopFlows = () => {
           </div>
         </li>
         <li
-          onClick={handleOnFlow1}
           className="border rounded-lg border-[#00b0f4]"
+          {...makeAccessibleKeysHandler(handleOnFlow1)}
         >
           <div className="flex">
             <Image
@@ -209,8 +205,8 @@ export const TopFlows = () => {
           </div>
         </li>
         <li
-          onClick={handleOnFlow2}
           className="border rounded-lg border-[#00b0f4]"
+          {...makeAccessibleKeysHandler(handleOnFlow2)}
         >
           <div className="flex">
             <Image
@@ -240,8 +236,8 @@ export const TopFlows = () => {
         </li>
 
         <li
-          onClick={handleOnFlow3}
           className="border rounded-lg border-[#00b0f4]"
+          {...makeAccessibleKeysHandler(handleOnFlow3)}
         >
           <div className="flex">
             <Image

src/components/swap/parts/TransferStats.tsx

@@ -96,8 +96,12 @@ export const TransferStats = () => {
   }
 
   function renderDepositAddress() {
-    if (swapStatus === SwapStatus.IDLE) return null;
-    if (!depositAddress) return null;
+    if (swapStatus === SwapStatus.IDLE) {
+      return null;
+    }
+    if (!depositAddress) {
+      return null;
+    }
     const showDepositAddress = showDepositAddressCondition({ srcChain, asset });
     return (
       <li className="flex justify-between">
@@ -110,19 +114,19 @@ export const TransferStats = () => {
         >
           Axelar Deposit Address:
         </span>
-        <div className="flex font-bold gap-x-2">
-          <AddressShortener value={depositAddress} />
-          <div
-            className="cursor-pointer"
-            onClick={() =>
-              showDepositAddress && copyToClipboard(depositAddress)
-            }
-          >
-            {showDepositAddress && (
-              <Image src={"/assets/ui/copy.svg"} height={16} width={16} />
-            )}
+        {showDepositAddress && (
+          <div className="flex font-bold gap-x-2">
+            <AddressShortener value={depositAddress} />
+            <button onClick={copyToClipboard.bind(null, depositAddress)}>
+              <Image
+                src={"/assets/ui/copy.svg"}
+                height={16}
+                width={16}
+                alt="copy icon"
+              />
+            </button>
           </div>
-        </div>
+        )}
       </li>
     );
   }
@@ -159,17 +163,17 @@ export const TransferStats = () => {
 
         <span className="flex font-bold gap-x-2">
           <AddressShortener value={intermediaryDepositAddress} />
-          <div
+          <button
             className="cursor-pointer"
-            onClick={() => copyToClipboard(intermediaryDepositAddress)}
+            onClick={copyToClipboard.bind(null, intermediaryDepositAddress)}
           >
             <Image
               src={"/assets/ui/copy.svg"}
               height={16}
               width={16}
               alt="copy"
             />
-          </div>
+          </button>
         </span>
       </li>
     );
@@ -181,21 +185,18 @@ export const TransferStats = () => {
     }
     return (
       <li className="flex justify-between">
-        <span>Destination Address:</span>
-        <span className="flex font-bold gap-x-2">
+        <label>Destination Address:</label>
+        <div className="flex font-bold gap-x-2">
           <AddressShortener value={destAddress} />
-          <div
-            className="cursor-pointer"
-            onClick={() => copyToClipboard(destAddress)}
-          >
+          <button onClick={copyToClipboard.bind(null, destAddress)}>
             <Image
               src={"/assets/ui/copy.svg"}
               height={16}
               width={16}
               alt="copy"
             />
-          </div>
-        </span>
+          </button>
+        </div>
       </li>
     );
   }
@@ -240,7 +241,7 @@ export const TransferStats = () => {
   }
 
   function renderPoolInfo() {
-    if ((asset as any)?.id === "uusdc") {
+    if (asset?.id === "uusdc") {
       const chainName = destChain?.chainName?.toLowerCase();
       const pool = USDC_POOLS[chainName];
       const pair = pool?.pairs[0];

src/components/swap/states/WaitDepositState.tsx

@@ -79,21 +79,21 @@ export const WaitDepositState = () => {
                   </label>
                   <div className="flex justify-center font-bold text-info gap-x-2">
                     <AddressShortener value={depositAddress} />
-                    <div
-                      className="cursor-pointer"
-                      onClick={() =>
-                        showDepositAddress && copyToClipboard(depositAddress)
-                      }
-                    >
-                      {" "}
-                      {showDepositAddress && (
+                    {showDepositAddress && (
+                      <button
+                        className="cursor-pointer"
+                        onClick={() =>
+                          showDepositAddress && copyToClipboard(depositAddress)
+                        }
+                      >
                         <Image
                           src={"/assets/ui/copy.svg"}
                           height={16}
                           width={16}
+                          alt="copy icon"
                         />
-                      )}
-                    </div>
+                      </button>
+                    )}
                   </div>
                 </div>
               </div>

src/features/dest-asset-selector/components/GMPEToggle.tsx

@@ -4,18 +4,18 @@ export const GMPEToggle = () => {
   const { isSquidTrade, setEnableGMPExpress, enableGMPExpress } =
     useSquidStateStore();
 
-  if (!isSquidTrade) return null;
+  if (!isSquidTrade) {
+    return null;
+  }
   return (
-    <div
-      onClick={() => setEnableGMPExpress(!enableGMPExpress)}
-      className="flex items-center justify-between text-left gap-x-2 btn btn-info btn-xs"
-    >
-      <p className="text-xs text-accent">GMP Express</p>
+    <label className="flex items-center justify-between text-left gap-x-2 btn btn-info btn-xs">
+      <span className="text-xs text-accent">GMP Express</span>
       <input
         type="checkbox"
         checked={enableGMPExpress}
         className="checkbox checkbox-xs"
+        onChange={setEnableGMPExpress.bind(null, !enableGMPExpress)}
       />
-    </div>
+    </label>
   );
 };

src/features/dest-chain-selector/DestChainSelector.tsx

@@ -3,14 +3,14 @@ import Image from "next/legacy/image";
 import { ChainInfo } from "@axelar-network/axelarjs-sdk";
 import { useOnClickOutside } from "usehooks-ts";
 
+import { defaultChainImg } from "~/config/constants";
 import { InputWrapper } from "~/components/common";
 
 import { ChainsDropdown } from "~/features/dest-chain-selector/ChainsDropdown";
 import { useChainFilter } from "~/features/dest-chain-selector/hooks";
 
 import { useSwapStore } from "~/store";
 
-import { defaultChainImg } from "~/config/constants";
 import { convertChainName } from "~/utils/transformers";
 
 // TODO: abstract the state into a zustand destChainStore
@@ -49,11 +49,7 @@ export const DestChainSelector = () => {
       <div ref={ref}>
         <label className="block text-xs">To</label>
         <div className="static w-full mt-1 dropdown dropdown-open">
-          <div
-            className="w-full"
-            tabIndex={0}
-            onClick={() => setDropdownOpen(true)}
-          >
+          <button className="w-full" onClick={() => setDropdownOpen(true)}>
             <div className="flex items-center justify-between space-x-2 text-lg font-medium cursor-pointer">
               <div className="flex items-center gap-x-2">
                 <Image
@@ -83,7 +79,7 @@ export const DestChainSelector = () => {
                 />
               </div>
             </div>
-          </div>
+          </button>
           <ChainsDropdown
             dropdownOpen={dropdownOpen}
             filteredChains={filteredChains}