From 9f2e5bbe94b54d258f19d539ff36b7068b52ce58 Mon Sep 17 00:00:00 2001
From: Ky Lee <hello@kyhy.co>
Date: Thu, 13 Jun 2024 17:11:46 -0700
Subject: [PATCH] fix: token components lint errors

---
 src/token/components/SearchIcon.tsx          |  2 ++
 src/token/components/TextInput.tsx           | 14 ++++++++++----
 src/token/components/TokenChip.tsx           |  6 ++++--
 src/token/components/TokenImage.tsx          |  3 ++-
 src/token/components/TokenRow.tsx            |  1 +
 src/token/components/TokenSearch.tsx         | 19 +++++++++++--------
 src/token/components/TokenSelectButton.tsx   |  5 +++++
 src/token/components/TokenSelectDropdown.tsx |  2 +-
 8 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/token/components/SearchIcon.tsx b/src/token/components/SearchIcon.tsx
index 08cd0b64c8..9c0d23eb44 100644
--- a/src/token/components/SearchIcon.tsx
+++ b/src/token/components/SearchIcon.tsx
@@ -1,6 +1,8 @@
 export function SearchIcon() {
   return (
     <svg
+      role="img"
+      aria-label="ock-search-icon"
       width="16"
       height="16"
       viewBox="0 0 16 16"
diff --git a/src/token/components/TextInput.tsx b/src/token/components/TextInput.tsx
index bb53d26c83..4252630301 100644
--- a/src/token/components/TextInput.tsx
+++ b/src/token/components/TextInput.tsx
@@ -8,13 +8,16 @@ type TextInputReact = {
 };
 
 export function TextInput({ placeholder, value, onChange }: TextInputReact) {
-  const handleChange = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
-    onChange(evt.target.value);
-  }, []);
+  const handleChange = useCallback(
+    (evt: ChangeEvent<HTMLInputElement>) => {
+      onChange(evt.target.value);
+    },
+    [onChange],
+  );
 
   const handleClear = useCallback(() => {
     onChange('');
-  }, []);
+  }, [onChange]);
 
   return (
     <div className="relative flex items-center">
@@ -31,11 +34,14 @@ export function TextInput({ placeholder, value, onChange }: TextInputReact) {
       />
       {value && (
         <button
+          type="button"
           data-testid="ockTextInput_Clear"
           className="-translate-y-1/2 absolute top-1/2 right-4"
           onClick={handleClear}
         >
           <svg
+            role="img"
+            aria-label="ock-close-icon"
             width="16"
             height="16"
             viewBox="0 0 16 16"
diff --git a/src/token/components/TokenChip.tsx b/src/token/components/TokenChip.tsx
index 75253d12bb..b3ccfbd4fb 100644
--- a/src/token/components/TokenChip.tsx
+++ b/src/token/components/TokenChip.tsx
@@ -1,5 +1,6 @@
 import { TextBody } from '../../internal/text';
 import type { TokenChipReact } from '../types';
+import { TokenImage } from './TokenImage';
 
 /**
  * Small button that display a given token symbol and image.
@@ -10,11 +11,12 @@ import type { TokenChipReact } from '../types';
 export function TokenChip({ token, onClick }: TokenChipReact) {
   return (
     <button
+      type="button"
       data-testid="ockTokenChip_Button"
-      className="flex w-fit items-center rounded-2xl bg-[#eef0f3] py-1 pr-3 pl-1 hover:active:bg-[#bfc1c3] hover:bg-[#cacbce] shrink-0 shadow-[0px_8px_12px_0px_#5B616E1F] "
+      className='flex w-fit shrink-0 items-center gap-2 rounded-2xl bg-[#eef0f3] py-1 pr-3 pl-1 shadow-[0px_8px_12px_0px_#5B616E1F] hover:active:bg-[#bfc1c3] hover:bg-[#cacbce]'
       onClick={() => onClick?.(token)}
     >
-      <img className="mr-2 h-6 w-6" src={token.image || ''} />
+      <TokenImage token={token} size={24} />
       <TextBody>{token.symbol}</TextBody>
     </button>
   );
diff --git a/src/token/components/TokenImage.tsx b/src/token/components/TokenImage.tsx
index 8291036a73..21f203f1a2 100644
--- a/src/token/components/TokenImage.tsx
+++ b/src/token/components/TokenImage.tsx
@@ -18,7 +18,7 @@ export function TokenImage({ className, size = 24, token }: TokenImageReact) {
         height: `${size}px`,
       },
     };
-  }, [size]);
+  }, [size, name]);
 
   if (!image) {
     return (
@@ -35,6 +35,7 @@ export function TokenImage({ className, size = 24, token }: TokenImageReact) {
   return (
     <img
       className={className || 'ock-tokenimage'}
+      alt="token-image"
       data-testid="ockTokenImage_Image"
       style={styles.image}
       src={image}
diff --git a/src/token/components/TokenRow.tsx b/src/token/components/TokenRow.tsx
index ae5e252030..06308d20eb 100644
--- a/src/token/components/TokenRow.tsx
+++ b/src/token/components/TokenRow.tsx
@@ -14,6 +14,7 @@ export const TokenRow = memo(function TokenRow({
   return (
     <button
       data-testid="ockTokenRow_Container"
+      type="button"
       className="flex h-16 w-full cursor-pointer items-center justify-between bg-white px-2 py-1 active:bg-[#bfc1c3] hover:bg-[#cacbce]"
       onClick={() => onClick?.(token)}
     >
diff --git a/src/token/components/TokenSearch.tsx b/src/token/components/TokenSearch.tsx
index 110b84f93f..e735fcae0b 100644
--- a/src/token/components/TokenSearch.tsx
+++ b/src/token/components/TokenSearch.tsx
@@ -10,15 +10,18 @@ export function TokenSearch({ onChange, delayMs = 200 }: TokenSearchReact) {
     onChange(value);
   }, delayMs);
 
-  const handleChange = useCallback((value: string) => {
-    setValue(value);
+  const handleChange = useCallback(
+    (value: string) => {
+      setValue(value);
 
-    if (delayMs > 0) {
-      handleDebounce(value);
-    } else {
-      onChange(value);
-    }
-  }, []);
+      if (delayMs > 0) {
+        handleDebounce(value);
+      } else {
+        onChange(value);
+      }
+    },
+    [onChange, handleDebounce, delayMs],
+  );
 
   return (
     <TextInput
diff --git a/src/token/components/TokenSelectButton.tsx b/src/token/components/TokenSelectButton.tsx
index 1a089d9247..a7b9ca83a8 100644
--- a/src/token/components/TokenSelectButton.tsx
+++ b/src/token/components/TokenSelectButton.tsx
@@ -7,6 +7,8 @@ function CaretUp() {
   return (
     <svg
       data-testid="ockTokenSelectButton_CaretUp"
+      role="img"
+      aria-label="ock-caretup-icon"
       width="16"
       height="16"
       viewBox="0 0 16 16"
@@ -25,6 +27,8 @@ function CaretDown() {
   return (
     <svg
       data-testid="ockTokenSelectButton_CaretDown"
+      role="img"
+      aria-label="ock-caretdown-icon"
       width="16"
       height="17"
       viewBox="0 0 16 17"
@@ -45,6 +49,7 @@ export const TokenSelectButton = forwardRef(function TokenSelectButton(
 ) {
   return (
     <button
+      type="button"
       data-testid="ockTokenSelectButton_Button"
       className="flex w-fit items-center gap-2 rounded-2xl bg-[#eef0f3] px-3 py-1 outline-none active:bg-[#bfc1c3] hover:bg-[#cacbce]"
       onClick={onClick}
diff --git a/src/token/components/TokenSelectDropdown.tsx b/src/token/components/TokenSelectDropdown.tsx
index d4bb31fc7f..4bd11426aa 100644
--- a/src/token/components/TokenSelectDropdown.tsx
+++ b/src/token/components/TokenSelectDropdown.tsx
@@ -41,7 +41,7 @@ export function TokenSelectDropdown({
     return () => {
       document.removeEventListener('click', handleBlur);
     };
-  }, []);
+  }, [handleBlur]);
 
   return (
     <div className={'relative'}>