chore: Lint fixes for widgets lib (#4877)

### Description

The linter wasn't previously running on the .tsx files. This fixes the
coverage and the issues

### Backward compatibility

Yes

### Testing

Tested in Warp UI

.changeset/fluffy-wombats-teach.md

@@ -0,0 +1,5 @@
+---
+'@hyperlane-xyz/widgets': patch
+---
+
+Prevent propagation of form submissions from ChainSearchMenu

typescript/widgets/package.json

@@ -86,7 +86,7 @@
     "build:ts": "tsc",
     "build:css": "tailwindcss -c ./tailwind.config.cjs -i ./src/styles.css -o ./dist/styles.css --minify",
     "clean": "rm -rf ./dist ./cache ./storybook-static",
-    "lint": "eslint ./src --ext .ts",
+    "lint": "eslint ./src --ext '.ts,.tsx'",
     "prettier": "prettier --write ./src",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"

typescript/widgets/src/chains/ChainAddMenu.tsx

@@ -21,6 +21,7 @@ import { CopyButton } from '../components/CopyButton.js';
 import { LinkButton } from '../components/LinkButton.js';
 import { ChevronIcon } from '../icons/Chevron.js';
 import { PlusIcon } from '../icons/Plus.js';
+import { widgetLogger } from '../logger.js';
 
 export interface ChainAddMenuProps {
   chainMetadata: ChainMap<ChainMetadata>;
@@ -143,7 +144,7 @@ function tryParseMetadataInput(
   const result = ChainMetadataSchema.safeParse(parsed.data);
 
   if (!result.success) {
-    console.error('Error validating chain config', result.error);
+    widgetLogger.error('Error validating chain config', result.error);
     const firstIssue = result.error.issues[0];
     return failure(`${firstIssue.path} => ${firstIssue.message}`);
   }

typescript/widgets/src/chains/ChainLogo.tsx

@@ -4,6 +4,7 @@ import type { IRegistry } from '@hyperlane-xyz/registry';
 
 import { Circle } from '../icons/Circle.js';
 import { QuestionMarkIcon } from '../icons/QuestionMark.js';
+import { widgetLogger } from '../logger.js';
 
 type SvgIcon = (props: {
   width: number;
@@ -41,8 +42,8 @@ export function ChainLogo({
     registry
       .getChainLogoUri(chainName)
       .then((uri) => uri && setSvgLogos({ ...svgLogos, [chainName]: uri }))
-      .catch((err) => console.error(err));
+      .catch((err) => widgetLogger.error('Error fetching log uri', err));
-  }, [chainName, registry, svgLogos, Icon]);
+  }, [chainName, logoUri, registry, svgLogos, Icon]);
 
   if (!uri && !Icon) {
     return (

typescript/widgets/src/chains/ChainSearchMenu.tsx

@@ -89,7 +89,7 @@ export function ChainSearchMenu({
       overrideChainMetadata,
     );
     return { mergedMetadata, listData: Object.values(mergedMetadata) };
-  }, [chainMetadata]);
+  }, [chainMetadata, overrideChainMetadata]);
 
   const { ListComponent, searchFn, sortOptions, defaultSortState } =
     useCustomizedListItems(customListItemField, defaultSortField);
@@ -297,7 +297,7 @@ function useCustomizedListItems(
     ({ data }: { data: ChainMetadata<{ disabled?: boolean }> }) => (
       <ChainListItem data={data} customField={customListItemField} />
     ),
-    [ChainListItem, customListItemField],
+    [customListItemField],
   );
 
   // Bind the custom field to the search function

typescript/widgets/src/components/ErrorBoundary.tsx

@@ -3,6 +3,7 @@ import React, { Component, PropsWithChildren, ReactNode } from 'react';
 import { errorToString } from '@hyperlane-xyz/utils';
 
 import { ErrorIcon } from '../icons/Error.js';
+import { widgetLogger } from '../logger.js';
 
 type Props = PropsWithChildren<{
   supportLink?: ReactNode;
@@ -24,7 +25,7 @@ export class ErrorBoundary extends Component<Props, State> {
       error,
       errorInfo,
     });
-    console.error('Error caught by error boundary', error, errorInfo);
+    widgetLogger.error('Error caught by error boundary', error, errorInfo);
   }
 
   render() {

typescript/widgets/src/components/SearchMenu.tsx

@@ -102,12 +102,13 @@ export function SearchMenu<
   const handleSubmit = useCallback(
     (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      e.stopPropagation();
       if (results.length === 1) {
         const item = results[0];
         isEditMode ? onClickEditItem(item) : onClickItem(item);
       }
     },
-    [results, isEditMode],
+    [results, isEditMode, onClickEditItem, onClickItem],
   );
 
   useEffect(() => {
@@ -254,6 +255,7 @@ function SortDropdown<SortBy extends string>({
         buttonClassname="htw-flex htw-items-stretch hover:htw-bg-gray-100 active:htw-scale-95"
         menuClassname="htw-py-1.5 htw-px-2 htw-flex htw-flex-col htw-gap-2 htw-text-sm htw-border htw-border-gray-100"
         menuItems={options.map((o) => (
+          // eslint-disable-next-line react/jsx-key
           <div
             className="htw-rounded htw-p-1.5 hover:htw-bg-gray-200"
             onClick={() => onSetSortBy(o)}
@@ -298,7 +300,7 @@ function FilterDropdown<FilterState>({
       (k) => !deepEquals(value[k], defaultValue[k]),
     );
     return modifiedKeys.map((k) => value[k]);
-  }, [value]);
+  }, [value, defaultValue]);
   const hasFilters = filterValues.length > 0;
 
   const onClear = () => {

typescript/widgets/src/icons/Web.tsx

@@ -57,9 +57,9 @@ function _Web({ color = ColorPalette.Black, ...rest }: DefaultIconProps) {
       />
       <path
         fill={color}
-        fill-rule="evenodd"
+        fillRule="evenodd"
         d="M28.84 14.57a14 14 0 1 0-14 14 14 14 0 0 0 14-14Zm-3 0a11 11 0 1 0-22 0 11 11 0 0 0 22 0Z"
-        clip-rule="evenodd"
+        clipRule="evenodd"
       />
     </svg>
   );