fix: token components lint errors (#554)

.changeset/tame-planets-search.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **fix**: fix token component biome lint errors. By @kyhyco #554

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"

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"

src/token/components/TokenChip.test.tsx

@@ -32,7 +32,7 @@ describe('TokenChip Component', () => {
     expect(spanElement).toBeInTheDocument();
   });
 
-  it('should render without an image', async () => {
+  it('should render a placeholder if no image', async () => {
     const token = {
       address: '0x123' as Address,
       chainId: 1,
@@ -45,7 +45,7 @@ describe('TokenChip Component', () => {
     const buttonElement = screen.getByRole('button');
     expect(buttonElement).toBeInTheDocument();
 
-    const imgElement = screen.queryByRole('img');
+    const imgElement = screen.getByTestId('ockTokenImage_NoImage');
     const spanElement = within(buttonElement).getByText(token.symbol);
 
     expect(imgElement).toBeInTheDocument();

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>
   );

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}

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)}
     >

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

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}

src/token/components/TokenSelectDropdown.tsx

@@ -41,7 +41,7 @@ export function TokenSelectDropdown({
     return () => {
       document.removeEventListener('click', handleBlur);
     };
-  }, []);
+  }, [handleBlur]);
 
   return (
     <div className={'relative'}>